:root{
--brand:#5739b0;
--white:#ffffff;
--bg:#170a58;
--muted:#b9d7e6;
--danger:#ff2b2b;
--ok:#2cff6a;
--warn:#ffbf00;
--shadow: 0 10px 30px rgba(0,0,0,.35);

--leftMax: 320px;
--leftMin: 220px;
--onair:#155812;
--offair:#550000;
}
*{ box-sizing:border-box; }
html{ min-height:100%; }
body{ min-height:100vh; }

body{
margin:0;
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:
radial-gradient(1200px 700px at 20% 10%, rgba(87,57,176,.25), transparent 50%),
radial-gradient(1000px 700px at 80% 70%, rgba(87,57,176,.18), transparent 55%),
var(--bg);
background-attachment: fixed;
color:var(--white);
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(11,28,39,.95), rgba(11,28,39,.60));
position:sticky; top:0; z-index:10;
backdrop-filter: blur(8px);
}

.brandline{ display:flex; gap:12px; align-items:center; }
.topbarLogo{ height:42px; display:flex; align-items:center; }
.topbarLogo img{ height:100%; width:auto; display:block; }
.topbarLinks{ flex-wrap:nowrap; }

.btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.18);
background: rgba(87,57,176,.10);
color:var(--white);
padding:10px 12px;
border-radius:10px;
box-shadow: var(--shadow);
user-select:none;
font-weight:600;
}

.btn:hover{ border-color: rgba(87,57,176,.55); }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: rgba(87,57,176,.22); border-color: rgba(87,57,176,.55); }
.btn-danger{ background: rgba(255,43,43,.16); border-color: rgba(255,43,43,.55); }

.linkRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.linkBtn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color:var(--white);
text-decoration:none;
font-weight:750;
letter-spacing:.2px;
}
.linkBtn:hover{ border-color: rgba(87,57,176,.55); }

.pill{
padding:9px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
font-size:13px;
color:var(--muted);
background: rgba(255,255,255,.06);
font-weight:800;
letter-spacing:.3px;
}

.main{
display:grid;
grid-template-columns: 340px 920px 420px;
column-gap: 10px;
row-gap: 14px;
padding:14px 16px 120px;
max-width:1700px;
margin:0 auto;
align-items:start;
}

@media (max-width: 1400px){ .main{ grid-template-columns:1fr; } }

.card{
background: linear-gradient(180deg, rgba(13,34,48,.92), rgba(11,28,39,.92));
border:1px solid rgba(255,255,255,.10);
border-radius:16px;
padding:14px;
box-shadow: var(--shadow);
}

.card h2{
margin:0 0 10px 0;
font-size:20px;
font-weight:800;
letter-spacing:.4px;
color: rgba(255,255,255,.92);
text-transform: uppercase;
}

.clock{
margin-top:0;
margin-bottom:12px;
padding:12px;
border-radius:14px;
border:1px solid rgba(87,57,176,.35);
background: rgba(87,57,176,.08);
width:100%;
max-width: var(--leftMax);
min-width: var(--leftMin);
}

.clockTime{ font-size:34px; font-weight:800; letter-spacing:1px; }
.clockDate{ margin-top:6px; color: var(--muted); font-size:13px; letter-spacing:.2px; }

.verbalTime{
margin-top:10px;
color: var(--muted);
font-size:14px;
font-style: italic;
letter-spacing:.2px;
}

.analogClock{
position:relative;
width:100%;
max-width: var(--leftMax);
min-width: var(--leftMin);
aspect-ratio: 1 / 1;
margin: 14px auto 12px;
}
.analogClockSvg{
width:100%;
height:100%;
display:block;
}

.squareTile{
border-radius:14px;
width:100%;
max-width: var(--leftMax);
min-width: var(--leftMin);
height: 220px; /* <-- rectangle height; adjust if needed */
display:flex;
align-items:center;
justify-content:center;
align-self:start;
user-select:none;
cursor:pointer;
border: 2px solid rgba(0,0,0,.25);
background: #222;
box-shadow: 0 12px 30px rgba(0,0,0,.35);
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
will-change: transform;
}

.squareTile:focus{ outline: 2px solid rgba(87,57,176,.65); outline-offset: 3px; }
.squareTile:hover{ filter: brightness(1.08); box-shadow: 0 14px 34px rgba(0,0,0,.42); transform: translateY(-1px); }
.squareTile:active{ transform: translateY(1px) scale(.995); filter: brightness(1.00); box-shadow: 0 10px 26px rgba(0,0,0,.36); }
.squareTile.tileOn{ background: var(--onair); border-color: rgba(0,0,0,.35); }
.squareTile.tileOff{ background: var(--offair); border-color: rgba(0,0,0,.35); }

/* Silence tile (same size as On-Air tile) */
.silenceTile{
margin-top: 12px; /* same spacing you had before */
cursor: default; /* not clickable */
user-select: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0; /* keep it visually like a tile */
font-size: 30px;
font-weight: 950;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
}

/* State colours (re-using your existing class names) */
.silenceTile.ok{
background: rgba(44,255,106,.95);
color: #07121a;
border-color: rgba(44,255,106,.85);
}
.silenceTile.silence{
background: rgba(255,43,43,.22);
border-color: rgba(255,43,43,.70);
animation: flash 1s infinite;
}

.onAirTileText{
font-size:32px;
font-weight:950;
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
padding:0;
border:none;
background:transparent;
color:#ffffff;
}

.monitorCard{ max-width: none; }

.meterLabelAbove{ color:var(--muted); font-size:12px; letter-spacing:.25px; margin-bottom:8px; }
.meter{
background: rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
padding:8px 10px;
}
.meterTop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.meterScale{ font-size:12px; color:rgba(255,255,255,.70); }
.bars{ display:grid; grid-template-columns: repeat(20, 1fr); gap:5px; align-items:end; }
.bar{
height:14px;
border-radius:2px;
background: rgba(255,255,255,.10);
border:1px solid rgba(0,0,0,.25);
opacity:.16;
}
.bar.on{
opacity:1;
border-color: rgba(0,0,0,.35);
box-shadow: 0 0 12px rgba(0,0,0,.25) inset;
}
.bar.g{ background: linear-gradient(180deg, #4cff4c, #16d516); }
.bar.y{ background: linear-gradient(180deg, #ffe066, var(--warn)); }
.bar.r{ background: linear-gradient(180deg, #ff4d4d, #d91e1e); }

.npLine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
align-items: start;
}
@media (max-width: 900px) { .npLine { grid-template-columns: 1fr; } }
.infoCol { min-width: 0; }
.smallMuted{ color: var(--muted); font-size:12px; }

.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }

/* Now Playing Spotify card */
.npWrap {
  display: flex;
  gap: 12px;
  align-items: center; /* Keep artwork and text vertically centered */
  margin-top: 6px;
  /* Card styling */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color .2s, opacity .2s;
  /* Ensure it stretches cleanly in the grid */
  width: 100%;
}
.npWrap:hover {
  border-color: rgba(87,57,176,.35);
}

.npArt{
width:52px; height:52px; border-radius:10px; object-fit:cover;
border:2px solid rgba(87,57,176,.25);
background: rgba(255,255,255,.06);
flex: 0 0 auto;
}

.npText{ display:flex; flex-direction:column; gap:2px; min-width:0; width:100%; }
.npTitle{
font-size:18px; font-weight:900; letter-spacing:.2px;
overflow:hidden;
white-space:nowrap;
}
.npTitle span, .npArtist span {
display: inline-block;
white-space: nowrap;
animation: npScroll 18s linear infinite;
animation-play-state: running;
padding-right: 60px;
}
.npTitle span:hover, .npArtist span:hover {
animation-play-state: paused;
}
/* Only scroll when overflowing - JS will add .scrolling class */
.npTitle:not(.scrolling) span,
.npArtist:not(.scrolling) span {
animation: none;
padding-right: 0;
}
@keyframes npScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.npArtist{
color: var(--muted); font-size:12px; font-weight:750;
overflow:hidden;
white-space:nowrap;
}

.npMetaRow{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.npLink{
color: rgba(255,255,255,.92);
text-decoration:none;
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:850;
display:inline-flex;
align-items:center;
gap:8px;
}
.npLink:hover{ border-color: rgba(87,57,176,.55); }
.npSpotify{
color: rgba(255,255,255,.72);
font-size:12px;
font-weight:800;
display:inline-flex;
align-items:center;
gap:8px;
white-space:nowrap;
}

@keyframes npShimmer{
0%{ background-position: 200% 0; }
100%{ background-position: -200% 0; }
}

.npLoading .npArt, .npLoading .npTitle, .npLoading .npArtist{
color: transparent !important;
border-color: rgba(255,255,255,.10);
background: linear-gradient(100deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.11) 40, rgba(255,255,255,.06) 80);
background-size: 200% 100%;
border-radius: 10px;
}
.npLoading .npTitle{ height:20px; width: min(420px, 100%); }
.npLoading .npArtist{ height:14px; width: min(300px, 85%); }
.npLoading .npArt{ display:block !important; }

@media (prefers-reduced-motion: no-preference){
.npLoading .npArt, .npLoading .npTitle, .npLoading .npArtist{ animation: npShimmer 1.15s linear infinite; }
}
@media (prefers-reduced-motion: reduce){
.npLoading .npArt, .npLoading .npTitle, .npLoading .npArtist{ animation:none; }
}

.list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.track{
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
}

.track .t{ font-weight:650; }
.track .ts{ color: var(--muted); font-size:12px; white-space:nowrap; }

/* Recently Played pretty rows */
.trackLeft{ display:flex; gap:10px; align-items:center; min-width:0; }
.art{
width:44px; height:44px; border-radius:10px; object-fit:cover;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
flex: 0 0 auto;
}
.trackText{ min-width:0; }
.trackText a{ color: rgba(255,255,255,.92); text-decoration:none; }
.trackText a:hover{ text-decoration:underline; }

.silenceBadge{
position: static;
margin-top: 12px;
padding: 14px 16px;
border-radius: 14px;
font-weight: 950;
letter-spacing: .7px;
font-size: 20px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
backdrop-filter: blur(8px);
box-shadow: var(--shadow);
user-select: none;
width: 100%;
max-width: var(--leftMax);
min-width: var(--leftMin);
text-align: center;
}

.silenceBadge.ok{
color:#07121a;
background: rgba(44,255,106,.95);
border-color: rgba(44,255,106,.85);
}
.silenceBadge.silence{
color:var(--white);
background: rgba(255,43,43,.22);
border-color: rgba(255,43,43,.70);
animation: flash 1s infinite;
}
@keyframes flash{
0%,49%{opacity:1;}
50%,100%{opacity:.25;}
}

/* =========================
Listener Card
========================= */
.listenerCard { margin-top:6px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:14px 16px 12px; transition:border-color .2s; }
.listenerCard.listenerError { opacity:0.45; }
.listenerCardHeader { display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:0.8rem; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,0.75); }
.listenerCardHeader svg { color:#22c55e; flex-shrink:0; }
.listenerCardStation { flex:1; }
.listenerTrend { font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.04em; display:none; }
.listenerTrend.trendUp { display:inline-block; background:rgba(34,197,94,.18); color:#22c55e; border:1px solid rgba(34,197,94,.35); }
.listenerTrend.trendDown { display:inline-block; background:rgba(239,68,68,.18); color:#f87171; border:1px solid rgba(239,68,68,.35); }
.listenerTrend.trendFlat { display:inline-block; background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.15); }
.listenerBigCount { font-size:2.6rem; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; line-height:1; margin-bottom:4px; }
.listenerSubLine { font-size:0.78rem; color:rgba(255,255,255,0.45); margin-bottom:2px; }
.listenerPeak { font-size:0.78rem; color:rgba(255,255,255,0.45); margin-bottom:6px; }
.listenerPeak span { color:rgba(255,255,255,0.7); font-weight:600; }
.listenerDelta { font-size:0.78rem; font-weight:600; }
.listenerDelta.deltaUp { color:#22c55e; }
.listenerDelta.deltaDown { color:#f87171; }
.listenerDelta.deltaFlat { color:rgba(255,255,255,0.4); }

/* =========================
Presenter Card
========================= */
.presenterCard { display:flex; align-items:flex-start; gap:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:12px 14px; margin-top:6px; transition:border-color .2s, opacity .2s; position:relative; }
.presenterCard.presenterOff { opacity:0.45; }
.presenterPhoto { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(87,57,176,.4); flex-shrink:0; }
.presenterAvatar { width:48px; height:48px; border-radius:50%; background:rgba(87,57,176,.15); border:2px solid rgba(87,57,176,.35); display:flex; align-items:center; justify-content:center; color:var(--brand); flex-shrink:0; }
.presenterInfo { flex:1; min-width:0; }
.presenterShow { font-size:0.92rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.presenterName { font-size:0.8rem; color:var(--brand); font-weight:600; margin-bottom:4px; }
.presenterDesc { font-size:0.73rem; color:rgba(255,255,255,0.4); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:4px; }
.presenterTime { font-size:0.7rem; color:rgba(255,255,255,0.3); letter-spacing:.02em; }
.presenterLiveDot { display:flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:800; letter-spacing:.1em; color:#22c55e; flex-shrink:0; margin-top:2px; }
.livePulse { width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; animation:livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.35;transform:scale(0.7);} }
.presenterNextWrap { margin-top:6px; }
.presenterNext { font-size:0.78rem; color:rgba(255,255,255,0.45); padding:7px 11px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; }