/* Skeleton loader for track cards and lists */
.skeleton {
	background: linear-gradient(90deg, #f0f7ff 25%, #e0e7ef 50%, #f0f7ff 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.2s infinite linear;
	border-radius: 12px;
	min-height: 120px;
	width: 100%;
	opacity: 0.7;
}
@keyframes skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.skeleton-text {
	height: 18px;
	width: 60%;
	margin: 8px auto;
	background: #e0e7ef;
	border-radius: 6px;
}
.skeleton-thumb {
	height: 90px;
	width: 90px;
	background: #e0e7ef;
	border-radius: 12px;
	margin: 0 auto 8px auto;
}
/* Stat counter accessibility polish */
.stat-action[aria-label], .stat-action[title] {
	position: relative;
	cursor: pointer;
}
.stat-action[aria-label]:hover::after, .stat-action[title]:hover::after {
	content: attr(title);
	position: absolute;
	left: 50%;
	top: -28px;
	transform: translateX(-50%);
	background: #222;
	color: #fff;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 0.92em;
	white-space: nowrap;
	box-shadow: 0 2px 12px rgba(0,0,0,0.18);
	z-index: 10;
	pointer-events: none;
}
/* End skeleton and stat counter polish */
/* --- Modern Homepage Hero 2025 --- */
.hero-pro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	padding: 48px 0 32px 0;
	position: relative;
	background: linear-gradient(180deg,rgba(255,45,149,0.04),rgba(0,229,255,0.03));
	border-radius: 18px;
	box-shadow: 0 8px 40px rgba(0,229,255,0.08);
}
.hero-title {
	font-family: 'Bebas Neue', Impact, sans-serif;
	font-size: 3.2rem;
	font-weight: 900;
	color: #ff2d95;
	text-shadow: 0 0 2px #fff,0 0 8px #ff2d95,0 0 18px #00e5ff;
	letter-spacing: 2px;
	line-height: 1;
	-webkit-text-stroke: 1px #fff;
	margin-bottom: 0.5em;
	text-align: center;
}
.hero-subhead {
	font-size: 1.25rem;
	color: var(--muted);
	text-align: center;
	margin-bottom: 0.5em;
}
.hero-trust-line {
	font-size: 1.08rem;
	color: #222;
	background: #fff;
	border-radius: 999px;
	padding: 8px 22px;
	font-weight: 700;
	box-shadow: 0 2px 12px #2df7ff33;
	margin-bottom: 0.5em;
}
.hero-player-cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	justify-content: center;
	margin-bottom: 1em;
}
.embedded-player audio {
	width: 100%;
	max-width: 340px;
	border-radius: 12px;
	box-shadow: 0 2px 12px #2df7ff55;
}
.cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.artist-cta, .listener-cta {
	background: linear-gradient(90deg,#ff2d95,#2df7ff);
	color: #222;
	font-weight: bold;
	border: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-size: 1.18em;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	transition: background 0.2s, color 0.2s;
}
.artist-cta:hover {
	background: linear-gradient(90deg,#ff2d95,#ffb300);
}
.listener-cta:hover {
	background: linear-gradient(90deg,#2df7ff,#ff2d95);
}
.hero-features {
	margin: 18px 0 0 0;
	text-align: center;
}
.hero-features ul {
	display: flex;
	flex-direction: row;
	gap: 32px;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.feature-icon {
	font-size: 1.3em;
	margin-right: 8px;
}
.live-ticker {
	font-size: 1.05em;
	color: #00e5ff;
	background: #181a24;
	border-radius: 999px;
	padding: 7px 18px;
	font-weight: 600;
	box-shadow: 0 2px 12px #ff2d9555;
	margin: 12px 0 0 0;
	text-align: center;
	min-width: 220px;
}
.sticky-signup-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	background: linear-gradient(90deg,#ff2d95,#2df7ff);
	color: #222;
	font-weight: bold;
	border: none;
	border-radius: 999px;
	padding: 16px 38px;
	font-size: 1.18em;
	box-shadow: 0 8px 30px rgba(0,0,0,0.18);
	transition: background 0.2s, color 0.2s;
	display: none;
}
@media (max-width: 900px) {
	.hero-player-cta { flex-direction: column; gap: 18px; }
	.hero-features ul { flex-direction: column; gap: 18px; }
	.sticky-signup-btn { display: block; bottom: 12px; right: 12px; padding: 12px 24px; font-size: 1em; }
}
@media (min-width: 901px) {
	.sticky-signup-btn { display: block; }
}
/* --- End Modern Homepage Hero --- */
nav a {
	position: relative;
	text-decoration: none;
	transition: color 0.2s;
}
nav a:focus {
	outline: 2px solid #2df7ff;
	outline-offset: 2px;
}
nav a:hover::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: linear-gradient(90deg,#ff2d95,#2df7ff);
	border-radius: 2px;
}
/* Moved from editTrack.ejs */
.edit-form { max-width: 480px; margin: 0 auto; background: #181a24; border-radius: 18px; padding: 32px; box-shadow: 0 0 24px #222; }
.edit-form label { font-weight: bold; color: #ff2d95; margin-bottom: 6px; display: block; }
.edit-form input, .edit-form textarea, .edit-form select { width: 100%; margin-bottom: 18px; padding: 8px; border-radius: 8px; border: 1px solid #2df7ff; background: #222; color: #fff; }
.edit-form button { background: linear-gradient(90deg,#ff2d95,#2df7ff); color: #222; font-weight: bold; border: none; border-radius: 8px; padding: 10px 24px; cursor: pointer; }
.edit-form .preview { margin-bottom: 18px; }

/* Moved from adminVisitors.ejs */
.visitors-hero { display: flex; gap: 18px; align-items: center; margin: 18px 0; }
.vis-metric { background: #06121a; color: #bfefff; padding: 12px 16px; border-radius: 8px; min-width: 160px; }
.vis-metric .value { font-size: 1.6rem; font-weight: 700; color: #fff; }
.vis-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.vis-table th, .vis-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.vis-table thead th { background: transparent; color: #9fcbdc; text-align: left; }
.percent-up { color: #7fff7f; font-weight: 700; }
.percent-down { color: #ff7f7f; font-weight: 700; }
pre.payload { white-space: pre-wrap; margin: 0; font-family: monospace; font-size: 0.85rem; color: #d7eef6; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Bebas+Neue:wght@400;700&display=swap');
/* Utility: screen-reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
/* Mobile responsiveness and polish */
@media (max-width: 600px) {
	body, .container {
		padding: 0 6px !important;
		font-size: 1rem;
	}
	.site-header {
		padding: 12px 0;
	}
	.site-header .brand {
		font-size: 1.2rem;
		flex-direction: column;
		gap: 4px;
		text-align: center;
        /* Polish mobile brand text for clarity */
        text-shadow: 0 0 2px #fff, 0 0 6px #ff2d95, 0 0 10px #00e5ff;
        -webkit-text-stroke: 0.5px #fff;
        letter-spacing: 1px;
        line-height: 1.1;
        font-weight: 900;
        padding: 2px 0;
	}
	.site-header .brand img {
		max-width: 180px;
		max-height: 60px;
        /* Reduce logo glow for mobile */
        box-shadow: 0 0 18px 6px #ff2d95, 0 0 32px 10px #00e5ff;
	}
	.nav-list {
		flex-direction: column;
		gap: 4px;
		align-items: center;
	}
	.hero {
		flex-direction: column;
		padding: 24px 0;
		gap: 10px;
	}
	.hero .intro {
		max-width: 100%;
		text-align: center;
	}
	.hero h1 {
		font-size: 2.1rem;
		-webkit-text-stroke: 0.5px #fff;
	}
	.card-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.card .cover {
		height: 120px;
	}
	.form-box {
		max-width: 100%;
		padding: 10px;
	}
	.footer {
		font-size: 0.95rem;
		padding: 12px 0;
		margin-top: 18px;
	}
	.track-meta .avatar {
		width: 44px;
		height: 44px;
	}
	.chat-area {
		height: 40vh;
		padding: 6px;
	}
	#messages li {
		padding: 7px 8px;
		font-size: 0.98em;
	}
	.btn, .like-btn {
		padding: 8px 12px;
		font-size: 1em;
		min-width: 44px;
		min-height: 44px;
		border-radius: 12px;
	}
}
:root{
	--bg:#071019;
	--card:#0c0f12;
	--accent:#ff2d95; /* neon pink */
	--accent-2:#00e5ff; /* neon cyan */
	--muted:#9aa6b2;
	--surface:#0b1220;
	--text:#e6eef8;
	--logo-glow: 0 0 32px 8px #ff2d95, 0 0 64px 16px #00e5ff;
	--logo-border: linear-gradient(90deg, #ff2d95 0%, #00e5ff 100%);
}
body.dark-mode {
  --bg: #181a20;
  --card: #23272f;
  --accent: #ff2d95;
  --accent-2: #00e5ff;
  --muted: #b0b8c1;
  --surface: #22242a;
  --text: #f2f6fa;
  background: linear-gradient(180deg,#181a20 0%, #23272f 100%);
}
*{box-sizing:border-box}
html {
	scroll-behavior: smooth;
}
.fade-in {
	animation: fadeIn 0.7s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.slide-up {
	animation: slideUp 0.6s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Moved to top for CSS compliance */
/* Modern system font fallback and improved readability */
body{font-family:Inter, "Segoe UI", Roboto, -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif; background:linear-gradient(180deg,#071019 0%, #070b11 100%); color:var(--text); margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a.dark-mode-toggle {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 9999;
	background: var(--card);
	color: var(--accent);
	border: 1px solid var(--accent-2);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0,229,255,0.08);
	transition: background 0.3s, color 0.3s;
}
a.dark-mode-toggle:hover {
	background: var(--accent-2);
	color: var(--card);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.grain{background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);background-size: 3px 3px;mix-blend-mode: overlay;opacity: 0.06}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.site-header{background:linear-gradient(90deg, rgba(7,10,16,0.88), rgba(8,12,20,0.88));padding:20px 0;box-shadow:0 8px 44px rgba(0,0,0,0.65);backdrop-filter: blur(6px)}
.site-header .brand{font-weight:900;font-size:1.6rem;font-family:'Bebas Neue', Impact, sans-serif;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.site-header .brand img {
	display:block;
	margin:auto;
	max-height:90px;
	max-width:320px;
	box-shadow:var(--logo-glow);
	border-radius:16px;
	border:4px solid transparent;
	background:var(--logo-border);
	background-clip:padding-box;
	transition:box-shadow 0.3s, transform 0.3s;
}
.site-header .brand img:hover {
	transform:scale(1.04);
	box-shadow:0 0 48px 16px #ff2d95, 0 0 96px 32px #00e5ff;
}
.site-header .brand:before{content:'';width:36px;height:36px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;display:inline-block}
.nav-list{display:flex;gap:12px;list-style:none;margin:8px 0;padding:0;align-items:center;flex-wrap:wrap;justify-content:center;max-width:100vw;overflow-x:auto;}
.primary-nav{margin-left:6px}
.nav-list li{display:inline}
.nav-list a{padding:8px 12px;border-radius:8px;color:var(--text);background:transparent}
.nav-list a:hover{background:rgba(255,255,255,0.03)}
.hero{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding:40px 0;
	position:relative;
}
.hero::before{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:480px;
	height:480px;
	background:url('/images/plugyourtunelogo.png') no-repeat center/contain;
	opacity:0.04;
	z-index:0;
	pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero .intro{max-width:60%}
.hero h1{
	font-family:'Bebas Neue', Impact, sans-serif;
	font-size:3.4rem;
	margin:0 0 12px;
	letter-spacing:1px;
	color:var(--accent);
	text-shadow:
		0 0 2px #fff,
		0 0 8px var(--accent),
		0 0 18px var(--accent-2),
		2px 2px 0 #071019,
		-2px -2px 0 #00e5ff;
	-webkit-text-stroke: 1px #fff;
}
.hero p{color:var(--muted);font-size:1.05rem}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#051016;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,0.6);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,0.65)}
.btn:focus{outline:3px solid rgba(255,45,149,0.12);outline-offset:2px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:24px 0}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:0;border-radius:12px;box-shadow:0 18px 40px rgba(2,6,23,0.6);overflow:hidden;border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(2,6,23,0.75)}
.card .cover{height:160px;background:linear-gradient(120deg, rgba(255,45,149,0.06), rgba(0,229,255,0.04));display:flex;align-items:center;justify-content:center}
.card h3{margin:12px 12px 8px;font-size:1.05rem}
.audio{width:100%;margin-top:8px}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:0.85rem;margin-right:6px;color:var(--muted)}
.cover img{width:100%;height:100%;object-fit:cover}
.form-box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;max-width:560px;border:1px solid rgba(255,255,255,0.03)}
form label{display:block;margin-top:10px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
  .dark-mode-toggle {
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    font-size: 0.98em;
  }
button{cursor:pointer;border:none}
.nav-toggle{display:none;border:0;background:transparent;color:var(--text);font-size:1.25rem}

/* small-screen nav toggle */
@media (max-width:900px){
	.nav-list.primary-nav {
		display: none;
		position: absolute;
		left: 12px;
		top: 80px;
		background: var(--card);
		padding: 12px;
		border-radius: 10px;
		box-shadow: 0 12px 40px rgba(0,0,0,0.6);
		flex-direction: column;
		width: calc(100vw - 24px);
		max-width: 420px;
		z-index: 1000;
	}
	.nav-list.primary-nav.open {
		display: flex;
		flex-direction: column;
	}
	.nav-toggle {
		display: inline-block;
		margin: 10px auto 0 auto;
		background: var(--accent-2);
		color: var(--card);
		border-radius: 8px;
		padding: 6px 16px;
		font-size: 1.3rem;
		border: none;
		box-shadow: 0 2px 12px rgba(0,229,255,0.08);
		cursor: pointer;
	}
}
.center{display:flex;align-items:center;justify-content:center;padding:40px 0}
.chat-area{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;height:60vh;display:flex;flex-direction:column}
#messages{flex:1;overflow:auto;padding:8px}
#messages li{padding:10px 12px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));margin-bottom:10px;box-shadow:0 8px 18px rgba(0,0,0,0.4)}
.footer{padding:18px 0;text-align:center;color:var(--muted);margin-top:30px;border-top:1px solid rgba(255,255,255,0.02);}
@media(max-width:800px){.hero{flex-direction:column}.hero .intro{max-width:100%}}

/* track page styles */
.track-meta{display:flex;gap:14px;align-items:center}
.track-meta .avatar{width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,0.03)}
.like-btn{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:999px;font-weight:700}
.like-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,45,149,0.06)}

.muted{color:var(--muted)}

/* subtle neon glow */
.glow{box-shadow:0 6px 30px rgba(255,45,149,0.08)}

/* Light card variant used on homepage and others */
.card--light{background:#fff;color:#071019;border-radius:14px;box-shadow:0 6px 36px rgba(2,6,23,0.2);padding:18px;border:1px solid rgba(2,6,23,0.06)}
.card--light h3{color:#071019}
.card--light .muted{color:#66707a}

/* thumbnail used in track cards */
.track-thumb{width:90px;height:90px;object-fit:cover;border-radius:12px;background:#222;box-shadow:0 2px 12px rgba(0,0,0,0.18);display:block}

/* Waveform and fire markers */
.waveform{position:relative}
.waveform .fire-markers{position:absolute;left:0;top:0;height:100%;width:100%;pointer-events:none}
.waveform .fire-markers .marker{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,#ff2d95,#ffb300);box-shadow:0 0 8px rgba(255,45,149,0.6)}

/* Make audio controls more compact */
audio.audio{width:100%;height:48px}
audio.audio{height:48px}
/* video media styling: keep aspect, cover, and rounded corners */
video.audio, video.media { width:100%; max-height:220px; height:auto; object-fit:cover; border-radius:12px; background:#000; display:block }
/* Unified profile header styles */
.profile-header {
	display: flex;
 	align-items: center;
 	gap: 24px;
 	flex-wrap: wrap;
 	/* use the same dark card background as other .card elements */
 	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
 	border-radius: 12px;
 	box-shadow: 0 18px 40px rgba(2,6,23,0.6);
 	border: 1px solid rgba(255,255,255,0.03);
 	padding: 22px 20px;
 	margin-bottom: 24px;
}
.profile-avatar {
 	flex: 0 0 auto;
 	width: 130px;
 	height: 130px;
 	object-fit: cover;
 	border-radius: 14px;
 	box-shadow: 0 6px 30px rgba(0,0,0,0.45);
 	background: #0b0f14;
 	border: 1px solid rgba(255,255,255,0.03);
}
.profile-social {
	margin-top: 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.profile-username {
    margin: 0;
    font-size: 2.2rem;
    color: var(--accent);
    text-shadow: 0 0 2px #fff, 0 0 8px var(--accent), 0 0 18px var(--accent-2);
    font-weight: 800;
}
.profile-chip {
 	font-size: 1.02em;
 	background: rgba(255,255,255,0.03);
 	color: var(--muted);
 	padding: 6px 10px;
 	border-radius: 999px;
 	box-shadow: none;
}
.profile-chip--highlight {
 	background: linear-gradient(90deg,var(--accent),var(--accent-2));
 	color: #051016;
 	box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.profile-chip-following {
 	background: linear-gradient(90deg,var(--accent-2),#9ff0ff);
 	color: #051016;
 	box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}