.playlist-widget-panel {
    position: fixed;
    top: clamp(58px, 8vh, 96px);
    width: min(var(--playlist-panel-width, 460px), calc(100vw - 24px));
    height: min(var(--playlist-panel-height, 760px), calc(100vh - 88px));
    background: rgb(from var(--card-bg-color, #ffffff) r g b / 0.94);
    border: 1px solid rgb(from var(--border-color, #d9dee8) r g b / 0.92);
    border-radius: 16px;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.26s ease, opacity 0.2s ease;
    z-index: var(--playlist-panel-z, 99990);
}

.playlist-widget-panel.is-right {
    right: 12px;
    transform: translateX(calc(100% + 24px));
}

.playlist-widget-panel.is-left {
    left: 12px;
    transform: translateX(calc(-100% - 24px));
}

.playlist-widget-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.playlist-widget-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgb(from var(--border-color, #d9dee8) r g b / 0.86);
    background: linear-gradient(
        180deg,
        rgb(from var(--card-bg-color, #ffffff) r g b / 0.96) 0%,
        rgb(from var(--card-bg-color, #ffffff) r g b / 0.8) 100%
    );
}

.playlist-widget-title {
    color: var(--content-font-color, #1c2333);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.playlist-widget-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.playlist-widget-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(from var(--border-color, #d9dee8) r g b / 0.92);
    border-radius: 8px;
    background: rgb(from var(--input-bg-color, #ffffff) r g b / 0.9);
    color: var(--content-font-color, #2b3345);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.playlist-widget-btn:hover {
    background: rgb(from var(--btn_hover_bg, #f0f4fb) r g b / 0.95);
    border-color: rgb(from var(--btn_border_color, #c8d2e4) r g b / 0.95);
    color: var(--btn_hover_font, #0f5ed8);
}

.playlist-widget-frame {
    width: 100%;
    height: calc(100% - 49px);
    border: 0;
    display: block;
    background: transparent;
}

.playlist-widget-dim {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 18, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: calc(var(--playlist-panel-z, 99990) - 1);
}

.playlist-widget-dim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.playlist-widget-source-frame {
    position: fixed;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    z-index: -1;
}

.playlist-widget-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(8px);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(from var(--border-color, #d9dee8) r g b / 0.95);
    background: rgb(from var(--card-bg-color, #ffffff) r g b / 0.95);
    color: var(--content-font-color, #1e2533);
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: calc(var(--playlist-panel-z, 99990) + 2);
}

.playlist-widget-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
    .playlist-widget-panel,
    .playlist-widget-panel.is-left,
    .playlist-widget-panel.is-right {
        left: 8px;
        right: 8px;
        width: auto;
        top: 56px;
        height: calc(100vh - 64px);
    }

    .playlist-widget-panel.is-right,
    .playlist-widget-panel.is-left {
        transform: translateY(calc(100% + 24px));
    }

    .playlist-widget-panel.is-open {
        transform: translateY(0);
    }
}