/* --- RG FIX: hide mode label near the cat (requested) --- */
#vizLabel { display:none !important; }


/* Cat should ALWAYS be green (match the classic look) */
.pixel-cat {
  /* classic “green phosphor” tint from older versions */
  /* no glow: just tint */
  filter: grayscale(1) brightness(0.55) sepia(1) saturate(110) hue-rotate(95deg) !important;
  opacity: 0.95 !important;
}

/* No special state styling needed: the cat stays green in all modes */





.viz-icon-btn{
  width: 36px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,136,0.18);
  background: rgba(255,255,255,0.02);
  color: #caffca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.viz-icon-btn:hover{ background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.28); }
.viz-icon-btn:active{ transform: scale(0.985); }



/* --- Station button: more iconic (Winamp/Pioneer-ish) --- */
.station-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,136,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.10));
  color: rgba(202,255,202,0.92);
  letter-spacing: 1.4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .06s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.station-btn::before{
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  opacity: 0.95;
  filter: none;
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b7ffb7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<path d="M12 20v-6"/>\
<path d="M8 20h8"/>\
<path d="M12 7a6 6 0 0 0-6 6"/>\
<path d="M12 7a6 6 0 0 1 6 6"/>\
<path d="M12 3c5 0 9 4 9 9"/>\
<path d="M12 3C7 3 3 7 3 12"/>\
</svg>');
}
.station-btn:hover{
  background: linear-gradient(180deg, rgba(0,255,136,0.08), rgba(0,0,0,0.16));
  border-color: rgba(0,255,136,0.35);
}
.station-btn:active{ transform: scale(0.985); }


#stationOverlay{
  z-index: 100005 !important;
}


/* --- STATIONS button upgrade (Winamp/Pioneer-ish) --- */
.station-btn{
  border-radius: 14px !important;
  border: 1px solid rgba(0,255,136,0.28) !important;
  background: rgba(255,255,255,0.02) !important;
  color: #eafff1 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.station-btn::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,136,0.6);
  box-shadow: none;
  background: radial-gradient(circle at 35% 35%, rgba(160,255,210,0.95), rgba(0,255,136,0.15));
}
.station-btn:hover{ border-color: rgba(0,255,136,0.55) !important; background: rgba(0,255,136,0.06) !important; }

/* --- RG: STATIONS as small square icon button (prevents overlap) --- */
.station-square{
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  letter-spacing: 0 !important;
}
.station-square::before{ display:none !important; }
.station-square i, .station-square svg{ font-size: 14px; opacity: 0.95; }

/* keep control cluster from spilling into the visual screen */
#radioWindow .control-panel{ min-width: 0; }
#radioWindow .monitor-frame{ min-width: 0; }

/* --- RG: make sure control buttons never visually overlap the monitor (esp. with cat glow) --- */
#radioWindow .bottom-console{ gap: 18px !important; }
#radioWindow .monitor-frame{ margin-right: 16px !important; }

/* --- RG: Stations icon = green radio --- */
.station-square{ color: rgba(0,255,136,0.95) !important; }
.station-radio-svg{ width: 18px; height: 18px; display:block; }
.station-square:hover{ color: rgba(0,255,136,1) !important; }


/* --- v9: ensure spacing between the visual monitor + controls (no overlap) --- */
#radioWindow .bottom-console{ column-gap: 24px !important; }
#radioWindow .monitor-frame{ margin: 0 16px 0 12px !important; }

/* Keep control panel pinned inside its column */
#radioWindow .control-panel{
  justify-self: end;
  align-self: center;
}


#radioWindow .control-panel{ position: relative; }


/* --- THEME BUTTON + PANEL (WindowGlass) --- */
.theme-icon-btn{
  width: 36px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,136,0.18);
  background: rgba(255,255,255,0.02);
  color: rgba(202,255,202,0.90);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.theme-icon-btn:hover{ background: rgba(0,255,136,0.07); border-color: rgba(0,255,136,0.30); }
.theme-icon-btn:active{ transform: scale(0.985); }

.theme-panel{
  position: fixed;
  z-index: 999999;
  width: min(360px, calc(100vw - 24px));
  border-radius: 16px;
  padding: 12px;
  background: var(--glass-bg, rgba(18,18,20,0.72));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.10));
  box-shadow: var(--glass-shadow, 0 22px 60px rgba(0,0,0,0.55));
  backdrop-filter: blur(var(--glass-blur, 24px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px));
  display: none;
}
.theme-panel[aria-hidden='false']{ display:block; }

.theme-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 2px 2px 10px 2px;
}
.theme-title{
  font-family: monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: rgba(202,255,202,0.92);
}
.theme-close{
  width: 34px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,136,0.20);
  background: rgba(255,255,255,0.02);
  color: rgba(202,255,202,0.88);
  cursor:pointer;
}
.theme-close:hover{ background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.34); }

.theme-search-wrap input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,255,136,0.16);
  background: rgba(0,0,0,0.28);
  color: rgba(234,255,241,0.95);
  padding: 10px 12px;
  outline: none;
}
.theme-search-wrap input:focus{ border-color: rgba(0,255,136,0.35); }

.theme-list{
  margin-top: 10px;
  max-height: 160px;
  overflow: auto;
  padding-right: 4px;
}
.theme-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor:pointer;
  margin-bottom: 8px;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.theme-item:hover{ background: rgba(0,255,136,0.06); border-color: rgba(0,255,136,0.18); }
.theme-item:active{ transform: scale(0.992); }
.theme-item.active{
  background: rgba(0,255,136,0.10);
  border-color: rgba(0,255,136,0.32);
}
.theme-item .name{
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(234,255,241,0.95);
}
.theme-item .chip{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}

.theme-controls{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 10px;
  max-height: 280px;
  overflow-y: auto;
}
.theme-controls .trow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  color: rgba(202,255,202,0.86);
  font-size: 12px;
}
#accentPicker{
  width: 46px;
  height: 30px;
  border: none;
  background: transparent;
  cursor:pointer;
}
#glassSlider{
  width: 190px;
}
.theme-hint{
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
  color: rgba(202,255,202,0.78);
}


/* ============================================================
   THEME APPLIES TO WHOLE RADIO (not only the menu)
   ============================================================ */
:root{
  --radio-accent-rgb: 0,255,136; /* JS keeps this in sync */
}

/* Main radio window glass */
#radioWindow{
  background: var(--glass-bg, rgba(10,10,12,0.78)) !important;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.10)) !important;
  box-shadow: var(--glass-shadow, 0 40px 140px rgba(0,0,0,0.78)) !important;
  backdrop-filter: blur(var(--glass-blur, 18px)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px)) saturate(160%) !important;
}

/* Header + buttons */
#radioWindow .radio-win-header{
  background: color-mix(in srgb, var(--glass-bg, rgba(255,255,255,0.03)) 65%, rgba(255,255,255,0.04)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border, rgba(255,255,255,0.08)) 70%, rgba(255,255,255,0.08)) !important;
}
#radioWindow .radio-win-btn{
  background: color-mix(in srgb, var(--glass-bg, rgba(255,255,255,0.04)) 55%, rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.10)) !important;
}
#radioWindow .radio-win-btn:hover{
  border-color: rgba(var(--radio-accent-rgb), 0.45) !important;
  box-shadow: 0 0 0 1px rgba(var(--radio-accent-rgb), 0.22) !important;
}

/* Inner panels */
#radioWindow .tech-panel,
#radioWindow .monitor-frame{
  border: 1px solid var(--glass-border, rgba(255,255,255,0.10)) !important;
  background: color-mix(in srgb, rgba(0,0,0,0.70) 70%, var(--glass-bg, rgba(0,0,0,0.55))) !important;
}

/* Active EQ + “more” uses accent */
#radioWindow .eq-btn.active{
  background: rgba(var(--radio-accent-rgb), 0.12) !important;
  border-color: rgba(var(--radio-accent-rgb), 0.55) !important;
  color: rgba(var(--radio-accent-rgb), 0.98) !important;
}

/* Station square button: follow accent */
.station-square{
  border-color: rgba(var(--radio-accent-rgb), 0.28) !important;
  background: rgba(var(--radio-accent-rgb), 0.06) !important;
  color: rgba(var(--radio-accent-rgb), 0.95) !important;
}
.station-square:hover{
  border-color: rgba(var(--radio-accent-rgb), 0.55) !important;
  background: rgba(var(--radio-accent-rgb), 0.10) !important;
}


.viz-icon-btn{
  border-color: rgba(var(--radio-accent-rgb), 0.20) !important;
  background: rgba(255,255,255,0.02) !important;
  color: rgba(var(--radio-accent-rgb), 0.92) !important;
}
.viz-icon-btn:hover{
  background: rgba(var(--radio-accent-rgb), 0.08) !important;
  border-color: rgba(var(--radio-accent-rgb), 0.32) !important;
}

/* --- NOW PLAYING (CF Worker proxy) --- */
.np-row{
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  overflow: hidden; /* hard stop: keep text inside the box */
}
.np-cover{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(140,255,193,0.18);
  background: transparent;
  flex: 0 0 44px;
  opacity: 0.92;
  display: none; /* hidden by default; JS sets display:block when src loads */
}
.np-lines{ flex: 1; min-width: 0; overflow: hidden; }

.np-artist{
  display: block;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.12;
  color: rgba(230, 255, 245, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-title{
  margin-top: 2px;
  display: block;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.12;
  color: rgba(200, 255, 235, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-line{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.15;
  color: rgba(220, 255, 240, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════
   EQ PRESET CHIPS  – flat pill, green accent
   Matches reference: compact, readable, no LEDs
   ═══════════════════════════════════════════════════ */
.eq-pioneer {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  background: transparent;
  border: none;
  padding: 4px 0 2px;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}
/* Chip */
.epb {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .1s, border-color .1s, color .1s;
  flex-shrink: 0;
}
.epb-led { display: none; } /* hidden */
.epb-label {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: rgba(255,255,255,0.45);
  font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.epb:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.epb:hover .epb-label { color: rgba(255,255,255,0.80); }
.epb:active { transform: scale(0.96); }
/* ── ACTIVE: green ── */
.epb.active {
  background: rgba(0,255,136,0.13);
  border-color: rgba(0,255,136,0.50);
}
.epb.active .epb-label {
  color: rgb(0,255,136);
}
/* ── SLOW: violet ── */
.epb.epb-special.active {
  background: rgba(185,110,255,0.14) !important;
  border-color: rgba(185,110,255,0.50) !important;
}
.epb.epb-special.active .epb-label {
  color: rgb(200,150,255) !important;
}




/* Slowed wave canvas — hidden, spectrum color change handles the effect now */
.slowed-wave-canvas {
  display: none !important;
}
/* Purple tint on monitor border when slowed active */
body.slowed-active .monitor-frame {
  box-shadow: 0 0 0 1px rgba(160,80,255,0.30) !important;
  transition: box-shadow 1.2s ease !important;
}


/* --- SLOW FX PANEL (under SLOW button) --- */
/* Compact radio effect controls with neutral surfaces and mint accents. */
.eq-wrap{position:relative;overflow:visible!important}
#slowFxPanel{display:none;box-sizing:border-box;position:fixed;width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 20px);overflow:auto;margin:0;padding:16px;border:1px solid #91b8ab55;border-radius:18px;background:#101c21!important;color:#e6efed;box-shadow:0 12px 36px #0008;font:13px/1.4 system-ui,sans-serif;scrollbar-width:none}
#slowFxPanel.open{display:block}
#slowFxPanel .slowfx-popup-head{padding:0 0 12px;border-bottom:1px solid #ffffff12}
#slowFxPanel .slowfx-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
#slowFxPanel .slowfx-popup-title{font:650 16px/1.3 system-ui,sans-serif;letter-spacing:0;color:#edf5f2;text-shadow:none}
#slowFxPanel #slowfxClose{display:grid;place-items:center;width:30px;height:30px;min-width:30px;padding:0;border:1px solid #ffffff15;border-radius:50%;background:#ffffff08;color:#bbd0c7;font:22px/1 system-ui;cursor:pointer}
#slowFxPanel .slowfx-keep-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;color:#becfc8;font-size:12px}
#slowFxPanel .slowfx-keep-toggle input{position:absolute;opacity:0;width:1px;height:1px}
#slowFxPanel .slowfx-switch{position:relative;width:30px;height:17px;flex:none;box-sizing:border-box;border:1px solid #91b8ab55;border-radius:20px;background:#ffffff12}
#slowFxPanel .slowfx-switch::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#d5e2dc;transition:transform .12s ease}
#slowFxPanel .slowfx-keep-toggle input:checked + .slowfx-switch{background:#a5d9c266;border-color:#a5d9c2}
#slowFxPanel .slowfx-keep-toggle input:checked + .slowfx-switch::after{transform:translateX(13px);background:#e5f7ee}
#slowFxPanel .slowfx-keep-toggle input:focus-visible + .slowfx-switch{outline:2px solid #b9ddcf;outline-offset:3px}
#slowFxPanel .slowfx-row{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;margin:16px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit}
#slowFxPanel .slowfx-ico{display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff16;border-radius:9px;background:#c8e4d90a;color:#b9ddcf}
#slowFxPanel .slowfx-ico svg{display:block;width:21px;height:21px}
#slowFxPanel .slowfx-main{min-width:0}
#slowFxPanel .slowfx-hint{margin:3px 0 2px;color:#a5bbb3;font:11px/1.4 system-ui}
#slowFxPanel .slowfx-ends{display:flex;justify-content:space-between;gap:8px;color:#9db3aa;font:10px/1.3 system-ui}
#slowFxPanel .slowfx-keep-label small{display:block;margin-top:2px;font:10px/1.4 system-ui;color:#9db3aa}
#slowFxPanel .slowfx-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font:650 13px/1.4 system-ui;letter-spacing:0}
#slowFxPanel .slowfx-top span{font:600 12px/1.4 system-ui;font-variant-numeric:tabular-nums;color:#b9ddcf;letter-spacing:0}
#slowFxPanel input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:28px;margin:2px 0 0;padding:0;border:0;border-radius:0;background:transparent;accent-color:#b9ddcf;cursor:pointer;box-shadow:none}
#slowFxPanel input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#a5cebd var(--slowfx-fill,50%),#33474a var(--slowfx-fill,50%))}
#slowFxPanel input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:-5.5px;border:1px solid #effbf5;border-radius:50%;background:#cee7db;box-shadow:0 1px 3px #0006}
#slowFxPanel input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#33474a}
#slowFxPanel input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:#a5cebd}
#slowFxPanel input[type=range]::-moz-range-thumb{width:15px;height:15px;border:1px solid #effbf5;border-radius:50%;background:#cee7db;box-shadow:0 1px 3px #0006}
#slowFxPanel input:disabled{opacity:.35;cursor:default}
#slowFxPanel :is(button,input):focus-visible{outline:2px solid #b9ddcf!important;outline-offset:3px;box-shadow:none!important}

/* Remove dark slab behind transport controls — keep only individual buttons glassy */
#radioWindow .control-panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === 2026-03-17 radio bottom cleanup (updated for macOS dock) === */
/* #bottomBar is the old dark slab — dock pill replaces it visually */
#bottomBar{
  display:none !important;
}
/* #radioWindow bottom is managed via --btnbar-h set by syncShellLayout()
   which now measures #dockShelf height — no manual offset needed here */
#radioWindow{
  bottom: var(--btnbar-h, 62px) !important;
}
/* #bottomBtnBar glass pill is styled inline in index.html — do NOT override here */
#radioWindow .bottom-console,
#radioWindow .radio-win-body,
#radioWindow .control-panel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* ============================================================
   GLASS REMOVED — solid opaque radio surfaces (kept tasteful:
   layered dark shades, crisp 1px borders, soft dark depth).
   Scoped to radio UI only; global --glass-* vars untouched so
   the rest of the app keeps its look.
   ============================================================ */
#radioWindow,
#radioWindow .tech-panel,
#radioWindow .monitor-frame,
#radioWindow .control-panel,
#ceqPanel,
#stationOverlay,
#themePanel,
.slowfx-panel,
.slowfx-panel.slowfx-popup{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Solid window + popup surfaces (border/radius kept from base docked style) */
#radioWindow{
  background: #14151b !important;
}
#ceqPanel,
#stationOverlay,
#themePanel{
  background: #15161d !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
}

/* Inner layered panels */
#radioWindow .tech-panel{
  background: #1a1c23 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#radioWindow .monitor-frame{
  background: #0b0c11 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

/* Slow FX popup → solid */
.slowfx-panel,
.slowfx-panel.slowfx-popup{
  background: #15171f !important;
}
#pioneerDisplayControls{margin:0 0 0 6px;flex:none;white-space:nowrap}
#radioLookControls #pioneerPixelGrid{display:inline-flex;align-items:center;gap:9px;height:30px;min-height:30px;padding:3px 0;border:0;border-radius:4px;background:transparent;box-shadow:none;font:13px/1.2 system-ui;text-align:left}
#pioneerPixelGrid i{flex:none;box-sizing:border-box;width:30px;height:18px;border:1px solid #9cb5aa;border-radius:20px;position:relative;background:#ffffff08}
#pioneerPixelGrid i::after{content:"";position:absolute;width:12px;height:12px;left:2px;top:2px;border-radius:50%;background:#9cb5aa}
#pioneerPixelGrid[aria-checked="true"] i{border-color:#b7e8d1;background:#b7e8d1}
#pioneerPixelGrid[aria-checked="true"] i::after{left:14px;background:#15382b}
#radioLookControls #pioneerPixelGrid:focus-visible{outline:2px solid #b7e8d1;outline-offset:4px}