:root{
  --bg1:#222;
  --bg2:#000;
  --panel:#000;
  --edge:#111;
  --ink:#fff;
  --silver:#c0c0c0;
  --muted:#808080;
  --red:#aa0000;
  --redHot:#ff0000;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  margin-top:40px;
  color:var(--ink);
  background: radial-gradient(var(--bg1), var(--bg2));
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Layout shell */
.shell{max-width:1100px;margin:0 auto;padding:18px}

/* Top bar becomes a “header card” */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--panel);
  border: none;
  padding:18px 18px;
  border-radius:4px;
}

.brand{display:flex;gap:14px;align-items:center}
.logo{
  width:44px;height:44px;
  background:#000;
  border:1px solid var(--edge);
  display:grid;place-items:center;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  letter-spacing:1px;
  color:var(--silver);
}

.station{
  font-family:'Raleway', sans-serif;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:20px;
  color:var(--silver);
}
.tag{
  margin-top:2px;
  font-family:'Raleway', sans-serif;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}

.status{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px;
  background:#000;
  border:1px solid var(--edge);
  border-radius:0;
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px;
  color:var(--silver);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:#333;
}
.meta{
  font-family:'Raleway', sans-serif;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}

/* Grid */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap:18px;
}
@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .status{align-items:flex-start}
}

/* The radio “face” becomes a black card */
.radio .face{
  background: var(--panel);
  border: none;
  border-radius:4px;
  padding:18px;
}

/* “Dial” area – keep the structure, but make it darker and cleaner */
.dialTop{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:8px;
}
.freqLabel{
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  color:var(--red);
  font-size:12px;
  letter-spacing:1px;
}
.freqReadout{
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  color:var(--silver);
  font-weight:900;
  font-size:26px;
  letter-spacing:1px;
}

.dial{
  position: relative;
  height: 220px;         /* keep same as before */
  background: #000;
  border: 1px solid #111;
  overflow: hidden;
}

.dial #wave{
  width: 100%;
  height: 220px;
  display: block;
}

/* Now playing strip matches old title styling */
.nowStrip{
  margin-top:14px;
  padding:14px;
  background:#000;
  border:1px solid var(--edge);
  border-radius:0;
}
.nowLabel{
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  color:var(--red);
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:6px;
}
.nowTitle{
  font-family:'Raleway', sans-serif;
  text-transform:uppercase;
  color:var(--silver);
  font-weight:900;
  font-size:16px;
  line-height:1.25;
}

/* Meter labels should be red like dt */
.meters{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.meter{
  padding:12px;
  background:#000;
  border:1px solid var(--edge);
  border-radius:0;
}
.meterLabel{
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  color:var(--red);
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:8px;
}
.vu,.sig{
  height:12px;
  background:#111;
  border:1px solid #111;
  border-radius:0;
  overflow:hidden;
}
.vuFill,.sigFill{
  height:100%;
  width:0%;
  border-radius:0;
  transition: width 140ms linear;
}
.vuFill{ background: var(--red); }
.sigFill{ background: var(--silver); }

/* Controls */
.controls{
  margin-top:14px;
  display:grid;
  grid-template-columns: auto auto 1fr 1fr;
  gap:12px;
  align-items:center;
}
@media (max-width: 520px){
  .controls{grid-template-columns:1fr 1fr;}
}

.btn{
  padding:12px 14px;
  background:#ddd;
  border:1px solid var(--edge);
  border-radius:4px;
  color:var(--red);
  font-family:'Raleway', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
}
.btn:hover{ color:var(--redHot); }
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{
  background: var(--red);
  border:0;
  color:#fff;
}
.btn.primary:hover{
  background: var(--redHot);
  color:#fff;
}

.knobGroup{display:grid;gap:6px}
.knobLabel{
  font-family:'Montserrat', sans-serif;
  text-transform:uppercase;
  color:var(--red);
  font-size:12px;
  letter-spacing:1px;
}
.knob{width:100%}

/* Right panel matches old “card” */
.panel{
  background:#000;
  border:none;
  border-radius:4px;
  padding:18px;
  display:flex;
  flex-direction:column;
  min-height:420px;
}
.panelHead{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.panelTitle{
  font-family:'Raleway', sans-serif;
  text-transform:uppercase;
  color:var(--silver);
  font-weight:900;
  letter-spacing:1px;
}
.btn.small{
  padding:10px 10px;
  font-size:12px;
}

/* Recent list styled like dd */
.recent{
  margin:0;
  padding-left:24px;
  display:grid;
  gap:10px;
  overflow:auto;
}
.recent li{
  padding:12px;
  background:#000;
  border:1px solid var(--edge);
  border-radius:2px;
  font-family:'Raleway', sans-serif;
  text-transform:uppercase;
  color:var(--silver);
  font-size:12px;
  line-height:1.25;
}

.recent li:first-child {
  background: rgba(255,42,42,.12);
  border-left: 1px solid #ff2a2a;
  padding-left: 10px;
  font-weight: 600;
}

.recent {
  max-height: 340px;
  overflow-y: auto;
}

.recent::-webkit-scrollbar {
  width: 6px;
}

.recent::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}

.recent::-webkit-scrollbar-track {
  background: transparent;
}

.panelFoot{margin-top:auto;padding-top:12px}
.hint{
  font-size:12px;
  color:var(--muted);
}

.hint b{color:var(--silver)}

/* Make the right panel a column so the list can scroll */
.panel{
  display: flex;
  flex-direction: column;
}

/* Let the list take remaining height and scroll */
.panel .recent{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: 340px;
}

/* subtle depth for the main cards */
.topbar,
.radio .face,
.panel{
  box-shadow:0 0 18px rgba(0,0,0,.35);
}

/* Footer like old footer p */
.foot{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
}

a{color:var(--red)}
a:hover{color:var(--redHot)}

/* ON AIR pulse when live */
.pill.is-live .dot{
  background:#ff2a2a;
  box-shadow: 0 0 18px rgba(255,42,42,.45);
  animation: onairPulse 1.2s infinite ease-in-out;
}

@keyframes onairPulse{
  0%   { transform: scale(1);   opacity: .75; }
  50%  { transform: scale(1.35); opacity: 1;  }
  100% { transform: scale(1);   opacity: .75; }
}

/* Broadcast-style PLAY button */
.btn.primary{
  position: relative;
  transform: translateZ(0);
}
.btn.primary:active{
  transform: translateY(1px);
}
.btn.primary::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.35;
}