#slider {
    display: block;
    width: 100%;
    height: 400px;
    background-color: var(--page-bg, #ffffff);
    margin: var(--spacing, 15px) 0 0 0;
    border: 1px solid var(--line-color, rgba(110, 83, 180, .14));
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(29, 20, 54, .12);
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

#slider.is-dragging {
    cursor: grabbing;
}

#slider > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms ease, visibility 400ms ease;
}

#slider:not([data-slider-ready]) > :first-child,
#slider > .is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

#slider > * > a,
#slider > * > a > img {
    display: block;
    width: 100%;
    height: 100%;
}

#slider > * > a > img {
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.slider-shadow {
    position: absolute;
    inset: 0 -2px 0 0;
}

.slider-artist {
    position: absolute;
    top: 56px;
    right: 56px;
    max-width: min(48%, 530px);
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 14px;
    color: #fff;
    background: rgba(25, 17, 43, .28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    backdrop-filter: blur(10px);
    font-size: clamp(28px, 3.8vw, 48px);
    font-weight: 850;
    line-height: 1.18;
}

.slider-artist div {
    margin-top: 7px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(15px, 2.1vw, 23px);
    font-weight: 600;
}

.slider-play {
    position: absolute;
    top: 250px;
    right: 85px;
    width: 68px;
    height: 54px;
    border-radius: 10px;
    background: linear-gradient(135deg, #9b78ff, #5d32ed 72%);
    box-shadow: 0 11px 24px rgba(83, 47, 209, .42);
    clip-path: none;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-play svg {
    color: #fff !important;
    fill: currentColor;
}

button.slider-play {
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.slider-play-pause { display: none; }
.slider-play.is-playing .slider-play-play { display: none; }
.slider-play.is-playing .slider-play-pause { display: inline-flex; }

#slider > * > a:hover .slider-play { transform: translateY(-2px) scale(1.04); box-shadow: 0 15px 28px rgba(83, 47, 209, .56); }

.slider-navigation {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.slider-navigation button {
    width: 20px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: #ded9ee;
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
}

.slider-navigation button:hover,
.slider-navigation button:focus-visible {
    background: #a98dff;
    transform: scaleY(1.6);
}

.slider-navigation button.is-active {
    background: #7c4ef9;
}

.slider-artist {
    top: 70px;
    right: 80px;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    font-size: 55px;
    font-weight: 900;
    line-height: normal;
}

.slider-artist div {
    margin-top: 0;
    font-size: 30px;
    font-weight: 700;
}

@media (max-width: 700px) {
    #slider { height: 280px; border-radius: 14px; }
    .slider-artist { top: 42px; right: 28px; max-width: calc(100% - 56px); }
    .slider-play { top: 165px; right: 22px; width: 58px; height: 46px; }
}
.slider-actions{position:absolute;right:110px;bottom:65px;display:flex;direction:ltr;align-items:stretch;gap:10px;z-index:3}
.slider-action{display:grid;width:58px;height:58px;padding:7px;place-items:center;grid-template-rows:30px 14px;gap:2px;border:1px solid rgba(255,255,255,.28);border-radius:12px;color:#fff;background:rgba(20,14,45,.72);box-shadow:0 8px 22px rgba(0,0,0,.2);transition:.2s}
.slider-actions .slider-play{position:static;top:auto;right:auto;width:68px;height:54px;margin:2px 0;border:0;border-radius:10px;background:linear-gradient(135deg,#9b78ff,#5d32ed 72%);box-shadow:0 11px 24px rgba(83,47,209,.42);cursor:pointer}
.slider-actions .slider-play .slider-action-count{display:none}
.slider-actions .slider-play:hover,.slider-actions .slider-play:focus-visible{border:0;background:linear-gradient(135deg,#9b78ff,#5d32ed 72%);color:#fff}
.slider-action-box{display:grid;width:30px;height:30px;place-items:center}
.slider-action-count{direction:rtl;color:rgba(255,255,255,.8);font-size:11px;line-height:14px}
.slider-action .slider-play-pause{display:none}
.slider-action.is-playing .slider-play-play{display:none}
.slider-action.is-playing .slider-play-pause{display:block}
.slider-action:hover,.slider-action:focus-visible{border-color:#a98cff;color:#fff;background:#6841e8;outline:0;transform:translateY(-2px);cursor:pointer}
.slider-action svg{width:22px;height:22px}
.slider-action.is-active{border-color:#ff94b1;color:#ffb3c5;background:rgba(147,30,71,.72)}
.slider-playlist-dialog{position:fixed;inset:0;width:min(92vw,440px);max-height:calc(100dvh - 32px);margin:auto;padding:24px;overflow:auto;border:1px solid var(--line-color);border-radius:18px;direction:rtl;color:var(--text-color);background:linear-gradient(145deg,var(--surface-bg),var(--surface-soft-bg));box-shadow:0 28px 80px rgba(0,0,0,.38)}.slider-playlist-dialog::backdrop{background:rgba(11,8,19,.7);backdrop-filter:blur(5px)}.slider-playlist-dialog h2{margin:0 0 8px;color:var(--heading-color);font-size:20px}.slider-playlist-dialog>p{margin:0 0 18px;color:var(--muted-color);font-size:12px;line-height:1.85}.slider-playlist-dialog form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.slider-playlist-dialog input{min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-color);border-radius:10px;color:var(--text-color);background:var(--surface-soft-bg);font:inherit}.slider-playlist-dialog input:focus{border-color:var(--primary-color);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 18%,transparent)}.slider-playlist-dialog button{min-height:30px;padding:5px 10px;border:1px solid var(--line-color);border-radius:7px;color:var(--primary-color);background:transparent;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.slider-playlist-dialog form button{min-height:44px;padding:0 13px;border-color:var(--primary-color);border-radius:10px;color:#fff;background:var(--primary-color);white-space:nowrap}.slider-playlist-dialog h3{margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--line-color);color:var(--muted-color);font-size:12px}.slider-playlist-options{display:grid;max-height:min(42vh,300px);gap:8px;margin:0;overflow-y:auto;padding-left:2px}.slider-playlist-options>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;min-height:52px;padding:8px 11px;border:1px solid var(--line-color);border-radius:11px;background:var(--surface-bg);transition:border-color .16s ease,background-color .16s ease}.slider-playlist-options>div:hover,.slider-playlist-options>div:focus-within{border-color:color-mix(in srgb,var(--primary-color) 72%,var(--line-color));background:var(--surface-soft-bg);outline:0}.slider-playlist-options strong{overflow:hidden;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.slider-playlist-options small{color:var(--muted-color);font-size:11px}.slider-playlist-options p{margin:4px 0;padding:11px;border:1px dashed var(--line-color);border-radius:9px;color:var(--muted-color);font-size:12px;text-align:center}.slider-playlist-options>div button:hover,.slider-playlist-options>div button:focus-visible{border-color:var(--primary-color);outline:0;color:#fff;background:var(--primary-color)}.slider-playlist-options>div button.is-remove{color:#c43d54}.slider-playlist-options>div button.is-remove:hover,.slider-playlist-options>div button.is-remove:focus-visible{border-color:#c43d54;color:#fff;background:#c43d54}.slider-playlist-close{display:block;width:100%;min-height:40px;margin-top:18px;color:var(--muted-color)!important}.slider-playlist-close:hover,.slider-playlist-close:focus-visible{border-color:var(--primary-color);outline:0;color:var(--primary-color)!important}
@media(max-width:680px){.slider-actions{right:38px;bottom:36px;gap:7px}.slider-action{width:48px;height:48px;grid-template-rows:25px 12px}.slider-actions .slider-play{width:58px;height:46px}.slider-action-box{width:25px;height:25px}.slider-action svg{width:19px;height:19px}.slider-action-count{font-size:9px;line-height:12px}}

@media (max-width: 600px) {
    #slider { height: 215px; }
    .slider-artist { top: 34px; right: 24px; font-size: 42px; }
    .slider-artist div { font-size: 23px; }
    .slider-actions { right: 26px; bottom: 24px; gap: 6px; }
    .slider-action { width: 48px; height: 48px; grid-template-rows: 25px 12px; }
    .slider-actions .slider-play { width: 58px; height: 46px; }
    .slider-action-box { width: 25px; height: 25px; }
    .slider-action svg { width: 19px; height: 19px; }
    .slider-action-count { font-size: 11px; line-height: 12px; transform: translateY(-3px); }
}