/*
 * CreatorHub skin: NEON — dark-first streamer look.
 * Scoped to body.chub-skin-neon. Accent vars come from the Customizer;
 * this file owns surfaces, shapes, and glow.
 */

body.chub-skin-neon {
	--chub-ink: #eef0ff;
	--chub-muted: #8a8db0;
	--chub-card: #151524;
	--chub-border: rgba(255, 255, 255, 0.08);
	--chub-radius: 12px;
	--chub-icon-tile: rgba(255, 255, 255, 0.05);
	--chub-avatar-bg: #151524;
	--chub-avatar-ring: #0b0b14;
	--chub-grid-line: rgba(255, 255, 255, 0.04);
	--chub-glow-opacity: 0;
	--chub-pattern-ink: rgba(124, 58, 255, 0.2);
	--chub-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
	--chub-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
	--chub-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
	--chub-shadow-pop: 0 6px 24px rgba(124, 58, 255, 0.35);
	--chub-neon-cyan: #22d3ee;
	--chub-neon-pink: #ff2d78;
	color-scheme: dark;
}

/* Deeper still in dark scheme — neon is dark in both modes. */
html[data-chub-theme="dark"] body.chub-skin-neon {
	--chub-bg-tint: #07070f;
	--chub-card: #121220;
	--chub-avatar-ring: #07070f;
	--chub-pattern-ink: rgba(34, 211, 238, 0.2);
}

/* ambience: low horizon aurora band (not the base theme's top glow) */
body.chub-skin-neon .chub-bg__glow {
	top: auto;
	bottom: -12%;
	left: 0;
	transform: none;
	width: 100%;
	height: 340px;
	background: linear-gradient(100deg, var(--chub-accent), var(--chub-neon-pink) 55%, var(--chub-neon-cyan));
	filter: blur(110px);
	opacity: 0.22;
}

/* hero */
body.chub-skin-neon .chub-name {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: linear-gradient(90deg, #fff, var(--chub-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
body.chub-skin-neon .chub-handle {
	background: none;
	-webkit-text-fill-color: var(--chub-neon-cyan);
	color: var(--chub-neon-cyan);
	letter-spacing: 0.12em;
}
body.chub-skin-neon .chub-bio { color: var(--chub-muted); }

/* always-on spinning ring (live state still badges) */
body.chub-skin-neon .chub-avatar::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: conic-gradient(var(--chub-accent), var(--chub-neon-cyan), var(--chub-neon-pink), var(--chub-accent));
	animation: chub-spin 5s linear infinite;
}
body.chub-skin-neon .chub-avatar__img { border-width: 3px; }

/* socials — squared tiles with neon hover */
body.chub-skin-neon .chub-socials a {
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--chub-border);
	color: var(--chub-muted);
}
body.chub-skin-neon .chub-socials a:hover,
body.chub-skin-neon .chub-socials a:focus-visible {
	color: #fff;
	border-color: var(--chub-neon-cyan);
	box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}

/* tabs — compact gradient pill */
body.chub-skin-neon .chub-tabs {
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
}
body.chub-skin-neon .chub-tab {
	border-radius: 7px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	font-weight: 700;
}
body.chub-skin-neon .chub-tab.is-active {
	background: linear-gradient(90deg, var(--chub-accent), var(--chub-neon-cyan));
	box-shadow: 0 0 16px rgba(124, 58, 255, 0.5);
}

/* tip — hot gradient bar */
body.chub-skin-neon .chub-tip {
	background: linear-gradient(90deg, var(--chub-accent), var(--chub-neon-pink));
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	font-weight: 800;
	box-shadow: 0 6px 24px rgba(255, 45, 120, 0.35);
}

/* link cards — notched corner, slide + glow on hover */
body.chub-skin-neon .chub-card__link {
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
	border-radius: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
body.chub-skin-neon .chub-card__link:hover,
body.chub-skin-neon .chub-card__link:focus-visible {
	transform: translateX(4px);
	border-color: var(--chub-neon-cyan);
	box-shadow: 0 0 20px rgba(34, 211, 238, 0.22);
}
body.chub-skin-neon .chub-card--featured .chub-card__link {
	border-width: 1px;
	background:
		linear-gradient(var(--chub-card), var(--chub-card)) padding-box,
		linear-gradient(115deg, var(--chub-accent), var(--chub-neon-pink)) border-box;
}
body.chub-skin-neon .chub-card__icon { border-radius: 9px; }
body.chub-skin-neon .chub-card__chev { color: var(--chub-muted); }

body.chub-skin-neon .chub-section-label {
	letter-spacing: 0.3em;
	font-size: 0.68rem;
	font-weight: 800;
}

/* metrics — cyan top edge */
body.chub-skin-neon .chub-metric { border-top: 2px solid var(--chub-neon-cyan); }
body.chub-skin-neon .chub-metric__main b { color: var(--chub-neon-cyan); }
body.chub-skin-neon .chub-metric__icon { border-radius: 9px; }
body.chub-skin-neon .chub-reach { border-color: rgba(34, 211, 238, 0.25); }
body.chub-skin-neon .chub-reach__num { color: var(--chub-neon-cyan); }

/* chips + email */
body.chub-skin-neon .chub-chip {
	border-radius: 7px;
	border-color: rgba(34, 211, 238, 0.3);
}
body.chub-skin-neon .chub-email {
	border-color: var(--chub-neon-cyan);
	color: var(--chub-neon-cyan);
}

/* controls + toast */
body.chub-skin-neon .chub-ctrl {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(6px);
}
body.chub-skin-neon .chub-toast { border: 1px solid var(--chub-neon-cyan); }

/* prose legibility on dark */
body.chub-skin-neon .chub-prose { color: #c9cbe4; }
body.chub-skin-neon .chub-post-card__link,
body.chub-skin-neon .chub-sponsor,
body.chub-skin-neon .chub-etsy__card,
body.chub-skin-neon .chub-schedule { box-shadow: var(--chub-shadow-xs); }