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

/* ════════════════════════════════════════════════════════════
   1. CSS VÁLTOZÓK – teljes rock paletta
════════════════════════════════════════════════════════════ */
:root {
	/* Háttérszínek – sötét barna-fekete */
	--bg-primary:   #0e0600;
	--bg-secondary: #1a0900;
	--bg-tertiary:  #261000;
	--bg-elevated:  #321500;

	/* Keretek – rozsdás narancs */
	--border-color:  #3d1a08;
	--border-accent: #5c2a10;

	/* Szöveg – meleg fehér/krém */
	--text-primary:   #f0e6d8;
	--text-secondary: #c8a882;
	--text-muted:     #7a5535;

	/* Akcentek – tűz, izzó fém */
	--accent-color:     #ff7a2a;
	--accent-primary:   #dc3c14;
	--accent-secondary: #ff6b00;
	--accent-pink:      #ff4500;
	--accent-gradient:  linear-gradient(135deg, #dc3c14 0%, #ff8c00 100%);
	--accent-gradient-r: linear-gradient(135deg, #ff8c00 0%, #dc3c14 100%);

	/* Státuszok – megtartva de melegebb árnyalatban */
	--success: #4ade80;
	--warning: #fbbf24;
	--danger:  #ef4444;

	/* Tipográfia – rock */
	--font-body:              'Barlow', -apple-system, sans-serif;
	--font-display:           'Oswald', sans-serif;
	--font-display-condensed: 'Bebas Neue', 'Oswald', sans-serif;
	--font-ui:                'Barlow', sans-serif;
}

/* ════════════════════════════════════════════════════════════
   2. BODY – sötét szikla háttér, izzó atmoszféra
════════════════════════════════════════════════════════════ */
body {
	background: var(--bg-primary);
	font-family: var(--font-body);
}

/* Háttér atmoszféra – tűz alulról, sötét felülről */
body::before {
	background:
		radial-gradient(ellipse at top,    rgba(30, 10, 0, 0.95) 0%, transparent 60%),
		radial-gradient(ellipse at bottom, rgba(220, 60, 20, 0.18) 0%, transparent 65%),
		radial-gradient(ellipse at 80% 50%, rgba(255, 100, 0, 0.08) 0%, transparent 50%);
	animation: rockAtmos 8s ease-in-out infinite;
}

@keyframes rockAtmos {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.85; }
}

/* Lebegő részecskék – izzó szikrák */
.particle {
	background: #ff6b00;
	border-radius: 2px;
	transform: rotate(45deg);
	opacity: 0.2;
}

/* ════════════════════════════════════════════════════════════
   3. SIDEBAR – sötét acél, rozsdás szegély
════════════════════════════════════════════════════════════ */
.sidebar {
	background: #1d0a01;
	border-right: 1px solid var(--border-color);
	box-shadow: 5px 0 30px rgba(0, 0, 0, 0.7),
	            inset -1px 0 0 rgba(220, 60, 20, 0.08);
}

/* Logo – rock felirat */
.sidebar-logo h2 {
	font-family: 'Bebas Neue', 'Oswald', sans-serif;
	font-size: 2.2rem;
	letter-spacing: .08em;
	background: linear-gradient(135deg, #ff8c00, #dc3c14, #ff4500);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: rockGlow 3s ease-in-out infinite;
}

@keyframes rockGlow {
	0%, 100% { filter: brightness(1); }
	50%       { filter: brightness(1.25); }
}

/* Menü linkek */
.sidebar-menu a {
	color: var(--text-muted);
	border-radius: 6px;
	letter-spacing: .03em;
}

.sidebar-menu a::before {
	background: var(--accent-gradient);
	width: 3px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
	background: rgba(220, 60, 20, 0.12);
	color: var(--text-primary);
	transform: translateX(4px);
}

/* Sidebar toggle */
.sidebar-toggle {
	background: var(--accent-gradient);
	box-shadow: 0 4px 16px rgba(220, 60, 20, 0.5);
}

.sidebar-toggle:hover {
	box-shadow: 0 6px 24px rgba(220, 60, 20, 0.7);
}

/* ════════════════════════════════════════════════════════════
   4. TOP HEADER
════════════════════════════════════════════════════════════ */
.top-header {
	background: linear-gradient(135deg, rgba(26, 9, 0, 0.9) 0%, rgba(38, 16, 0, 0.9) 100%);
	border-color: rgba(220, 60, 20, 0.25);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5),
	            0 0 0 1px rgba(220, 60, 20, 0.06);
}

/* User avatar – izzó gyűrű */
.user-avatar {
	background: var(--accent-gradient);
}

@keyframes avatarPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220, 60, 20, 0.7); }
	50%       { box-shadow: 0 0 0 10px rgba(220, 60, 20, 0); }
}

.header-btn {
	background: rgba(220, 60, 20, 0.08);
	border-color: rgba(220, 60, 20, 0.22);
}

.header-btn:hover {
	background: var(--accent-gradient);
	box-shadow: 0 5px 18px rgba(220, 60, 20, 0.4);
}

/* Guest header */
.top-header.guest-header {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.1) 0%, rgba(255, 100, 0, 0.08) 100%);
	border-color: rgba(220, 60, 20, 0.3);
}

.guest-icon {
	background: var(--accent-gradient);
	box-shadow: 0 8px 24px rgba(220, 60, 20, 0.4);
}

.login-btn {
	background: var(--accent-gradient);
	box-shadow: 0 8px 24px rgba(220, 60, 20, 0.4);
}

.login-btn:hover {
	box-shadow: 0 12px 30px rgba(220, 60, 20, 0.55);
}

/* ════════════════════════════════════════════════════════════
   5. KÁRTYÁK – sötét acél felszín, tűz shimmer
════════════════════════════════════════════════════════════ */
.card {
	background: linear-gradient(135deg, rgba(26, 9, 0, 0.75) 0%, rgba(38, 16, 0, 0.7) 100%);
	border-color: var(--border-color);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.card::before {
	background: radial-gradient(circle, rgba(220, 60, 20, 0.12) 0%, transparent 70%);
}

.card:hover {
	box-shadow: 0 12px 40px rgba(220, 60, 20, 0.25);
	border-color: var(--accent-primary);
}

.card-header {
	border-bottom-color: var(--border-color);
}

.card-title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.3rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   6. MODÁLOK
════════════════════════════════════════════════════════════ */
.modal-content {
	background: #150800;
	border-color: rgba(220, 60, 20, 0.25);
}

.modal-header {
	border-bottom-color: rgba(220, 60, 20, 0.18);
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.08) 0%, rgba(255, 100, 0, 0.05) 100%);
}

.modal-title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.2rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.modal-footer {
	border-top-color: rgba(220, 60, 20, 0.15);
}

/* ════════════════════════════════════════════════════════════
   7. FORM ELEMEK
════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
	background: rgba(14, 6, 0, 0.9);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
	background: rgba(26, 9, 0, 0.95);
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px rgba(220, 60, 20, 0.18);
}

/* ════════════════════════════════════════════════════════════
   8. ACCORDION
════════════════════════════════════════════════════════════ */
.accordion-button {
	background: linear-gradient(135deg, rgba(26, 9, 0, 0.8) 0%, rgba(38, 16, 0, 0.8) 100%);
	color: var(--text-primary);
	font-family: 'Oswald', sans-serif;
	letter-spacing: .04em;
}

.accordion-button:not(.collapsed) {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.18) 0%, rgba(255, 100, 0, 0.1) 100%);
}

.accordion-item {
	border-color: var(--border-color);
}

.accordion-body {
	background: rgba(14, 6, 0, 0.6);
}

/* ════════════════════════════════════════════════════════════
   9. TOGGLE KAPCSOLÓ
════════════════════════════════════════════════════════════ */
.toggle-track {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--border-color);
}

.toggle input:checked + .toggle-track {
	background: rgba(220, 60, 20, 0.28);
	border-color: var(--accent-primary);
}

.toggle input:checked + .toggle-track::after {
	background: var(--accent-primary);
}

/* ════════════════════════════════════════════════════════════
   10. ÉRTESÍTÉS POPOVER
════════════════════════════════════════════════════════════ */
.popover.notif-popover {
	--bs-popover-bg: rgba(20, 8, 0, 0.97);
	--bs-popover-border-color: rgba(220, 60, 20, 0.25);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(220, 60, 20, 0.08);
}

.notification-popover-header {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.16) 0%, rgba(255, 100, 0, 0.12) 100%);
}

.notification-popover-title i {
	color: #ff8c00;
}

.notification-empty-icon {
	background: rgba(220, 60, 20, 0.12);
	color: #ff8c00;
}

/* ════════════════════════════════════════════════════════════
   11. STAT WIDGETEK
════════════════════════════════════════════════════════════ */
.stat-badge {
	background: linear-gradient(135deg, #dc3c14, #c43310);
	box-shadow: 0 8px 20px rgba(220, 60, 20, 0.3);
}

.stat-badge-danger {
	background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-badge-warning {
	background: linear-gradient(135deg, #ff8c00, #dc6b00);
	box-shadow: 0 8px 20px rgba(255, 140, 0, 0.25);
}

.stat-badge-alt {
	background: linear-gradient(135deg, #ff4500, #dc3000);
	box-shadow: 0 8px 20px rgba(255, 69, 0, 0.25);
}

.stat-label i {
	color: #ff7a2a;
}

/* ════════════════════════════════════════════════════════════
   12. ÚJRAFELHASZNÁLHATÓ KOMPONENSEK FELÜLÍRÁSA
════════════════════════════════════════════════════════════ */

/* Page hero háttér */
.page-hero::before {
	background:
		radial-gradient(ellipse 80% 60% at 50% -10%, rgba(220, 60, 20, 0.2) 0%, transparent 70%),
		radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255, 100, 0, 0.12) 0%, transparent 60%);
}

/* Hero h1 gradiens szín */
.page-hero h1 span,
.page-hero h1 em,
.text-gradient {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Eyebrow pill */
.page-eyebrow {
	border-color: rgba(220, 60, 20, 0.3);
	background: rgba(220, 60, 20, 0.08);
	color: #ff8c00;
}

.page-eyebrow-pink {
	border-color: rgba(255, 69, 0, 0.28);
	background: rgba(255, 69, 0, 0.07);
	color: #ff6b00;
}

/* Soundwave */
.soundwave span {
	background: linear-gradient(180deg, #ff6b00, #dc3c14);
}

/* Stats bar */
.psb-num {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Live badge */
.live-badge {
	background: rgba(220, 60, 20, 0.2);
	border-color: rgba(220, 60, 20, 0.4);
	color: #ff8c00;
}

.live-badge::before {
	background: var(--accent-primary);
}

/* Gradiens gombok */
.btn-gradient {
	background: var(--accent-gradient);
	box-shadow: 0 6px 20px rgba(220, 60, 20, 0.35);
}

.btn-gradient:hover {
	box-shadow: 0 10px 28px rgba(220, 60, 20, 0.5);
}

.btn-gradient-pink {
	background: linear-gradient(135deg, #ff4500, #dc3c14);
	box-shadow: 0 6px 20px rgba(255, 69, 0, 0.32);
}

/* Top bar gradiens csík */
.top-bar-gradient {
	background: linear-gradient(90deg, #dc3c14, #ff8c00, #ff4500);
}

/* Section divider */
.section-divider::after {
	background: linear-gradient(90deg, var(--border-color), transparent);
}

/* Card-in animáció – kicsit más */
@keyframes cardIn {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   13. SCROLLBAR – rozsdás
════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
	background: #5c2a10;
}

::-webkit-scrollbar-thumb:hover {
	background: #dc3c14;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

/* ════════════════════════════════════════════════════════════
   14. ÚJSÁGCIKK / HÍREK
════════════════════════════════════════════════════════════ */
.news-item {
	border-left-color: var(--accent-primary);
	background: rgba(26, 9, 0, 0.5);
}

.news-item:hover {
	background: rgba(38, 16, 0, 0.7);
}

/* ════════════════════════════════════════════════════════════
   15. TOAST
════════════════════════════════════════════════════════════ */
#toast-wrapper .toast {
	background: rgba(20, 8, 0, 0.92);
}

/* ════════════════════════════════════════════════════════════
   16. BOOTSTRAP OVERRIDES
════════════════════════════════════════════════════════════ */
.btn-primary {
	background: var(--accent-gradient) !important;
	border-color: transparent !important;
	color: #fff !important;
	font-family: 'Oswald', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.btn-primary:hover {
	filter: brightness(1.15);
	box-shadow: 0 4px 16px rgba(220, 60, 20, 0.4) !important;
}

.btn-secondary {
	background: rgba(220, 60, 20, 0.1) !important;
	border-color: rgba(220, 60, 20, 0.28) !important;
	color: #ff8c00 !important;
}

.btn-secondary:hover {
	background: rgba(220, 60, 20, 0.2) !important;
	border-color: rgba(220, 60, 20, 0.5) !important;
}

.btn-success {
	background: linear-gradient(135deg, #4ade80, #16a34a) !important;
	border-color: transparent !important;
}

.btn-danger {
	background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
	border-color: transparent !important;
}

.btn-info, .btn-outline-secondary {
	border-color: rgba(220, 60, 20, 0.3) !important;
	color: #ff8c00 !important;
}

.btn-outline-secondary:hover {
	background: rgba(220, 60, 20, 0.12) !important;
}

/* Badge-ek */
.badge.badge-primary, .badge.bg-primary {
	background: var(--accent-gradient) !important;
}

.badge.badge-secondary, .badge.bg-secondary {
	background: rgba(220, 60, 20, 0.18) !important;
	color: #ff8c00 !important;
	border: 1px solid rgba(220, 60, 20, 0.3) !important;
}

/* Nav pills */
.nav-pills .nav-link.active {
	background: var(--accent-gradient) !important;
}

/* Táblázatok */
.table {
	color: var(--text-primary) !important;
	border-color: var(--border-color) !important;
}

.table th, .table td {
	border-color: rgba(61, 26, 8, 0.5) !important;
}

/* Progress bar */
.progress {
	background: rgba(220, 60, 20, 0.12) !important;
}

.progress-bar {
	background: var(--accent-gradient) !important;
}

/* ════════════════════════════════════════════════════════════
   17. CHAT / SHOUTBOX SPECIFIKUS FELÜLÍRÁSOK
════════════════════════════════════════════════════════════ */
#chat_input_box {
	border-bottom-color: rgba(220, 60, 20, 0.4);
}

.chat-guest-prompt {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.08) 0%, rgba(255, 100, 0, 0.06) 100%);
	border-color: rgba(220, 60, 20, 0.25);
}

.chat-guest-prompt i {
	color: var(--accent-primary);
}

.chat-guest-prompt a {
	color: #ff8c00;
}

.chat-settings-btn:hover {
	color: var(--accent-primary);
}

/* Chat settings modal */
#chatSettingsModal .modal-header {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.1) 0%, rgba(255, 100, 0, 0.06) 100%);
}

/* ════════════════════════════════════════════════════════════
   18. MY PAGE (profil szerkesztés) FELÜLÍRÁSOK
════════════════════════════════════════════════════════════ */
.my-page-hero h1 {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.my-section {
	background: linear-gradient(135deg, rgba(26, 9, 0, 0.65) 0%, rgba(38, 16, 0, 0.6) 100%);
	border-color: var(--border-color);
}

.my-section:focus-within {
	border-color: rgba(220, 60, 20, 0.4);
}

.my-section-header {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.07) 0%, rgba(255, 100, 0, 0.04) 100%);
	border-bottom-color: var(--border-color);
}

.my-section-icon {
	background: rgba(220, 60, 20, 0.12);
	border-color: rgba(220, 60, 20, 0.22);
	color: #ff8c00;
}

.my-section-title {
	color: var(--text-primary);
}

.my-btn-primary {
	background: var(--accent-gradient);
	box-shadow: 0 4px 14px rgba(220, 60, 20, 0.35);
}

.my-btn-primary:hover {
	box-shadow: 0 8px 20px rgba(220, 60, 20, 0.5);
}

.my-section-footer {
	background: rgba(0, 0, 0, 0.2);
	border-top-color: var(--border-color);
}

.my-danger-zone {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.07) 0%, rgba(220, 38, 38, 0.04) 100%);
	border-color: rgba(239, 68, 68, 0.22);
}

/* ════════════════════════════════════════════════════════════
   19. SCHEDULE OLDAL FELÜLÍRÁSOK
════════════════════════════════════════════════════════════ */
.day-btn.active {
	background: var(--accent-gradient);
	box-shadow: 0 4px 14px rgba(220, 60, 20, 0.4);
}

.day-btn.today:not(.active) {
	border-color: rgba(220, 60, 20, 0.35);
	color: #ff8c00;
}

.day-heading {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.12) 0%, rgba(255, 100, 0, 0.08) 100%);
	border-color: rgba(220, 60, 20, 0.22);
}

.schedule-slot.has-show::before {
	background: var(--accent-gradient);
}

.schedule-slot.has-show:hover {
	border-color: rgba(220, 60, 20, 0.35);
	box-shadow: 0 4px 20px rgba(220, 60, 20, 0.12);
}

.schedule-slot.is-now {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.14) 0%, rgba(255, 100, 0, 0.08) 100%);
	border-color: rgba(220, 60, 20, 0.35);
}

.schedule-slot.is-now::before {
	background: linear-gradient(180deg, #ff4500, #dc3c14);
}

.live-badge {
	background: rgba(220, 60, 20, 0.2);
	border-color: rgba(220, 60, 20, 0.4);
	color: #ff8c00;
}

.live-badge::before {
	background: #dc3c14;
}

.slot-dj a:hover {
	color: #ff8c00;
}

/* ════════════════════════════════════════════════════════════
   20. RADIO PRESENTERS FELÜLÍRÁSOK
════════════════════════════════════════════════════════════ */
.rp-card:hover {
	border-color: rgba(220, 60, 20, 0.38);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(220, 60, 20, 0.12);
}

.rp-card-top-bar {
	background: linear-gradient(90deg, #dc3c14, #ff8c00, #ff4500);
}

.rp-hero-eyebrow {
	border-color: rgba(220, 60, 20, 0.28);
	background: rgba(220, 60, 20, 0.08);
	color: #ff8c00;
}

.rp-hero-eyebrow::before {
	background: #ff8c00;
}

.rp-hero h1 em {
	background: linear-gradient(100deg, #ff6b00 0%, #dc3c14 50%, #ff4500 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rp-soundwave span {
	background: linear-gradient(180deg, #ff6b00, #dc3c14);
}

.rp-apply-btn {
	background: linear-gradient(135deg, #dc3c14, #ff8c00);
	box-shadow: 0 8px 28px rgba(220, 60, 20, 0.38);
}

.rp-apply-btn:hover {
	box-shadow: 0 14px 36px rgba(220, 60, 20, 0.52);
}

.rp-stat-num {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rp-rank-badge {
	background: linear-gradient(135deg, #dc3c14, #ff8c00);
}

.rp-rank-label::before {
	background: #ff6b00;
}

.rp-card-bio-label::before {
	background: linear-gradient(90deg, #ff6b00, transparent);
}

.rp-card-username a:hover { color: #ff8c00; }

.rp-profile-btn {
	border-color: rgba(220, 60, 20, 0.25);
	color: #ff8c00;
	background: rgba(220, 60, 20, 0.07);
}

.rp-profile-btn:hover {
	background: rgba(220, 60, 20, 0.15);
	border-color: rgba(220, 60, 20, 0.48);
	color: #ffaa50;
}

/* RP Modal */
#questionModal .modal-header {
	background: linear-gradient(135deg, rgba(220, 60, 20, 0.1), rgba(255, 100, 0, 0.07));
}

#questionModal .modal-title {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.q-num {
	background: linear-gradient(135deg, #dc3c14, #ff8c00);
}

.modal-send-btn {
	background: linear-gradient(135deg, #dc3c14, #ff8c00);
	box-shadow: 0 6px 20px rgba(220, 60, 20, 0.35);
}

.modal-send-btn:hover {
	box-shadow: 0 10px 28px rgba(220, 60, 20, 0.5);
}

/* ════════════════════════════════════════════════════════════
   21. LINK OSZTÁLYOK (rang színek) – megtartva de warm tint
════════════════════════════════════════════════════════════ */
a {
	color: #ff8c00;
}

a:hover {
	color: #ffaa50;
}

.altlink {
	color: #ff8c00;
}

/* ════════════════════════════════════════════════════════════
   23. FOOTER
════════════════════════════════════════════════════════════ */
footer {
	color: var(--text-muted);
	border-top: 1px solid rgba(220, 60, 20, 0.12);
}

footer a {
	color: #ff8c00;
}

footer b {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Oswald', sans-serif;
	letter-spacing: .06em;
}

/*
RadioPlayer */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=DM+Sans:wght@300;400;500&display=swap');
 
.rp-shell {
	position:relative;
	background:linear-gradient(135deg,#1a0a00 0%,#0d0500 100%);
	border:1px solid rgba(220,60,20,.28);
	border-radius:18px;
	overflow:hidden;
	font-family:'DM Sans',sans-serif;
	color:#e8eaed;
	max-width:640px;
	margin:0 auto 1.5rem;
}
 
.rp-shell::before {
	content:'';position:absolute;top:-70px;left:-70px;
	width:220px;height:220px;
	background:radial-gradient(circle,rgba(220,60,20,.12) 0%,transparent 70%);
	pointer-events:none;z-index:0;
}
.rp-shell::after {
	content:'';position:absolute;bottom:-55px;right:-55px;
	width:200px;height:200px;
	background:radial-gradient(circle,rgba(255,140,0,.08) 0%,transparent 70%);
	pointer-events:none;z-index:0;
}
 
/* Top bar */
.rp-top-bar {
	height:3px;
	background:linear-gradient(90deg,rgba(220,60,20,.22),rgba(255,140,0,.18),rgba(220,60,20,.22));
	position:relative;overflow:hidden;
}
.rp-top-bar::after {
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg,#dc3c14,#ff8c00,#ff4500,#dc3c14);
	background-size:300% 100%;opacity:0;transition:opacity .4s;
}
.rp-shell.buffering .rp-top-bar::after {
	opacity:1;animation:rp-topbar 1.4s linear infinite;
}
@keyframes rp-topbar{0%{background-position:0%}100%{background-position:200%}}
 
/* Info sáv */
.rp-info-bar {
	padding:4px 16px;font-size:11px;font-weight:500;letter-spacing:.05em;
	color:#7a5040;min-height:20px;
	background:rgba(0,0,0,.35);
	border-bottom:1px solid rgba(220,60,20,.12);
	text-align:center;
}
 
/* Fő sor */
.rp-main {
	display:flex;align-items:center;gap:12px;
	padding:13px 15px;position:relative;z-index:1;
}
 
/* Play gomb + loading spinner */
.rp-play-btn {
	flex-shrink:0;width:50px;height:50px;border-radius:50%;
	background:linear-gradient(135deg,#dc3c14,#ff6b00);
	border:none;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:transform .2s,box-shadow .2s;
	position:relative;
}
.rp-play-btn:hover{transform:scale(1.07);box-shadow:0 0 20px rgba(220,60,20,.55);}
.rp-play-btn:active{transform:scale(.96);}
.rp-play-icon{width:18px;height:18px;fill:#fff;position:relative;z-index:1;transition:opacity .15s;}
.rp-spinner-ring {
	position:absolute;inset:0;border-radius:50%;
	display:none;
}
.rp-shell.loading .rp-spinner-ring{display:block;}
.rp-shell.loading .rp-play-icon{opacity:.3;}
.rp-spinner-ring svg{position:absolute;inset:0;width:100%;height:100%;}
.rp-spinner-arc {
	fill:none;stroke:#ffffff;stroke-width:2.5;stroke-linecap:round;
	stroke-dasharray:28 72;
	animation:rp-spin .85s linear infinite;
	transform-origin:center;
}
@keyframes rp-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
 
/* Soundwave – 10 sáv, alulról nő */
.rp-waves {
	display:flex;align-items:flex-end;gap:2.5px;
	height:30px;flex-shrink:0;padding-bottom:2px;
}
.rp-waves span {
	display:block;width:2.5px;border-radius:99px;
	background:linear-gradient(180deg,#ff6b00,#dc3c14);
	opacity:.18;transform-origin:bottom center;
}
.rp-waves.playing span {
	opacity:.72;
	animation:rp-wave var(--rp-d,1.2s) ease-in-out infinite;
}
.rp-waves span:nth-child(1) {height:8px; --rp-d:1.00s}
.rp-waves span:nth-child(2) {height:18px;--rp-d:1.30s;animation-delay:.10s}
.rp-waves span:nth-child(3) {height:26px;--rp-d:0.90s;animation-delay:.18s}
.rp-waves span:nth-child(4) {height:14px;--rp-d:1.20s;animation-delay:.12s}
.rp-waves span:nth-child(5) {height:22px;--rp-d:1.10s;animation-delay:.22s}
.rp-waves span:nth-child(6) {height:10px;--rp-d:1.40s;animation-delay:.05s}
.rp-waves span:nth-child(7) {height:28px;--rp-d:1.00s;animation-delay:.28s}
.rp-waves span:nth-child(8) {height:16px;--rp-d:1.20s;animation-delay:.16s}
.rp-waves span:nth-child(9) {height:20px;--rp-d:0.95s;animation-delay:.08s}
.rp-waves span:nth-child(10){height:12px;--rp-d:1.35s;animation-delay:.24s}
@keyframes rp-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.2)}}
 
/* Meta */
.rp-meta{flex:1;min-width:0;}
.rp-station-row{display:flex;align-items:center;gap:7px;margin-bottom:2px;}
 
/* Avatar */
.rp-avatar {
	width:42px;height:42px;border-radius:50%;
	background:rgba(220,60,20,.1);
	border:1.5px solid rgba(220,60,20,.3);
	overflow:hidden;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:border-color .25s,box-shadow .25s;
}
.rp-avatar:hover{border-color:rgba(220,60,20,.7);box-shadow:0 0 10px rgba(220,60,20,.35);}
.rp-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.rp-av-autodj{width:22px;height:22px;opacity:.55;display:block;}
.rp-av-dj    {width:19px;height:19px;opacity:.4; display:block;}
.rp-shell.playing .rp-av-autodj{animation:rp-spin 4s linear infinite;}
 
/* DJ neve */
.rp-dj-name {
	font-family:'Syne',sans-serif;
	font-size:14px;font-weight:700;
	color:#f5d0b0;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	flex:1;min-width:0;
	font-family:'Oswald',sans-serif;letter-spacing:.04em;text-transform:uppercase;
}
 
/* Live pont */
.rp-live-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;flex-shrink:0;display:none;}
.rp-live-dot.on{display:block;animation:rp-blink 1.3s ease-in-out infinite;}
@keyframes rp-blink{0%,100%{opacity:1}50%{opacity:.25}}
 
/* "Most szól" sor */
.rp-song-text{font-size:11.5px;color:#7a5040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0;}
.rp-song-text span{color:#c8906a;font-weight:500;}
 
/* Jobb oldal */
.rp-right{flex-shrink:0;display:flex;align-items:center;gap:7px;}
 
.rp-badge {
	padding:2px 8px;border-radius:999px;
	font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	border:1px solid rgba(220,60,20,.3);background:rgba(220,60,20,.1);color:#ff8060;
	white-space:nowrap;
}
.rp-badge.live{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.12);color:#ff9090;}
 
.rp-expand-btn{
	width:26px;height:26px;border-radius:7px;
	background:rgba(220,60,20,.07);border:1px solid rgba(220,60,20,.18);
	cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:background .2s,border-color .2s;flex-shrink:0;
}
.rp-expand-btn:hover{background:rgba(220,60,20,.18);border-color:rgba(220,60,20,.4);}
.rp-expand-btn svg{width:13px;height:13px;fill:none;stroke:#6b7280;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
 
/* Hangerő */
.rp-vol-wrap{display:flex;align-items:center;gap:6px;}
.rp-vol-icon{flex-shrink:0;cursor:pointer;opacity:.45;transition:opacity .2s;width:15px;height:15px;}
.rp-vol-icon:hover{opacity:1;}
.rp-vol-icon svg{width:15px;height:15px;display:block;fill:none;stroke:#b4b9c5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rp-vol-track{width:62px;height:3.5px;background:rgba(255,255,255,.07);border-radius:99px;position:relative;cursor:pointer;touch-action:none;}
.rp-vol-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#dc3c14,#ff8c00);pointer-events:none;}
.rp-vol-thumb{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;border:2px solid #dc3c14;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 5px rgba(220,60,20,.4);}
 
/* ═══ EXPANDED OVERLAY ═══ */
.rp-expanded-overlay {
	position:fixed;inset:0;
	background:rgba(10,2,0,.9);
	backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	z-index:9000;
	display:flex;align-items:center;justify-content:center;padding:1.5rem;
	opacity:0;pointer-events:none;transition:opacity .3s;
}
.rp-expanded-overlay.open{opacity:1;pointer-events:all;}
 
.rp-expanded-card {
	background:linear-gradient(160deg,#150800 0%,#0a0300 100%);
	border:1px solid rgba(220,60,20,.22);
	border-radius:26px;width:100%;max-width:440px;max-height:88vh;
	overflow:hidden;display:flex;flex-direction:column;
	transform:translateY(28px) scale(.97);
	transition:transform .35s cubic-bezier(.22,.68,0,1.2);
}
.rp-expanded-overlay.open .rp-expanded-card{transform:translateY(0) scale(1);}
 
.rp-ex-top-bar{
	height:3px;flex-shrink:0;position:relative;overflow:hidden;
	background:linear-gradient(90deg,rgba(220,60,20,.22),rgba(255,140,0,.18),rgba(220,60,20,.22));
}
.rp-ex-top-bar::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg,#dc3c14,#ff8c00,#ff4500,#dc3c14);
	background-size:300% 100%;opacity:0;transition:opacity .4s;
}
.rp-shell.buffering ~ .rp-expanded-overlay .rp-ex-top-bar::after,
.rp-ex-top-bar.buf::after{opacity:1;animation:rp-topbar 1.4s linear infinite;}
 
.rp-ex-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:.85rem 1.3rem .55rem;flex-shrink:0;
}
.rp-ex-header-title{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;}
.rp-ex-close-btn{
	width:26px;height:26px;border-radius:50%;
	background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
	cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.rp-ex-close-btn:hover{background:rgba(99,102,241,.2);}
.rp-ex-close-btn svg{width:11px;height:11px;fill:none;stroke:#b4b9c5;stroke-width:2.5;stroke-linecap:round;}
 
/* Artwork */
.rp-ex-art {
	width:148px;height:148px;border-radius:16px;
	margin:0 auto .75rem;
	background:rgba(220,60,20,.08);
	border:2px solid rgba(220,60,20,.2);
	overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;position:relative;
}
.rp-ex-art img{width:100%;height:100%;object-fit:cover;display:block;}
.rp-ex-art-autodj{width:52px;height:52px;opacity:.4;}
.rp-ex-art-dj    {width:52px;height:52px;opacity:.28;}
.rp-ex-live-badge{
	position:absolute;top:7px;right:7px;
	padding:2px 7px;border-radius:999px;
	font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
	background:rgba(239,68,68,.85);color:#fff;display:none;
}
.rp-ex-live-badge.on{display:block;}
 
.rp-ex-meta{text-align:center;padding:0 1.3rem .45rem;flex-shrink:0;}
.rp-ex-dj{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;color:#e8eaed;margin-bottom:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp-ex-song{font-size:.84rem;color:#b4b9c5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem;}
.rp-ex-stats{display:flex;justify-content:center;gap:12px;font-size:11px;color:#4a5060;}
.rp-ex-stats b{color:#8b92a3;font-weight:500;}
 
.rp-ex-controls{display:flex;align-items:center;justify-content:center;padding:.65rem 1.3rem;flex-shrink:0;}
.rp-ex-play-btn{
	width:56px;height:56px;border-radius:50%;
	background:linear-gradient(135deg,#dc3c14,#ff6b00);
	border:none;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:transform .2s,box-shadow .2s;
	box-shadow:0 4px 16px rgba(220,60,20,.35);position:relative;
}
.rp-ex-play-btn:hover{transform:scale(1.06);box-shadow:0 7px 24px rgba(220,60,20,.52);}
.rp-ex-play-icon{width:22px;height:22px;fill:#fff;position:relative;z-index:1;transition:opacity .15s;}
.rp-ex-spinner-ring{position:absolute;inset:0;border-radius:50%;display:none;}
.rp-shell.loading ~ .rp-expanded-overlay .rp-ex-spinner-ring{display:block;}
.rp-shell.loading ~ .rp-expanded-overlay .rp-ex-play-icon{opacity:.3;}
.rp-ex-spinner-ring svg{position:absolute;inset:0;width:100%;height:100%;}
 
.rp-ex-vol{display:flex;align-items:center;gap:9px;padding:0 1.3rem .45rem;flex-shrink:0;}
.rp-ex-vol-icon{flex-shrink:0;width:15px;height:15px;opacity:.38;}
.rp-ex-vol-icon svg{width:15px;height:15px;fill:none;stroke:#8b92a3;stroke-width:1.8;stroke-linecap:round;}
.rp-ex-vol-track{flex:1;height:3.5px;background:rgba(255,255,255,.07);border-radius:99px;position:relative;cursor:pointer;touch-action:none;}
.rp-ex-vol-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#dc3c14,#ff8c00);pointer-events:none;}
.rp-ex-vol-thumb{position:absolute;top:50%;width:13px;height:13px;background:#fff;border-radius:50%;border:2px solid #dc3c14;transform:translate(-50%,-50%);pointer-events:none;}
 
/* Előzmények */
.rp-ex-history-wrap{flex:1;overflow-y:auto;min-height:0;border-top:1px solid rgba(255,255,255,.05);scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.22) transparent;}
.rp-ex-history-label{
	padding:.65rem 1.3rem .3rem;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:#6b7280;display:flex;align-items:center;gap:.5rem;
	position:sticky;top:0;background:rgba(10,12,28,.96);z-index:1;
}
.rp-ex-history-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(220,60,20,.2),transparent);}
#rp-history-list{padding:0 .9rem .8rem;}
.rp-history-item{display:flex;align-items:center;gap:10px;padding:.48rem .4rem;border-radius:9px;transition:background .15s;}
.rp-history-item:hover{background:rgba(255,255,255,.04);}
.rp-history-num{font-size:11px;color:#2a2f45;font-weight:600;min-width:16px;text-align:right;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:4px;}
.rp-history-item.current .rp-h-num-text{display:none;}
.rp-history-dot{width:6px;height:6px;border-radius:50%;background:#dc3c14;display:none;flex-shrink:0;animation:rp-blink 1.3s ease-in-out infinite;}
.rp-history-item.current .rp-history-dot{display:block;}
.rp-history-info{flex:1;min-width:0;}
.rp-history-title{font-size:.86rem;font-weight:600;color:#e8eaed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp-history-item.current .rp-history-title{background:linear-gradient(90deg,#ff6b00,#ff4500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.rp-history-time{font-size:.7rem;color:#6b7280;margin-top:1px;}
.rp-history-empty{text-align:center;padding:1.4rem;font-size:.8rem;color:#2a2f45;}
 
/* Responsive mobil */
@media(max-width:440px){
	.rp-vol-wrap,.rp-waves{display:none;}
	.rp-main{flex-wrap:wrap;row-gap:8px;}
	.rp-meta{order:2;width:100%;}
	.rp-right{order:1;margin-left:auto;}
	.rp-play-btn{width:44px;height:44px;}
}