/* ============================================================
   VOTEMYLOVE.COM - Neon Dark Theme
   Reines Optik-Update. Keine Funktionen/Strukturen veraendert.
   Ueberschreibt zentral alle Farben/Hintergrundbilder der alten
   Tabellen-Layouts per CSS - die PHP-Dateien bleiben unberuehrt.
   ============================================================ */

:root {
	--bg-deep:    #05010f;
	--bg-panel:   #120a24;
	--bg-panel2:  #1a0e33;
	--neon-pink:  #ff2fd0;
	--neon-cyan:  #00eaff;
	--neon-gold:  #ffd23f;
	--neon-purple:#8a2be2;
	--text-light: #eef0ff;
}

/* ---------- Grundfarbe der Seite ---------- */
body {
	background-color: var(--bg-deep) !important;
	background-image:
		radial-gradient(circle at 15% 10%, rgba(255,47,208,0.12), transparent 40%),
		radial-gradient(circle at 85% 90%, rgba(0,234,255,0.10), transparent 40%);
	background-attachment: fixed;
}

/* ---------- Alle bgcolor="..." Attribute im HTML ueberschreiben ---------- */
[bgcolor="#FF0000"],
[bgcolor="#B30000"],
[bgcolor="#990000"] {
	background-color: var(--bg-panel) !important;
	background-image: none !important;
}

[bgcolor="#FF9900"] {
	background-color: var(--bg-panel2) !important;
	background-image: none !important;
	box-shadow: inset 0 0 12px rgba(255,47,208,0.35);
}

[bgcolor="#000000"] {
	background-color: #000000 !important;
}

[bgcolor="#FFFFFF"],
[bgcolor="#F3F3F3"],
[bgcolor="#e7e7e7"],
[bgcolor="#CCCCCC"] {
	background-color: var(--bg-panel) !important;
	color: var(--text-light) !important;
}

/* ---------- Alte Hintergrundbilder (orange/rote Texturstreifen) entfernen ---------- */
[background="images/bg.gif"],
[background="images/logo_bg3.gif"],
[background^="images/navi_pics/profil/"],
[background^="images/new/header/"],
[background^="images/new/content_"],
[background="images/new/bg.jpg"],
[background^="images/re_"],
[background^="images/sp1_"],
[background^="images/sp2_"],
[background^="images/sp3_"],
[background^="images/bg_pics/"] {
	background-image: none !important;
	background-color: var(--bg-panel2) !important;
	color: var(--text-light) !important;
}

/* Menüzeilen (Sidebar-Links) - dunkel mit dezentem Cyan-Unterstrich statt Vollton */
[background="images/navi_pics/navi_02.jpg"],
[background="images/navi_pics/navi2_02.jpg"],
[background="images/top_bg.jpg"] {
	background-image: none !important;
	background-color: #0d0620 !important;
	border-bottom: 1px solid rgba(0,234,255,0.25) !important;
	color: var(--text-light) !important;
}

/* Titel-/Kopfzeilen der Panels bekommen einen dezenten Neon-Verlauf statt Vollfarbe */
[background="images/bg.jpg"] {
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #ff2fd0, #8a2be2) !important;
}

/* ---------- Zentrale Tabellen-Klassen ---------- */
td.klasse1, td.Klasse1 {
	background-image: none !important;
	background-color: var(--bg-panel) !important;
}
td.klasse2, td.Klasse2,
td.klasse3, td.Klasse3 {
	background-color: var(--bg-panel) !important;
	color: var(--text-light) !important;
}
td.klasse4, td.Klasse4 {
	background-image: none !important;
	background-color: var(--bg-deep) !important;
}
td.klasse111, td.Klasse111 {
	background-color: var(--bg-panel2) !important;
}
td.backgraund, td.Backgraund {
	background-color: var(--bg-panel) !important;
}
td.design1, td.Design1 {
	background-color: var(--bg-panel2) !important;
}
td.menu, td.Menu, td.menu1, td.Menu1 {
	background-image: none !important;
	background-color: #150a2b !important;
}
td.menu122, td.Menu122 {
	border: 1pt solid var(--neon-cyan) !important;
	background-color: var(--bg-panel2) !important;
}

/* Panel-Rahmen mit Neon-Glow */
.box1 {
	border: 1px solid var(--neon-purple) !important;
	box-shadow: 0 0 10px rgba(138,43,226,0.55), inset 0 0 20px rgba(138,43,226,0.08);
	border-radius: 4px;
}
.box {
	border: 1px solid var(--neon-cyan) !important;
	background: var(--bg-panel) !important;
	box-shadow: 0 0 10px rgba(0,234,255,0.5);
}

/* ---------- Links ---------- */
a, a.header, a.header:visited, a.header:hover,
a.st, a.st1, a.st6, a.menu4, a.menu4:visited,
a.match, a.toplist, a.profil, a.profil:visited {
	color: var(--text-light);
	font-family: "Verdana", sans-serif;
}
a:link, a:visited,
a.st4, a.st99, a.st99:visited,
a.nachricht, a.guest, a.guest:visited, a.guest2 {
	color: var(--neon-cyan) !important;
	text-decoration: none;
}
a:hover, a.header:hover, a.st4:hover, a.st99:hover,
a.menu:hover, a.menu2:hover, a.menu4:hover, a.menu5:hover,
a.mail:hover, a.f_be:hover, a.profil:hover, a.st90:hover {
	color: var(--neon-pink) !important;
	text-shadow: 0 0 6px rgba(255,47,208,0.8);
}
a.menu, a.menu:visited,
a.menu2, a.menu2:visited,
a.menu5, a.menu5:visited,
a.f_be, a.f_be:visited,
a.mail, a.mail:visited,
a.up_menu, a.up_menu:visited,
a.up_menu2, a.up_menu2:visited {
	color: var(--text-light) !important;
	background-image: none !important;
}
a.menu::after, a.menu2::after {
	content: " \203A";
	float: right;
	color: var(--neon-cyan);
	margin-right: 6px;
}
a.st2, a.st3, a.st5, a.st90, a.st90:visited {
	color: var(--neon-gold) !important;
}
a.grus, a.grus:visited, a.bratwa {
	color: var(--neon-gold) !important;
}
a.grusr:hover {
	color: var(--neon-pink) !important;
}

/* ---------- Formulare ---------- */
input, textarea, select {
	background-color: #0c0620 !important;
	color: var(--text-light) !important;
	border: 1px solid var(--neon-cyan) !important;
	font-family: "Verdana", Arial, sans-serif;
}
input.log, input.log2, input.ru, input.ru2,
input.new, input.new2, input.nl, input.pn, input.profil,
select.ru {
	background-color: #0c0620 !important;
	color: var(--neon-cyan) !important;
	border: 1px solid var(--neon-cyan) !important;
}
input.log:hover, input.nl:hover, input.pn:hover, input.profil:hover,
input.gallery:hover, input.gallery2:hover, input.gallery3:hover {
	color: var(--neon-pink) !important;
	border-color: var(--neon-pink) !important;
}
input.gallery, input.gallery2, input.gallery3 {
	background-image: none !important;
	background-color: #0c0620 !important;
	color: var(--neon-cyan) !important;
	border: 1px solid var(--neon-cyan) !important;
}

/* ---------- Textblock-Grundfarbe ---------- */
.text {
	color: var(--text-light) !important;
}

/* Alte rote Titel-/Trennbild-Grafiken der Sidebar auf Neon-Farbton umfaerben */
img[src*="navi_pics/"],
img[src*="images/re_"],
img[src*="bg_pics/bg_"] {
	filter: hue-rotate(275deg) saturate(1.6) brightness(0.95);
}

/* Rote Deko-Trennleiste ueber dem Hauptinhalt ausblenden */
.vml-hide-strip {
	display: none !important;
}

/* ============================================================
   Neuer Header/Login-Bereich (vml-topbar)
   ============================================================ */
.vml-topbar {
	max-width: 1500px;
	margin: 12px auto 16px auto;
	background: linear-gradient(180deg, #0d0620 0%, #150a2b 100%);
	border: 1px solid var(--neon-pink);
	border-radius: 12px;
	box-shadow: 0 0 18px rgba(255,47,208,0.45), 0 0 40px rgba(0,234,255,0.15);
	overflow: hidden;
	font-family: "Verdana", Arial, sans-serif;
}
.vml-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 16px 22px;
}
.vml-logo {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ffffff;
	text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.vml-logo .accent {
	color: var(--neon-pink);
	text-shadow: 0 0 10px var(--neon-pink), 0 0 22px var(--neon-pink);
}
.vml-tagline {
	font-size: 12px;
	color: var(--neon-cyan);
	text-shadow: 0 0 6px rgba(0,234,255,0.6);
	letter-spacing: 1px;
	margin-top: 2px;
}
.vml-ad-slot {
	border: 1px dashed rgba(238,240,255,0.35);
	border-radius: 8px;
	padding: 8px 18px;
	text-align: center;
	font-size: 11px;
	color: rgba(238,240,255,0.55);
	letter-spacing: 1px;
}
.vml-ad-slot span {
	font-size: 10px;
	opacity: 0.8;
}

/* Radio-Player */
.vml-radio {
	border: 1px solid var(--neon-cyan);
	border-radius: 10px;
	padding: 8px 14px;
	background: rgba(0,0,0,0.35);
	box-shadow: 0 0 10px rgba(0,234,255,0.35);
	min-width: 220px;
}
.vml-radio-top {
	display: flex;
	align-items: center;
	gap: 6px;
}
.vml-radio-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff2f5d;
	box-shadow: 0 0 8px #ff2f5d;
	animation: vml-pulse 1.4s infinite ease-in-out;
	flex-shrink: 0;
}
@keyframes vml-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.7); }
}
.vml-radio-onair {
	color: #ff2f5d;
	font-weight: bold;
	font-size: 11px;
	letter-spacing: 1px;
}
.vml-radio-name {
	color: var(--text-light);
	font-size: 11px;
	font-weight: bold;
}
.vml-radio-sub {
	color: var(--neon-cyan);
	font-size: 10px;
	margin: 2px 0 6px 0;
	letter-spacing: 0.5px;
}
.vml-radio-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}
.vml-radio-btn {
	background: var(--neon-pink) !important;
	color: #150a2b !important;
	border: none !important;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	font-size: 11px;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(255,47,208,0.7);
	flex-shrink: 0;
}
.vml-radio-btn:hover {
	box-shadow: 0 0 14px rgba(255,47,208,1);
}
.vml-radio-viz {
	background: rgba(0,0,0,0.4);
	border-radius: 4px;
	flex: 1;
}
.vml-radio-volume {
	width: 50px;
	accent-color: var(--neon-cyan);
}

/* Skyline Chat-Assistent */
.vml-skyline-wrap {
	display: flex;
	gap: 20px;
	padding: 20px;
	flex-wrap: wrap;
}
.vml-skyline-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100px;
}
.vml-skyline-avatar-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: bold;
	color: #fff;
	box-shadow: 0 0 16px rgba(255,47,208,0.6);
}
.vml-skyline-status {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--text-light);
}
.vml-skyline-chat {
	flex: 1;
	min-width: 260px;
	display: flex;
	flex-direction: column;
}
.vml-skyline-messages {
	height: 260px;
	overflow-y: auto;
	border: 1px solid var(--neon-purple);
	border-radius: 8px;
	padding: 12px;
	background: rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}
.vml-skyline-msg {
	max-width: 80%;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
}
.vml-skyline-msg-bot {
	align-self: flex-start;
	background: rgba(138,43,226,0.25);
	border: 1px solid var(--neon-purple);
	color: var(--text-light);
}
.vml-skyline-msg-user {
	align-self: flex-end;
	background: rgba(0,234,255,0.15);
	border: 1px solid var(--neon-cyan);
	color: var(--text-light);
}
.vml-skyline-input-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}
.vml-skyline-input-row .vml-input {
	flex: 1;
}
.vml-skyline-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vml-skyline-chip {
	background: transparent;
	border: 1px solid var(--neon-cyan);
	color: var(--neon-cyan);
	border-radius: 14px;
	padding: 4px 12px;
	font-size: 11px;
	cursor: pointer;
}
.vml-skyline-chip:hover {
	background: var(--neon-cyan);
	color: #150a2b;
}
.vml-lang-flags img {
	width: 26px;
	height: auto;
	margin-left: 6px;
	border-radius: 3px;
	box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.vml-login-row {
	border-top: 1px solid rgba(255,47,208,0.35);
	padding: 12px 22px;
	background: rgba(0,0,0,0.25);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.vml-login-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.vml-input {
	background-color: #0c0620 !important;
	color: var(--neon-cyan) !important;
	border: 1px solid var(--neon-cyan) !important;
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 12px;
}
.vml-login-btn {
	background-color: var(--neon-pink) !important;
	color: #150a2b !important;
	border: none !important;
	border-radius: 6px;
	padding: 6px 16px;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(255,47,208,0.7);
}
.vml-login-btn:hover {
	box-shadow: 0 0 14px rgba(255,47,208,1);
}
.vml-register-btn {
	background: transparent !important;
	color: var(--neon-cyan) !important;
	border: 1px solid var(--neon-cyan) !important;
	border-radius: 6px;
	padding: 5px 14px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}
.vml-register-btn:hover {
	background: var(--neon-cyan) !important;
	color: #150a2b !important;
	box-shadow: 0 0 10px rgba(0,234,255,0.8);
}
.vml-forgot {
	color: var(--neon-gold) !important;
	font-size: 11px;
	text-decoration: none;
}
.vml-forgot:hover {
	text-shadow: 0 0 6px var(--neon-gold);
}
.vml-logout-btn {
	color: var(--text-light) !important;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid var(--neon-cyan);
	border-radius: 6px;
	padding: 5px 12px;
}
.vml-logout-btn:hover {
	color: var(--neon-pink) !important;
	border-color: var(--neon-pink);
}
.vml-marquee {
	color: var(--text-light);
	font-size: 12px;
	flex: 1;
}
@media (max-width: 700px) {
	.vml-topbar-inner { justify-content: center; text-align: center; }
	.vml-login-row { justify-content: center; }
}

/* ============================================================
   Neue Panel-/Karten-Layouts (Startseite)
   ============================================================ */
.vml-page {
	max-width: 1500px;
	margin: 0 auto 30px auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-family: "Verdana", Arial, sans-serif;
}
.vml-panel {
	background: linear-gradient(180deg, #0d0620 0%, #150a2b 100%);
	border: 1px solid var(--neon-pink);
	border-radius: 12px;
	box-shadow: 0 0 16px rgba(255,47,208,0.35);
	overflow: hidden;
}
.vml-panel-title {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	color: #ffffff;
	padding: 10px 14px;
	background: linear-gradient(90deg, #ff2fd0, #8a2be2);
	text-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.vml-panel-body {
	padding: 16px 20px;
	color: var(--text-light);
	font-size: 13px;
	line-height: 1.5;
}

/* User-Karten (User des Tages / User der Stunde / Top Frau / Top Mann) */
.vml-usercard-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 16px;
	padding: 22px 16px;
}
.vml-usercard {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
}
.vml-usercard-label {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.vml-label-tag    { color: var(--neon-gold); text-shadow: 0 0 6px rgba(255,210,63,0.7); }
.vml-label-stunde { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,234,255,0.7); }
.vml-label-frau   { color: var(--neon-pink); text-shadow: 0 0 6px rgba(255,47,208,0.7); }
.vml-label-mann   { color: #6db4ff; text-shadow: 0 0 6px rgba(109,180,255,0.7); }
.vml-usercard-photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
	background: #0c0620;
	border: 2px solid var(--neon-purple);
	box-shadow: 0 0 12px rgba(138,43,226,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vml-usercard-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Neue Mitglieder Fotos */
.vml-photo-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 18px;
}
.vml-photo-thumb {
	display: block;
	width: 78px;
	height: 78px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--neon-cyan);
	box-shadow: 0 0 8px rgba(0,234,255,0.4);
}
.vml-photo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Top Gold Partner */
.vml-partner-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 18px;
}
.vml-partner-empty {
	color: rgba(238,240,255,0.5);
	font-size: 12px;
	font-style: italic;
}