@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%, #0f0f0f 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; }
}