/* Option C re-theme: Option B's layout wearing Option A's look.
   Used only by /preview/ until the switch-over. */
:root {
	--bg: #0b0606;
	--panel: #140c0c;
	--panel-2: #1c1111;
	--line: #3a1a1a;
	--line-soft: #241414;
	--red: #c4161c;
	--red-hot: #ff3b3f;
	--text: #e8e1e1;
	--muted: #a49696;
	--radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
	background: radial-gradient(1200px 500px at 50% -100px, #2a0707 0%, var(--bg) 60%) fixed, var(--bg);
	color: var(--text);
	font: 15px/1.55 Inter, system-ui, sans-serif;
	padding-bottom: 84px;
	cursor: default;
}
img { max-width: 100%; height: auto; }
a { color: var(--red-hot); text-decoration: none; }
.preview-tag { position: fixed; top: 66px; right: 10px; z-index: 30; background: #ffcc00; color: #000; font: 600 12px Inter, sans-serif; padding: 4px 10px; border-radius: 99px; }
/* Fluid: fills the screen, with the side margin growing on wider screens; capped only on very wide monitors */
.wrap { max-width: 1800px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 56px); }
.wrap > *, .hero-card > *, .band > *, .release > * { min-width: 0; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.45); }
.card h2 {
	margin: 0; padding: 10px 16px; font: 600 15px Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase;
	background: linear-gradient(90deg, #3a0a0c, #1c0c0c); border-bottom: 1px solid var(--line);
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.card h2 a, .card h2 .count { color: var(--muted); font: 500 13px Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.card h2 a:hover { color: var(--red-hot); }
.card .body { padding: 16px; }
section.block { margin-top: 18px; }

/* logo + sticky buttons */
.logo { text-align: center; padding: 12px 16px 4px; }
.logo img { width: min(520px, 90%); filter: drop-shadow(0 0 18px rgba(196,22,28,.35)); }
.top { position: sticky; top: 0; z-index: 20; background: rgba(11,6,6,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: center; height: 56px; }
.menu { display: flex; gap: 6px; }
.menu .menubutton, .menu .menuactive {
	font: 600 14px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
	color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px;
}
.menu .menubutton:hover { color: var(--text); border-color: #5a2222; }
.menu .menuactive { color: #fff; background: linear-gradient(180deg, #4a0c0e, #2a0608); border-color: var(--red); }
.userbar { display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); background: rgba(20,12,12,.85); }
.userbar.on { display: flex; }
.userbar a {
	color: var(--muted); cursor: pointer; white-space: nowrap;
	font: 600 12px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase;
	background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
}
.userbar a:hover { color: #fff; border-color: var(--red); background: #2a0a0b; }
.userbar .divider { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }

/* hero */
.hero { padding-top: 18px; }
.hero-card {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: clamp(240px, 24vw, 440px) 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; padding: 26px;
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.5);
}
.hero-card::before { /* faint wash of the cover art; the page sets the image */
	content: ""; position: absolute; inset: -40px; z-index: 0;
	background: var(--art, none) center/cover no-repeat;
	filter: blur(50px) saturate(1.1) brightness(.22); transform: scale(1.1);
}
.hero-card > * { position: relative; z-index: 1; }
.cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.cover-none, .pic-none, .art-none { display: grid; place-items: center; background: #1d0d0d; color: #4a1c1c; font: 700 80px Oswald, sans-serif; }
.np-label { font: 600 12px Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.np-label .sep { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-hot); box-shadow: 0 0 8px var(--red-hot); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.hero h1 { margin: 10px 0 0; font: 700 clamp(38px, 6vw, 64px)/.95 Oswald, sans-serif; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.hero .song { font: 600 clamp(20px, 3vw, 26px)/1.2 Oswald, sans-serif; letter-spacing: .02em; margin: 10px 0 2px; }
.hero .from { color: var(--muted); }
.hero .from b { color: var(--text); font-weight: 600; }
.actions { display: flex; gap: 16px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.play {
	width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
	background: var(--red); color: #fff; display: grid; place-items: center;
	box-shadow: 0 0 0 4px rgba(196,22,28,.25), 0 0 24px rgba(196,22,28,.5);
	transition: transform .15s, background .15s;
}
.play:hover { background: var(--red-hot); transform: scale(1.05); }
.play svg { width: 26px; height: 26px; fill: currentColor; }
.play-label { font: 600 17px Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.play-label small { display: block; font: 400 13px Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted); }
.btn { display: inline-block; padding: 9px 18px; border-radius: 8px; background: var(--red); color: #fff; font: 600 14px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.btn:hover { background: var(--red-hot); color: #fff; }
.btn.soft { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.btn.soft:hover { border-color: var(--red); }
.actions .btn.soft { margin-left: auto; }

/* tiles (Just played, Artists) */
.row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 12vw, 210px); gap: 12px; overflow-x: auto; padding: 16px; scrollbar-color: #3a1a1a transparent; }
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 12vw, 210px), 1fr)); gap: 12px; padding: 16px; }
.tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--text); transition: border-color .15s; }
.tile:hover { border-color: var(--red); }
.tile .art { aspect-ratio: 1; background: #1d0d0d center/cover no-repeat; display: grid; place-items: center; font: 700 38px Oswald, sans-serif; color: #4a1c1c; border-bottom: 1px solid var(--line); }
.tile .art.art-contain { background-size: contain; background-color: #000; }
.tile .meta { padding: 8px 10px 10px; }
.tile .a { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .t { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .when { color: #7b6a6a; font-size: 11.5px; margin-top: 2px; }
.tag { margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font: 600 10px Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* history list */
.history { list-style: none; margin: 0; padding: 0; }
.history li + li { border-top: 1px solid var(--line-soft); }
.history a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 16px; color: var(--text); }
.history a:hover { background: #1f1010; }
.history img, .history .mini { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; }
.history .mini { display: grid; place-items: center; background: #1d0d0d; color: #6a2a2a; font: 700 16px Oswald, sans-serif; }
.history .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history .who span { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history .when { color: #7b6a6a; font-size: 12.5px; white-space: nowrap; }

/* band spotlight */
.band { display: grid; grid-template-columns: clamp(220px, 20vw, 380px) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 40px); }
.band .pic { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.band .pic-none { aspect-ratio: 1; }
.band h3 { margin: 0 0 4px; font: 700 36px/1 Oswald, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.band h3 a { color: var(--text); }
.band h3 a:hover { color: var(--red-hot); }
.band .sub { color: var(--muted); font-size: 13px; }
.band .bio { color: var(--muted); margin: 8px 0 0; }
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.album { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.album img, .album .art-none { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; font-size: 40px; }
.album.playing { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 20px rgba(196,22,28,.35); }
.album .n { font: 600 15px Oswald, sans-serif; letter-spacing: .03em; margin-top: 6px; }
.album .y { color: var(--muted); font-size: 12.5px; }
.album.playing .y { color: var(--red-hot); }
.album .buy { font-size: 12.5px; }
.release { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.release h4 { margin: 0; font: 600 17px Oswald, sans-serif; letter-spacing: .03em; }
.release h4 span { color: var(--muted); font: 500 13px Inter, sans-serif; margin-left: 6px; }
.tracks { margin: 6px 0 0; padding: 0; list-style: none; columns: 240px; column-gap: 24px; font-size: 13.5px; color: var(--muted); }
.tracks li { break-inside: avoid; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracks li.now { color: var(--red-hot); font-weight: 600; }
.tracks li.now::after { content: "  ▶ playing"; font-size: 11px; letter-spacing: .05em; }

/* Featured artist card (front page) */
.feat { display: grid; grid-template-columns: clamp(160px, 14vw, 260px) minmax(0, 1fr); gap: clamp(18px, 2vw, 32px); align-items: start; }
.feat .pic { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.feat .pic-none { aspect-ratio: 1; font-size: 60px; }
.feat h3 { margin: 0 0 4px; font: 700 30px/1 Oswald, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.feat h3 a { color: var(--text); }
.feat h3 a:hover { color: var(--red-hot); }
.feat .sub { color: var(--muted); font-size: 13px; }
.feat .bio { color: var(--muted); margin: 8px 0 12px; max-width: 80ch; }
.feat-albums { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.feat-albums a { display: block; width: 84px; height: 84px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); transition: border-color .15s; }
.feat-albums a:hover { border-color: var(--red); }
.feat-albums img, .feat-albums .art-none { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 26px; }

/* Icecast status page */
.muted { color: var(--muted); }
.ic-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ic-dot { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; display: inline-block; flex: none; }
.ic-dot.bad { background: var(--red-hot); box-shadow: 0 0 8px var(--red-hot); }
.ic-bad { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--red-hot); }
.kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; min-width: 0; }
.kv span { color: var(--muted); flex: none; }
.kv b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.ic-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ic-stats div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align: center; }
.ic-stats b { display: block; font: 700 28px Oswald, sans-serif; color: var(--text); }
.ic-stats span { color: var(--muted); font-size: 12.5px; }
details summary { cursor: pointer; color: var(--muted); }
details summary:hover { color: var(--red-hot); }
.ic-raw { margin: 10px 0 0; padding: 12px; background: #0b0707; border: 1px solid var(--line-soft); border-radius: 8px; font: 12.5px/1.5 Consolas, monospace; color: #d8c8c8; overflow-x: auto; white-space: pre; }

/* two cards */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo p { color: var(--muted); margin: 0 0 14px; }

footer.site { margin: 24px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 12.5px; }
footer.site a { color: var(--muted); cursor: pointer; }
footer.site a:hover { color: var(--red-hot); }
footer.site .donate { margin: 0 0 14px; }
footer.site .donate .btn { border: 1px solid var(--line); font-size: 13px; }
/* "Server Sanity Monitoring by PatchSanity.com": Patch Sanity's shield (fill drifting blue, black, red, black)
   with the MI, and two lines of text no taller than the shield. Same badge as the other watched sites. */
footer.site .monitored { display: flex; width: max-content; margin: 14px auto 0; align-items: center; gap: 8px; color: var(--muted); }
footer.site .monitored:hover { color: var(--muted); }
footer.site .monitored:hover b { text-decoration: underline; }
.ps-text { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 29px; font-size: 11px; line-height: 1.15; white-space: nowrap; }
.ps-text b { color: var(--text); font-size: 14px; line-height: 1.1; }
.shield { position: relative; display: block; flex: none; width: 26px; height: 29px; }
.shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes shieldcycle {
	0%, 100% { fill: #14306a; }
	25% { fill: #0b0b0c; }
	50% { fill: #5a0c12; }
	75% { fill: #0b0b0c; }
}
.shield path { fill: #14306a; stroke: #8c8c8c; stroke-width: 1.6; stroke-linejoin: round; animation: shieldcycle 40s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.shield path { animation: none; }
}
.shield img { position: absolute; left: 50%; top: 46%; width: auto; max-width: none; height: 16px; transform: translate(-50%, -50%); }

/* bottom player bar */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: linear-gradient(180deg, rgba(28,17,17,.97), rgba(20,12,12,.97)); backdrop-filter: blur(10px); border-top: 1px solid var(--red); box-shadow: 0 -10px 30px rgba(0,0,0,.5); }
.player .wrap { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; height: 72px; }
.player .play { width: 48px; height: 48px; box-shadow: 0 0 0 3px rgba(196,22,28,.25), 0 0 16px rgba(196,22,28,.45); }
.player .play svg { width: 22px; height: 22px; }
.player .pcover { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); display: grid; place-items: center; background: #1d0d0d; color: #6a2a2a; font: 700 18px Oswald, sans-serif; overflow: hidden; }
.player .pcover img { width: 100%; height: 100%; object-fit: cover; }
.player .a { font: 600 17px Oswald, sans-serif; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .t { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .wrap { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
/* like / dislike the song on air */
.pvote { display: flex; gap: 6px; }
.pvote[hidden] { display: none; }
.pvote .vb { display: inline-flex; align-items: center; gap: 4px; height: 36px; min-width: 40px; padding: 0 10px; border-radius: 99px; cursor: pointer;
	background: var(--panel); border: 1px solid var(--line); color: var(--muted); font: 600 13px Inter, sans-serif; }
.pvote .vb .material-icons { font-size: 18px; }
.pvote .vb:hover { color: var(--text); border-color: #5a2222; }
.pvote .vb.on { color: #fff; background: linear-gradient(180deg, #4a0c0e, #2a0608); border-color: var(--red); }
.pvote .vb .n:empty { display: none; }

/* User guide + What's new */
.guide .body > :first-child { margin-top: 0; }
.guide .body > :last-child { margin-bottom: 0; }
.guide ul, .guide ol, .rel ul { margin: 0 0 10px; padding-left: 22px; }
.guide li, .rel li { margin: 4px 0; max-width: 95ch; }
.guide .toc { columns: 2; column-gap: 32px; }
.guide .toc li { margin: 0 0 6px; break-inside: avoid; }
.guide .dj-table { margin: 8px 0; max-width: 640px; }
@media (max-width: 820px) { .guide .toc { columns: 1; } }

/* DJs: check-in page, account card, public page */
.dj-status { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.dj-status.live b { color: var(--red-hot); }
.dj-table { border-collapse: collapse; width: 100%; }
.dj-table th, .dj-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.dj-table th { color: var(--muted); font-weight: 500; white-space: nowrap; width: 1%; padding-right: 16px; }
.dj-table tr.today th, .dj-table tr.today td { color: var(--text); background: rgba(196,22,28,.12); }
.dj-table code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.dj-info { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(220px, 320px); gap: 20px; align-items: start; }
.dj-info p { margin: 0 0 10px; }
.dj-logo { width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #1d0d0d; }
.dj-card.live { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 24px rgba(196,22,28,.35); }
.card h2 .count .dot { display: inline-block; vertical-align: middle; margin-right: 4px; }
.dj-edit-grid { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 28px; }
.dj-edit textarea { width: 100%; box-sizing: border-box; }
.dj-edit input[type=time] { color-scheme: dark; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: 14px Inter, sans-serif; }
.dj-edit .dj-logo { width: 96px; margin: 4px 0; }
.dj-sched td { white-space: nowrap; }
.dj-sched input[type=time] { width: 112px; }
.vol { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.vol input { accent-color: var(--red); width: 110px; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; margin-left: 8px; vertical-align: middle; }
.eq i { width: 3px; background: var(--red-hot); animation: eq 1s infinite ease-in-out; }
.eq i:nth-child(2) { animation-delay: .2s; } .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 3px; } 50% { height: 14px; } }
.paused .eq i { animation: none; height: 3px; }

/* ---------- the existing inner pages (News, artist page, Login, Account, admin) ----------
   Their markup is unchanged; these rules give it the new look. */
#content fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 0 16px 16px; margin: 0 0 16px; min-width: 0; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.35); }
#content fieldset fieldset { box-shadow: none; background: var(--panel-2); }
#content .fieldset_darker { background: #0e0808; }
#content .fieldset_lighter { background: var(--panel-2); }
/* The heading becomes the card's own header strip, flush with the box edges (like Option A's cards),
   instead of a separate pill sitting on the border. Floating it takes it out of the border line. */
#content fieldset { overflow: hidden; }
#content fieldset > legend {
	float: left; width: calc(100% + 32px) !important; margin: 0 -16px 14px; padding: 8px 16px;
	border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
	background: linear-gradient(90deg, #3a0a0c, #1c0c0c); color: var(--text);
	font: 600 15px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
#content fieldset > legend + * { clear: both; }
#content fieldset::after { content: ""; display: table; clear: both; }
#content legend .legendSong { text-transform: none; letter-spacing: .02em; }
/* the old pages size their headings with these classes; without them the heading
   shrinks to its text and the grid columns inside it (titles, buttons) get squeezed */
/* status colours on band/release headings (the account page's colour key) */
#content fieldset > legend.blue_back { background: linear-gradient(90deg, #17305c, #0c1630); border-bottom-color: #2a4a80; }
#content fieldset > legend.red_back { background: linear-gradient(90deg, #7a1014, #3a0a0c); border-bottom-color: var(--red); }
#content fieldset > legend.green_back { background: linear-gradient(90deg, #1a5a24, #0f3a16); }
#content .width_100 { width: 100%; }
#content .width_98 { width: 98%; }
#content .width_90 { width: 90%; }
#content .width_75 { width: 75%; }
#content legend .row { margin-left: 0; margin-right: 0; flex-wrap: nowrap; }
#content legend [class*="col-xs"] { padding-left: 4px; padding-right: 4px; }
#content legend .ellit { min-width: 0; }
.material-icons { text-transform: none !important; letter-spacing: normal !important; }
#content .img_border { border: 1px solid var(--line); border-radius: 8px; background: #000; }
#content .ellit { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#content .ellit_r { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#content font[color] { color: var(--red-hot) !important; }
#content table { border-collapse: collapse; width: 100%; }
#content th, #content td { border: 1px solid var(--line-soft) !important; padding: 6px 8px; vertical-align: top; }
#content th { background: #2a0a0b; font: 600 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#content hr { border: 0; border-top: 1px solid var(--line); }
#content input[type=text], #content input[type=password], #content input[type=email], #content input[type=number], #content input[type=url], #content input:not([type]), #content select, #content textarea {
	background: #0e0808; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: 14px Inter, sans-serif; max-width: 100%;
}
#content input:focus, #content select:focus, #content textarea:focus { outline: none; border-color: var(--red); }
#content button:not(.play):not(.slick-arrow), #content input[type=submit], #content input[type=button], #content .loginButton, #content .editbtn {
	background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; font: 600 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
#content button:not(.play):not(.slick-arrow):hover, #content input[type=submit]:hover, #content input[type=button]:hover, #content .loginButton:hover, #content .editbtn:hover { background: var(--red-hot); }
/* edit / delete / add icons: one fixed-size square each, never wider than its column */
#content .editbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; margin: 0 0 0 auto; flex: none; }
/* the icon is a font ligature; pin its box to the glyph size so it sits dead centre in the square */
#content .editbtn .material-icons { display: block; width: 18px; height: 18px; margin: 0; padding: 0; font-size: 18px; line-height: 18px; overflow: hidden; text-align: left; text-indent: 0; }
#content .editbtn { text-align: left; }
#content legend .end-xs > .box, #content legend .end-xs { display: flex; justify-content: flex-end; gap: 6px; }
#content legend [class*="col-xs-1"], #content legend [class*="col-xs-2"] { flex: 0 0 auto; max-width: none; }
/* ...but the button itself centres its icon (the rule above would push it to the button's right edge) */
#content legend .end-xs > .editbtn, #content .editbtn.box { display: inline-flex; justify-content: center; align-items: center; }
#content .sidePanelhead { background: #2a0a0b; padding: 6px 10px; font: 600 14px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#content .sidePanelitem { border-bottom: 1px solid var(--line-soft); padding: 6px 10px; }
.underline_hover:hover, .underlineBtn:hover, .showArtist:hover, .clickIt:hover, .draw7More:hover, .hover_link { cursor: pointer; text-decoration: underline; }
[id$="-error"] { color: var(--red-hot); }
.blue_back { background: #0c1630; border: 1px solid var(--line); }
.red_back { background: #4a0c0e; border: 1px solid var(--line); }
.green_back { background: #0f3a16; border: 1px solid var(--line); }
#savestate { display: none; margin-top: 12px; }
#save_state_text { color: #fff; background: #3a0a0c; border: 1px solid var(--red); border-radius: 8px; padding: 10px 14px; text-align: center; }
.slick-slide { text-align: center; }
.slick-slide img { opacity: .25; transition: all .5s; margin: 10px; }
.slick-center img { opacity: 1; margin: 0 10px 10px; }
/* photo carousel arrows: round dark buttons with a red chevron, over the side photos */
#content .slick-arrow {
	z-index: 2; width: 40px; height: 40px; border-radius: 50%; padding: 0;
	background: rgba(20,12,12,.85); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.5);
	font-size: 0; line-height: 0; color: transparent; cursor: pointer;
	display: grid; place-items: center; transition: border-color .15s, background .15s;
}
#content .slick-arrow:hover, #content .slick-arrow:focus { background: #2a0a0b; border-color: var(--red); }
/* the old artist page squeezes the carousel into the middle 2/3; let it use the card's full width
   so the arrows sit at the card's edges and the side photos aren't cut off */
#content [class*="col-xs-offset-2"]:has(#band-slick) { margin-left: 0; flex-basis: 100%; max-width: 100%; }
#content .slick-prev { left: 0; }
#content .slick-next { right: 0; }
#content #band-slick { padding: 0 52px; }
#content #band-slick .slick-list { border-radius: 8px; }
/* Draw the chevron ourselves. slick's icon font draws its own filled circle, which sat off-centre inside ours. */
#content .slick-prev:before, #content .slick-next:before {
	content: ""; font-family: inherit; opacity: 1;
	width: 10px; height: 10px; border: solid var(--red-hot); border-width: 0 0 3px 3px; border-radius: 1px;
}
#content .slick-prev:before { transform: translate(2px, 1px) rotate(45deg); }
#content .slick-next:before { transform: translate(-2px, 1px) rotate(-135deg); }
#content .slick-arrow:hover:before { border-color: #fff; }
#content .slick-arrow.slick-disabled:before { opacity: .3; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.voteOpt { white-space: nowrap; padding: 2px 6px; font-size: 11px; font-weight: 600; color: var(--muted); border-radius: 5px; cursor: pointer; }
#voteNo, #voteNoSel { background: #4a0c0e; } #voteNa, #voteNaSel { background: #0c1630; } #voteYes, #voteYesSel { background: #0f3a16; }
#voteNoSel, #voteNaSel, #voteYesSel { color: #fff; }

/* The edit dialogs (Account page) are drawn in #dialog, outside #content, so they get the same form look here. */
.ui-dialog input[type=text], .ui-dialog input[type=password], .ui-dialog input[type=email], .ui-dialog input[type=number], .ui-dialog input[type=url], .ui-dialog input:not([type]), .ui-dialog select, .ui-dialog textarea {
	background: #0e0808; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: 14px Inter, sans-serif; max-width: 100%;
}
.ui-dialog input:focus, .ui-dialog select:focus, .ui-dialog textarea:focus { outline: none; border-color: var(--red); }
.ui-dialog .ui-dialog-content button, .ui-dialog .ui-dialog-content input[type=submit], .ui-dialog .ui-dialog-content input[type=button] {
	background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; margin: 4px 2px; cursor: pointer; font: 600 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ui-dialog .ui-dialog-content button:hover, .ui-dialog .ui-dialog-content input[type=submit]:hover, .ui-dialog .ui-dialog-content input[type=button]:hover { background: var(--red-hot); }
.ui-dialog label { color: var(--text); }
.ui-dialog img { max-width: 100%; height: auto; border-radius: 6px; }
/* file pickers (dialogs and pages) */
#content input[type=file], .ui-dialog input[type=file] { color: var(--muted); font: 13px Inter, sans-serif; max-width: 100%; }
#content input[type=file]::file-selector-button, .ui-dialog input[type=file]::file-selector-button {
	background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; margin-right: 10px; cursor: pointer; font: 600 12px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
#content input[type=file]::file-selector-button:hover, .ui-dialog input[type=file]::file-selector-button:hover { border-color: var(--red); }
/* Social media rows: the old light-grey box around "http://…[input]…/" becomes a dark field with the fixed parts shown muted */
.ui-dialog div[style*="background-color: lightgrey"], #content div[style*="background-color: lightgrey"] {
	background: #0e0808 !important; border: 1px solid var(--line) !important; border-radius: 6px; color: var(--muted); padding: 3px 6px; max-width: 100%;
}
.ui-dialog div[style*="background-color: lightgrey"] input, #content div[style*="background-color: lightgrey"] input { margin: 2px 0; }

/* Admin reports: their status colours were pure #0000FF blue and #FF0000 red; use the site's toned versions
   (blue = waiting for approval, red = marked for removal, dark red = file missing) */
#content td[style*="#0000FF"], #content td[style*="#0000ff"] { background: #17305c !important; }
#content td[style*="#FF0000"], #content td[style*="#ff0000"] { background: #7a1014 !important; }
#content td[style*="darkred"] { background: #4a0c0e !important; }
#content .enableOpt[style*="background-color: red"] { background: #7a1014 !important; border-radius: 4px; padding: 0 3px; }
#content .enableOpt[style*="background-color: green"] { background: #1a5a24 !important; border-radius: 4px; padding: 0 3px; }
#content .enableOpt, #content .loadMP3file { cursor: pointer; }
#content .enableOpt:hover, #content .loadMP3file:hover { color: #fff; text-decoration: underline; }
#content > table, #content > div > table, #content .USReport > table, #content .TNAReport > table, #content .PUReport > table { margin-top: 18px; background: var(--panel); border-radius: var(--radius); overflow: hidden; }

/* jQuery UI dialogs and tooltips */
.ui-dialog { background: var(--panel) !important; border: 1px solid var(--red) !important; border-radius: var(--radius) !important; color: var(--text) !important; font: 14px Inter, sans-serif !important; box-shadow: 0 20px 50px rgba(0,0,0,.7); }
.ui-dialog .ui-dialog-titlebar { background: linear-gradient(90deg, #3a0a0c, #1c0c0c) !important; border: 0 !important; color: var(--text) !important; font: 600 15px Oswald, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
.ui-dialog .ui-dialog-content { color: var(--text) !important; background: transparent !important; }
.ui-dialog .ui-dialog-buttonpane { background: transparent !important; border-top: 1px solid var(--line) !important; }
.ui-dialog .ui-button { background: var(--red) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font: 600 13px Oswald, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
.ui-widget-overlay { background: #000 !important; opacity: .7 !important; }
.ui-tooltip { background: #000 !important; color: #fff !important; border: 1px solid var(--red) !important; box-shadow: none !important; font: 12px Inter, sans-serif !important; }

/* phones */
@media (max-width: 820px) {
	.top .wrap { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.menu { margin: 0 auto; }
	.menu .menubutton, .menu .menuactive { padding: 6px 10px; font-size: 13px; }
	.hero-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px; text-align: center; }
	.cover { max-width: 240px; margin: 0 auto; display: block; }
	.np-label, .actions { justify-content: center; }
	.actions .btn.soft { margin-left: 0; }
	.band { grid-template-columns: minmax(0, 1fr); }
	.band .pic { max-width: 280px; margin: 0 auto; display: block; }
	.albums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.album { padding: 5px; }
	.album .n { font-size: 13px; }
	.tracks { columns: 1; }
	.tracks li { white-space: normal; }
	.duo { grid-template-columns: 1fr; }
	.feat { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.feat .pic { max-width: 220px; margin: 0 auto; display: block; }
	.feat-albums { justify-content: center; }
	.card h2 a { display: none; }
	.grid-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
	.vol { display: none; }
	.player .wrap { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; }
	.pvote .vb { padding: 0 8px; min-width: 36px; }
	.dj-info { grid-template-columns: minmax(0, 1fr); }
	.dj-logo { width: 140px; margin: 0 auto; display: block; }
	.dj-edit-grid { grid-template-columns: minmax(0, 1fr); }
	.preview-tag { top: auto; bottom: 84px; }
	/* old form buttons that end up stacked need a little room between them */
	#content input[type=submit], #content input[type=button], #content button:not(.play):not(.slick-arrow), #content .loginButton { margin: 6px 4px; }
	/* the old pages were laid out in fixed grid columns; let them stack */
	#content [class*="col-xs-"] { flex-basis: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
	/* ...except inside headings, where the title and its buttons stay on one line */
	#content legend [class*="col-xs"] { flex: 1 1 auto !important; max-width: none !important; }
	#content legend [class*="col-xs-1"], #content legend [class*="col-xs-2"] { flex: 0 0 auto !important; }
	.userbar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.userbar > :first-child { margin-left: auto; }
	.userbar > :last-child { margin-right: auto; }
}
@media (max-width: 420px) {
	/* small phones: drop the cover so the song name keeps room next to the vote buttons */
	.player .pcover { display: none; }
	.player .wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
	.pvote .vb .n { display: none; }
}