/* =========================================================
   Streamworks — Themes
   data-stream-theme values:
   moon | space | sun | sea | nebula | earth | mars | air | pandora
   Switch: document.documentElement.dataset.streamTheme = 'moon'
   ========================================================= */

:root,
html[data-stream-theme="moon"] {
	--stream-font-family: "Inter", system-ui, sans-serif;

	--stream-color-text: #5e656e;
	--stream-color-text-muted: #6b7280;
	--stream-color-text-soft: #9ca3af;
	--stream-color-heading: #1f2328;

	/* Lunar: bright highland white + gray mountain / crater rock */
	--stream-color-bg: #eceff2;
	--stream-color-bg-start: #ffffff;
	--stream-color-bg-mid: #e4e7eb;
	--stream-color-bg-end: #d5dae0;
	--stream-color-wave-a: #ffffff;
	--stream-color-wave-b: #c4ccd4;
	--stream-color-wave-c: #9aa3ad;

	--stream-color-surface: rgba(255, 255, 255, 0.58);
	--stream-color-surface-strong: rgba(255, 255, 255, 0.88);
	--stream-color-surface-soft: rgba(228, 231, 235, 0.45);
	--stream-color-border: rgba(148, 163, 175, 0.32);
	--stream-color-border-soft: rgba(148, 163, 175, 0.18);
	--stream-color-shadow: rgba(55, 65, 81, 0.1);

	--stream-color-primary: #6b7280;
	--stream-color-primary-strong: #4b5563;
	--stream-color-primary-soft: rgba(107, 114, 128, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #e5e7eb, #9ca3af);

	--stream-color-success: #0f9d68;
	--stream-color-success-soft: rgba(61, 213, 152, 0.15);
	--stream-color-warning: #c58b00;
	--stream-color-warning-soft: rgba(255, 193, 7, 0.15);
	--stream-color-danger: #d63b3b;
	--stream-color-danger-soft: rgba(255, 87, 87, 0.12);

	--stream-color-modal-overlay: rgba(31, 35, 40, 0.4);
	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #e5e7eb;
	--stream-color-btn-secondary: #eef0f2;
	--stream-color-btn-warning: #d4a574;

	--stream-theme-swatch: linear-gradient(145deg, #ffffff, #9aa3ad);
	--stream-theme-icon: #4b5563;
	--stream-wave-opacity: 0.42;

	--stream-radius-sm: 10px;
	--stream-radius-md: 18px;
	--stream-radius-lg: 28px;
	--stream-radius-xl: 32px;

	--stream-space-xs: 8px;
	--stream-space-sm: 14px;
	--stream-space-md: 18px;
	--stream-space-lg: 24px;

	--stream-z-dropdown: 40;
	--stream-z-modal: 9999;
}

html[data-stream-theme="space"] {
	--stream-color-text: #e2e8f0;
	--stream-color-text-muted: #94a3b8;
	--stream-color-text-soft: #64748b;
	--stream-color-heading: #f8fafc;

	--stream-color-bg: #0b1220;
	--stream-color-bg-start: #0f172a;
	--stream-color-bg-mid: #111827;
	--stream-color-bg-end: #0b1220;
	--stream-color-wave-a: #1e293b;
	--stream-color-wave-b: #1d4ed8;
	--stream-color-wave-c: #0ea5e9;

	--stream-color-surface: rgba(30, 41, 59, 0.72);
	--stream-color-surface-strong: rgba(51, 65, 85, 0.9);
	--stream-color-surface-soft: rgba(15, 23, 42, 0.45);
	--stream-color-border: rgba(148, 163, 184, 0.22);
	--stream-color-border-soft: rgba(148, 163, 184, 0.14);
	--stream-color-shadow: rgba(0, 0, 0, 0.35);

	--stream-color-primary: #8ba2ff;
	--stream-color-primary-strong: #6d8cff;
	--stream-color-primary-soft: rgba(139, 162, 255, 0.18);
	--stream-color-primary-gradient: linear-gradient(135deg, #6d8cff, #4f6ef7);

	--stream-color-modal-overlay: rgba(0, 0, 0, 0.65);
	--stream-color-modal-surface: #111827;
	--stream-color-modal-border: #1f2937;
	--stream-color-btn-secondary: #334155;
	--stream-color-btn-warning: #d97706;

	--stream-theme-swatch: linear-gradient(145deg, #0f172a, #312e81);
	--stream-theme-icon: #e2e8f0;
	--stream-wave-opacity: 0.4;
}

html[data-stream-theme="sun"] {
	--stream-color-text: #422006;
	--stream-color-text-muted: #a16207;
	--stream-color-text-soft: #ca8a04;
	--stream-color-heading: #713f12;

	--stream-color-bg: #fff7ed;
	--stream-color-bg-start: #fffbeb;
	--stream-color-bg-mid: #ffedd5;
	--stream-color-bg-end: #fef3c7;
	--stream-color-wave-a: #fdba74;
	--stream-color-wave-b: #fde68a;
	--stream-color-wave-c: #fb923c;

	--stream-color-surface: rgba(255, 255, 255, 0.48);
	--stream-color-surface-strong: rgba(255, 251, 235, 0.88);
	--stream-color-surface-soft: rgba(255, 237, 213, 0.28);
	--stream-color-border: rgba(251, 191, 36, 0.28);
	--stream-color-border-soft: rgba(251, 191, 36, 0.16);
	--stream-color-shadow: rgba(180, 83, 9, 0.1);

	--stream-color-primary: #ea580c;
	--stream-color-primary-strong: #c2410c;
	--stream-color-primary-soft: rgba(234, 88, 12, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #fbbf24, #f97316);

	--stream-color-modal-overlay: rgba(120, 53, 15, 0.4);
	--stream-color-modal-surface: #fffbeb;
	--stream-color-modal-border: #fde68a;
	--stream-color-btn-secondary: #fef3c7;
	--stream-color-btn-warning: #f59e0b;

	--stream-theme-swatch: linear-gradient(145deg, #fde68a, #fb923c);
	--stream-theme-icon: #9a3412;
	--stream-wave-opacity: 0.28;
}

html[data-stream-theme="sea"] {
	--stream-color-text: #334155;
	--stream-color-text-muted: #5b6b7c;
	--stream-color-text-soft: #94a3b8;
	--stream-color-heading: #1e293b;

	--stream-color-bg: #f7f9fb;
	--stream-color-bg-start: #f8fafc;
	--stream-color-bg-mid: #eef3f7;
	--stream-color-bg-end: #f1f5f9;
	--stream-color-wave-a: #c9d7e4;
	--stream-color-wave-b: #d9e5ef;
	--stream-color-wave-c: #b8c9d9;

	--stream-color-surface: rgba(255, 255, 255, 0.55);
	--stream-color-surface-strong: rgba(255, 255, 255, 0.9);
	--stream-color-surface-soft: rgba(238, 243, 247, 0.45);
	--stream-color-border: rgba(100, 116, 139, 0.2);
	--stream-color-border-soft: rgba(100, 116, 139, 0.12);
	--stream-color-shadow: rgba(51, 65, 85, 0.08);

	--stream-color-primary: #5b7c99;
	--stream-color-primary-strong: #4a6a85;
	--stream-color-primary-soft: rgba(91, 124, 153, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #9fb4c7, #5b7c99);

	--stream-color-modal-overlay: rgba(30, 41, 59, 0.4);
	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #e2e8f0;
	--stream-color-btn-secondary: #eef2f6;
	--stream-color-btn-warning: #d4a574;

	--stream-theme-swatch: linear-gradient(145deg, #d5e0ea, #5b7c99);
	--stream-theme-icon: #3f5568;
	--stream-wave-opacity: 0.22;
}

html[data-stream-theme="nebula"] {
	--stream-color-text: #374151;
	--stream-color-text-muted: #6b7280;
	--stream-color-text-soft: #9ca3af;
	--stream-color-heading: #1f2937;

	--stream-color-bg: #f8f7fa;
	--stream-color-bg-start: #fbfafc;
	--stream-color-bg-mid: #f3f1f6;
	--stream-color-bg-end: #f5f3f7;
	--stream-color-wave-a: #d8d2e2;
	--stream-color-wave-b: #e4dfec;
	--stream-color-wave-c: #cdc4db;

	--stream-color-surface: rgba(255, 255, 255, 0.55);
	--stream-color-surface-strong: rgba(255, 255, 255, 0.9);
	--stream-color-surface-soft: rgba(243, 241, 246, 0.45);
	--stream-color-border: rgba(120, 113, 140, 0.18);
	--stream-color-border-soft: rgba(120, 113, 140, 0.1);
	--stream-color-shadow: rgba(55, 48, 70, 0.07);

	--stream-color-primary: #7a7094;
	--stream-color-primary-strong: #655c7d;
	--stream-color-primary-soft: rgba(122, 112, 148, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #b6adc8, #7a7094);

	--stream-color-modal-overlay: rgba(31, 41, 55, 0.4);
	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #e8e6ed;
	--stream-color-btn-secondary: #f1eff4;
	--stream-color-btn-warning: #c4a484;

	--stream-theme-swatch: linear-gradient(145deg, #ddd6e8, #7a7094);
	--stream-theme-icon: #534b68;
	--stream-wave-opacity: 0.14;
}

html[data-stream-theme="earth"] {
	--stream-color-text: #3f4a43;
	--stream-color-text-muted: #647069;
	--stream-color-text-soft: #94a09a;
	--stream-color-heading: #2c3530;

	--stream-color-bg: #f7f8f6;
	--stream-color-bg-start: #fafbf9;
	--stream-color-bg-mid: #eef1ec;
	--stream-color-bg-end: #f3f5f1;
	--stream-color-wave-a: #cfd8d0;
	--stream-color-wave-b: #dde4dc;
	--stream-color-wave-c: #bdcabf;

	--stream-color-surface: rgba(255, 255, 255, 0.55);
	--stream-color-surface-strong: rgba(255, 255, 255, 0.9);
	--stream-color-surface-soft: rgba(238, 241, 236, 0.45);
	--stream-color-border: rgba(100, 112, 105, 0.18);
	--stream-color-border-soft: rgba(100, 112, 105, 0.1);
	--stream-color-shadow: rgba(44, 53, 48, 0.07);

	--stream-color-primary: #6b7f71;
	--stream-color-primary-strong: #5a6c60;
	--stream-color-primary-soft: rgba(107, 127, 113, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #a8b7ad, #6b7f71);

	--stream-color-modal-overlay: rgba(44, 53, 48, 0.4);
	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #e5e9e6;
	--stream-color-btn-secondary: #eff2ef;
	--stream-color-btn-warning: #c4a574;

	--stream-theme-swatch: linear-gradient(145deg, #d5ddd7, #6b7f71);
	--stream-theme-icon: #4a5a50;
	--stream-wave-opacity: 0.14;
}

html[data-stream-theme="mars"] {
	--stream-color-text: #4a403c;
	--stream-color-text-muted: #7a6a63;
	--stream-color-text-soft: #a89890;
	--stream-color-heading: #3a312d;

	--stream-color-bg: #faf8f7;
	--stream-color-bg-start: #fcfbfa;
	--stream-color-bg-mid: #f4efec;
	--stream-color-bg-end: #f7f3f1;
	--stream-color-wave-a: #dfd0c8;
	--stream-color-wave-b: #ebe0da;
	--stream-color-wave-c: #d4bfb4;

	--stream-color-surface: rgba(255, 255, 255, 0.55);
	--stream-color-surface-strong: rgba(255, 255, 255, 0.9);
	--stream-color-surface-soft: rgba(244, 239, 236, 0.45);
	--stream-color-border: rgba(140, 116, 105, 0.18);
	--stream-color-border-soft: rgba(140, 116, 105, 0.1);
	--stream-color-shadow: rgba(58, 49, 45, 0.07);

	--stream-color-primary: #a67c68;
	--stream-color-primary-strong: #8f6957;
	--stream-color-primary-soft: rgba(166, 124, 104, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #cbb0a1, #a67c68);

	--stream-color-modal-overlay: rgba(58, 49, 45, 0.4);
	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #ebe4e0;
	--stream-color-btn-secondary: #f3eeeb;
	--stream-color-btn-warning: #c49a6c;

	--stream-theme-swatch: linear-gradient(145deg, #e0cfc5, #a67c68);
	--stream-theme-icon: #6f5246;
	--stream-wave-opacity: 0.16;
}

html[data-stream-theme="air"] {
	--stream-color-text: #334155;
	--stream-color-text-muted: #64748b;
	--stream-color-text-soft: #94a3b8;
	--stream-color-heading: #0f172a;

	--stream-color-bg: #f8fafc;
	--stream-color-bg-start: #ffffff;
	--stream-color-bg-mid: #f1f5f9;
	--stream-color-bg-end: #e2e8f0;
	--stream-color-wave-a: #cbd5e1;
	--stream-color-wave-b: #e2e8f0;
	--stream-color-wave-c: #bae6fd;

	--stream-color-surface: rgba(255, 255, 255, 0.55);
	--stream-color-surface-strong: rgba(248, 250, 252, 0.95);
	--stream-color-surface-soft: rgba(241, 245, 249, 0.55);
	--stream-color-border: rgba(148, 163, 184, 0.35);
	--stream-color-border-soft: rgba(148, 163, 184, 0.2);
	--stream-color-shadow: rgba(71, 85, 105, 0.1);

	--stream-color-primary: #0ea5e9;
	--stream-color-primary-strong: #0284c7;
	--stream-color-primary-soft: rgba(14, 165, 233, 0.14);
	--stream-color-primary-gradient: linear-gradient(135deg, #bae6fd, #38bdf8);

	--stream-color-modal-overlay: rgba(51, 65, 85, 0.35);
	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #e2e8f0;
	--stream-color-btn-secondary: #f1f5f9;
	--stream-color-btn-warning: #f59e0b;

	--stream-theme-swatch: linear-gradient(145deg, #e2e8f0, #7dd3fc);
	--stream-theme-icon: #334155;
}

html[data-stream-theme="pandora"] {
	/* Avatar-title radiant bioluminescent blue */
	--stream-color-text: #dff6ff;
	--stream-color-text-muted: #7ddcff;
	--stream-color-text-soft: #5ce1ff;
	--stream-color-heading: #f0fbff;

	--stream-color-bg: #061427;
	--stream-color-bg-start: #0a1e3d;
	--stream-color-bg-mid: #07182f;
	--stream-color-bg-end: #040d1c;
	--stream-color-wave-a: #5ce1ff;
	--stream-color-wave-b: #38bdf8;
	--stream-color-wave-c: #00b4ff;

	--stream-color-surface: rgba(10, 30, 61, 0.42);
	--stream-color-surface-strong: rgba(8, 24, 48, 0.78);
	--stream-color-surface-soft: rgba(6, 20, 39, 0.35);
	--stream-color-border: rgba(92, 225, 255, 0.22);
	--stream-color-border-soft: rgba(92, 225, 255, 0.12);
	--stream-color-shadow: rgba(0, 0, 0, 0.35);

	--stream-color-primary: #5ce1ff;
	--stream-color-primary-strong: #38bdf8;
	--stream-color-primary-soft: rgba(92, 225, 255, 0.18);
	--stream-color-primary-gradient: linear-gradient(135deg, #7df9ff, #00b4ff);

	--stream-color-modal-overlay: rgba(4, 13, 28, 0.72);
	--stream-color-modal-surface: #0a1e3d;
	--stream-color-modal-border: #123056;
	--stream-color-btn-secondary: #0f2748;
	--stream-color-btn-warning: #f59e0b;

	--stream-theme-swatch: linear-gradient(145deg, #7df9ff, #061427);
	--stream-theme-icon: #7df9ff;
	--stream-wave-opacity: 0.14;
}

/* Background off = neutral chrome + readable dark text; accents stay themed */
html[data-stream-bg="off"] {
	--stream-color-text: #1e293b;
	--stream-color-text-muted: #64748b;
	--stream-color-text-soft: #94a3b8;
	--stream-color-heading: #0f172a;

	--stream-color-bg: #f4f6f8;
	--stream-color-bg-start: #f8fafc;
	--stream-color-bg-mid: #f1f5f9;
	--stream-color-bg-end: #f8fafc;
	--stream-color-wave-a: transparent;
	--stream-color-wave-b: transparent;
	--stream-color-wave-c: transparent;
	--stream-wave-opacity: 0;

	--stream-color-surface: rgba(255, 255, 255, 0.78);
	--stream-color-surface-strong: rgba(255, 255, 255, 0.95);
	--stream-color-surface-soft: rgba(255, 255, 255, 0.55);
	--stream-color-border: rgba(148, 163, 184, 0.28);
	--stream-color-border-soft: rgba(148, 163, 184, 0.16);
	--stream-color-shadow: rgba(15, 23, 42, 0.06);

	--stream-color-modal-surface: #ffffff;
	--stream-color-modal-border: #e2e8f0;
	--stream-color-modal-overlay: rgba(15, 23, 42, 0.4);
	--stream-color-btn-secondary: #e5e7eb;
}

/* Space always keeps its atmospheric background */
html[data-stream-theme="space"] body {
	background:
		radial-gradient(
			circle at top left,
			#0f172a 0%,
			#111827 45%,
			#0b1220 100%
		);
	color: #e2e8f0;
}

html[data-stream-theme="space"] body::before,
html[data-stream-theme="space"] body::after {
	display: block;
	opacity: 0.4;
}

/* Re-apply space chrome after bg-off overrides */
html[data-stream-theme="space"] {
	--stream-color-text: #e2e8f0;
	--stream-color-text-muted: #94a3b8;
	--stream-color-text-soft: #64748b;
	--stream-color-heading: #f8fafc;
	--stream-color-surface: rgba(30, 41, 59, 0.72);
	--stream-color-surface-strong: rgba(51, 65, 85, 0.9);
	--stream-color-surface-soft: rgba(15, 23, 42, 0.45);
	--stream-color-border: rgba(148, 163, 184, 0.22);
	--stream-color-border-soft: rgba(148, 163, 184, 0.14);
	--stream-color-shadow: rgba(0, 0, 0, 0.35);
	--stream-color-bg-start: #0f172a;
	--stream-color-bg-mid: #111827;
	--stream-color-bg-end: #0b1220;
	--stream-color-wave-a: #1e293b;
	--stream-color-wave-b: #1d4ed8;
	--stream-color-wave-c: #0ea5e9;
	--stream-wave-opacity: 0.4;
	--stream-color-modal-surface: #111827;
	--stream-color-modal-border: #1f2937;
	--stream-color-btn-secondary: #334155;
}

html[data-stream-bg="off"]:not([data-stream-theme="space"]) body::before,
html[data-stream-bg="off"]:not([data-stream-theme="space"]) body::after {
	display: none;
}

/* ---------- Theme picker UI ---------- */
.stream-theme-picker {
	position: relative;
	z-index: var(--stream-z-dropdown);
}

.stream-theme-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 248px;
	padding: 14px;
	border-radius: var(--stream-radius-md);
	background: var(--stream-color-surface-strong);
	border: 1px solid var(--stream-color-border);
	box-shadow: 0 14px 36px var(--stream-color-shadow);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.stream-theme-picker.is-open .stream-theme-panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.stream-theme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 8px;
}

.stream-theme-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	font: inherit;
	color: var(--stream-color-text-muted);
}

.stream-theme-swatch {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--stream-theme-option-swatch, #cbd5e1);
	color: var(--stream-theme-option-icon, #334155);
	border: 2px solid transparent;
	box-shadow: 0 4px 12px var(--stream-color-shadow);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.stream-theme-option:hover .stream-theme-swatch {
	transform: translateY(-1px);
}

.stream-theme-option.stream-active .stream-theme-swatch {
	border-color: var(--stream-color-primary);
	box-shadow:
		0 0 0 3px var(--stream-color-primary-soft),
		0 4px 12px var(--stream-color-shadow);
}

.stream-theme-name {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--stream-color-text-muted);
}

.stream-theme-option.stream-active .stream-theme-name {
	color: var(--stream-color-primary);
}

.stream-theme-bg-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--stream-color-border-soft);
}

.stream-theme-bg-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--stream-color-text);
}

.stream-theme-switch {
	position: relative;
	width: 42px;
	height: 24px;
	flex-shrink: 0;
}

.stream-theme-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.stream-theme-switch-slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	border-radius: 999px;
	background: var(--stream-color-btn-secondary);
	border: 1px solid var(--stream-color-border);
	transition: background 0.2s ease;
}

.stream-theme-switch-slider::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
	transition: transform 0.2s ease;
}

.stream-theme-switch input:checked + .stream-theme-switch-slider {
	background: var(--stream-color-primary);
	border-color: transparent;
}

.stream-theme-switch input:checked + .stream-theme-switch-slider::before {
	transform: translateX(18px);
}

.stream-theme-switch input:disabled + .stream-theme-switch-slider {
	opacity: 0.45;
	cursor: not-allowed;
}

.stream-theme-bg-note {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	color: var(--stream-color-text-soft);
}

/* Cinematic theme handover veil — opacity driven by Web Animations API */
.stream-theme-veil {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: #05070c;
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	will-change: opacity;
	backface-visibility: hidden;
	contain: strict;
}

/* Theme info modal */
.stream-theme-reveal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	background: rgba(15, 23, 42, 0.18);
	transition: opacity 0.45s ease;
}

.stream-theme-reveal.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.stream-theme-reveal-card {
	position: relative;
	min-width: 280px;
	max-width: 360px;
	padding: 30px 28px 26px;
	border-radius: 24px;
	text-align: center;
	background: var(--stream-color-surface-strong);
	border: 1px solid var(--stream-color-border);
	box-shadow: 0 18px 40px var(--stream-color-shadow);
	transform: translateY(10px);
	opacity: 0;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.5s ease;
}

.stream-theme-reveal.is-visible .stream-theme-reveal-card {
	transform: translateY(0);
	opacity: 1;
}

.stream-theme-reveal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--stream-color-surface);
	border: 1px solid var(--stream-color-border);
	color: var(--stream-color-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
}

.stream-theme-reveal-close:hover {
	background: var(--stream-color-surface-strong);
	color: var(--stream-color-heading);
}

.stream-theme-reveal-icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 8px 18px var(--stream-color-shadow);
}

.stream-theme-reveal-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 650;
	color: var(--stream-color-heading);
}

.stream-theme-reveal-tagline {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stream-color-primary);
}

.stream-theme-reveal-blurb {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--stream-color-text-muted);
}