#app-views {
  position: fixed;
  inset: auto auto 14px 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #151311ed;
  white-space: nowrap;
}
#app-views button, #radio-view button, #radio-view select {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
#app-views button {
  padding: 8px 14px;
  border: 0;
  border-radius: 20px;
  background: transparent;
}
#app-views button[aria-pressed=true] { background: #efb76f; color: #23160e; }
#shelf button.shelf-album { justify-content: flex-start; align-items: center; overflow-wrap: anywhere; }
#shelf .shelf-album img { vertical-align: middle; object-fit: cover; border-radius: 4px; }
body[data-view=radio] > :not(#gl, #vig, #radio-view, #app-views, #teaser, #toggles, #ctl, #loader, #album-info) { display: none !important; }
body[data-view=radio] #toggles #t-records, body[data-view=radio] #ctl .file { display: none; }
body:not([data-view=radio]) #ctl .ctl-radio-volume, body[data-view=radio] #ctl .ctl-deck-volume { display: none; }
#t-album-info { white-space: nowrap; }
.album-info {
  position: fixed;
  z-index: 11;
  top: max(60px, calc(48px + env(safe-area-inset-top)));
  left: env(safe-area-inset-left);
  box-sizing: border-box;
  width: min(310px, calc(100vw - 16px));
  max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 44px 20px 20px;
  border: 1px solid #ffffff29;
  border-radius: 16px;
  background: rgba(20, 18, 17, .80);
  backdrop-filter: blur(12px);
  box-shadow: 10px 12px 40px #0006;
  transform: translateX(calc(-100% - env(safe-area-inset-left) - 48px));
  visibility: hidden;
  touch-action: pan-y;
}
.album-info.is-open {
  transform: translateX(0);
}
.album-info.is-visible {
  visibility: visible;
}
.album-info h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.album-info p { margin: 12px 0 0; color: var(--soft); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.album-info .album-info-artist { margin-top: 4px; color: #efb76f; }
#album-info-cover:empty, .album-info p:empty { display: none; }
#album-info-cover img { display: block; width: min(100%, 220px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 9px; margin-bottom: 16px; }
#album-info-close {
  position: absolute;
  top: 6px;
  right: 9px;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 24px/1 system-ui;
  cursor: pointer;
}
#album-info-close:hover { background: #ffffff16; }
@media (max-width: 760px) {
  .album-info {
    top: calc(124px + env(safe-area-inset-top));
    max-height: calc(100dvh - 216px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #toggles:has(#t-album-info:not([hidden])) #t-records { max-width: max(72px, calc(100vw - 278px)); }
}
#radio-view[hidden] { display: none; }
#radio-view {
  position: fixed;
  z-index: 8;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(68px + env(safe-area-inset-bottom));
  width: min(322px, calc(100% - 24px));
}
.radio-layout { position: relative; }
.radio-display {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.radio-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.radio-transport button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #725844;
  border-radius: 6px;
  background: #27201b;
}
#radio-view #radio-play { color: #23160e; background: #efb76f; }
.radio-settings {
  position: absolute;
  inset: auto 0 calc(100% + 8px);
  max-height: 50dvh;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #171412ee;
  font-size: 14px;
}
.radio-settings[hidden] { display: none; }
.radio-settings label { display: grid; gap: 7px; }
.radio-settings select { background: #27201b; padding: 8px; border: 1px solid #725844; border-radius: 6px; }
.radio-settings input { accent-color: #efb76f; min-width: 0; }
.radio-settings details, #radio-status { grid-column: 1 / -1; }
.radio-settings summary { cursor: pointer; }
#radio-library { display: grid; gap: 4px; max-height: 210px; overflow: auto; margin-top: 8px; }
#radio-library label { display: flex; align-items: center; padding: 5px 0; }
#radio-status { margin: 0; color: #efb76f; }
#radio-status:empty { display: none; }
@media (max-width: 640px) {
  #app-views { bottom: calc(12px + env(safe-area-inset-bottom)); }
  #radio-view { right: 50%; transform: translateX(50%); }
  .radio-transport { justify-content: center; }
  body:not([data-view=radio]) #credit { bottom: calc(61px + env(safe-area-inset-bottom)); }
}