:root {
  --zone-padding-block: clamp(.55rem, 1.5dvh, .85rem);
  --zone-padding-inline: clamp(1rem, 4vw, 1.5rem);
  --brand-image-height-limit: clamp(8rem, 27dvh, 13.5rem);
  --station-image-scale: 1;
  --company-image-scale: .67;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07090c;
  color: #f2f5f7;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100dvh;
  display: flex;
  background:
    radial-gradient(circle at 50% 15%, rgba(38, 55, 67, .55), transparent 36%),
    linear-gradient(180deg, #0d1116, #07090c);
}

.player-shell {
  flex: 0 0 auto;
  width: min(100%, 34rem);
  margin: auto;
  display: grid;
  grid-template-rows: auto auto auto;
  border-inline: 1px solid rgba(255,255,255,.06);
  background: rgba(9, 12, 16, .72);
}

.brand-zone, .control-zone {
  min-width: 0;
  min-height: 0;
  padding: var(--zone-padding-block) var(--zone-padding-inline);
}

.brand-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.station-brand {
  padding-top: max(var(--zone-padding-block), env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.company-brand {
  padding-bottom: max(var(--zone-padding-block), env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
}

.logo-area {
  --brand-image-scale: var(--station-image-scale);
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-logo-area {
  --brand-image-scale: var(--company-image-scale);
}

.brand-image {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: calc(100% * var(--brand-image-scale));
  max-height: calc(var(--brand-image-height-limit) * var(--brand-image-scale));
  object-fit: contain;
}

.company-brand p {
  flex: 0 0 auto;
  margin: .4rem 0;
  color: #b9c3ca;
}

.company-brand small {
  flex: 0 0 auto;
  color: #66727b;
  font-size: .72rem;
  letter-spacing: .08em;
}

.control-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 1.5dvh, .9rem);
}

.selector-block {
  flex: 0 0 auto;
  width: min(100%, 23rem);
  min-width: 0;
}

.selector-block label {
  display: block;
  margin: 0 0 .45rem;
  color: #87949d;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

select, button {
  border: 1px solid #35424b;
  border-radius: .7rem;
  background: #151b21;
  color: #f5f7f8;
  font: inherit;
}

select {
  display: block;
  width: 100%;
  min-width: 0;
  padding: .9rem 1rem;
}

.control-panel {
  flex: 0 0 auto;
  width: min(100%, 23rem);
  height: clamp(8.75rem, 18dvh, 10rem);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(2.4rem, 10vw, 3.25rem);
  gap: clamp(.55rem, 2.5vw, .9rem);
}

.control-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(.7rem, 2.2vw, 1rem);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .8rem;
  background: rgba(14, 19, 24, .68);
}

button {
  flex: 0 0 auto;
  width: min(100%, 12rem);
  min-width: 5.5rem;
  min-height: 3.25rem;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, #26343d, #182128);
  border-color: #40515d;
  font-weight: 700;
  cursor: pointer;
}

button:active { transform: translateY(1px); }

.status-row {
  min-width: 0;
  min-height: 1.5rem;
  margin-top: clamp(.75rem, 2.2dvh, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  color: #9eabb3;
  font: 700 .73rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}

.led {
  flex: 0 0 auto;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: #551c21;
  box-shadow: 0 0 .15rem #551c21;
  transition: background .18s, box-shadow .18s;
}

.led.connecting { background: #d28b24; box-shadow: 0 0 .55rem rgba(255, 166, 40, .75); }
.led.buffering { background: #e4bd39; box-shadow: 0 0 .58rem rgba(228, 189, 57, .78); }
.led.playing { background: #36c777; box-shadow: 0 0 .6rem rgba(54, 199, 119, .78); }
.led.offline { background: #ef3945; box-shadow: 0 0 .7rem rgba(239, 57, 69, .78); }

.vu {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(.28rem, 1vw, .4rem);
  display: flex;
  flex-direction: column-reverse;
  gap: clamp(.12rem, .6dvh, .28rem);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .65rem;
  background: rgba(9, 14, 18, .82);
}

.vu-segment {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: .08rem;
  background: rgba(55, 193, 108, .13);
  border: 1px solid rgba(55, 193, 108, .2);
}

.vu-segment.lit {
  background: #37c16c;
  border-color: #58d989;
  box-shadow: 0 0 .28rem rgba(55,193,108,.5);
}

@media (min-width: 42rem) and (min-height: 52rem) {
  .player-shell { box-shadow: 0 0 4rem rgba(0,0,0,.55); }
}

@media (max-width: 20rem) {
  .brand-zone, .control-zone { padding-inline: 1rem; }
  .control-panel { gap: .55rem; }
  button { padding-inline: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}