/* ===========================================================================
   BiliAudio Web — amberol 风格完整转译（需求 §4）
   设计原则：优雅极简主义；禁用紫色系；强调色中性黑白灰；色彩全部由封面注入
   规范来源：amberol style.css + window.blp + utils.rs load_palette + window.rs update_style
   =========================================================================== */

:root {
    /* ===== 浅色（默认）— 对齐 libadwaita 窗口底色（需求 §4.1）===== */
    --bg-window: #fafafa;
    --bg-sidebar: rgb(0 0 0 / 6%);
    --sidebar-backdrop: rgb(0 0 0 / 3%);
    --sidebar-shade: rgb(0 0 0 / 10%);
    --border-subtle: rgb(0 0 0 / 10%);
    --text-primary: rgb(0 0 0 / 80%);
    --text-secondary: rgb(0 0 0 / 55%);

    /* ===== amberol 核心：中性强调色（签名色，需求 §4.1、§10 红线2）===== */
    --accent-bg: rgb(0 0 0 / 75%);
    --accent-fg: #ffffff;
    --accent-soft: rgb(0 0 0 / 8%);

    /* ===== 功能状态色（仅语义，不参与品牌表达，需求 §4.1）===== */
    --live-red: #ff5b5b;
    --warn-orange: #ff9500;
    --ok-green: #34c759;
    --error-red: #ff3b30;

    /* ===== 封面取色槽位（JS 动态注入，amberol 灵魂，需求 §4.1）===== */
    --background-color-0: var(--bg-window);
    --background-color-1: var(--bg-window);
    --background-color-2: var(--bg-window);
    --background-color-3: var(--bg-window);
    --background-color-4: var(--bg-window);

    /* ===== 形状与阴影（需求 §4.1）===== */
    --radius-cover: 12px;
    --radius-row-img: 4px;
    --radius-card: 16px;
    --radius-pill: 999px;
    --shadow-cover: 0 1px 6px rgb(0 0 0 / 0.3), 0 2px 12px rgb(0 0 0 / 0.15),
        0 6px 32px rgb(0 0 0 / 0.1);
    --shadow-soft: 0 2px 12px rgb(0 0 0 / 0.08);
    --transition-bg: 250ms ease;
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

    /* ===== 字阶（需求 §4.1）===== */
    --font-title-size: 20px;
    --font-title-weight: 800;
    --font-artist-size: 15px;
    --font-artist-weight: 400;
    --font-caption-size: 12px;
    --font-caption-weight: 500;
    --font-family: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --bg-window: #242424;
        --bg-sidebar: rgb(255 255 255 / 5.5%);
        --sidebar-backdrop: rgb(255 255 255 / 2.75%);
        --sidebar-shade: rgb(0 0 0 / 20%);
        --border-subtle: rgb(0 0 0 / 28%);
        --text-primary: #ffffff;
        --text-secondary: rgb(255 255 255 / 55%);
        --accent-bg: rgb(255 255 255 / 75%);
        --accent-fg: rgb(0 0 0 / 75%);
        --accent-soft: rgb(255 255 255 / 10%);
        color-scheme: dark;
    }
}
:root[data-theme='dark'] {
    --bg-window: #242424;
    --bg-sidebar: rgb(255 255 255 / 5.5%);
    --sidebar-backdrop: rgb(255 255 255 / 2.75%);
    --sidebar-shade: rgb(0 0 0 / 20%);
    --border-subtle: rgb(0 0 0 / 28%);
    --text-primary: #ffffff;
    --text-secondary: rgb(255 255 255 / 55%);
    --accent-bg: rgb(255 255 255 / 75%);
    --accent-fg: rgb(0 0 0 / 75%);
    --accent-soft: rgb(255 255 255 / 10%);
    color-scheme: dark;
}

/* ===== 全局重置 ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
body {
    font-family: var(--font-family);
    background: var(--bg-window);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    /* 刘海屏适配（需求 F-43）*/
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}
input {
    font-family: inherit;
}
img {
    display: block;
    max-width: 100%;
}

/* ===========================================================================
   主窗口 + 封面取色三向渐变背景（对齐 amberol window.rs update_style）
   仅用 color-0/1/2，127deg / 217deg / 336deg，55%→0% transparent，止于 70.71%
   =========================================================================== */
.app {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-window);
    transition: background var(--transition-bg);
}
.recoloring .app {
    background: linear-gradient(
            127deg,
            color-mix(in srgb, var(--background-color-0) 55%, transparent) 0%,
            transparent 70.71%
        ),
        linear-gradient(
            217deg,
            color-mix(in srgb, var(--background-color-1) 55%, transparent) 0%,
            transparent 70.71%
        ),
        linear-gradient(
            336deg,
            color-mix(in srgb, var(--background-color-2) 55%, transparent) 0%,
            transparent 70.71%
        ),
        var(--bg-window);
}
.recoloring .sidebar {
    background: linear-gradient(
            127deg,
            color-mix(in srgb, var(--background-color-0) 55%, transparent) 0%,
            transparent 70.71%
        ),
        linear-gradient(
            217deg,
            color-mix(in srgb, var(--background-color-1) 55%, transparent) 0%,
            transparent 70.71%
        ),
        linear-gradient(
            336deg,
            color-mix(in srgb, var(--background-color-2) 55%, transparent) 0%,
            transparent 70.71%
        ),
        var(--bg-window);
}

/* ===========================================================================
   HeaderBar（极简，不显示标题，需求 §4.0、§4.2）
   =========================================================================== */
.header-bar {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
}
.header-bar .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}
.header-bar .icon-btn:hover {
    opacity: 1;
    background: var(--accent-soft);
}

/* ===========================================================================
   分栏视图（对齐 amberol OverlaySplitView：主区 + 右侧侧栏 max 330px 40%）
   单一断点语义（需求 §4.6）：≥720px 主区+固定侧栏；<720px 侧栏折叠为覆盖抽屉
   =========================================================================== */
.split-view {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}
.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar {
    width: 330px;
    max-width: 40%;
    flex-shrink: 0;
    border-left: 1px solid var(--border-subtle);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: transform var(--transition-bg);
}

/* 主区垂直居中列（对齐 amberol main-box，需求 §4.2）*/
.main-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    overflow-y: auto;
    min-height: 0;
}

/* 封面（amberol SongCover：12px 圆角 + 三层阴影，下方留白 24px，需求 §4.2）*/
.cover-wrap {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 6px;
    flex-shrink: 0;
}
.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-cover);
    box-shadow: var(--shadow-cover);
    background: var(--accent-soft);
    transition: opacity var(--transition-bg);
}
.cover.no-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.cover.fading {
    opacity: 0;
}
.cover-placeholder-icon {
    width: 64px;
    height: 64px;
    opacity: 0.4;
}

/* 波形区（对齐 amberol WaveformView：实时律动 + 码率，无 seek）
   左侧状态文案保留（连接中/重连/错误等），仅"已收听时长"与初始提示在 JS 层置空 */
.waveform-row {
    width: 100%;
    max-width: 480px;
    padding: 16px 0 6px;
    display: flex;
    align-items: center; /* 码率徽标随行垂直居中（右侧原位） */
    gap: 16px;
}
.waveform-canvas {
    flex: 1;
    min-width: 0;
    height: 48px;
    display: block;
}
.waveform-stats-left {
    font-size: var(--font-caption-size);
    font-weight: var(--font-caption-weight);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 64px;
}
.speed-badge {
    /* 右侧原位（LIVE 移走后单独一个），随 waveform-row 垂直居中对齐波形条 */
    /* min-width 始终占位：初始/加载时无码率也保留宽度，波形条长度与播放时一致（对齐封面框） */
    display: inline-block;
    min-width: 72px;
    text-align: center;
    font-size: var(--font-caption-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    flex-shrink: 0;
}
.speed-badge:empty {
    visibility: hidden; /* 隐藏文字但保留占位，波形条长度不跳动 */
}

/* 标题区（需求 §4.2、§4.5；宽度对齐封面框 320px，标题完整显示不截断）*/
.song-details {
    width: 100%;
    max-width: 320px;
    padding: 12px 6px 24px;
    text-align: center;
}
.song-title {
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    color: var(--text-primary);
    /* 完整显示：允许换行并断行，不再截断（需求：去掉滚动，解决截断） */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    position: relative;
}
.song-title-text {
    display: inline;
}
/* LIVE 徽标：内联跟在标题文字后（需求：LIVE 在标题后面）*/
.live-badge {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: var(--font-caption-size);
    font-weight: 700;
    color: var(--live-red);
    letter-spacing: 0.5px;
    margin-left: 6px;
    vertical-align: middle;
}
.live-badge.show {
    display: inline-flex;
}
.live-badge .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live-red);
    animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.song-artist {
    font-size: var(--font-artist-size);
    font-weight: var(--font-artist-weight);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================================================
   播放控制（amberol PlaybackControl：上一台/48px播放键/下一台 间距24px，需求 §4.2）
   宽度对齐封面框（cover-wrap 320px），与照片框上下齐整
   =========================================================================== */
.playback-control {
    width: 100%;
    max-width: 320px;
    padding-bottom: 12px;
    margin-bottom: 24px;
}
.controls-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}
.ctrl-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    opacity: 0.75;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    flex-shrink: 0;
}
.ctrl-btn:hover {
    opacity: 1;
    background: var(--accent-soft);
}
.ctrl-btn:active {
    transform: scale(0.94);
}
.play-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--accent-bg);
    color: var(--accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    transition: transform 0.15s var(--ease-spring), opacity 0.2s;
    flex-shrink: 0;
}
.play-btn:hover {
    opacity: 0.92;
}
.play-btn:active {
    transform: scale(0.95);
}
.play-btn .play-icon,
.play-btn .pause-icon {
    transition: opacity 0.2s;
}
.play-btn .pause-icon {
    display: none;
}
.play-btn.playing .play-icon {
    display: none;
}
.play-btn.playing .pause-icon {
    display: flex;
}

/* 音量条（amberol VolumeControl：trough 高亮 + thumb 悬停浮现，需求 §4.5）*/
.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}
.volume-icon {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--accent-soft);
    outline: none;
}
.volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--accent-bg) 0%,
        var(--accent-bg) var(--vol-pct, 80%),
        var(--accent-soft) var(--vol-pct, 80%),
        var(--accent-soft) 100%
    );
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-bg);
    margin-top: -5px;
    opacity: 0;
    transition: opacity 0.2s;
}
.volume-slider:hover::-webkit-slider-thumb {
    opacity: 1;
}
.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-bg);
    border: none;
}
.volume-value {
    font-size: var(--font-caption-size);
    font-weight: var(--font-caption-weight);
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* 底排圆形幽灵按钮（侧栏开关/重连/菜单，需求 §4.2）*/
.extra-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.ghost-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.65;
    transition: opacity 0.2s, background 0.2s;
}
.ghost-btn:hover {
    opacity: 1;
    background: var(--accent-soft);
}
.ghost-btn.spinning svg {
    animation: spin 0.9s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===========================================================================
   侧栏队列（对齐 amberol PlaylistView + queue-row，需求 §4.2、§4.3）
   =========================================================================== */
.sidebar-header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.sidebar-count {
    font-size: var(--font-caption-size);
    color: var(--text-secondary);
    margin-left: auto;
}
.search-wrap {
    padding: 8px 12px;
    flex-shrink: 0;
}
.search-input {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--bg-window);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.search-input:focus {
    border-color: var(--accent-bg);
}
.search-input::placeholder {
    color: var(--text-secondary);
}

.queue-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.queue-list {
    padding: 4px 6px;
}
.queue-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    height: 56px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    user-select: none;
}
.queue-row:hover {
    background: var(--bg-sidebar);
}
.queue-row.drag-over {
    background: var(--accent-soft);
    box-shadow: inset 0 2px 0 var(--accent-bg);
}
.queue-row.dragging {
    opacity: 0.4;
}
.queue-row.current {
    background: var(--accent-soft);
}
.queue-row.offline {
    opacity: 0.45;
}
.row-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-row-img);
    object-fit: cover;
    background: var(--accent-soft);
    flex-shrink: 0;
    border: 1px solid rgb(0 0 0 / 15%);
}
.row-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.row-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-artist {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-badge {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.live-badge-row {
    color: var(--live-red);
}
.offline-badge {
    color: var(--text-secondary);
}
.playing-badge {
    color: var(--accent-bg);
}
/* 当前播放行律动指示（对齐 amberol song_playing_image）*/
.eq-mini {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 12px;
}
.eq-mini i {
    width: 2px;
    height: 12px;
    background: currentColor;
    border-radius: 1px;
    transform-origin: bottom;
    transform: scaleY(0.18);
}
.queue-row.current.is-playing .eq-mini i {
    animation: eq-beat 1.1s ease-in-out infinite;
}
.queue-row.current.is-playing .eq-mini i:nth-child(2) { animation-delay: 0.15s; }
.queue-row.current.is-playing .eq-mini i:nth-child(3) { animation-delay: 0.3s; }
.queue-row.current.is-playing .eq-mini i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq-beat {
    0%, 100% { transform: scaleY(0.2); }
    40% { transform: scaleY(1); }
    60% { transform: scaleY(0.45); }
    80% { transform: scaleY(0.7); }
}
.row-remove {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    flex-shrink: 0;
}
.queue-row:hover .row-remove {
    opacity: 0.7;
}
.row-remove:hover {
    opacity: 1;
    background: var(--accent-soft);
}

/* 队列底部：添加按钮 + 添加卡片（需求 §4.5）*/
.queue-footer {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.add-btn {
    width: 100%;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s;
}
.add-btn:hover {
    background: var(--bg-sidebar);
}
.add-card {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-bg);
    margin-top: 0;
}
.add-card.open {
    max-height: 80px;
    margin-top: 8px;
}
.add-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--bg-window);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.add-input:focus,
.add-input.valid {
    border-color: var(--accent-bg);
}
.add-input::placeholder {
    color: var(--text-secondary);
}

/* 空态（对齐 amberol Adw.StatusPage，需求 §4.0、§4.2）*/
.queue-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    gap: 12px;
}
.queue-empty .empty-icon {
    color: var(--text-secondary);
    opacity: 0.5;
}
.queue-empty .empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.queue-empty .empty-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.hidden {
    display: none !important;
}

/* ===========================================================================
   Toast（对齐 amberol Adw.ToastOverlay，需求 F-34、§4.0）
   =========================================================================== */
.ba-toast {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px) scale(0.96);
    z-index: 1000;
    padding: 10px 20px;
    background: var(--accent-bg);
    color: var(--accent-fg);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.35s var(--ease-spring), transform 0.35s var(--ease-spring);
    pointer-events: none;
    box-shadow: var(--shadow-soft);
    max-width: 90vw;
    text-align: center;
}
.ba-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ===========================================================================
   主菜单弹层（需求 §4.7）
   =========================================================================== */
.menu-popover {
    position: fixed;
    top: 48px;
    left: 8px; /* 菜单按钮在主区顶部左侧（header padding 8px），弹层贴左对齐按钮（需求 §4.7） */
    z-index: 999;
    min-width: 240px;
    background: var(--bg-window);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 6px;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s var(--ease-spring);
}
.menu-popover.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    gap: 12px;
    transition: background 0.15s;
}
.menu-item:hover {
    background: var(--accent-soft);
}
.menu-item-label {
    flex: 1;
}
.menu-item-value {
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.menu-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}
/* 开关 */
.toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch.on {
    background: var(--accent-bg);
}
.toggle-switch .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--accent-fg);
    border-radius: 50%;
    transition: transform 0.2s var(--ease-spring);
}
.toggle-switch.on .knob {
    transform: translateX(16px);
}
/* 分段选择 */
.segmented {
    display: flex;
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
    padding: 2px;
    gap: 2px;
}
.segmented button {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}
.segmented button.active {
    background: var(--bg-window);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
}

/* iOS 版本过低提示（需求 F-45）*/
.compat-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    max-width: 90vw;
    padding: 12px 16px;
    background: var(--error-red);
    color: #fff;
    border-radius: var(--radius-card);
    font-size: 13px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

/* iOS 安装引导条（需求 F-42）*/
.ios-install-guide {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--accent-bg);
    color: var(--accent-fg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    transform: translateY(100%);
    transition: transform 0.3s var(--ease-spring);
}
.ios-install-guide.show {
    transform: translateY(0);
}
.ios-install-guide .dismiss {
    margin-left: auto;
    color: var(--accent-fg);
    opacity: 0.8;
    font-size: 18px;
    padding: 4px 8px;
}

/* ===========================================================================
   响应式（单一断点 720px，需求 §4.6）
   ≥720px：主区 + 固定侧栏（点击播放列表按钮可收起，.collapsed）
   <720px：侧栏折叠为覆盖抽屉
   =========================================================================== */
@media (min-width: 720px) {
    .sidebar.collapsed {
        display: none;
    }
}

@media (max-width: 719px) {
    .sidebar {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        width: 86%;
        max-width: 360px;
        transform: translateX(100%);
        box-shadow: -4px 0 24px rgb(0 0 0 / 0.15);
        z-index: 20;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        position: absolute;
        inset: 0;
        background: rgb(0 0 0 / 0.3);
        z-index: 19;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
    .cover-wrap {
        max-width: 220px;
    }
    .waveform-row,
    .song-details,
    .playback-control {
        max-width: 100%;
    }
    .main-box {
        justify-content: flex-start;
        padding-top: 12px;
    }
}

/* PWA standalone：底部控制区避让 safe-area（需求 F-43）*/
@media all and (display-mode: standalone) {
    .playback-control {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* 滚动条美化（对齐 libadwaita）*/
.queue-scroll::-webkit-scrollbar {
    width: 8px;
}
.queue-scroll::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 4px;
}
.queue-scroll::-webkit-scrollbar-track {
    background: transparent;
}