@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
	--rp-bg: #0f1110;
	--rp-bg2: #171717;
	--rp-panel: rgba(18, 18, 18, 0.94);
	--rp-amber: #f4f4f4;
	--rp-teal: #d7d7d7;
	--rp-olive: #9a9a9a;
	--rp-clay: #7a7a7a;
	--rp-ink: #f5f5f5;
	--rp-muted: rgba(245,245,245,0.66);
	--rp-border: rgba(255,255,255,0.09);
}

#login_wrap.rp-wrap,
#login_wrap.rp-wrap * {
	box-sizing: border-box;
}

#login_wrap.rp-wrap {
	width: 100% !important;
	min-height: 100vh !important;
	position: relative !important;
	overflow: hidden !important;
	background:
		radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 28%),
		radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 26%),
		linear-gradient(180deg, #090909 0%, #d9dfe7f0f 42%, #151515 100%) !important;
	font-family: 'Outfit', sans-serif !important;
	color: var(--rp-ink) !important;
}

.rp-bg {
	position: fixed !important;
	inset: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
}

.rp-mesh {
	position: absolute !important;
	inset: 0 !important;
	background-image:
		linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px) !important;
	background-size: 42px 42px !important;
}

.rp-aura {
	position: absolute !important;
	border-radius: 50% !important;
	filter: blur(100px) !important;
	opacity: 0.28 !important;
}

.aura-left {
	width: 360px !important;
	height: 360px !important;
	top: -100px !important;
	left: -80px !important;
	background: radial-gradient(circle, rgba(255,255,255,0.34) 0%, transparent 70%) !important;
}

.aura-right {
	width: 340px !important;
	height: 340px !important;
	top: 10% !important;
	right: -120px !important;
	background: radial-gradient(circle, rgba(210,210,210,0.24) 0%, transparent 70%) !important;
}

.aura-bottom {
	width: 420px !important;
	height: 420px !important;
	bottom: -180px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%) !important;
}

.rp-shell {
	position: relative !important;
	z-index: 2 !important;
	width: min(1220px, calc(100% - 24px)) !important;
	margin: 0 auto !important;
	padding: 18px 0 28px !important;
}

.rp-header,
.rp-login-card,
.rp-side-card,
.rp-block,
.rp-footer,
.rp-cookie {
	background: var(--rp-panel) !important;
	border: 1px solid var(--rp-border) !important;
	box-shadow: 0 24px 42px rgba(0,0,0,0.24) !important;
}

.rp-header {
	border-radius: 24px !important;
	padding: 16px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	margin-bottom: 22px !important;
}

.rp-brand,
.rp-header-tools,
.rp-footer {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.rp-mark {
	width: 48px !important;
	height: 48px !important;
	border-radius: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #ffffff, #bdbdbd) !important;
	color: #111111 !important;
}

.rp-brand-tag {
	display: block !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	color: #a7a7a7 !important;
}

.rp-brand h2,
.rp-card-top h3,
.rp-block-head h3,
.rp-side-card h3,
.rp-footer-brand,
.rp-radio-copy strong,
.rp-band-copy h1,
.extra-tile h4 {
	margin: 0 !important;
	color: var(--rp-ink) !important;
}

.rp-pill,
.rp-lang,
.rp-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.rp-pill,
.rp-lang {
	padding: 10px 14px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rp-border) !important;
	color: #dddddd !important;
}

.rp-lang {
	cursor: pointer !important;
}

.rp-lang img {
	width: 20px !important;
	border-radius: 3px !important;
}

.rp-hero-grid {
	display: grid !important;
	grid-template-columns: 0.9fr 1.2fr 0.9fr !important;
	gap: 18px !important;
	align-items: start !important;
	margin-bottom: 20px !important;
}

.rp-side {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
}

.rp-left-side { order: 1 !important; }
.rp-center-stage { order: 2 !important; }
.rp-right-side { order: 3 !important; }

.rp-side-card,
.rp-login-card,
.rp-block,
.rp-footer {
	border-radius: 26px !important;
	padding: 22px !important;
}

.rp-badge {
	padding: 10px 14px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.07) !important;
	color: #f1f1f1 !important;
	margin-bottom: 14px !important;
}

.rp-band-copy h1 {
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: clamp(38px, 5vw, 70px) !important;
	line-height: 0.94 !important;
	letter-spacing: 2px !important;
	margin-bottom: 12px !important;
}

.rp-band-copy p,
.rp-card-top p,
.rp-terms,
.rp-link,
.rp-date-label,
.rp-side-card p,
.rp-block-head p,
.rp-radio-copy span,
.extra-tile p,
.cookie-desc,
.side-list span,
.status-stack span {
	margin: 0 !important;
	color: var(--rp-muted) !important;
	line-height: 1.75 !important;
}

.rp-hero-panels,
.pulse-lines,
.status-stack,
.rp-counter-grid,
.rp-user-wall,
.rp-date-grid,
.rp-row,
.rp-extra-grid,
.rp-five-sections {
	display: grid !important;
	gap: 12px !important;
}

.rp-hero-panels,
.rp-row,
.rp-counter-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.rp-hero-card,
.mini-counter,
.extra-tile {
	padding: 16px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
}

.rp-hero-card strong,
.mini-counter strong,
.status-stack strong,
.pulse-lines strong {
	display: block !important;
	margin-bottom: 6px !important;
	color: var(--rp-ink) !important;
}

.magenta { box-shadow: inset 0 3px 0 rgba(255,255,255,0.42) !important; }
.lime { box-shadow: inset 0 3px 0 rgba(255,255,255,0.22) !important; }

.pulse-lines > div,
.status-stack > div {
	padding: 14px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.pulse-lines > div:last-child,
.status-stack > div:last-child {
	border-bottom: none !important;
}

.side-list {
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.side-list li {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.side-list i {
	color: #f1f1f1 !important;
	font-size: 9px !important;
}

.rp-card-top {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-bottom: 16px !important;
}

.rp-logo-box {
	width: 112px !important;
	height: 78px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rp-border) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px !important;
}

#login_logo {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.rp-tab-list {
	list-style: none !important;
	margin: 0 0 16px !important;
	padding: 8px !important;
	display: flex !important;
	gap: 8px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
}

.rp-tab {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 14px !important;
	border-radius: 14px !important;
	color: #9d9d9d !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.rp-tab.active {
	color: #111111 !important;
	background: linear-gradient(135deg, #ffffff, #b7b7b7) !important;
}

.rp-panel { display: none !important; }
.rp-panel.active { display: block !important; }

.rp-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.rp-field {
	display: flex !important;
	align-items: center !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rp-border) !important;
}

.rp-field i {
	padding: 0 14px !important;
	color: #dcdcdc !important;
}

.rp-input,
.rp-select {
	flex: 1 !important;
	border: none !important;
	background: transparent !important;
	color: var(--rp-ink) !important;
	outline: none !important;
	padding: 15px 14px 15px 0 !important;
	font-family: 'Outfit', sans-serif !important;
}

.rp-input::placeholder { color: #888888 !important; }

.rp-select option {
	background: var(--rp-bg2) !important;
	color: var(--rp-ink) !important;
}

.half { min-width: 0 !important; }

.rp-date-box {
	padding: 14px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid var(--rp-border) !important;
}

.rp-date-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.solo {
	width: 100% !important;
	padding: 13px 14px !important;
	border-radius: 14px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rp-border) !important;
}

.rp-btn,
.rp-mini-btn,
.rp-cookie-btn {
	border: none !important;
	cursor: pointer !important;
}

.rp-btn {
	min-height: 54px !important;
	border-radius: 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	font-weight: 700 !important;
	color: #111111 !important;
}

.rp-btn-main { background: linear-gradient(135deg, #ffffff, #b0b0b0) !important; }
.rp-btn-teal { background: linear-gradient(135deg, #ededed, #9c9c9c) !important; }
.rp-btn-amber,
.rp-cookie-btn { background: linear-gradient(135deg, #fafafa, #bcbcbc) !important; }

.rp-bridge {
	padding: 18px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid var(--rp-border) !important;
	text-align: center !important;
}

.rp-bridge i {
	font-size: 28px !important;
	color: #f0f0f0 !important;
	margin-bottom: 10px !important;
}

.rp-recaptcha {
	display: flex !important;
	justify-content: center !important;
}

.rp-five-sections {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 18px !important;
}

.rp-section-card {
	min-height: 100% !important;
}

.stats-card,
.radio-card,
.extras-card {
	grid-column: span 3 !important;
}

.users-card,
.spotlight-card,
.mood-card,
.wow-card,
.launch-card {
	grid-column: span 1 !important;
}

.users-card {
	grid-column: span 2 !important;
}

.rp-counter-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mini-counter {
	text-align: center !important;
}

.mini-counter strong {
	font-size: 30px !important;
}

.rp-user-wall {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.rp-user-wall > *,
.rp-user-wall .active_intro,
.rp-user-wall .active_user,
.rp-user-wall .intro_user,
.rp-user-wall .acav {
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 8px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid rgba(255,255,255,0.05) !important;
	text-align: center !important;
}

.rp-user-wall img,
.rp-user-wall .avatar,
.rp-user-wall .active_avatar,
.rp-user-wall .avatar_friends {
	width: 60px !important;
	height: 60px !important;
	object-fit: cover !important;
	border-radius: 16px !important;
	margin: 0 auto !important;
}

.rp-user-wall .username,
.rp-user-wall .user_name,
.rp-user-wall .intro_name,
.rp-user-wall .name {
	width: 100% !important;
	font-size: 12px !important;
	color: var(--rp-ink) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.rp-radio-top {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: 14px !important;
	align-items: center !important;
	padding: 16px !important;
	border-radius: 20px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid var(--rp-border) !important;
	margin-bottom: 14px !important;
}

.rp-radio-disc {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #ffffff, #bcbcbc) !important;
	color: #111111 !important;
}

.rp-radio-disc.spinning { animation: rpSpin 2s linear infinite !important; }
@keyframes rpSpin { to { transform: rotate(360deg); } }

.rp-station-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 14px !important;
}

.rp-station-card {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 11px 14px !important;
	border-radius: 999px !important;
	border: 1px solid var(--rp-border) !important;
	background: rgba(255,255,255,0.03) !important;
	color: #e0e0e0 !important;
	cursor: pointer !important;
}

.rp-station-card.active {
	background: linear-gradient(135deg, #ffffff, #b9b9b9) !important;
	color: #111111 !important;
}

.rp-empty {
	padding: 14px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
	color: var(--rp-muted) !important;
	margin-bottom: 14px !important;
}

.rp-radio-controls {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
}

.rp-mini-btn {
	width: 52px !important;
	height: 52px !important;
	border-radius: 16px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rp-border) !important;
	color: var(--rp-ink) !important;
}

.rp-mini-btn.main {
	background: linear-gradient(135deg, #ffffff, #b3b3b3) !important;
	color: #111111 !important;
}

.rp-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.rp-tags span {
	padding: 10px 14px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rp-border) !important;
	color: #dddddd !important;
}

.rp-extra-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.spotlight-core,
.spotlight-stats,
.spotlight-options,
.wow-grid,
.launch-list {
	display: grid !important;
	gap: 12px !important;
}

.spotlight-main,
.option-tile,
.wow-tile,
.launch-item {
	padding: 16px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
}

.spotlight-tag {
	display: inline-block !important;
	padding: 8px 12px !important;
	border-radius: 999px !important;
	margin-bottom: 10px !important;
	background: rgba(255,255,255,0.07) !important;
	color: #f1f1f1 !important;
	font-size: 12px !important;
}

.spotlight-main h4 {
	margin: 0 0 8px !important;
	color: var(--rp-ink) !important;
	font-size: 22px !important;
}

.spotlight-main p,
.option-tile span,
.wow-tile span {
	margin: 0 !important;
	color: var(--rp-muted) !important;
	line-height: 1.7 !important;
}

.spotlight-stats {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.spotlight-stats > div {
	padding: 14px 12px !important;
	border-radius: 16px !important;
	background: rgba(255,255,255,0.03) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	text-align: center !important;
}

.spotlight-stats strong {
	display: block !important;
	margin-bottom: 4px !important;
	color: var(--rp-ink) !important;
	font-size: 26px !important;
}

.spotlight-stats span {
	color: var(--rp-muted) !important;
	font-size: 12px !important;
}

.option-tile,
.wow-tile {
	display: grid !important;
	grid-template-columns: 40px 1fr !important;
	align-items: start !important;
	gap: 12px !important;
}

.option-tile i,
.wow-tile i {
	width: 40px !important;
	height: 40px !important;
	border-radius: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #ffffff, #bcbcbc) !important;
	color: #111111 !important;
}

.option-tile strong {
	display: block !important;
	margin-bottom: 4px !important;
	color: var(--rp-ink) !important;
}

.wow-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.launch-item strong {
	display: block !important;
	margin-bottom: 4px !important;
	color: var(--rp-ink) !important;
}

.launch-item span {
	color: var(--rp-muted) !important;
	line-height: 1.7 !important;
}

.rp-footer {
	margin-top: 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	background: rgba(16, 16, 16, 0.96) !important;
}

.rp-footer-links {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
}

.rp-footer-links a {
	color: var(--rp-muted) !important;
	text-decoration: none !important;
}

.rp-footer-links a:hover,
.rp-link:hover {
	color: #ffffff !important;
}

.cookie_wrap.rp-cookie {
	position: fixed !important;
	left: 50% !important;
	bottom: 18px !important;
	transform: translateX(-50%) !important;
	width: min(680px, calc(100% - 20px)) !important;
	z-index: 99 !important;
}

.rp-cookie-inner {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 16px 18px !important;
	border-radius: 22px !important;
}

.rp-cookie-inner > i {
	font-size: 20px !important;
	color: #f4f4f4 !important;
}

.rp-cookie-btn {
	min-width: 86px !important;
	min-height: 42px !important;
	border-radius: 14px !important;
	color: #101311 !important;
	font-weight: 700 !important;
}

.clear,
.centered_element {
	display: block !important;
}

.hidden {
	display: none !important;
}

@media (min-width: 1101px) {
	.stats-card,
	.users-card,
	.spotlight-card,
	.radio-card,
	.mood-card,
	.wow-card,
	.launch-card,
	.extras-card {
		background: rgba(22, 22, 22, 0.96) !important;
		border-color: rgba(255,255,255,0.1) !important;
	}

	.stats-card .mini-counter,
	.users-card .rp-user-wall > *,
	.users-card .rp-user-wall .active_intro,
	.users-card .rp-user-wall .active_user,
	.users-card .rp-user-wall .intro_user,
	.users-card .rp-user-wall .acav,
	.spotlight-main,
	.spotlight-stats > div,
	.option-tile,
	.wow-tile,
	.launch-item,
	.mood-card .rp-tags span,
	.radio-card .rp-radio-top,
	.radio-card .rp-station-card,
	.radio-card .rp-empty,
	.extras-card .extra-tile {
		background: rgba(255,255,255,0.025) !important;
		border-color: rgba(255,255,255,0.09) !important;
	}

	.spotlight-tag,
	.mood-card .rp-tags span {
		background: rgba(255,255,255,0.05) !important;
		color: #f1f1f1 !important;
	}

	.option-tile i,
	.wow-tile i,
	.rp-radio-disc {
		background: linear-gradient(135deg, #ffffff, #bdbdbd) !important;
		color: #111111 !important;
	}

	.rp-station-card.active,
	.rp-mini-btn.main {
		background: linear-gradient(135deg, #f3f3f3, #bababa) !important;
		color: #111111 !important;
	}

	.users-card,
	.spotlight-card,
	.mood-card,
	.wow-card,
	.launch-card {
		padding: 28px !important;
	}

	.users-card .rp-block-head,
	.spotlight-card .rp-block-head,
	.mood-card .rp-block-head,
	.wow-card .rp-block-head,
	.launch-card .rp-block-head {
		margin-bottom: 20px !important;
	}
}

@media (max-width: 1100px) {
	.rp-hero-grid,
	.rp-five-sections,
	.rp-extra-grid,
	.rp-counter-grid {
		grid-template-columns: 1fr !important;
	}

	.rp-center-stage { order: 1 !important; }
	.rp-left-side { order: 2 !important; }
	.rp-right-side { order: 3 !important; }

	.stats-card,
	.radio-card,
	.extras-card,
	.users-card,
	.spotlight-card,
	.mood-card,
	.wow-card,
	.launch-card {
		grid-column: span 1 !important;
	}

	.rp-user-wall {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 760px) {
	.rp-header,
	.rp-card-top,
	.rp-footer,
	.rp-cookie-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.rp-row,
	.rp-date-grid,
	.rp-user-wall,
	.rp-hero-panels,
	.wow-grid,
	.spotlight-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.rp-station-row,
	.rp-footer-links {
		flex-wrap: wrap !important;
	}
}

@media (max-width: 520px) {
	.rp-shell {
		width: calc(100% - 16px) !important;
	}

	.rp-tab-list {
		flex-direction: column !important;
	}

	.rp-row,
	.rp-date-grid,
	.rp-user-wall,
	.rp-hero-panels,
	.rp-extra-grid,
	.wow-grid,
	.spotlight-stats {
		grid-template-columns: 1fr !important;
	}

	.rp-station-row,
	.rp-footer-links,
	.rp-tags {
		flex-direction: column !important;
		align-items: stretch !important;
	}
}


/* Chat v11+ form compatibility. Theme-specific input/button classes are retained. */
.boom-v11-box { width: 100%; }
.boom-v11-field { margin-bottom: 14px; }
.boom-v11-box input,
.boom-v11-box select { width: 100%; max-width: 100%; box-sizing: border-box; }
.boom-v11-box button { width: 100%; }
.boom-v11-birth { margin-bottom: 14px; }
.boom-v11-label { margin: 0 0 8px; }
.boom-v11-date { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.boom-v11-recaptcha { margin: 14px 0; }
.boom-v11-terms { margin: 10px 0 0; text-align: center; }
@media (max-width: 420px) {
  .boom-v11-date { gap: 5px; }
}

/* KoolKidsChat Theme — deep teal / rich gold / black, polished crest edition */
:root{
 --rp-bg:#010706;--rp-bg2:#001b1b;--rp-panel:rgba(1,12,12,.92);
 --rp-amber:#d9a52b;--rp-teal:#00a9a5;--rp-olive:#0c7774;
 --rp-clay:#f0c85a;--rp-ink:#fff8dd;--rp-muted:rgba(238,229,190,.72);
 --rp-border:rgba(218,166,48,.42);
}


/* ==========================================================
   EPICTEENCHAT ACADEMY THEME
   Built from the reviewed KoolKidsChat working theme structure.
   ========================================================== */
:root{
    --rp-bg:#020711;
    --rp-bg2:#061226;
    --rp-panel:rgba(2,10,24,.92);
    --rp-amber:#dfe5ec;
    --rp-teal:#d6dde6;
    --rp-olive:#aeb8c4;
    --rp-clay:#8793a1;
    --rp-ink:#f5f8fc;
    --rp-muted:rgba(229,235,243,.72);
    --rp-border:rgba(210,220,232,.30);
}

#login_wrap.rp-wrap{
    background:
      linear-gradient(rgba(0,8,24,.30),rgba(0,8,24,.48)),
      url("epicteenchat_academy_background.png") center top/cover fixed no-repeat !important;
    color:#f5f8fc !important;
}

.rp-bg{background:rgba(0,5,15,.10)!important}
.rp-mesh{opacity:.16!important}
.aura-left,.aura-right,.aura-bottom{
    background:radial-gradient(circle,rgba(0,102,255,.38),transparent 70%)!important;
}

.rp-header,.rp-login-card,.rp-side-card,.rp-block,.rp-footer,.rp-cookie{
    background:linear-gradient(180deg,rgba(3,18,42,.92),rgba(0,6,18,.95))!important;
    border:1px solid rgba(215,224,235,.38)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.rp-login-card{
    border:2px solid #cfd7e2!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.22) inset,
      0 0 24px rgba(0,105,255,.62),
      0 24px 55px rgba(0,0,0,.68)!important;
}

.rp-logo-box.kkc-logo-box{
    width:100%!important;
    min-height:125px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
}
#login_logo{
    display:block!important;
    width:min(100%,520px)!important;
    max-height:185px!important;
    object-fit:contain!important;
    margin:0 auto!important;
    filter:drop-shadow(0 0 12px rgba(0,119,255,.55))!important;
}

.rp-mark,.rp-btn,.rp-tab.active,.rp-cookie-btn{
    background:linear-gradient(180deg,#f8fafc 0%,#9ca8b7 18%,#0a73ff 48%,#003b9f 72%,#dce3eb 100%)!important;
    color:#fff!important;
    border:1px solid #e4e9ef!important;
    box-shadow:0 0 12px rgba(0,112,255,.58),inset 0 1px 0 rgba(255,255,255,.8)!important;
}

.rp-input,.rp-select{
    background:linear-gradient(180deg,#071d39,#031020)!important;
    border:1px solid #aeb9c7!important;
    color:#fff!important;
}
.rp-input:focus,.rp-select:focus{
    border-color:#eef2f6!important;
    box-shadow:0 0 0 2px rgba(220,227,235,.16),0 0 14px rgba(0,112,255,.55)!important;
}

.rp-brand-tag,.rp-badge,.rp-link,.rp-card-top p,.rp-block-head p,
.rp-band-copy p,.rp-terms,.rp-footer,.rp-footer a{
    color:#dce3eb!important;
}

.rp-pill,.rp-lang,.rp-badge{
    background:linear-gradient(180deg,rgba(225,231,238,.12),rgba(5,38,80,.50))!important;
    border-color:rgba(213,222,232,.38)!important;
}

.rp-tab{
    color:#cfd7e1!important;
}
.rp-tab.active{
    color:#fff!important;
}

.rp-shell{
    padding-top:18px!important;
}

/* No green/teal accents: chrome/silver and electric blue only. */
.rp-btn-teal,.rp-btn-amber{
    background:linear-gradient(180deg,#f8fafc 0%,#9ca8b7 18%,#0a73ff 48%,#003b9f 72%,#dce3eb 100%)!important;
}


/* FINAL COLOR LOCK — no green/teal theme accents */
:root{
  --green:#cfd6df!important;
  --teal:#d7dde5!important;
  --mint:#edf1f5!important;
  --success:#cfd6df!important;
}
.green,.teal,.mint,.success,
.text-green,.text-teal,.text-success,
.bg-green,.bg-teal,.bg-success,
.border-green,.border-teal,.border-success,
.rp-btn-teal,.rp-btn-amber,
.rp-accent,.rp-highlight{
  color:#f5f7fa!important;
  border-color:#cfd6df!important;
}
.bg-green,.bg-teal,.bg-success,
.rp-btn-teal,.rp-btn-amber,.rp-accent,.rp-highlight{
  background:linear-gradient(180deg,#f7f9fb 0%,#cfd6df 24%,#8f9aa8 52%,#dce2e9 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 12px rgba(205,215,226,.32)!important;
}