/* 自定义音乐挂件：深色 + 橙色主色 + 浅蓝强调（与后台音乐中心一致） */
.wzym-mw-root {
    position: fixed;
    left: 10px;
    bottom: calc(52px + env(safe-area-inset-bottom, 0));
    z-index: 100050;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wzym-mw-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #3a3a42 0%, #25252c 100%);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.wzym-mw-fab:hover {
    background: linear-gradient(145deg, #ff8c42 0%, #ff6600 100%);
}

.wzym-mw-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: min(300px, calc(100vw - 20px));
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1f;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    border: 1px solid #2e2e36;
}

.wzym-mw-expanded .wzym-mw-panel {
    display: block !important;
}

.wzym-mw-head {
    padding: 10px 12px;
    background: linear-gradient(180deg, #ff7f27 0%, #e85d00 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.wzym-mw-status {
    opacity: 0.95;
}

.wzym-mw-head-title {
    font-weight: 700;
}

.wzym-mw-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #2a2a32;
    font-size: 13px;
    background: #fff;
    color: #333;
}

.wzym-mw-search::placeholder {
    color: #999;
}

.wzym-mw-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    background: #121218;
}

.wzym-mw-list li {
    padding: 8px 12px 8px 14px;
    cursor: pointer;
    font-size: 12px;
    color: #a8a8b4;
    border-left: 3px solid transparent;
}

.wzym-mw-list li:hover {
    background: rgba(255, 120, 40, 0.08);
}

.wzym-mw-list li.wzym-mw-li-active {
    color: #ff9a4a;
    font-weight: 600;
    border-left-color: #ff7f27;
    background: rgba(255, 120, 40, 0.12);
}
.wzym-mw-list li.wzym-mw-li-empty {
    cursor: default;
    color: #8a9bb8 !important;
    font-size: 12px;
    border-left-color: transparent !important;
    font-style: italic;
}

.wzym-mw-progress-wrap {
    height: 4px;
    background: #2a2a32;
}

.wzym-mw-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff8c42, #ff6600);
    transition: width 0.15s linear;
}

.wzym-mw-vol-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #16161c;
    border-top: 1px solid #2a2a32;
}

.wzym-mw-vol-ico {
    font-size: 14px;
    opacity: 0.85;
}

.wzym-mw-vol {
    flex: 1;
    accent-color: #ff7f27;
}

.wzym-mw-mode {
    width: 34px;
    height: 28px;
    border: 1px solid #4a90d9;
    border-radius: 6px;
    background: #2a3f55;
    color: #9ec5ff;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.wzym-mw-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 10px 14px;
    background: #14141a;
}

.wzym-mw-bigbtn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(180deg, #ff8c42 0%, #cc5500 100%);
}

.wzym-mw-bplay {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    font-size: 18px;
    background: linear-gradient(180deg, #5b9bd5 0%, #3a7ab8 100%);
    box-shadow: 0 4px 12px rgba(60, 130, 200, 0.35);
}

@media (max-width: 480px) {
    .wzym-mw-root {
        left: 6px;
        bottom: calc(48px + env(safe-area-inset-bottom, 0));
    }
}