/* ULTIMATE PROMPTER — World Radio */
.icon-btn.radio-btn { position: relative; }
.icon-btn.radio-btn.on { color: #ffc45c; border-color: rgba(255,196,92,.55); background: rgba(255,196,92,.12); }
.icon-btn.radio-btn.playing::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #5dff8f; box-shadow: 0 0 8px #5dff8f; }

.radio { --rx: #ffc45c; --rx-dim: rgba(255,196,92,.55); --rx-body: #1b1b22; --rx-ink: #f1efe8; --rx-mute: #9c99a8;
  position: fixed; right: 20px; bottom: 20px; z-index: 35; width: 372px; max-width: calc(100vw - 24px); color: var(--rx-ink); font-family: var(--body); color-scheme: dark; }
.radio svg { width: 18px; height: 18px; }
.radio button { color: inherit; }
.rx-panel, .rx-dock { background: linear-gradient(165deg, #2a2a33 0%, #17171d 55%, #101014 100%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12); }
.rx-panel { display: none; border-radius: 24px; padding: 14px; flex-direction: column; gap: 12px; max-height: min(86dvh, 760px); }
.radio.open .rx-panel { display: flex; animation: rxIn .22s ease-out; }
.radio.open .rx-dock { display: none; }
@keyframes rxIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.rx-top { display: flex; align-items: center; gap: 9px; font-size: 11.5px; letter-spacing: .18em; }
.rx-top b { font-weight: 800; }
.rx-freq { margin-left: auto; font: 500 11.5px var(--mono); letter-spacing: .04em; color: var(--rx-mute); }
.rx-led { width: 9px; height: 9px; border-radius: 50%; background: #55525f; flex: none; transition: .2s; }
.radio[data-state="playing"] .rx-led { background: #5dff8f; box-shadow: 0 0 10px #5dff8f; }
.radio[data-state="tuning"] .rx-led { background: var(--rx); box-shadow: 0 0 10px var(--rx); animation: rxBlink .7s infinite alternate; }
.radio[data-state="error"] .rx-led { background: #ff4d5e; box-shadow: 0 0 10px #ff4d5e; }
@keyframes rxBlink { to { opacity: .35; } }
.rx-mini { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--rx-mute) !important; border: 1px solid rgba(255,255,255,.1); flex: none; }
.rx-mini:hover { color: var(--rx-ink) !important; border-color: rgba(255,255,255,.3); }
.rx-off:hover { color: #ff6b78 !important; border-color: #ff6b78; }

/* glass display */
.rx-display { border-radius: 16px; padding: 12px 14px 10px; background: radial-gradient(120% 140% at 50% 0%, #2b1f08 0%, #120d04 60%, #0a0703 100%); border: 1px solid rgba(255,196,92,.28); box-shadow: inset 0 0 26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,220,150,.12); color: var(--rx); display: grid; gap: 9px; }
.rx-scale { position: relative; height: 20px; border-bottom: 1px solid var(--rx-dim); background:
  repeating-linear-gradient(90deg, var(--rx-dim) 0 1px, transparent 1px 10%) bottom / 100% 11px no-repeat,
  repeating-linear-gradient(90deg, rgba(255,196,92,.3) 0 1px, transparent 1px 2%) bottom / 100% 6px no-repeat; }
.rx-scale i { position: absolute; left: var(--needle, 50%); top: -2px; bottom: -3px; width: 2px; background: #ff4d3d; box-shadow: 0 0 8px #ff4d3d; border-radius: 2px; transition: left .7s cubic-bezier(.3,1.3,.4,1); }
.rx-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rx-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.rx-name { font: 700 17px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 14px rgba(255,196,92,.45); }
.rx-meta { font-size: 12px; color: var(--rx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-status { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-fav { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--rx-dim) !important; flex: none; }
.rx-fav.on, .rx-row-fav.on { color: var(--rx) !important; }
.rx-fav.on svg, .rx-row-fav.on svg { fill: currentColor; }
.rx-eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; flex: none; }
.rx-eq i { width: 3.5px; height: 20%; border-radius: 2px; background: var(--rx); opacity: .45; }
.radio[data-state="playing"] .rx-eq i { opacity: 1; animation: rxEq .9s infinite ease-in-out alternate; }
.rx-eq i:nth-child(2) { animation-duration: .6s !important; } .rx-eq i:nth-child(3) { animation-duration: 1.1s !important; } .rx-eq i:nth-child(4) { animation-duration: .75s !important; } .rx-eq i:nth-child(5) { animation-duration: .5s !important; }
@keyframes rxEq { from { height: 15%; } to { height: 100%; } }

/* transport */
.rx-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rx-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, #3a3a45, #1e1e25); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 6px 14px -6px #000, inset 0 1px 0 rgba(255,255,255,.18); transition: transform .1s, border-color .15s; }
.rx-btn:hover { border-color: var(--rx); }
.rx-btn:active { transform: translateY(1px) scale(.96); }
.rx-btn.big { width: 62px; height: 62px; background: linear-gradient(180deg, #ffd68a, #f2a531); color: #1a1205 !important; border-color: #ffe2a6; box-shadow: 0 10px 24px -8px rgba(255,180,60,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.rx-btn.big svg { width: 26px; height: 26px; }
.rx-rand { color: var(--rx) !important; }
.rx-vol { display: flex; align-items: center; gap: 10px; color: var(--rx-mute); text-transform: none; letter-spacing: 0; }
.rx-vol input[type="range"] { margin: 0; background: linear-gradient(90deg, var(--rx) var(--p, 80%), rgba(255,255,255,.16) var(--p, 80%)); }
.rx-vol input[type="range"]::-webkit-slider-thumb { background: #f1efe8; border-color: var(--rx); width: 20px; height: 20px; }
.rx-vol input[type="range"]::-moz-range-thumb { background: #f1efe8; border-color: var(--rx); }
.rx-grille { height: 14px; border-radius: 8px; background: radial-gradient(circle, rgba(255,255,255,.2) 1.200px, transparent 1.600px) 0 0 / 7px 7px; opacity: .6; flex: none; }

/* tuner */
.rx-tuner { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.rx-themes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; flex: none; }
.rx-themes button { flex: none; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 600; color: var(--rx-mute); white-space: nowrap; min-height: 34px; }
.rx-themes button:hover { color: var(--rx-ink); border-color: rgba(255,255,255,.3); }
.rx-themes button.on { background: var(--rx); color: #1a1205; border-color: var(--rx); }
.rx-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
.radio .combo-btn, .radio input[type="search"], .radio select { min-height: 40px; padding: 8px 11px; font-size: 14px; background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.14); color: var(--rx-ink); border-radius: 11px; }
.radio .combo-btn:focus-visible, .radio .combo-btn.open, .radio input[type="search"]:focus { border-color: var(--rx); box-shadow: 0 0 0 3px rgba(255,196,92,.2); }
.rx-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.4); flex: none; }
.rx-tabs button { padding: 7px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--rx-mute); }
.rx-tabs button.on { background: rgba(255,255,255,.12); color: var(--rx-ink); }
.rx-list { overflow-y: auto; min-height: 90px; max-height: 210px; flex: 1; display: grid; gap: 2px; align-content: start; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.rx-row { display: flex; align-items: center; border-radius: 10px; }
.rx-row:hover { background: rgba(255,255,255,.06); }
.rx-row.cur { background: rgba(255,196,92,.14); }
.rx-row.cur strong { color: var(--rx); }
.rx-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; text-align: left; }
.rx-flag { font-size: 18px; flex: none; }
.rx-row-text { min-width: 0; display: grid; }
.rx-row-text strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-row-text small { font-size: 11.5px; color: var(--rx-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-row-fav { width: 36px; height: 36px; display: grid; place-items: center; color: var(--rx-mute) !important; flex: none; }
.rx-row-fav svg { width: 16px; height: 16px; }
.rx-empty { margin: 0; padding: 18px 8px; text-align: center; color: var(--rx-mute); font-size: 13px; }
.rx-credit { margin: 0; text-align: center; font-size: 10.5px; color: #6f6c7a; flex: none; }

/* compact dock */
.rx-dock { display: flex; align-items: center; gap: 7px; padding: 8px 9px 8px 14px; border-radius: 99px; }
.rx-dock .rx-eq { height: 18px; }
.rx-dock-name { flex: 1; min-width: 0; text-align: left; padding: 4px 2px; }
.rx-dock .rx-name { display: block; font-size: 13.5px; color: var(--rx); text-shadow: none; }
.rx-dock .rx-btn { width: 36px; height: 36px; }
.rx-dock .rx-btn svg { width: 16px; height: 16px; }
.rx-dock .rx-play { background: linear-gradient(180deg, #ffd68a, #f2a531); color: #1a1205 !important; border-color: #ffe2a6; }
.rx-dock .rx-mini { border: 0; width: 28px; }

html.radio-on main { padding-bottom: 96px; }
@media (max-width: 719px) {
  .radio { left: 10px; right: 10px; width: auto; max-width: none; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .radio.open { bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 38; }
  .rx-panel { max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); border-radius: 22px; }
  .rx-list { max-height: none; }
  .rx-dock { padding-left: 12px; gap: 5px; }
  .rx-dock .rx-prev { display: none; }
  html.radio-on body { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  html.radio-on .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .radio[data-state="playing"] .rx-eq i { animation: none; height: 60%; } }