/* Subtle APlayer polish. Native placement, dimensions and folded state stay intact. */

#aplayer-float {
    --wnlen-player-accent: #d47a31;
    --wnlen-player-ink: #3d4244;
    --wnlen-player-muted: #8b9091;
    color: var(--wnlen-player-ink);
    background: transparent !important;
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

#aplayer-float.aplayer-fixed .aplayer-body {
    border: 1px solid rgba(255, 255, 255, .66);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 10px 28px rgba(31, 36, 39, .13);
}

#aplayer-float .aplayer-info {
    border-top: 0 !important;
    background: transparent !important;
}

#aplayer-float .aplayer-title {
    color: var(--wnlen-player-ink);
    font-weight: 600;
}

#aplayer-float .aplayer-author,
#aplayer-float .aplayer-time {
    color: var(--wnlen-player-muted);
}

#aplayer-float .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    background: rgba(50, 57, 60, .1);
}

#aplayer-float .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar,
#aplayer-float .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded,
#aplayer-float .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 4px;
}

#aplayer-float .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played,
#aplayer-float .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb,
#aplayer-float .aplayer-list ol li .aplayer-list-cur {
    background: var(--wnlen-player-accent) !important;
}

#aplayer-float .aplayer-miniswitcher {
    border-radius: 0 9px 9px 0;
    background: rgba(245, 243, 239, .92);
}

#aplayer-float .aplayer-miniswitcher .aplayer-icon path,
#aplayer-float .aplayer-icon path {
    fill: #747b7d;
}

#aplayer-float .aplayer-miniswitcher .aplayer-icon:hover path,
#aplayer-float .aplayer-icon:hover path {
    fill: var(--wnlen-player-accent);
}

#aplayer-float.aplayer-fixed .aplayer-list {
    border-color: rgba(48, 55, 58, .09);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(31, 36, 39, .12);
}

#aplayer-float.aplayer-fixed .aplayer-list.aplayer-list-hide {
    border: 0 !important;
    box-shadow: none;
}

@media (max-width: 860px) {
    /* The folded player is only the cover plus its switch; do not leave a
       frosted body extending beyond those controls on narrow screens. */
    #aplayer-float.aplayer-fixed.aplayer-narrow .aplayer-body {
        border: 0;
        border-radius: 0;
        background: transparent !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
}

#aplayer-float .aplayer-list ol li {
    border-top-color: rgba(48, 55, 58, .06);
}

#aplayer-float .aplayer-list ol li:hover {
    background: rgba(212, 122, 49, .07);
}

#aplayer-float .aplayer-list ol li.aplayer-list-light {
    background: rgba(212, 122, 49, .12) !important;
}

body.dark #aplayer-float {
    --wnlen-player-ink: #eff1ef;
    --wnlen-player-muted: #a7acad;
}

body.dark #aplayer-float.aplayer-fixed .aplayer-body {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(35, 38, 41, .9) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

body.dark #aplayer-float .aplayer-title {
    color: var(--wnlen-player-ink);
}

body.dark #aplayer-float .aplayer-miniswitcher {
    background: rgba(43, 46, 49, .94) !important;
}

body.dark #aplayer-float.aplayer-fixed .aplayer-list {
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(35, 38, 41, .96);
}

body.dark #aplayer-float .aplayer-list ol li {
    color: #e4e6e4;
    background: transparent;
}