.ctsm-app, .ctsm-notice {
	/* Regular WordPress inherits its theme. Hosts may publish these shared Cointacted tokens explicitly. */
	--ctsm-accent: var(--cointacted-ui-accent, var(--wp--preset--color--primary, var(--wp--preset--color--accent, LinkText)));
	--ctsm-on-accent: var(--cointacted-ui-on-accent, Canvas);
	--ctsm-surface: var(--cointacted-ui-surface, transparent);
	--ctsm-surface-muted: var(--cointacted-ui-surface-muted, color-mix(in srgb, currentColor 6%, transparent));
	--ctsm-ink: var(--cointacted-ui-text, currentColor);
	--ctsm-muted: var(--cointacted-ui-text-muted, color-mix(in srgb, currentColor 68%, transparent));
	--ctsm-line: var(--cointacted-ui-border, color-mix(in srgb, currentColor 16%, transparent));
	--ctsm-danger: var(--cointacted-ui-danger, #b42318);
	--ctsm-success: var(--cointacted-ui-success, #087a55);
	color-scheme: inherit;
	font-family: var(--cointacted-ui-font-family, inherit);
}

.ctsm-app {
	background: var(--ctsm-surface);
	border: 1px solid var(--ctsm-line);
	border-radius: var(--cointacted-ui-radius, var(--winkdom-radius-md, var(--fcom-border-radius, 22px)));
	box-shadow: var(--cointacted-ui-shadow, 0 18px 52px color-mix(in srgb, var(--ctsm-ink) 9%, transparent));
	box-sizing: border-box;
	color: var(--ctsm-ink);
	margin: 0 auto;
	max-width: 880px;
	overflow: hidden;
	width: 100%;
}

.ctsm-app *, .ctsm-app *::before, .ctsm-app *::after { box-sizing: border-box; }
.ctsm-app[data-ctsm-host="wordpress"], .ctsm-notice[data-ctsm-host="wordpress"] { color: inherit; }
.ctsm-app[data-ctsm-host="winkdom"], .ctsm-notice[data-ctsm-host="winkdom"] { --ctsm-accent: var(--cointacted-ui-accent, var(--winkdom-color-brand, var(--winkdom-ui-brand, var(--winkdom-community-primary-background, #7657ff)))); --ctsm-on-accent: var(--cointacted-ui-on-accent, var(--winkdom-color-on-brand, var(--winkdom-ui-on-brand, var(--winkdom-community-primary-text, #fff)))); --ctsm-surface: var(--cointacted-ui-surface, var(--winkdom-color-surface, var(--winkdom-ui-surface, var(--winkdom-community-surface, #fff)))); --ctsm-surface-muted: var(--cointacted-ui-surface-muted, var(--winkdom-color-surface-muted, var(--winkdom-color-canvas, var(--winkdom-ui-bg, var(--winkdom-community-surface-muted, #f7f5ff))))); --ctsm-ink: var(--cointacted-ui-text, var(--winkdom-color-heading, var(--winkdom-ui-heading, var(--winkdom-community-text, #161524)))); --ctsm-muted: var(--cointacted-ui-text-muted, var(--winkdom-color-text, var(--winkdom-ui-text, var(--winkdom-community-muted, #6f6c7d)))); --ctsm-line: var(--cointacted-ui-border, var(--winkdom-color-border, var(--winkdom-ui-border, var(--winkdom-community-border, rgba(32, 28, 55, .12))))); }
.ctsm-app[data-ctsm-host="fluentcommunity"], .ctsm-notice[data-ctsm-host="fluentcommunity"] { --ctsm-accent: var(--cointacted-ui-accent, var(--fcom-primary-button, var(--fcom-primary-color, var(--fcom-primary-button-bg, var(--fcom-text-link, #7657ff))))); --ctsm-on-accent: var(--cointacted-ui-on-accent, var(--fcom-primary-button-text, var(--fcom-primary-button-color, #fff))); --ctsm-surface: var(--cointacted-ui-surface, var(--fcom-card-bg, var(--fcom-primary-bg, #fff))); --ctsm-surface-muted: var(--cointacted-ui-surface-muted, var(--fcom-secondary-content-bg, var(--fcom-secondary-bg, #f7f5ff))); --ctsm-ink: var(--cointacted-ui-text, var(--fcom-primary-text, #161524)); --ctsm-muted: var(--cointacted-ui-text-muted, var(--fcom-secondary-text, #6f6c7d)); --ctsm-line: var(--cointacted-ui-border, var(--fcom-primary-border, var(--fcom-border-color, rgba(32, 28, 55, .12)))); --ctsm-danger: var(--cointacted-ui-danger, var(--fcom-danger-color, #b42318)); --ctsm-success: var(--cointacted-ui-success, var(--fcom-success-color, #087a55)); }
.ctsm-app .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; width: 1px; }
.ctsm-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--ctsm-accent) 10%, var(--ctsm-surface)) 0%, var(--ctsm-surface) 72%); padding: 22px 28px 16px; }
.ctsm-hero p { color: var(--ctsm-muted); font-size: 14px; line-height: 1.55; margin: 0; max-width: 650px; }
.ctsm-route-tabs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 28px 20px; scroll-snap-type: inline proximity; scrollbar-color: color-mix(in srgb, var(--ctsm-muted) 52%, transparent) transparent; scrollbar-width: thin; }
.ctsm-route-tabs::-webkit-scrollbar { height: 6px; }
.ctsm-route-tabs::-webkit-scrollbar-track { background: transparent; }
.ctsm-route-tabs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ctsm-muted) 52%, transparent); border-radius: 999px; }
.ctsm-route { appearance: none; background: var(--ctsm-surface); border: 1px solid var(--ctsm-line); border-radius: 14px; color: var(--ctsm-ink); cursor: pointer; display: grid; flex: 0 0 min(300px, 78vw); gap: 4px; min-width: 0; overflow-wrap: anywhere; padding: 12px 15px; scroll-snap-align: start; text-align: left; width: min(300px, 78vw); }
.ctsm-route:only-child { flex: 1 1 100%; max-width: 100%; min-width: 0; width: 100%; }
.ctsm-route span { font-size: 14px; font-weight: 750; }
.ctsm-route small { color: var(--ctsm-muted); font-size: 11px; line-height: 1.45; }
.ctsm-route.is-active { background: var(--ctsm-accent); border-color: var(--ctsm-accent); color: var(--ctsm-on-accent); }
.ctsm-route.is-active small { color: currentColor; opacity: .82; }
.ctsm-summary { background: var(--ctsm-line); border-block: 1px solid var(--ctsm-line); display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ctsm-summary > div { background: color-mix(in srgb, var(--ctsm-surface) 94%, var(--ctsm-surface-muted)); min-width: 0; padding: 17px 22px; }
.ctsm-summary strong { display: block; font-size: 23px; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.ctsm-summary span { color: var(--ctsm-muted); display: block; font-size: 12px; font-weight: 650; line-height: 1.35; margin-top: 3px; }
.ctsm-rewards { padding: 18px 22px; }
.ctsm-rewards[aria-busy="true"] { opacity: .58; pointer-events: none; }
.ctsm-reward { align-items: center; border-radius: 14px; cursor: pointer; display: grid; gap: 12px; grid-template-columns: auto 1fr; padding: 13px 12px; transition: background .16s ease; }
.ctsm-reward:hover { background: color-mix(in srgb, var(--ctsm-accent) 7%, transparent); }
.ctsm-reward input { opacity: 0; pointer-events: none; position: absolute; }
.ctsm-reward-mark { border: 1.5px solid color-mix(in srgb, var(--ctsm-muted) 55%, transparent); border-radius: 7px; height: 21px; width: 21px; }
.ctsm-reward input:checked + .ctsm-reward-mark { background: var(--ctsm-accent); border-color: var(--ctsm-accent); box-shadow: inset 0 0 0 5px var(--ctsm-surface); }
.ctsm-reward input:disabled ~ * { opacity: .62; }
.ctsm-reward-copy { display: grid; gap: 2px 16px; grid-template-columns: 1fr auto; min-width: 0; }
.ctsm-reward-copy strong { font-size: 14px; }
.ctsm-reward-copy a, .ctsm-reward-copy > span { color: var(--ctsm-accent); font-size: 13px; text-decoration: none; }
.ctsm-reward-copy small { color: var(--ctsm-muted); font-size: 11px; grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctsm-actions { align-items: center; border-top: 1px solid var(--ctsm-line); display: flex; gap: 16px; justify-content: space-between; padding: 20px 28px; }
.ctsm-action-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 12px; }
.ctsm-button { border: 0; border-radius: 13px; cursor: pointer; font: inherit; font-weight: 750; min-height: 44px; padding: 12px 19px; }
.ctsm-button-primary { background: var(--ctsm-accent); box-shadow: 0 9px 22px color-mix(in srgb, var(--ctsm-accent) 28%, transparent); color: var(--ctsm-on-accent); }
.ctsm-button:disabled { box-shadow: none; cursor: not-allowed; opacity: .48; }
.ctsm-wallet-field { display: grid; gap: 5px; min-width: 180px; }
.ctsm-wallet-field[hidden] { display: none; }
.ctsm-wallet-field span { color: var(--ctsm-muted); font-size: 11px; font-weight: 700; }
.ctsm-wallet-field select { appearance: none; background: var(--ctsm-surface); border: 1px solid var(--ctsm-line); border-radius: 12px; color: var(--ctsm-ink); font: inherit; min-height: 44px; padding: 9px 36px 9px 12px; }
.ctsm-wallet-field select:disabled { cursor: wait; opacity: .65; }
.ctsm-actions > [data-ctsm-status] { color: var(--ctsm-muted); flex: 1; font-size: 13px; line-height: 1.45; min-width: 160px; text-align: right; }
.ctsm-actions [data-state="error"] { color: var(--ctsm-danger); }
.ctsm-actions [data-state="success"] { color: var(--ctsm-success); }
.ctsm-history { border-top: 1px solid var(--ctsm-line); padding: 18px 28px; }
.ctsm-history summary { cursor: pointer; font-weight: 700; }
.ctsm-history article { align-items: center; border-bottom: 1px solid var(--ctsm-line); display: grid; gap: 12px; grid-template-columns: 110px minmax(120px, 1fr) auto auto auto; padding: 12px 0; }
.ctsm-history small { color: var(--ctsm-muted); }
.ctsm-history-amount { display: grid; gap: 2px; min-width: 0; }
.ctsm-history-amount strong, .ctsm-history-amount small { overflow-wrap: anywhere; }
.ctsm-history article > a { color: var(--ctsm-accent); font-size: 12px; text-decoration: none; }
.ctsm-retry, .ctsm-history-link { background: var(--ctsm-surface); border: 1px solid var(--ctsm-line); border-radius: 9px; color: var(--ctsm-accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 10px; }
.ctsm-history-link:disabled { cursor: wait; opacity: .55; }
.ctsm-claim-rewards { display: grid; gap: 7px; grid-column: 1 / -1; padding: 2px 0 6px 122px; }
.ctsm-claim-rewards[hidden] { display: none; }
.ctsm-claim-rewards > div { align-items: center; background: color-mix(in srgb, var(--ctsm-accent) 7%, transparent); border-radius: 10px; display: grid; gap: 8px; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.5fr) auto; padding: 9px 12px; }
.ctsm-reward-references { align-items: center; display: flex; flex-wrap: wrap; gap: 5px 14px; min-width: 0; }
.ctsm-claim-rewards a, .ctsm-claim-rewards span { color: var(--ctsm-accent); font-size: 12px; text-decoration: none; }
.ctsm-claim-rewards p { color: var(--ctsm-muted); margin: 0; }
.ctsm-badge { background: color-mix(in srgb, var(--ctsm-muted) 12%, transparent); border-radius: 999px; color: var(--ctsm-muted); font-size: 10px; font-weight: 800; padding: 5px 8px; text-transform: uppercase; }
.ctsm-badge.is-submitted, .ctsm-badge.is-verifying { background: color-mix(in srgb, #b7791f 14%, var(--ctsm-surface)); color: color-mix(in srgb, #b7791f 82%, var(--ctsm-ink)); }
.ctsm-badge.is-confirmed { background: color-mix(in srgb, var(--ctsm-success) 14%, var(--ctsm-surface)); color: var(--ctsm-success); }
.ctsm-badge.is-settlement_failed, .ctsm-badge.is-settlement_review { background: color-mix(in srgb, var(--ctsm-danger) 14%, var(--ctsm-surface)); color: var(--ctsm-danger); }
.ctsm-empty { color: var(--ctsm-muted); padding: 28px 18px; text-align: center; }
.ctsm-notice { background: color-mix(in srgb, var(--ctsm-accent) 7%, var(--ctsm-surface)); border: 1px solid color-mix(in srgb, var(--ctsm-accent) 28%, var(--ctsm-line)); border-radius: var(--cointacted-ui-radius, var(--winkdom-radius-md, var(--fcom-border-radius, 14px))); box-sizing: border-box; color: var(--ctsm-ink); margin: 0 auto; max-width: 880px; padding: 16px; width: 100%; }
.ctsm-notice p { color: var(--ctsm-muted); line-height: 1.55; margin: 0; }
.ctsm-route:focus-visible, .ctsm-button:focus-visible, .ctsm-retry:focus-visible, .ctsm-history-link:focus-visible, .ctsm-history summary:focus-visible, .ctsm-wallet-field select:focus-visible, .ctsm-reward-copy a:focus-visible, .ctsm-history article > a:focus-visible, .ctsm-reward input:focus-visible + .ctsm-reward-mark { outline: 3px solid color-mix(in srgb, var(--ctsm-accent) 68%, white); outline-offset: 3px; }
.ctsm-reward-copy a, .ctsm-history article > a, .ctsm-claim-rewards a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ctsm-reward-copy a:hover, .ctsm-history article > a:hover, .ctsm-claim-rewards a:hover { text-decoration: underline; }

html[data-winkdom-color-mode="light"] .ctsm-app[data-ctsm-host="winkdom"], html[data-winkdom-color-mode="light"] .ctsm-notice[data-ctsm-host="winkdom"] {
	--ctsm-accent: var(--cointacted-ui-accent, var(--winkdom-color-brand, #7657ff));
	--ctsm-on-accent: var(--cointacted-ui-on-accent, var(--winkdom-color-on-brand, #fff));
	--ctsm-surface: var(--cointacted-ui-surface, var(--winkdom-color-surface, #fff));
	--ctsm-surface-muted: var(--cointacted-ui-surface-muted, var(--winkdom-color-surface-muted, #f7f5ff));
	--ctsm-ink: var(--cointacted-ui-text, var(--winkdom-color-heading, #161524));
	--ctsm-muted: var(--cointacted-ui-text-muted, var(--winkdom-color-text, #6f6c7d));
	--ctsm-line: var(--cointacted-ui-border, var(--winkdom-color-border, rgba(32, 28, 55, .12)));
	color-scheme: light;
}

html[data-winkdom-color-mode="dark"] .ctsm-app[data-ctsm-host="winkdom"], html[data-winkdom-color-mode="dark"] .ctsm-notice[data-ctsm-host="winkdom"] {
	--ctsm-accent: var(--cointacted-ui-accent, var(--winkdom-color-brand, #a995ff));
	--ctsm-on-accent: var(--cointacted-ui-on-accent, var(--winkdom-color-on-brand, #171521));
	--ctsm-surface: var(--cointacted-ui-surface, var(--winkdom-color-surface, #171521));
	--ctsm-surface-muted: var(--cointacted-ui-surface-muted, var(--winkdom-color-surface-muted, #211e2d));
	--ctsm-ink: var(--cointacted-ui-text, var(--winkdom-color-heading, #f7f5ff));
	--ctsm-muted: var(--cointacted-ui-text-muted, var(--winkdom-color-text, #bbb6ca));
	--ctsm-line: var(--cointacted-ui-border, var(--winkdom-color-border, rgba(232, 228, 255, .16)));
	--ctsm-danger: var(--cointacted-ui-danger, #ffb4ad);
	--ctsm-success: var(--cointacted-ui-success, #83e0bc);
	color-scheme: dark;
}


/* FluentCommunity changes these variables with its own theme; explicit light selectors keep the host authoritative. */
:is(html.fcom-light, html.fcom-light-mode, html.fc-light-mode, html.light, html.light-mode, html[data-theme="light"], html[data-color-mode="light"], .fcom_light, .fcom_light_mode, .fcom_light_theme) :is(.ctsm-app, .ctsm-notice)[data-ctsm-host="fluentcommunity"], [data-theme="light"] :is(.ctsm-app, .ctsm-notice)[data-ctsm-host="fluentcommunity"] {
	--ctsm-accent: var(--cointacted-ui-accent, var(--fcom-primary-button, var(--fcom-primary-color, var(--fcom-primary-button-bg, var(--fcom-text-link, #7657ff)))));
	--ctsm-on-accent: var(--cointacted-ui-on-accent, var(--fcom-primary-button-text, var(--fcom-primary-button-color, #fff)));
	--ctsm-surface: var(--cointacted-ui-surface, var(--fcom-card-bg, var(--fcom-primary-bg, #fff)));
	--ctsm-surface-muted: var(--cointacted-ui-surface-muted, var(--fcom-secondary-content-bg, var(--fcom-secondary-bg, #f7f5ff)));
	--ctsm-ink: var(--cointacted-ui-text, var(--fcom-primary-text, #161524));
	--ctsm-muted: var(--cointacted-ui-text-muted, var(--fcom-secondary-text, #6f6c7d));
	--ctsm-line: var(--cointacted-ui-border, var(--fcom-primary-border, var(--fcom-border-color, rgba(32, 28, 55, .12))));
	--ctsm-danger: var(--cointacted-ui-danger, var(--fcom-danger-color, #b42318));
	--ctsm-success: var(--cointacted-ui-success, var(--fcom-success-color, #087a55));
	color-scheme: light;
}

/* FluentCommunity publishes theme-aware variables; these fallbacks cover its known dark-mode classes. */
:is(html.fcom-dark, html.fcom-dark-mode, html.fc-dark-mode, html.dark, html.dark-mode, html[data-theme="dark"], html[data-color-mode="dark"], .fcom_dark, .fcom_dark_mode, .fcom_dark_theme) :is(.ctsm-app, .ctsm-notice)[data-ctsm-host="fluentcommunity"], body.cointacted-social-terminal-dark :is(.ctsm-app, .ctsm-notice)[data-ctsm-host="fluentcommunity"], [data-theme="dark"] :is(.ctsm-app, .ctsm-notice)[data-ctsm-host="fluentcommunity"] {
	--ctsm-accent: var(--cointacted-ui-accent, var(--fcom-primary-button, var(--fcom-primary-color, var(--fcom-primary-button-bg, var(--fcom-text-link, #a995ff)))));
	--ctsm-on-accent: var(--cointacted-ui-on-accent, var(--fcom-primary-button-text, var(--fcom-primary-button-color, #171521)));
	--ctsm-surface: var(--cointacted-ui-surface, var(--fcom-card-bg, var(--fcom-primary-bg, #171521)));
	--ctsm-surface-muted: var(--cointacted-ui-surface-muted, var(--fcom-secondary-content-bg, var(--fcom-secondary-bg, #211e2d)));
	--ctsm-ink: var(--cointacted-ui-text, var(--fcom-primary-text, #f7f5ff));
	--ctsm-muted: var(--cointacted-ui-text-muted, var(--fcom-secondary-text, #bbb6ca));
	--ctsm-line: var(--cointacted-ui-border, var(--fcom-primary-border, var(--fcom-border-color, rgba(232, 228, 255, .16))));
	--ctsm-danger: var(--cointacted-ui-danger, var(--fcom-danger-color, #ffb4ad));
	--ctsm-success: var(--cointacted-ui-success, var(--fcom-success-color, #83e0bc));
	color-scheme: dark;
}

@media (max-width: 760px) {
	.ctsm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ctsm-history article { grid-template-columns: 1fr auto; }
	.ctsm-claim-rewards { padding-left: 0; }
}

@media (max-width: 600px) {
	.ctsm-app { border-radius: var(--cointacted-ui-radius, var(--winkdom-radius-md, var(--fcom-border-radius, 16px))); }
	.ctsm-hero, .ctsm-actions, .ctsm-history { padding-inline: 18px; }
	.ctsm-route-tabs { padding-inline: 18px; }
	.ctsm-summary > div { padding: 14px 16px; }
	.ctsm-summary strong { font-size: 20px; }
	.ctsm-rewards { padding-inline: 7px; }
	.ctsm-reward-copy { grid-template-columns: 1fr; }
	.ctsm-actions { align-items: stretch; flex-direction: column; }
	.ctsm-actions > [data-ctsm-status] { text-align: left; }
	.ctsm-action-controls { align-items: stretch; display: grid; }
	.ctsm-wallet-field { min-width: 0; }
	.ctsm-wallet-field select, .ctsm-button { width: 100%; }
	.ctsm-history article, .ctsm-claim-rewards > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .ctsm-reward { transition: none; } }

@media (forced-colors: active) {
	.ctsm-route.is-active, .ctsm-button-primary, .ctsm-reward input:checked + .ctsm-reward-mark { background: Highlight; color: HighlightText; forced-color-adjust: none; }
	.ctsm-route:focus-visible, .ctsm-button:focus-visible, .ctsm-retry:focus-visible, .ctsm-history-link:focus-visible, .ctsm-history summary:focus-visible, .ctsm-wallet-field select:focus-visible, .ctsm-reward input:focus-visible + .ctsm-reward-mark { outline-color: Highlight; }
}