/* Токены темы и базовые стили перенесены в site.css (общий для всех страниц). */

/* Отступ снизу, чтобы фиксированный плеер не перекрывал контент */
.radio-page {
  padding-bottom: 120px !important;
}

/* --- Поиск --- */

.radio-search-wrap {
  position: relative;
}

.radio-search-wrap .nav-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--radio-muted);
  pointer-events: none;
}

.radio-search-input {
  padding-left: 40px;
}

/* --- Плеер (фиксированная панель внизу) --- */

.player-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 24px));
  z-index: 1030;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.player-bar.player-hidden {
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
}

.player {
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid var(--radio-border);
  background: color-mix(in srgb, var(--radio-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px var(--radio-shadow-strong);
  display: flex;
  align-items: center;
  gap: 14px;
}

.player-toggle {
  width: 48px;
  height: 48px;
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0;
}

.player-icon-image {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
}

.player-cover-wrap {
  height: 64px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  background: var(--radio-surface);
  border: 1px solid var(--radio-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-cover {
  border-radius: inherit;
}

/* Обложка трека — квадрат, кадрируем по центру */
.player-cover-wrap.cover-track {
  width: 64px;
}

.player-cover-wrap.cover-track .player-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Иконка станции — ограничена по ширине, целиком, без обрезки */
.player-cover-wrap.cover-station {
  width: 108px;
  background: var(--radio-bg);
}

.player-cover-wrap.cover-station .player-cover {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.player-meta {
  min-width: 0;
  overflow: hidden;
}

.player-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-meta > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .player-bar {
    transition: none;
  }
}

/* --- Список станций (одна колонка, как в iOS) --- */

.station-list {
  border-radius: 20px;
  background: var(--radio-surface);
  border: 1px solid var(--radio-border);
  box-shadow: 0 6px 18px var(--radio-shadow);
  overflow: hidden;
}

/* Пустой контейнер не показываем (используется отдельный empty-state) */
.station-list:empty {
  display: none;
}

.station-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  /* Разделитель между строками, с отступом слева под миниатюру */
  border-top: 1px solid var(--radio-border);
  transition: background-color 0.15s ease;
}

.station-row:first-child {
  border-top: none;
}

.station-row:hover {
  background: color-mix(in srgb, var(--radio-muted) 8%, transparent);
}

.station-thumb {
  width: 92px;
  height: 52px;
  flex: none;
  border-radius: 10px;
  background: var(--radio-bg);
  border: 1px solid var(--radio-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.station-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.station-thumb img.cover-fallback {
  object-fit: contain;
  padding: 8px;
}

.station-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-country {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--radio-muted);
}

.station-country-name {
  font-size: 0.95rem;
  white-space: nowrap;
}

.station-flag {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--radio-border);
}

.station-row.active {
  background: color-mix(in srgb, #8b3ce8 12%, transparent);
}

/* --- Кнопка избранного (звезда слева) --- */

.station-fav {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--radio-muted);
  cursor: pointer;
}

.station-fav svg {
  width: 20px;
  height: 20px;
  display: block;
}

.station-fav.is-fav {
  color: #f5b301;
}

.station-fav.is-fav svg {
  fill: currentColor;
  stroke: currentColor;
}

.station-fav-placeholder {
  width: 30px;
  flex: none;
}

/* --- Кнопка удаления своей станции --- */

.station-delete {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--radio-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.station-delete svg {
  width: 18px;
  height: 18px;
  display: block;
}

.station-delete:hover {
  color: #e5484d;
  background: color-mix(in srgb, #e5484d 12%, transparent);
}

/* На узких экранах прячем текст страны, оставляем флаг */
@media (max-width: 575.98px) {
  .station-row {
    gap: 12px;
    padding: 10px 12px;
  }

  .station-country-name {
    display: none;
  }

  .station-thumb {
    width: 76px;
    height: 44px;
  }
}

.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--radio-muted);
  border: 1px dashed var(--radio-border);
  border-radius: 12px;
  background: var(--radio-surface);
}

/* --- Модалка добавления станции --- */

.station-modal {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.station-modal-dialog {
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 18px;
  background: var(--radio-surface);
  border: 1px solid var(--radio-border);
  box-shadow: 0 20px 50px var(--radio-shadow-strong);
}

.station-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* --- Большой плеер (раскрывается по тапу на мини-плеер) --- */

.big-player {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--radio-bg);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.big-player.big-player-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

body.big-player-open {
  overflow: hidden;
}

.big-player-inner {
  width: 100%;
  max-width: 480px;
  min-height: 100%;
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.big-player-close {
  align-self: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: none;
  background: none;
  color: var(--radio-muted);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.big-player-close svg {
  width: 28px;
  height: 28px;
}

.big-cover-wrap {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--radio-surface);
  border: 1px solid var(--radio-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px var(--radio-shadow-strong);
}

.big-cover-wrap.cover-track {
  aspect-ratio: 1 / 1;
}

.big-cover-wrap.cover-station {
  aspect-ratio: 16 / 9;
}

.big-cover-wrap.cover-track .big-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.big-cover-wrap.cover-station .big-cover {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

.big-volume-row {
  width: 100%;
  padding: 0 4px;
}

.big-volume {
  width: 100%;
  accent-color: #8b3ce8;
  cursor: pointer;
}

.big-player-row-top {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.big-stream-select {
  position: relative;
  max-width: 76%;
}

.big-stream-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--radio-border);
  background: var(--radio-surface);
  color: var(--radio-text);
  font-weight: 600;
  cursor: pointer;
}

.big-stream-select.single .big-stream-btn {
  cursor: default;
}

.big-stream-select.single .big-stream-btn svg {
  display: none;
}

.big-stream-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.big-stream-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.big-stream-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 80vw;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--radio-surface);
  border: 1px solid var(--radio-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px var(--radio-shadow-strong);
  z-index: 5;
}

.big-stream-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--radio-text);
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
}

.big-stream-item:hover {
  background: color-mix(in srgb, var(--radio-muted) 12%, transparent);
}

.big-stream-item.active {
  color: #8b3ce8;
  font-weight: 600;
}

.big-fav {
  position: absolute;
  right: 0;
  width: 44px;
  height: 44px;
  flex: none;
  border: none;
  background: none;
  color: var(--radio-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.big-fav svg {
  width: 26px;
  height: 26px;
}

.big-fav.is-fav {
  color: #f5b301;
}

.big-fav.is-fav svg {
  fill: currentColor;
  stroke: currentColor;
}

.big-player-row-main {
  position: relative;
  width: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-play {
  width: 84px;
  height: 84px;
  flex: none;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a5cff, #a03cff);
  box-shadow: 0 12px 30px rgba(139, 60, 232, 0.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.big-play-icon {
  width: 34px;
  height: 34px;
  filter: brightness(0) invert(1);
}

.big-apple {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  /* Бейдж чёрный — держим на светлой подложке, чтобы читался в любой теме */
  background: #fff;
  box-shadow: 0 4px 14px var(--radio-shadow);
  text-decoration: none;
}

.big-apple-badge {
  height: 22px;
  width: auto;
  display: block;
}

.big-track {
  width: 100%;
  text-align: center;
  padding: 0 8px;
}

.big-artist {
  font-weight: 700;
  font-size: 1.05rem;
  min-height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.big-trackname {
  color: var(--radio-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .big-player {
    transition: none;
  }
}

/* --- Кнопка «Заявить права» в большом плеере --- */

.big-claim-wrap {
  width: 100%;
  text-align: center;
}

.big-claim {
  border: none;
  background: none;
  color: var(--radio-muted);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
}

.big-claim:disabled {
  color: var(--radio-muted);
  text-decoration: none;
  cursor: default;
  opacity: 0.7;
}

/* --- Панель проверки владения в большом плеере --- */

.big-claim-panel {
  width: 100%;
  max-width: 360px;
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.big-claim-hint {
  color: var(--radio-muted);
  font-size: 0.85rem;
  text-align: center;
}

.big-claim-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px dashed var(--radio-border);
  background: var(--radio-surface);
  user-select: all;
}

.big-claim-status {
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}

.big-claim-status.is-ok {
  color: #2e9e5b;
}

.big-claim-status.is-warn {
  color: #e5843d;
}

/* --- Кабинет владельца станции --- */

.owner-section {
  border-radius: 16px;
  background: var(--radio-surface);
  border: 1px solid var(--radio-border);
  overflow: hidden;
}

.owner-section:empty {
  display: none;
}

.owner-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--radio-border);
}

.owner-row:first-child {
  border-top: none;
}

.owner-claim .big-claim-token {
  user-select: all;
}

/* --- Дашборд владельца: карточки станций --- */

.owner-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.owner-cards:empty {
  display: none;
}

.owner-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  border: 1px solid var(--radio-border);
  background: var(--radio-surface);
  overflow: hidden;
  box-shadow: 0 6px 18px var(--radio-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.owner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--radio-shadow-strong);
  color: inherit;
}

.owner-card-cover {
  aspect-ratio: 16 / 9;
  background: var(--radio-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.owner-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-card-cover img.cover-fallback {
  object-fit: contain;
  padding: 22px;
  opacity: 0.7;
}

.owner-card-body {
  padding: 12px 14px 14px;
}

.owner-card-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-card-country {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--radio-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.owner-card-country .station-flag {
  width: 20px;
  height: 20px;
}

.owner-card-status {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.owner-card-status.is-pending {
  background: color-mix(in srgb, #e5843d 18%, transparent);
  color: #b8690f;
}

.owner-card-status.is-published {
  background: color-mix(in srgb, #2e9e5b 18%, transparent);
  color: #2e9e5b;
}

.owner-card-status.is-unpublished {
  background: color-mix(in srgb, var(--radio-muted) 18%, transparent);
  color: var(--radio-muted);
}

.claim-results {
  max-height: 50vh;
  overflow-y: auto;
}

/* --- Редактор потоков --- */

.stream-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.stream-row .stream-url { flex: 3 1 160px; }
.stream-row .stream-type { flex: 0 0 88px; }
.stream-row .stream-bitrate { flex: 0 0 90px; }
.stream-row .stream-name { flex: 2 1 120px; }
.stream-row .stream-remove { flex: none; }

/* Панель проверки на pending-карточке владельца */
.owner-card-pending {
  cursor: default;
}

.owner-card-verify {
  padding: 0 14px 14px;
}

.owner-card-verify .big-claim-token {
  display: inline-block;
  font-size: 0.85rem;
}

/* Кнопка-подсказка рядом с кодом проверки */
.owner-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-token-help {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--radio-border);
  background: var(--radio-surface);
  color: var(--radio-muted);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.owner-token-help:hover {
  color: var(--radio-text);
  border-color: var(--radio-muted);
}

/* Инструкция подтверждения: способы и примеры кода */
.help-method {
  padding: 12px 0;
  border-top: 1px solid var(--radio-border);
}
.help-method:first-child { border-top: none; padding-top: 0; }

.help-method-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.help-example-label {
  font-size: 0.78rem;
  color: var(--radio-muted);
  margin-top: 6px;
  margin-bottom: 2px;
}

.help-code {
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--radio-bg);
  border: 1px solid var(--radio-border);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre;
}

/* Превью логотипа в редакторе */
.owner-logo-wrap {
  width: 140px;
  height: 79px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--radio-border);
  background: var(--radio-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.owner-logo-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.owner-logo-preview.is-fallback {
  width: 44px;
  opacity: 0.6;
}

/* Статус «требуется повторная проверка» */
.owner-card-status.is-reverify {
  background: color-mix(in srgb, #e5843d 20%, transparent);
  color: #b8690f;
}

/* Баннер повторной проверки в редакторе */
.reverify-banner {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #e5843d 40%, var(--radio-border));
  background: color-mix(in srgb, #e5843d 8%, var(--radio-surface));
  margin-bottom: 24px;
}

/* Per-stream верификация в редакторе */
.stream-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--radio-border);
}
.stream-item:last-child { border-bottom: none; }
.stream-item .stream-row { margin-bottom: 0; }

.stream-badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.stream-badge.is-ok { background: color-mix(in srgb, #2e9e5b 18%, transparent); color: #2e9e5b; }
.stream-badge.is-warn { background: color-mix(in srgb, #e5843d 20%, transparent); color: #b8690f; }

.stream-verify {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--radio-bg);
  border: 1px solid var(--radio-border);
}

/* Подтверждение прав в модалке поиска */
.claim-verify {
  padding: 12px 16px;
  background: var(--radio-bg);
  border-top: 1px solid var(--radio-border);
}

.claim-stream {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--radio-border);
  background: var(--radio-surface);
}

.claim-stream-name {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

/* URL потока показываем целиком — владельцу нужно понимать, куда вписывать код */
.claim-stream-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--radio-muted);
  overflow-wrap: anywhere;
  word-break: break-all;
  margin-bottom: 6px;
}

.claim-verify .big-claim-token {
  font-size: 0.82rem;
  padding: 5px 10px;
}

/* Журнал проверки потока */
.verify-log {
  margin: 10px 0 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid var(--radio-border);
  background: var(--radio-bg);
  color: var(--radio-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Строка потока — только для чтения, правка через модалку */
.stream-info {
  flex: 1 1 200px;
  min-width: 0;
}

.stream-info-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.stream-info-specs {
  font-size: 0.78rem;
  color: var(--radio-muted);
  margin-top: 2px;
}

/* Описание станции и сайт в большом плеере */
.big-about {
  width: 100%;
  text-align: center;
  padding: 0 8px;
  margin-top: 4px;
}

.big-about-text {
  color: var(--radio-muted);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 420px;
  margin: 0 auto;
}

.big-about-site {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8b3ce8;
  text-decoration: none;
}

.big-about-site:hover {
  text-decoration: underline;
}