.radio-wrapper { padding: 32px 0; }
.radio-header { text-align: center; margin-bottom: 32px; }
.radio-title { font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.radio-subtitle { color: var(--text-muted); }

/* ================= 🌟 1. 严格等高网格与脱离文档流黑魔法 ================= */
.radio-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
/* 左侧作为基准：由内部三个卡片的内容自然撑开高度 */
.radio-col-left { display: flex; flex-direction: column; gap: 24px; }

/* 🌟 黑魔法第一层：右侧只作为包裹层，不提供任何高度（由 Grid 强制拉伸） */
.radio-col-right { 
    position: relative; 
    /* 移动端兜底高度 */
    min-height: 600px;
}

@media(max-width: 900px) { 
    .radio-workspace { grid-template-columns: 1fr; } 
    .radio-col-right { height: 600px; min-height: auto; }
}

/* 统一卡片设计语言 */
.radio-card { 
    background: var(--bg-surface); 
    border: 1px solid var(--border-color); 
    border-radius: 20px; 
    padding: 28px; 
    box-shadow: 0 4px 16px rgba(0,0,0,0.03); 
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.radio-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }

/* ================= 左侧卡片 1: 播放器 ================= */
.player-card { display: flex; flex-direction: column; align-items: center; }
.vinyl-container { width: 160px; height: 160px; border-radius: 50%; padding: 4px; background: #1e293b; box-shadow: 0 10px 25px rgba(0,0,0,0.2); margin-bottom: 24px; }
.vinyl-record { width: 100%; height: 100%; border-radius: 50%; background: repeating-radial-gradient(#0f172a, #0f172a 4px, #1e293b 5px, #1e293b 6px); display: flex; align-items: center; justify-content: center; transition: transform 0.2s linear; }
.vinyl-record.spinning { animation: spin 4s linear infinite; }
.vinyl-label { width: 50px; height: 50px; background: var(--primary-color); border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: #fff; font-weight: bold; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.radio-status { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
.radio-spectrum { width: 100%; height: 60px; background: rgba(0,0,0,0.02); border-radius: 10px; margin-bottom: 24px; }

.radio-controls { display: flex; gap: 20px; align-items: center; width: 100%; justify-content: center; }
.radio-btn { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--primary-color); color: #fff; font-size: 1.3rem; cursor: pointer; transition: 0.2s; flex-shrink: 0; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2); }
.radio-btn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3); }
.radio-btn:active { transform: scale(0.95); }
.radio-vol-slider { flex: 1; max-width: 140px; accent-color: var(--primary-color); }

/* ================= 左侧卡片 2: 睡眠定时器 ================= */
.radio-panel-title { font-weight: 700; color: var(--text-main); font-size: 1.1rem; }
.radio-timer-quick { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.radio-timer-btn { flex: 1; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 0; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: 0.2s; text-align: center; }
.radio-timer-btn.active, .radio-timer-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2); }

.radio-timer-custom-box { display: flex; align-items: center; gap: 8px; background: var(--bg-surface); padding: 6px 6px 6px 12px; border-radius: 12px; border: 2px solid var(--border-color); transition: 0.3s; }
.radio-timer-custom-box:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); }
.radio-timer-input { flex: 1; min-width: 50px; border: none; background: var(--bg-body); border-radius: 6px; padding: 8px; outline: none; color: var(--text-main); font-size: 1rem; font-weight: bold; text-align: center; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.radio-timer-input::-webkit-outer-spin-button, .radio-timer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.radio-timer-input[type=number] { -moz-appearance: textfield; }

.radio-timer-unit { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; margin-right: 4px; }
.radio-timer-btn-set { background: var(--text-main); color: var(--bg-surface); border: none; padding: 8px 16px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.radio-timer-btn-set:hover { opacity: 0.8; }
.radio-timer-btn-set.active { background: var(--primary-color); color: #fff; }
.radio-timer-countdown { font-family: monospace; font-size: 1.1rem; color: var(--primary-color); font-weight: bold; min-width: 55px; text-align: right; }

/* ================= 左侧卡片 3: 测试终端 ================= */
.radio-input-group { display: flex; gap: 12px; margin-top: 16px; flex-direction: column; }
.radio-input { padding: 14px 16px; border: 2px solid var(--border-color); border-radius: 12px; outline: none; background: var(--bg-body); color: var(--text-main); font-size: 1rem; transition: 0.2s; }
.radio-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1); }
.radio-btn-primary { padding: 14px; background: var(--primary-color); color: #fff; font-weight: bold; font-size: 1rem; border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; }
.radio-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* ================= 🌟 右侧卡片 4: 频道列表 (强制等高 + 内部滚动) ================= */
/* 🌟 黑魔法第二层：卡片使用绝对定位，四个方向拉伸到父级边缘，从而永远和左侧 1:1 对齐 */
.stations-card { 
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    display: flex; 
    flex-direction: column; 
}

/* 🌟 修复分类双行：强制单行不换行，且减小内边距 */
.radio-category-tabs { 
    display: flex; 
    flex-wrap: nowrap; 
    gap: 8px; 
    margin: 16px 0; 
    overflow-x: auto; 
    scrollbar-width: none; 
    flex-shrink: 0; 
}
.radio-category-tabs::-webkit-scrollbar { display: none; }
.radio-cat-btn { 
    background: var(--bg-body); border: 1px solid var(--border-color); 
    border-radius: 20px; 
    padding: 6px 14px; /* 进一步缩小内边距 */
    font-size: 0.85rem; font-weight: 600; color: var(--text-muted); 
    cursor: pointer; transition: 0.2s; 
    white-space: nowrap; /* 绝不换行 */
    flex-shrink: 0; 
}
.radio-cat-btn.active, .radio-cat-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2); }

/* 🌟 黑魔法第三层：列表本体利用 flex: 1 吸取绝对定位剩下的所有空间，并激活 y轴 滚动 */
.radio-station-list { 
    display: flex; flex-direction: column; gap: 10px; 
    flex: 1; 
    min-height: 0; 
    overflow-y: auto; padding-right: 8px; margin-bottom: 0;
}
.radio-station-list::-webkit-scrollbar { width: 6px; }
.radio-station-list::-webkit-scrollbar-track { background: var(--bg-body); border-radius: 4px; }
.radio-station-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.radio-station-list::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

.radio-station-btn { padding: 14px 16px; text-align: left; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-main); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.radio-station-btn:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateX(2px); }
.radio-station-btn.active { border-color: var(--primary-color); color: var(--primary-color); box-shadow: inset 4px 0 0 var(--primary-color); background: rgba(var(--primary-rgb), 0.05); }
.radio-station-btn.active::after { content: '🔊'; animation: radioPulse 0.8s infinite alternate; }