#radio-view {
    --radio-bg: var(--bg-main, #0b0b0d);
    --radio-panel: var(--bg-panel, #151517);
    --radio-panel-soft: var(--bg-card, #1b1b1e);
    --radio-border: var(--border-color, rgba(250, 191, 60, .2));
    --radio-orange: var(--primary, #FABF3C);
    --radio-yellow: var(--primary, #FABF3C);
    --radio-text: var(--text-main, #f8f7f3);
    --radio-muted: var(--text-muted, #aaa69c);
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 75% 2%, rgba(250, 191, 60, .08), transparent 30rem),
        var(--radio-bg);
    color: var(--radio-text);
    font-family: Manrope, Arial, sans-serif;
}

#radio-view, #radio-view * { box-sizing: border-box; }
#radio-view button, #radio-view input { font: inherit; }
#radio-view button, #radio-view a { -webkit-tap-highlight-color: transparent; }

body.radio-mode-active .right-panel-toggle { display: none; }
body.radio-mode-active .generation-space { min-width: 0; }

.radio-page {
    width: min(1040px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0 32px;
}

.radio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 42px;
}

.radio-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--radio-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.radio-back:hover { color: var(--radio-text); }
.radio-back svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.radio-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 11px;
    color: #ff7658;
    border: 1px solid rgba(255, 91, 54, .36);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 91, 54, .07), rgba(255, 91, 54, .025));
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.radio-live-pill i,
.radio-return-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4f2d;
    box-shadow: 0 0 12px #ff4f2d;
}

.radio-intro { margin-bottom: 18px; }
.radio-eyebrow { color: var(--radio-orange); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.radio-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.radio-title-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.radio-submit-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 5px 12px 5px 6px;
    color: #ece8df;
    border: 1px solid rgba(250, 191, 60, .32);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(250, 191, 60, .1), rgba(250, 191, 60, .035));
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.radio-submit-open > span { display: grid; place-items: center; width: 24px; height: 24px; color: #15120a; border-radius: 6px; background: var(--radio-orange); font-size: 17px; line-height: 1; }
.radio-submit-open:hover { color: white; border-color: rgba(250, 191, 60, .65); background: rgba(250, 191, 60, .12); transform: translateY(-1px); }

.radio-intro h1 {
    margin: 8px 0 6px;
    font-size: clamp(32px, 4.2vw, 48px);
    line-height: 1;
    letter-spacing: -.055em;
}

.radio-intro p { margin: 0; color: #cbc8c0; font-size: 12px; }

.radio-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(170px, 210px) minmax(250px, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 38px);
    min-height: 270px;
    padding: clamp(20px, 3vw, 26px);
    overflow: hidden;
    border: 1px solid rgba(250, 191, 60, .42);
    border-radius: 13px;
    background:
        linear-gradient(120deg, rgba(250, 191, 60, .07), transparent 42%),
        var(--radio-panel);
}

.radio-cover-wrap { position: relative; z-index: 1; width: 100%; max-width: 210px; aspect-ratio: 1; justify-self: center; }

.radio-cover-wrap img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
    background: #20201e;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .42);
}

.radio-cover-glow {
    position: absolute;
    inset: 12%;
    z-index: 0;
    border-radius: 50%;
    background: var(--radio-orange);
    filter: blur(80px);
    opacity: .15;
}

.radio-now { position: relative; z-index: 2; min-width: 0; }
.radio-now-label { margin-bottom: 7px; color: var(--radio-orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.radio-now h2 {
    max-width: 630px;
    margin: 0;
    overflow: hidden;
    color: white;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.02;
    letter-spacing: -.055em;
    text-overflow: ellipsis;
}

.radio-artist { margin-top: 6px; color: #efbd4a; font-size: 12px; }

.radio-controls { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

.radio-control {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.radio-control:hover { transform: translateY(-1px); }
.radio-control svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.radio-control.primary { width: 46px; height: 46px; color: #15120a; border: 1px solid #ffd264; border-radius: 11px; background: linear-gradient(145deg, #ffd061, #f5af25); box-shadow: 0 8px 20px rgba(250, 179, 44, .18), inset 0 1px rgba(255, 255, 255, .55); }
.radio-control.primary .icon-play { fill: currentColor; stroke: none; margin-left: 3px; }
.radio-control.primary .icon-pause { display: none; }
.radio-control.primary.is-playing .icon-play { display: none; }
.radio-control.primary.is-playing .icon-pause { display: block; }
.radio-control.primary:hover { box-shadow: 0 10px 24px rgba(250, 179, 44, .26), inset 0 1px rgba(255, 255, 255, .6); }
.radio-control.secondary { width: 36px; height: 36px; color: var(--radio-muted); border: 1px solid var(--radio-border); border-radius: 9px; background: rgba(255, 255, 255, .015); }
.radio-control.secondary:hover { color: var(--radio-text); border-color: var(--radio-orange); }

.radio-return-live {
    display: none;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin-left: 5px;
    padding: 0 11px;
    color: #ff7658;
    border: 1px solid rgba(255, 91, 54, .38);
    border-radius: 7px;
    background: rgba(255, 91, 54, .045);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
}
.radio-return-live:hover { color: #fff; border-color: rgba(255, 91, 54, .72); background: rgba(255, 91, 54, .11); }

.radio-return-live.is-visible { display: inline-flex; }

.radio-timeline {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin-top: 13px;
    color: #827e76;
    font-size: 10px;
}

#radio-view input[type="range"] { accent-color: var(--radio-orange); cursor: pointer; }
.radio-timeline input { width: 100%; }

.radio-volume-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; color: #7f7a72; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.radio-volume-row button { width: 28px; height: 28px; padding: 0; color: #a29e95; border: 0; background: none; cursor: pointer; }
.radio-volume-row button svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.radio-volume-row input { width: 130px; }

.radio-equalizer { position: absolute; right: 18px; bottom: 17px; display: flex; align-items: end; gap: 3px; height: 30px; opacity: .55; }
.radio-equalizer i { width: 4px; height: 20%; border-radius: 3px; background: var(--radio-orange); animation: radio-wave .8s ease-in-out infinite alternate; animation-play-state: paused; }
.radio-hero.is-playing .radio-equalizer i { animation-play-state: running; }
.radio-equalizer i:nth-child(2) { height: 55%; animation-delay: -.2s; }
.radio-equalizer i:nth-child(3) { height: 88%; animation-delay: -.55s; }
.radio-equalizer i:nth-child(4) { height: 38%; animation-delay: -.35s; }
.radio-equalizer i:nth-child(5) { height: 72%; animation-delay: -.7s; }
.radio-equalizer i:nth-child(6) { height: 28%; animation-delay: -.1s; }
.radio-equalizer i:nth-child(7) { height: 64%; animation-delay: -.42s; }
@keyframes radio-wave { to { height: 92%; } }

.radio-archive {
    margin-top: 18px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--radio-border);
    border-radius: 16px;
    background: var(--radio-panel);
}

.radio-submission-panel {
    margin-top: 18px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(250, 191, 60, .35);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(250, 191, 60, .07), transparent 42%), var(--radio-panel);
}
.radio-submission-panel[hidden] { display: none; }
.radio-submission-head { display: flex; align-items: start; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.radio-submission-head h3 { margin: 5px 0 8px; font-size: 19px; }
.radio-submission-head p { max-width: 760px; margin: 0; color: var(--radio-muted); font-size: 12px; line-height: 1.6; }
.radio-panel-close { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; padding: 0 0 2px; color: #fff; border: 1px solid rgba(250, 191, 60, .52); border-radius: 7px; background: #242018; cursor: pointer; font-size: 25px; font-weight: 300; line-height: 1; box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.radio-panel-close:hover { color: #15120a; border-color: var(--radio-orange); background: var(--radio-orange); }
.radio-my-tracks { display: grid; gap: 8px; }
.radio-own-track { display: grid; grid-template-columns: 46px minmax(150px, 1fr) minmax(180px, 240px) auto; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: var(--radio-panel-soft); }
.radio-own-track:hover { border-color: var(--radio-border); }
.radio-own-track > img { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; background: #222; }
.radio-own-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.radio-own-copy strong, .radio-own-copy span, .radio-own-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-own-copy strong { font-size: 12px; }
.radio-own-copy span { color: var(--radio-muted); font-size: 10px; }
.radio-own-copy small { color: #ff9c8b; font-size: 10px; }
.radio-own-track audio { width: 100%; height: 34px; }
.radio-own-action { display: flex; align-items: center; justify-content: end; gap: 8px; }
.radio-own-action button { padding: 8px 11px; color: #15120a; border: 0; border-radius: 7px; background: var(--radio-orange); font-size: 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.radio-own-action button:disabled { opacity: .55; cursor: wait; }
.radio-review-status { padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.radio-review-status.is-pending { color: #f6c75c; background: rgba(246, 199, 92, .12); }
.radio-review-status.is-approved { color: #62d99d; background: rgba(98, 217, 157, .12); }
.radio-review-status.is-rejected { color: #ff8d7a; background: rgba(255, 91, 71, .12); }
.radio-my-pagination { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 8px; color: var(--radio-muted); font-size: 10px; }
.radio-my-pagination button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0 0 2px; color: var(--radio-text); border: 1px solid var(--radio-border); border-radius: 7px; background: var(--radio-panel-soft); cursor: pointer; font-size: 20px; line-height: 1; }
.radio-my-pagination button:hover:not(:disabled) { color: #15120a; border-color: var(--radio-orange); background: var(--radio-orange); }
.radio-my-pagination button:disabled { opacity: .3; cursor: default; }

.radio-track-form {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(250, 191, 60, .28);
    border-radius: 10px;
    background: rgba(7, 7, 8, .45);
}
.radio-track-form[hidden] { display: none; }
.radio-form-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.radio-form-preview img { width: 58px; height: 58px; border-radius: 8px; object-fit: cover; background: #222; }
.radio-form-preview div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.radio-form-preview strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.radio-form-preview span { color: var(--radio-muted); font-size: 10px; }
.radio-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.radio-form-fields label { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: #d8d5ce; font-size: 10px; font-weight: 700; }
.radio-form-fields label > input[type="text"] { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--radio-text); border: 1px solid var(--radio-border); border-radius: 7px; outline: 0; background: #0d0d0f; font-size: 12px; }
.radio-form-fields label > input[type="text"]:focus { border-color: rgba(250, 191, 60, .75); box-shadow: 0 0 0 3px rgba(250, 191, 60, .08); }
.radio-cover-field { grid-column: 1 / -1; }
.radio-cover-field input[type="file"] { width: 100%; padding: 8px; color: var(--radio-muted); border: 1px dashed rgba(250, 191, 60, .32); border-radius: 7px; background: rgba(250, 191, 60, .035); font-size: 10px; }
.radio-cover-field input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 10px; color: #15120a; border: 0; border-radius: 6px; background: var(--radio-orange); font-weight: 800; cursor: pointer; }
.radio-cover-field small { color: #77736b; font-size: 9px; font-weight: 500; }
.radio-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.radio-form-actions button { min-height: 36px; padding: 8px 13px; border-radius: 7px; font-size: 10px; font-weight: 800; cursor: pointer; }
.radio-form-cancel { color: var(--radio-muted); border: 1px solid var(--radio-border); background: transparent; }
.radio-form-submit { color: #15120a; border: 1px solid var(--radio-orange); background: var(--radio-orange); }
.radio-form-submit:disabled { opacity: .55; cursor: wait; }

.radio-archive-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.radio-archive h3 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.035em; }
.radio-archive-tools { display: flex; align-items: center; gap: 18px; color: #d8d5ce; font-size: 12px; }

.radio-search { display: flex; align-items: center; gap: 8px; width: min(260px, 34vw); padding: 9px 11px; border: 1px solid var(--radio-border); border-radius: 8px; background: #0d0d0c; }
.radio-search:focus-within { border-color: rgba(250, 191, 60, .7); }
.radio-search svg { width: 17px; fill: none; stroke: #817d75; stroke-width: 1.7; }
.radio-search input { width: 100%; padding: 0; color: var(--radio-text); border: 0; outline: 0; background: transparent; font-size: 12px; }

.radio-track-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.radio-track {
    display: grid;
    grid-template-columns: 28px 38px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 7px 9px;
    color: var(--radio-text);
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--radio-panel-soft);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.radio-track:hover { transform: translateY(-1px); border-color: #403a31; background: #1b1b19; }
.radio-track.is-active { border-color: rgba(250, 191, 60, .65); background: rgba(250, 191, 60, .08); }
.radio-track.is-unavailable { opacity: .5; }
.radio-track.is-unavailable .radio-track-play { color: #ff7b61; }
.radio-track-number { color: #c8a24d; font-size: 9px; text-align: center; }
.radio-track-cover { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #252522; }
.radio-track-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.radio-track-title, .radio-track-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-track-title { color: var(--radio-text); font-size: 12px; font-weight: 800; line-height: 1.15; }
.radio-track-artist { color: #99958c; font-size: 10px; font-weight: 500; line-height: 1.15; }
.radio-track-play { display: grid; place-items: center; width: 32px; height: 32px; color: var(--radio-orange); border-radius: 8px; }
.radio-track-play svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: currentColor; }
.radio-track-play .icon-pause { display: none; fill: none; stroke: currentColor; stroke-width: 2.4; }
.radio-track.is-playing .radio-track-play .icon-play { display: none; }
.radio-track.is-playing .radio-track-play .icon-pause { display: block; }
.radio-track.is-active .radio-track-play { color: #111; background: var(--radio-orange); }
.radio-loading, .radio-empty { grid-column: 1 / -1; padding: 40px; color: var(--radio-muted); text-align: center; }

footer { padding: 28px 4px 0; color: #615e58; font-size: 11px; text-align: center; }

@media (max-width: 980px) {
    .radio-page { width: min(900px, calc(100% - 28px)); }
    .radio-hero { grid-template-columns: minmax(160px, 190px) minmax(230px, 1fr); gap: 24px; min-height: 250px; padding: 18px 20px; }
    .radio-cover-wrap { max-width: 190px; }
    .radio-now h2 { font-size: clamp(24px, 4vw, 32px); }
    .radio-track-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .radio-page { width: min(100% - 24px, 680px); padding-top: 16px; }
    .radio-header { margin-bottom: 30px; }
    .radio-back span { display: none; }
    .radio-intro h1 { font-size: clamp(30px, 10vw, 38px); }
    .radio-title-row { align-items: stretch; flex-direction: column; }
    .radio-title-actions { justify-content: space-between; }
    .radio-intro p { line-height: 1.6; }
    .radio-hero { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 16px; border-radius: 12px; }
    .radio-cover-wrap { width: min(56vw, 180px); margin: 0 auto; }
    .radio-now { text-align: center; }
    .radio-now h2 { font-size: clamp(23px, 7vw, 29px); }
    .radio-controls, .radio-volume-row { justify-content: center; }
    .radio-timeline { margin-inline: auto; }
    .radio-equalizer { display: none; }
    .radio-archive { padding: 18px 14px; border-radius: 13px; }
    .radio-archive-head { align-items: stretch; flex-direction: column; }
    .radio-archive-tools { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
    .radio-search { width: 100%; }
    .radio-track-list { grid-template-columns: 1fr; }
    .radio-own-track { grid-template-columns: 48px minmax(0, 1fr); }
    .radio-own-track audio, .radio-own-action { grid-column: 1 / -1; }
    .radio-own-action { justify-content: space-between; }
    .radio-form-fields { grid-template-columns: 1fr; }
    .radio-cover-field { grid-column: auto; }
}

@media (max-width: 480px) {
    .radio-page { width: calc(100% - 16px); padding-top: 10px; }
    .radio-title-actions { align-items: stretch; flex-direction: column; }
    .radio-submit-open { width: 100%; }
    .radio-live-pill { align-self: flex-start; }
    .radio-controls { flex-wrap: wrap; }
    .radio-return-live { width: 100%; justify-content: center; margin: 4px 0 0; }
    .radio-timeline { grid-template-columns: 34px 1fr 34px; }
    .radio-volume-row span { display: none; }
    .radio-submission-panel { padding: 16px 12px; border-radius: 13px; }
    .radio-submission-head { gap: 10px; }
    .radio-submission-head h3 { font-size: 17px; }
    .radio-track-form { padding: 12px; }
    .radio-form-actions { align-items: stretch; flex-direction: column-reverse; }
    .radio-own-track { grid-template-columns: 42px minmax(0, 1fr); }
    .radio-own-track audio, .radio-own-action { grid-column: 1 / -1; }
    .radio-archive-head { margin-bottom: 16px; }
    .radio-track { grid-template-columns: 24px 36px minmax(0, 1fr) 30px; gap: 8px; }
    .radio-track-cover { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}