/* Radio shares the blue/green accents of the workspace. */
.radio-trigger .radio-symbol{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.radio-symbol>.radio-equalizer{display:none}.radio-trigger.is-playing{color:var(--blue);background:linear-gradient(140deg,#edf4ff,#e9faf3)}
.radio-trigger.is-playing .radio-symbol>.icon{display:none}.radio-trigger.is-playing .radio-symbol>.radio-equalizer{display:flex}
.radio-equalizer{display:flex;align-items:center;justify-content:center;gap:3px;height:24px}
.radio-equalizer i{display:block;width:3px;height:18px;border-radius:3px;background:var(--blue);transform:scaleY(.35);transform-origin:center}
.radio-equalizer i:nth-child(even){background:var(--green)}.radio-equalizer i:nth-child(2){height:24px}.radio-equalizer i:nth-child(3){height:20px}.radio-equalizer i:nth-child(4){height:14px}
.is-playing .radio-equalizer i{animation:radio-bars .85s ease-in-out infinite alternate}
.is-playing .radio-equalizer i:nth-child(2){animation-delay:-.35s}.is-playing .radio-equalizer i:nth-child(3){animation-delay:-.65s}.is-playing .radio-equalizer i:nth-child(4){animation-delay:-.15s}
@keyframes radio-bars{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.radio-popover{position:fixed;z-index:72;left:80px;bottom:18px;width:340px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:auto;border:1px solid #dce7f1;border-radius:18px;background:#fff;box-shadow:0 14px 55px #213e6329;color:var(--text)}
.radio-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--line);flex-shrink:0}
.radio-heading>span{display:flex;align-items:center;gap:8px}.radio-heading>span>.icon{color:var(--blue);width:20px}.radio-heading strong{font-size:15px}.radio-heading small{font-size:8px;color:#428e79;letter-spacing:1px;background:#eaf9f3;border-radius:4px;padding:3px 5px}
.radio-heading .icon-btn{width:32px;height:32px}
.radio-now{text-align:center;padding:16px 20px 8px;flex-shrink:0;background:linear-gradient(160deg,#f5f9ff,#f4fcf8)}
.radio-cover{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 10px;border:1px solid #dbece9;border-radius:14px;background:#ffffffc9}
.radio-cover .radio-equalizer{transform:scale(1.2)}
.radio-station-name{display:block;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.radio-status{font-size:11px;line-height:1.5;margin:5px 0 0;color:#6c8693;min-height:17px}.radio-status.is-error{color:#bd3456}
.radio-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px 8px;flex-shrink:0}
.radio-controls>button,.radio-volume>button,.radio-search>button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;color:#6c82a1;border-radius:50%}
.radio-controls>button:hover,.radio-volume>button:hover{background:var(--blue-soft);color:var(--blue)}
.radio-controls>button:disabled{opacity:.35;cursor:default}
.radio-controls>.radio-play{width:46px;height:46px;background:linear-gradient(130deg,#226cea,#01b37d);color:white;box-shadow:0 4px 12px #226cea26}
.radio-controls>.radio-play:hover{background:linear-gradient(130deg,#1d5dc8,#07996f);color:white}
.radio-volume{display:flex;align-items:center;gap:9px;padding:0 18px 12px;flex-shrink:0}
.radio-volume input{min-width:0;flex:1;height:24px;padding:0;border:0;box-shadow:none;accent-color:var(--blue);cursor:pointer}
.radio-volume output{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);width:32px;text-align:right}
.radio-volume-hint{font-size:10px;padding:0 20px 10px;color:var(--muted)}
.radio-catalog{padding:0 14px;display:flex;flex-direction:column;min-height:100px;flex:1}
.radio-tabs{display:flex;gap:5px;padding:3px;border-radius:9px;background:#f3f6fa;flex-shrink:0}
.radio-tabs button{flex:1;padding:7px;font-size:11px;border-radius:7px;color:#70819a}
.radio-tabs button[aria-pressed="true"]{background:white;color:var(--blue);box-shadow:0 1px 4px #263e6110}
.radio-search{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;margin:10px 0 7px;flex-shrink:0}
.radio-search input{width:100%;min-width:0;padding:8px 10px;font-size:12px;border:0;background:transparent;box-shadow:none}
.radio-search>button{border-radius:7px}.radio-search>button .icon{width:17px}
.radio-stations{min-height:62px;max-height:190px;overflow-y:auto;overscroll-behavior:contain}
.radio-station{display:flex;align-items:center;gap:9px;width:100%;padding:10px 7px;text-align:left;border-radius:8px}
.radio-station>span:nth-child(2){flex:1;min-width:0}.radio-station strong,.radio-station small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.radio-station strong{font-size:12px;font-weight:600;color:#354a69}.radio-station small{font-size:10px;color:#8795a9;margin-top:3px}
.radio-station-mark{width:29px;height:29px;border-radius:8px;background:#f1f5fa;display:flex;align-items:center;justify-content:center;color:#8297b1;flex-shrink:0}
.radio-station-mark .icon{width:16px}.radio-station>.icon{width:13px;color:#8da4bb}
.radio-station:hover,.radio-station[aria-pressed="true"]{background:#edf5ff}.radio-station[aria-pressed="true"] strong{color:var(--blue)}
.radio-list-message{padding:18px 10px;font-size:12px;line-height:1.6;color:var(--muted);text-align:center}.radio-list-message button{display:block;margin:8px auto 0}
.radio-footer{display:flex;justify-content:center;gap:5px;padding:11px 14px;font-size:10px;color:#98a4b5;border-top:1px solid var(--line);margin-top:8px;flex-shrink:0}.radio-footer a{color:#6a83a4}
.radio-popover button:focus-visible,.radio-popover input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media(prefers-reduced-motion:reduce){.is-playing .radio-equalizer i{animation:none;transform:scaleY(.8)}}
@media(max-width:600px){
  .left-nav .nav-footer{width:104px}.left-nav .nav-footer>.nav-item{min-width:44px;flex:1;width:auto}
  .radio-popover{left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 100px - env(safe-area-inset-bottom))}
  .radio-controls>button,.radio-volume>button,.radio-heading .icon-btn,.radio-search>button{width:44px;height:44px}
  .radio-tabs button{min-height:40px}.radio-search input{font-size:16px}.radio-station{min-height:48px}
  .radio-now{padding-top:12px}.radio-cover{display:none}.radio-status{margin-bottom:3px}
}