/**
 * music-classic 皮肤 · SOUO 加密音频播放器页样式（/music/song/{id}、/music/suo/{id}）
 * fork 自 portal/music/css/suo_player.css：结构与 .suo-* 类名逐字保留（suo_player.js 契约），
 * 仅把橙黑品牌配色改成 cmsdj_002 主题绿（#5BA91C / #55a642 / #7DC03A），
 * 并在文件尾部追加 .mc-channel-head 频道站头（与 music/index.php 同一套绿观感）。
 * 图片走 b 原位引用（训练IDE 原版目录）；上线前把 images 拷进本皮肤。
 */
.suo-wrap {
    --suo-o: #55a642;
    --suo-o2: #7dc03a;
    --suo-o3: #a8d67a;
    --suo-dark: #0b0f08;
    --suo-dark2: #141c11;
    --suo-txt: #232b25;
    --suo-mute: #7a8c80;
    --suo-line: rgba(20, 30, 22, .09);
    /* 与门户版心同一口径（全站 1400px）：旧值写死 1080px，宽屏下与顶栏及列表页对不齐且两侧留白 */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 22px clamp(20px, 2.4vw, 48px) 96px;
    color: var(--suo-txt);
}

/* ---------- 顶部品牌区 ---------- */
.suo-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(120% 160% at 88% -30%, rgba(95, 169, 28, .55) 0%, rgba(95, 169, 28, 0) 58%),
        linear-gradient(135deg, #161d16 0%, #0b0f08 62%, #101b05 100%);
    box-shadow: 0 12px 34px rgba(10, 16, 10, .28);
}
.suo-hero-txt h1 {
    margin: 0 0 6px;
    font-size: 27px;
    letter-spacing: .3px;
    font-weight: 800;
}
.suo-brand {
    color: var(--suo-o);
    text-shadow: 0 0 18px rgba(95, 169, 28, .55);
}
.suo-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .72);
}
.suo-sub code {
    color: var(--suo-o3);
    background: rgba(95, 169, 28, .12);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}
.suo-hero-state { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 通用卡片 / 芯片 / 按钮 ---------- */
.suo-card {
    margin-top: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--suo-line);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(16, 28, 18, .05);
}
.suo-h {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1c241e;
}
.suo-h i { color: var(--suo-o); margin-right: 4px; }
.suo-h-song { color: var(--suo-o); }
.suo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #e9f5ed;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
}
.suo-chip.ok { color: #bff0d0; border-color: rgba(80, 210, 140, .4); background: rgba(40, 160, 95, .16); }
.suo-chip.warn { color: #d7ffa8; border-color: rgba(160, 255, 60, .45); background: rgba(130, 200, 20, .16); }
.suo-chip.mini { color: #4a7a2a; border-color: rgba(95, 169, 28, .32); background: rgba(95, 169, 28, .1); padding: 2px 8px; font-size: 11px; }
.suo-chip.mine.ok2 { color: #1f9d55; border-color: rgba(31, 157, 85, .3); background: rgba(31, 157, 85, .1); }
.suo-chip.mini.bad { color: #d33b3b; border-color: rgba(211, 59, 59, .3); background: rgba(211, 59, 59, .1); }
.suo-chip.mini.mute { color: var(--suo-mute); border-color: var(--suo-line); background: #f4f7f5; }

.suo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 0;
    border-radius: 24px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(135deg, #62b04a 0%, #4a8a16 100%);
    box-shadow: 0 6px 16px rgba(74, 138, 22, .26);
    transition: transform .15s, box-shadow .2s, opacity .2s;
}
.suo-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(74, 138, 22, .32); color: #fff; }
.suo-btn:active { transform: translateY(0); }
.suo-btn.small { padding: 6px 14px; font-size: 12.5px; }
.suo-btn.ghost { background: #fff; color: var(--suo-o); border: 1.5px solid rgba(95, 169, 28, .45); box-shadow: none; }
.suo-btn[disabled] { opacity: .55; pointer-events: none; }
.suo-mini {
    margin-top: 12px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--suo-mute);
    background: #f6f9f7;
    border: 1px solid var(--suo-line);
    border-radius: 16px;
    cursor: pointer;
}
.suo-mini:hover { color: var(--suo-o); border-color: rgba(95, 169, 28, .35); }

/* ---------- 上传区 ---------- */
.suo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 18px;
    text-align: center;
    border: 1.8px dashed rgba(95, 169, 28, .42);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(95, 169, 28, .045) 0%, rgba(95, 169, 28, .01) 100%);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
}
.suo-drop:hover, .suo-drop:focus-visible { border-color: var(--suo-o); background: rgba(95, 169, 28, .08); outline: none; }
.suo-drop.over { border-style: solid; transform: scale(1.005); background: rgba(95, 169, 28, .13); }
.suo-drop > i { font-size: 38px; color: var(--suo-o); }
.suo-drop-t { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.suo-drop-s { margin: 0 0 8px; font-size: 12.5px; color: var(--suo-mute); }
.suo-file { padding-top: 4px; }
.suo-file-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--suo-line); font-size: 13px; }
.suo-file-k { width: 52px; color: var(--suo-mute); flex: none; }
.suo-file-v { color: #222c25; word-break: break-all; }
.suo-step {
    margin-top: 14px;
    font-size: 12.5px;
    color: #3f6a24;
    background: rgba(95, 169, 28, .07);
    border-left: 3px solid var(--suo-o);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
}

/* ---------- 播放舞台（绿黑频谱） ---------- */
.suo-stage { background: var(--suo-dark); border-color: #222c23; color: #eaf0ec; padding: 16px; }
.suo-viz {
    position: relative;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 50% 118%, rgba(95, 169, 28, .22) 0%, rgba(95, 169, 28, 0) 62%),
        linear-gradient(180deg, #0d130e 0%, #070a07 100%);
}
.suo-viz canvas { display: block; width: 100%; height: 100%; }
.suo-viz-mask {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 0 16px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .82);
    background: rgba(8, 12, 8, .55);
    backdrop-filter: blur(2px);
}
.suo-viz-mask.hide { display: none; }
.suo-viz-msg b { color: var(--suo-o2); }
.suo-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(125, 192, 58, .25);
    border-top-color: var(--suo-o);
    animation: suoSpin .85s linear infinite;
}
@keyframes suoSpin { to { transform: rotate(360deg); } }

.suo-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 2px 6px; }
.suo-title { font-size: 16px; font-weight: 700; color: #fff; }
.suo-artist { font-size: 12px; color: rgba(255, 255, 255, .5); margin-top: 2px; }
.suo-badge { font-size: 11.5px; padding: 3px 10px; border-radius: 14px; background: rgba(95, 169, 28, .16); color: var(--suo-o3); border: 1px solid rgba(95, 169, 28, .3); }
.suo-badge.ok { color: #8ff0b4; background: rgba(31, 157, 85, .16); border-color: rgba(60, 200, 120, .34); }
.suo-badge.warn { color: #cfff9a; background: rgba(140, 200, 30, .18); border-color: rgba(150, 210, 40, .44); }
.suo-badge.bad { color: #ff9c9c; background: rgba(211, 59, 59, .16); border-color: rgba(255, 90, 90, .34); }
.suo-badge.plain { color: #c0ccb9; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }

.suo-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.suo-play {
    width: 42px;
    height: 42px;
    flex: none;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #62b04a, #4a8a16);
    box-shadow: 0 4px 16px rgba(95, 169, 28, .42);
}
.suo-play i { margin-left: 2px; }
.suo-play.playing i { margin-left: 0; }
.suo-time { font-size: 12px; color: rgba(255, 255, 255, .55); width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.suo-bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); cursor: pointer; }
.suo-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #a8d67a, #55a642); }
.suo-bar-dot { position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(95, 169, 28, .8); opacity: 0; transition: opacity .15s; }
.suo-bar:hover .suo-bar-dot { opacity: 1; }
.suo-vol { display: flex; align-items: center; gap: 6px; flex: none; }
.suo-vol button { background: none; border: 0; color: rgba(255, 255, 255, .62); font-size: 15px; cursor: pointer; }
.suo-vol input[type=range] { width: 74px; accent-color: var(--suo-o); }
.suo-note { margin-top: 10px; font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, .52); border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 9px; }

/* ---------- 说明 / 格式列表 ---------- */
.suo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.suo-grid .suo-card { margin-top: 16px; }
.suo-faq { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.95; color: #404c43; }
.suo-faq b { color: #161c17; }
.suo-tip { margin: 12px 0 0; font-size: 12px; line-height: 1.8; color: #5a7a4a; background: rgba(95, 169, 28, .06); border-radius: 8px; padding: 9px 12px; }
.suo-tip a { color: var(--suo-o); font-weight: 600; }
.suo-empty { font-size: 13px; color: var(--suo-mute); line-height: 1.9; }
.suo-fmt-list { list-style: none; margin: 0; padding: 0; }
.suo-fmt-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--suo-line); }
.suo-fmt-list li:last-child { border-bottom: 0; }
.suo-fmt-list li.off { opacity: .5; }
.suo-fmt-n { display: block; font-size: 13.5px; font-weight: 700; }
.suo-fmt-d { display: block; font-size: 11.5px; color: var(--suo-mute); margin-top: 2px; }
.suo-fmt-r { display: flex; align-items: center; gap: 8px; flex: none; }

.suo-off-card { text-align: center; padding: 40px 20px; }
.suo-off-card i { font-size: 40px; color: var(--suo-o); }
.suo-off-card h2 { font-size: 17px; margin: 10px 0 6px; }
.suo-off-card p { font-size: 13px; color: var(--suo-mute); line-height: 1.9; margin: 0 0 14px; }

/* ---------- 自建弹窗（禁用原生 alert，风格与绿黑一致） ---------- */
.suo-mask {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 12, 8, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .18s;
}
.suo-mask.show { opacity: 1; }
.suo-modal {
    width: 100%;
    max-width: 396px;
    background: #fff;
    border-radius: 16px;
    border-top: 4px solid var(--suo-o);
    padding: 24px 22px 20px;
    box-shadow: 0 24px 60px rgba(6, 10, 6, .45);
    transform: translateY(10px) scale(.985);
    transition: transform .2s;
}
.suo-mask.show .suo-modal { transform: none; }
.suo-modal h4 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: #151b16; }
.suo-modal h4 i { color: var(--suo-o); margin-right: 6px; }
.suo-modal p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.85; color: #4b574e; }
.suo-modal .suo-m-sub { font-size: 12px; color: var(--suo-mute); }
.suo-modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.suo-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    z-index: 4100;
    max-width: 84vw;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 13px;
    color: #fff;
    background: rgba(18, 24, 18, .93);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    opacity: 0;
    transition: opacity .2s, transform .2s;
}
.suo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 单曲信息头：封面 + 歌名 + 播放本曲 ---------- */
.suo-songhead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background:
        radial-gradient(140% 200% at 100% 0%, rgba(95, 169, 28, .10) 0%, rgba(95, 169, 28, 0) 52%),
        linear-gradient(135deg, #161d16 0%, #0b0f08 70%, #0a1710 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .06);
}
.suo-songcover {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--suo-o);
    background: rgba(95, 169, 28, .14);
    box-shadow: inset 0 0 0 1px rgba(125, 192, 58, .28);
}
.suo-songcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suo-songmeta { flex: 1 1 220px; min-width: 0; }
.suo-songname {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suo-songsub {
    margin-top: 5px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suo-play-song {
    flex: 0 0 auto;
    font-size: 15px;
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--suo-o) 0%, var(--suo-o2) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 8px 22px rgba(95, 169, 28, .38);
}
.suo-play-song:disabled { opacity: .72; cursor: wait; }
.suo-play-song:hover:not(:disabled) { filter: brightness(1.08); }

/* 单曲在线播放页（/music/song/{id}）的大封面变体 + 下载引导卡 */
.suo-songhead-lg .suo-songcover { width: 148px; height: 148px; flex-basis: 148px; border-radius: 18px; font-size: 56px; }
.suo-songhead-lg .suo-songname { font-size: 26px; }
.suo-songhead-lg .suo-songsub { font-size: 13.5px; }
.suo-song-guide-t { margin: 8px 0 14px; font-size: 13px; line-height: 1.9; color: var(--suo-mute); }
.suo-song-guide-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ========== cmsdj_002 频道站头（与 music/index.php 同一套绿观感） ========== */
.mc-channel-bar { background: #f5f5f5; padding: 16px 0 0; }
/* 这条是后代选择器（.mc-channel-bar .mc-box），优先级高于 music.css 里的 .mc-box：
   不改它，频道导航条会被覆盖回 960px，而下方榜单已经放宽到 1400 —— 两者直接错位。
   必须与 music.css 的 .mc-box 保持同一组值。 */
.mc-channel-bar .mc-box { width: min(1400px, 100%); margin: 0 auto; padding: 0 clamp(8px, 1.4vw, 28px); box-sizing: border-box; }
.mc-channel-head {
    display: flex; align-items: center; gap: 24px;
    background: #fff; border: 1px solid #e5e5e5;
    padding: 14px 18px; border-radius: 6px;
}
.mc-channel-logo img { height: 42px; width: auto; display: block; }
.mc-channel-search { margin-left: auto; display: flex; }
.mc-channel-search form { display: flex; }
.mc-channel-search input {
    width: 320px; max-width: 46vw; height: 34px; border: 1px solid #ddd; border-right: none;
    padding: 0 12px; font-size: 13px; color: #666; outline: none; border-radius: 3px 0 0 3px;
}
.mc-channel-search input:focus { border-color: #55a642; }
.mc-channel-search button {
    height: 34px; padding: 0 22px; border: none; background: #55a642; color: #fff;
    font-size: 14px; cursor: pointer; border-radius: 0 3px 3px 0;
}
.mc-channel-search button:hover { background: #4a8a16; }

/* ---------- 响应式 ---------- */
/* 断点统一：992（平板档）、576（手机档），对齐全站五档 */
@media (max-width: 991.98px) {
    .suo-grid { grid-template-columns: 1fr; }
    .mc-channel-bar .mc-box { width: 100%; }
    .mc-channel-head { flex-wrap: wrap; gap: 12px; }
    .mc-channel-search { margin-left: 0; width: 100%; }
    .mc-channel-search input { width: 100%; max-width: none; }
}
@media (max-width: 575.98px) {
    .suo-wrap { padding: 14px 12px 90px; }
    .suo-hero { padding: 18px 16px; }
    .suo-hero-txt h1 { font-size: 22px; }
    .suo-card { padding: 15px 14px; }
    .suo-songcover { width: 60px; height: 60px; flex-basis: 60px; border-radius: 12px; }
    .suo-songname { font-size: 17px; }
    .suo-play-song { flex-basis: 100%; }
    .suo-viz { height: 148px; }
    .suo-ctrl { flex-wrap: wrap; }
    .suo-bar { order: 5; flex-basis: 100%; }
    .suo-vol { margin-left: auto; }
    .suo-fmt-list li { flex-wrap: wrap; }
    .mc-channel-head { padding: 12px; }
    .mc-channel-logo img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .suo-spinner { animation: none; }
    .suo-btn, .suo-mask, .suo-modal, .suo-toast { transition: none; }
}