.dolobu-radio {
  position: fixed;
  z-index: 90;
  top: max(58px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  color: #f7f5ff;
  font: 800 12px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.dolobu-radio button { font: inherit; cursor: pointer; }
.dolobu-radio__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 9px;
  border: 2px solid #a5f3fc;
  color: #f7f5ff;
  background: #27205b;
  box-shadow: 4px 4px 0 #6d28d9;
}
.dolobu-radio__toggle i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8b7ad1;
}
.dolobu-radio__toggle.is-on i {
  background: #67e8f9;
  box-shadow: 0 0 12px #67e8f9;
}
.dolobu-radio__toggle span { color: #a5f3fc; font-size: 9px; }
.dolobu-radio__panel {
  width: min(336px, calc(100vw - 16px));
  margin-top: 8px;
  overflow: hidden;
  border: 2px solid #a78bfa;
  background: #21194bf5;
  box-shadow: 8px 8px 0 #4338ca;
}
.dolobu-radio__panel header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #7367bb;
}
.dolobu-radio__panel header div { display: grid; gap: 2px; }
.dolobu-radio__panel header small { color: #67e8f9; font-size: 8px; letter-spacing: .16em; }
.dolobu-radio__panel header button {
  width: 34px;
  border: 1px solid #8b7ad1;
  color: #f7f5ff;
  background: #352b73;
  font-size: 20px;
}
.dolobu-radio nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; }
.dolobu-radio nav button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  border: 1px solid #7367bb;
  color: #ddd6fe;
  background: #302762;
}
.dolobu-radio nav button.active { border-color: #67e8f9; color: #67e8f9; background: #4338ca; }
.dolobu-radio nav span { font-size: 7px; }
.dolobu-radio__player { padding: 0 8px 8px; }
.dolobu-radio__player iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 8px; }
.dolobu-radio__player small { display:block; padding:6px 2px 0; color:#c4b5fd; font-size:8px; font-weight:700; }
.dolobu-radio__player p { display: grid; place-content: center; min-height: 90px; margin: 0; color: #c4b5fd; text-align: center; }
.dolobu-radio__player p span { margin-top: 6px; font-size: 9px; font-weight: 600; }
.dolobu-radio__panel footer { padding: 6px 9px; color: #a5f3fc; background: #302762; font-size: 7px; letter-spacing: .12em; }
@media (max-width: 600px) {
  .dolobu-radio { top: max(48px, env(safe-area-inset-top)); }
  .dolobu-radio__toggle { min-height: 34px; padding: 5px 7px; }
  .dolobu-radio__panel { max-height: calc(100dvh - 96px); overflow: auto; }
}