/**
 * ===========================================================================
 * SYHUO 货运打车系统
 * 文件：suo_player.css（portal 皮肤 · SOUO 加密音频播放器页）
 * 版本：v7.3.4   开发时间：2026-09-13
 * 说明：橙色 #ff6a00 / 近黑 #0b0b0f 品牌配色，与音乐中心 music.css 同一色系；
 *       只作用于 .suo-* 命名空间，不覆盖全站与列表页样式
 * 版权所有 © 2024-2026 重庆渝声科技有限公司
 * ===========================================================================
 */
.suo-wrap {
    --suo-o: #ff6a00;
    --suo-o2: #ff8a3d;
    --suo-o3: #ffc08a;
    --suo-dark: #0b0b0f;
    --suo-dark2: #15151c;
    --suo-txt: #23252b;
    --suo-mute: #7a808c;
    --suo-line: rgba(20, 22, 30, .09);
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 20px 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(255, 106, 0, .55) 0%, rgba(255, 106, 0, 0) 58%),
        linear-gradient(135deg, #16161d 0%, #0b0b0f 62%, #1b1205 100%);
    box-shadow: 0 12px 34px rgba(10, 10, 16, .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(255, 106, 0, .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(255, 106, 0, .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, 18, 28, .05);
}
.suo-h {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1c1e24;
}
.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: #e9edf5;
    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: #ffd7a8; border-color: rgba(255, 160, 60, .45); background: rgba(255, 130, 20, .16); }
.suo-chip.mini { color: #b5651d; border-color: rgba(255, 106, 0, .32); background: rgba(255, 106, 0, .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: #f4f5f7; }

.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, #ff7a12 0%, #f05800 100%);
    box-shadow: 0 6px 16px rgba(240, 88, 0, .26);
    transition: transform .15s, box-shadow .2s, opacity .2s;
}
.suo-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(240, 88, 0, .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(255, 106, 0, .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: #f6f7f9;
    border: 1px solid var(--suo-line);
    border-radius: 16px;
    cursor: pointer;
}
.suo-mini:hover { color: var(--suo-o); border-color: rgba(255, 106, 0, .35); }

/* ---------- 上传区 ---------- */
.suo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 18px;
    text-align: center;
    border: 1.8px dashed rgba(255, 106, 0, .42);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 106, 0, .045) 0%, rgba(255, 106, 0, .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(255, 106, 0, .08); outline: none; }
.suo-drop.over { border-style: solid; transform: scale(1.005); background: rgba(255, 106, 0, .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: #22252c; word-break: break-all; }
.suo-step {
    margin-top: 14px;
    font-size: 12.5px;
    color: #a2601f;
    background: rgba(255, 106, 0, .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: #22232c; color: #e8eaf0; padding: 16px; }
.suo-viz {
    position: relative;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 50% 118%, rgba(255, 106, 0, .22) 0%, rgba(255, 106, 0, 0) 62%),
        linear-gradient(180deg, #0d0e13 0%, #07070a 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, 8, 12, .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(255, 138, 61, .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(255, 106, 0, .16); color: var(--suo-o3); border: 1px solid rgba(255, 106, 0, .3); }
.suo-badge.ok { color: #8ff0b4; background: rgba(31, 157, 85, .16); border-color: rgba(60, 200, 120, .34); }
.suo-badge.warn { color: #ffcf9a; background: rgba(255, 140, 30, .18); border-color: rgba(255, 150, 40, .44); }
.suo-badge.bad { color: #ff9c9c; background: rgba(211, 59, 59, .16); border-color: rgba(255, 90, 90, .34); }
.suo-badge.plain { color: #b9c0cc; 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, #ff7a12, #ef5300);
    box-shadow: 0 4px 16px rgba(255, 106, 0, .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, #ff9a3c, #ff5e00); }
.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(255, 106, 0, .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: #40434c; }
.suo-faq b { color: #16171c; }
.suo-tip { margin: 12px 0 0; font-size: 12px; line-height: 1.8; color: #8a6a4a; background: rgba(255, 106, 0, .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, 8, 12, .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, 6, 10, .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: #15161b; }
.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: #4b4e57; }
.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, 18, 24, .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); }

/* ---------- 单曲信息头：封面 + 歌名 + 播放本曲（2026-09-15 单曲页=播放歌曲的页面） ---------- */
.suo-songhead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background:
        radial-gradient(140% 200% at 100% 0%, rgba(255, 106, 0, .10) 0%, rgba(255, 106, 0, 0) 52%),
        linear-gradient(135deg, #16161d 0%, #0b0b0f 70%, #17100a 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(255, 106, 0, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .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(255, 106, 0, .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; }

/* ---------- 响应式 ---------- */
/* 断点统一（2026-09-21）：860→992（平板档）、640→576（手机档），对齐全站五档 */
@media (max-width: 991.98px) {
    .suo-grid { grid-template-columns: 1fr; }
}
@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; }
}
@media (prefers-reduced-motion: reduce) {
    .suo-spinner { animation: none; }
    .suo-btn, .suo-mask, .suo-modal, .suo-toast { transition: none; }
}