/* ================================================================
   MiauNoteBlock - WinUI 3 / Fluent Design 风格
   Mica 半透明 · 圆角控件 · Segoe UI 排版 · 4px 网格
   ================================================================ */

/* ----- 重置 & CSS 变量 ----- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ===== WinUI 3 / Fluent Design 设计令牌 ===== */
    /* 中性色阶 (Fluent NeutralBaseLayer) */
    --neutral-1: #1c1c1c;
    --neutral-2: #2b2b2b;
    --neutral-3: #3b3b3b;
    --neutral-4: #484848;
    --neutral-5: #5c5c5c;
    --neutral-6: #7a7a7a;
    --neutral-7: #9a9a9a;
    --neutral-8: #bdbdbd;
    --neutral-9: #d4d4d4;
    --neutral-10: #eaeaea;
    --neutral-11: #f5f5f5;
    --neutral-12: #ffffff;

    /* 强调色 (Fluent Accent) - 蓝紫色系, 类似 Windows 11 */
    --accent: #4cc2ff;
    --accent-hover: #62ccff;
    --accent-pressed: #3aa0db;
    --accent-secondary: #5c5cff;
    --accent-tertiary: #b8b8ff;
    --accent-on-accent: #ffffff;

    /* 语义色 */
    --accent-teal: #4ecdc4;
    --accent-blue: #4cc2ff;
    --accent-purple: #b794f6;
    --accent-orange: #ffa94d;
    --accent-red: #ff6b6b;
    --accent-green: #51cf66;
    --accent-yellow: #ffd43b;

    /* 文字色阶 */
    --text-primary: rgba(255, 255, 255, 0.96);
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-tertiary: rgba(255, 255, 255, 0.52);
    --text-disabled: rgba(255, 255, 255, 0.36);
    --text-on-accent: #ffffff;

    /* Fluent 控件填充 */
    --ctrl-fill-default: rgba(255, 255, 255, 0.05);
    --ctrl-fill-secondary: rgba(255, 255, 255, 0.09);
    --ctrl-fill-tertiary: rgba(255, 255, 255, 0.03);
    --ctrl-fill-hover: rgba(255, 255, 255, 0.08);
    --ctrl-fill-pressed: rgba(255, 255, 255, 0.12);
    --ctrl-fill-disabled: rgba(255, 255, 255, 0.03);
    --ctrl-accent-fill: var(--accent);
    --ctrl-accent-hover: var(--accent-hover);
    --ctrl-accent-pressed: var(--accent-pressed);

    /* Fluent 描边 */
    --ctrl-stroke-default: rgba(255, 255, 255, 0.07);
    --ctrl-stroke-secondary: rgba(255, 255, 255, 0.10);
    --ctrl-stroke-hover: rgba(255, 255, 255, 0.12);
    --ctrl-stroke-focus: var(--accent);
    --ctrl-stroke-disabled: rgba(255, 255, 255, 0.04);

    /* Mica / Acrylic 表面 (WinUI 3 招牌效果) */
    --mica-base: rgba(32, 32, 32, 0.85);
    --mica-base-alt: rgba(28, 28, 30, 0.85);
    --mica-acrylic: rgba(44, 44, 46, 0.78);
    --mica-acrylic-light: rgba(252, 252, 252, 0.65);
    --mica-overlay: rgba(0, 0, 0, 0.45);

    /* 应用背景 (Mica 主色) */
    --app-bg: #202020;
    --app-bg-accent: #1a1a1a;

    /* 圆角 (Fluent 标准) */
    --radius-xs: 4px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* 阴影 (WinUI 3 Elevation) */
    --shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --shadow-dialog: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.16);
    --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.18);
    --shadow-card-rest: 0 2px 4px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.10);
    --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

    /* 字体 (Fluent 字体栈) */
    --font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --font-family-mono: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
    --font-family-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    /* 字号 (Fluent Type Ramp) */
    --font-size-caption: 12px;
    --font-size-body: 14px;
    --font-size-body-strong: 14px;
    --font-size-subtitle: 18px;
    --font-size-title: 20px;
    --font-size-title-large: 28px;
    --font-size-display: 42px;

    /* 尺寸 */
    --toolbar-height: 44px;
    --status-height: 32px;
    --track-panel-width: 200px;
    --piano-toggle-height: 24px;
    --piano-expanded-height: 120px;
    --piano-key-white-height: 100px;
    --piano-key-black-height: 60px;

    /* 边距 (4px 网格) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* 动画 (Fluent Standard) */
    --anim-fast: 100ms cubic-bezier(0, 0, 0, 1);
    --anim-normal: 200ms cubic-bezier(0, 0, 0, 1);
    --anim-slow: 300ms cubic-bezier(0, 0, 0, 1);
    --anim-control: 167ms cubic-bezier(0.16, 1, 0.3, 1);

    /* 兼容旧变量名 */
    --glass-bg: var(--mica-acrylic);
    --glass-bg-lighter: var(--ctrl-fill-secondary);
    --glass-blur: blur(40px) saturate(180%);
    --glass-border: var(--ctrl-stroke-default);
    --border: var(--ctrl-stroke-default);
    --border-light: var(--ctrl-stroke-secondary);
    --bg-primary: var(--app-bg);
    --bg-secondary: var(--neutral-2);
    --bg-tertiary: var(--neutral-3);
    --accent-hover: var(--accent-hover);

    /* 工具栏专用 Mica 背景 */
    --toolbar-glass-bg: rgba(32, 32, 32, 0.78);

    /* 表面材质 (个性化): 控制工具栏/状态栏/面板的毛玻璃效果 */
    --surface-blur: blur(24px) saturate(160%);
    --surface-bg-alpha: 0.72;

    /* 网格区域材质 (个性化): 独立于工具栏材质, 控制画布容器透出背景 */
    --grid-blur: none;
    --grid-bg-alpha: 0.5;

    /* 音色块颜色 (Minecraft Note Block Studio) */
    --inst-0: #F5E6B8;
    --inst-1: #8B4513;
    --inst-2: #808080;
    --inst-3: #D2B48C;
    --inst-4: #DFDFDF;
    --inst-5: #8B4513;
    --inst-6: #87CEEB;
    --inst-7: #FFD700;
    --inst-8: #B0E0E6;
    --inst-9: #C19A6B;
    --inst-10: #D3D3D3;
    --inst-11: #DAA520;
    --inst-12: #9370DB;
    --inst-13: #00FF00;
    --inst-14: #DEB887;
    --inst-15: #FFFF99;
    --inst-16: #C46B3D;
    --inst-17: #8B6F47;
    --inst-18: #5C8B5C;
    --inst-19: #3D7A6B;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    line-height: 1.428;
    /* WinUI 3 Mica 主背景: 极深的深灰 + 微弱渐变 */
    background: var(--app-bg);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==================================================================
   0a. 全网页背景图片层 (个性化设置, 位于最底层)
   ================================================================== */
#page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
    will-change: opacity;
}
/* 背景图不透明度由 --bg-image-opacity 变量控制 (JS 设置), 缺省为完全可见 */
body.bg-active #page-bg {
    opacity: var(--bg-image-opacity, 1);
}
/* 背景图显示模式 (平铺/拉伸/缩放适配), 由 body class 控制, 避免内联样式冲突 */
body.bg-mode-tile #page-bg {
    background-size: auto;
    background-repeat: repeat;
}
body.bg-mode-stretch #page-bg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
body.bg-mode-fit #page-bg {
    background-size: contain;
    background-repeat: no-repeat;
}
/* 表面材质: 毛玻璃 / 亚克力 (应用于工具栏等表面, 仅控制模糊, 透明度由面板滑块控制) */
body.material-plain {
    --surface-blur: none;
}
body.material-frosted {
    --surface-blur: blur(18px) saturate(150%);
}
body.material-acrylic {
    --surface-blur: blur(40px) saturate(200%);
}
body.bg-active .toolbar,
body.bg-active .status-bar,
body.bg-active .tool-bar {
    background-color: rgba(20, 20, 34, var(--surface-bg-alpha)) !important;
    backdrop-filter: var(--surface-blur);
    -webkit-backdrop-filter: var(--surface-blur);
}
/* 网格区域材质: 独立设置 (普通半透明/毛玻璃/亚克力), 控制画布容器透出背景图片 */
body.grid-material-plain {
    --grid-blur: none;
    --grid-bg-alpha: 0.5;
}
body.grid-material-frosted {
    --grid-blur: blur(18px) saturate(150%);
    --grid-bg-alpha: 0.42;
}
body.grid-material-acrylic {
    --grid-blur: blur(40px) saturate(200%);
    --grid-bg-alpha: 0.35;
}
/* 背景激活时: 钢琴卷帘容器半透明 (透出网页背景图片), 画布本身保持透明 */
body.bg-active #piano-roll-container {
    background: rgba(18, 18, 38, var(--grid-bg-alpha));
    backdrop-filter: var(--grid-blur);
    -webkit-backdrop-filter: var(--grid-blur);
}
/* 不支持 backdrop-filter 的浏览器: 关闭模糊, 提高底色不透明度保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.bg-active .toolbar,
    body.bg-active .status-bar,
    body.bg-active .tool-bar,
    body.bg-active #piano-roll-container {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.bg-active #piano-roll-container {
        background: rgba(18, 18, 38, 0.72) !important;
    }
}

/* ----- 应用容器 ----- */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    /* 确保内容绘制在 #page-bg 之上 */
    z-index: 1;
}

/* ==================================================================
   0b. 自定义下拉框 (CustomDropdown) — 替代原生 select
   ================================================================== */
.cdd-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.cdd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 4px;
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    line-height: 1.4;
    font-family: var(--font-family);
}
.cdd-trigger:hover {
    background: var(--ctrl-fill-secondary);
}
.cdd-trigger.cdd-open {
    background: var(--ctrl-fill-secondary);
    border-color: var(--accent-default);
}
.cdd-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdd-arrow {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}
.cdd-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 100%;
    max-width: 280px;
    background: var(--mica-acrylic);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 4px;
    box-shadow: var(--shadow-flyout);
    z-index: 10003;
    padding: 2px 0;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    font-family: var(--font-family);
}
.cdd-list.cdd-visible {
    display: block;
    animation: flyoutShow 100ms cubic-bezier(0, 0, 0, 1);
}
.cdd-option {
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdd-option:hover {
    background: var(--ctrl-fill-secondary);
}
.cdd-option.cdd-selected {
    color: var(--accent-default);
    font-weight: 600;
}

/* ==================================================================
   0c. 自定义 Tooltip — 替代原生 title 属性
   ================================================================== */
.cdd-tip {
    position: fixed;
    /* 自定义 tooltip: 需始终位于弹窗(100200)与自定义弹窗(100400)之上 */
    z-index: 100500;
    background: var(--mica-acrylic);
    color: var(--text-primary);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.4;
    box-shadow: var(--shadow-flyout);
    pointer-events: none;
    /* 长提示自动换行并保留 \n 分行; 短提示仍为单行 */
    white-space: pre-line;
    word-break: break-word;
    max-width: min(280px, calc(100vw - 16px));
    opacity: 0;
    transition: opacity 120ms ease;
    font-family: var(--font-family);
}
.cdd-tip.cdd-tip-visible {
    opacity: 1;
}

/* ==================================================================
   0d. 数字输入框 — 统一样式 (暗色主题下的原生微调箭头)
   ================================================================== */
input[type="number"] {
    -moz-appearance: textfield;
    /* 声明暗色配色方案: 让原生上下微调箭头按暗色渲染,
       避免浅色主题的亮白按钮块在深色面板上过于突兀 */
    color-scheme: dark;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0;
    /* 默认压低亮度, 仅在悬停/聚焦时轻微提亮 */
    opacity: 0.42;
    cursor: pointer;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button {
    opacity: 0.75;
}

/* ==================================================================
   1. 顶部工具栏 —— WinUI 3 Mica 命令栏
   ================================================================== */
.toolbar {
    height: var(--toolbar-height);
    background: var(--toolbar-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--ctrl-stroke-default);
    display: flex;
    align-items: center;
    /* WinUI 命令栏: padding 0 8px */
    padding: 0 var(--space-2);
    gap: var(--space-1);
    flex-shrink: 0;
    z-index: 100;
    position: relative;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.toolbar-right {
    margin-left: auto;
}

/* WinUI 命令栏分隔条: 浅色竖线, 高度 16-20px */
.toolbar-divider {
    width: 1px;
    height: 16px;
    background: var(--ctrl-stroke-default);
    margin: 0 var(--space-1);
}

/* WinUI 3 IconButton (Fluent Standard) */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    /* WinUI 小型按钮: 32x32 触控目标, 实际内容 24x24 */
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--anim-fast), transform var(--anim-fast);
    min-width: 32px;
    min-height: 32px;
    font-size: var(--font-size-body);
    font-weight: 400;
    white-space: nowrap;
    line-height: 1;
    position: relative;
}

/* WinUI 3 标准按钮悬浮: ctrl-fill-secondary 浅色填充 */
.toolbar-btn:hover {
    background: var(--ctrl-fill-secondary);
}

/* WinUI 3 按下态: ctrl-fill-tertiary + 轻微缩放 */
.toolbar-btn:active {
    background: var(--ctrl-fill-tertiary);
    transform: scale(0.96);
}

/* WinUI 3 焦点环 */
.toolbar-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* WinUI 3 主操作按钮 (AccentButton) */
.toolbar-btn.primary,
.toolbar-btn.toolbar-tempo-btn {
    background: var(--ctrl-fill-default);
}
.toolbar-btn.primary:hover,
.toolbar-btn.toolbar-tempo-btn:hover {
    background: var(--ctrl-fill-hover);
}

/* WinUI 3 Filled 主按钮 */
.toolbar-btn.filled {
    background: var(--accent);
    color: var(--accent-on-accent);
}
.toolbar-btn.filled:hover {
    background: var(--accent-hover);
}
.toolbar-btn.filled:active {
    background: var(--accent-pressed);
}

/* 选中态 */
.toolbar-btn.selected,
.toolbar-btn.active {
    background: var(--ctrl-fill-tertiary);
    color: var(--accent);
}

/* 键盘钢琴激活态 */
#btn-keyboard-piano.active {
    background: var(--accent);
    color: var(--accent-on-accent);
}

/* 禁用态 */
.toolbar-btn:disabled,
.toolbar-btn.disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* 移动端紧凑模式 */
.toolbar.toolbar-compact .toolbar-btn {
    min-width: 28px;
    min-height: 28px;
    font-size: 13px;
}
.toolbar.toolbar-compact .toolbar-tempo-btn {
    padding: 0 var(--space-2);
    min-width: 50px;
}
.toolbar.toolbar-compact .toolbar-tempo-btn #tempo-value {
    font-size: 11px;
}
.toolbar.toolbar-compact .toolbar-section {
    gap: 2px;
}
.toolbar.toolbar-compact {
    padding: 0 var(--space-1);
}

.toolbar-btn .icon {
    font-size: 16px;
}

.toolbar-undo-btn {
    font-size: 14px;
}

.play-btn {
    background: var(--accent);
    border-color: var(--accent);
}

.play-btn.playing {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
}

/* 工具栏的速度按钮 (打开设置弹窗) - 始终显示, 不进"更多" */
.toolbar-tempo-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    min-width: 64px;
    justify-content: center;
}
.toolbar-tempo-btn #tempo-value {
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
}

/* 工具栏/更多菜单中的速度调节区 */
.toolbar-tempo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
}

.toolbar-tempo label {
    font-size: 12px;
    white-space: nowrap;
}

#tempo-slider {
    width: 80px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

#tempo-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 0 6px rgba(233, 69, 96, 0.4);
}

#tempo-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
}

#tempo-value {
    font-size: 12px;
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ========== 工具栏响应式：溢出项收进"更多"菜单 ========== */
.toolbar-more-btn {
    display: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, transform 0.15s;
}
.toolbar-more-btn:hover { background: rgba(255, 255, 255, 0.08); }
.toolbar-more-btn:active { transform: scale(0.95); }

.toolbar-more-menu {
    position: fixed;
    z-index: 9998;
    min-width: 180px;
    background: rgba(22, 33, 62, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-size: 13px;
}

.toolbar-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
    color: var(--text-primary);
}
.toolbar-more-item:hover {
    background: rgba(255, 255, 255, 0.08);
}
.toolbar-more-item .icon {
    font-size: 13px;
    color: var(--text-secondary);
}
.toolbar-more-item .toolbar-tempo,
.toolbar-more-item > input[type="range"] {
    width: 100%;
}

/* 功能菜单 (缩放精度 / 清除空轨 等) */
.functions-menu {
    position: fixed;
    z-index: 9998;
    min-width: 180px;
    background: rgba(22, 33, 62, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-size: 13px;
}
.functions-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
    color: var(--text-primary);
}
.functions-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}
.functions-menu-item i {
    font-size: 13px;
    color: var(--text-secondary);
    width: 16px;
    text-align: center;
}


/* ============ 歌词功能 ============ */
/* 播放时屏幕中间偏下的歌词浮层: 背景透明度跟随面板透明度 (--surface-bg-alpha) */
.lyrics-overlay {
    position: fixed;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    max-width: 82vw;
    padding: 10px 22px;
    border-radius: 12px;
    background: rgba(18, 18, 42, var(--surface-bg-alpha, 1));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
    color: #fff;
    font-size: clamp(20px, 3.4vw, 34px);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    z-index: 9990;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.lyrics-overlay-text {
    display: inline-block;
}
/* 多轨歌词同时触发时, 每条歌词独占一行 */
.lyrics-overlay-line {
    display: block;
}

/* ===== 多文件标签页 ===== */
.editor-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    padding: 0 6px;
    background: rgba(12, 16, 28, 0.92);
    border-bottom: 1px solid var(--ctrl-stroke-default);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 99;
}
.editor-tabs-list {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.editor-tabs-list::-webkit-scrollbar { height: 3px; }
.editor-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    max-width: 190px;
    padding: 0 4px 0 9px;
    border-radius: 5px 5px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.editor-tab:hover { background: rgba(255,255,255,0.06); }
.editor-tab.active {
    background: rgba(76, 194, 255, 0.14);
    border-color: rgba(76, 194, 255, 0.35);
    color: var(--text-primary);
}
.editor-tab-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.editor-tab-dirty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffb43c;
    flex-shrink: 0;
    display: none;
}
.editor-tab.is-dirty .editor-tab-dirty { display: block; }
.editor-tab-close {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-tab-close:hover {
    background: rgba(233, 69, 96, 0.3);
    color: #fff;
}
.editor-tab-add,
.editor-tab-all {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 4px;
    background: var(--ctrl-fill-default);
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-tab-add { margin-left: 4px; }
.editor-tab-add:hover,
.editor-tab-all:hover { color: var(--text-primary); border-color: var(--accent); }
.editor-tab-all { display: none; }

/* 手机端: 标签栏只留一个下拉按钮, 减少横向占位 */
@media (max-width: 768px) {
    .editor-tabs { height: 28px; }
    .editor-tabs-list { display: none; }
    .editor-tab-add { display: none; }
    .editor-tab-all { display: flex; margin-left: auto; }
    .editor-tabs::before {
        content: attr(data-count-label);
        font-size: 11px;
        color: var(--text-secondary);
        white-space: nowrap;
    }
}

/* ===== 片段编辑模式: 隐藏 NBS 专属的画布内控件 ===== */
/* 用 ID 提高优先级, 覆盖下方 #track-panel-toggle 的 display:flex !important */
body.segment-edit-mode #track-panel-toggle,
body.segment-edit-mode .tool-bar {
    display: none !important;
}

/* ===== 片段编辑工具栏 (画布内顶部居中) ===== */
.segment-toolbar {
    position: absolute;
    left: 8px;              /* 靠左显示 (时间栏下方) */
    top: 64px;              /* JS 按时间栏布局动态调整 */
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    /* 无容器: 工具栏直接"长"在时间栏与绘画区之间的空间里, 去掉边框/底色/阴影 */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 30;
}
.segment-toolbar .seg-tool-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    color: #98a2ac;
}
.segment-toolbar .seg-tool-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #e4e8ec;
}
.segment-toolbar .toolbar-divider {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.14);
}
.segment-toolbar .seg-tool-count {
    font-size: 11px;
    color: #98a2ac;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}
/* 缩放按钮: 方向图标 + 小号 +/- 标记 */
.segment-toolbar .seg-zoom-btn {
    position: relative;
}
.segment-toolbar .seg-zoom-sign {
    position: absolute;
    right: 1px;
    bottom: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    color: #eaf7ff;
}
/* 手机端: 顶部横向空间不足, 改用悬浮提示条上的文字按钮 */
@media (max-width: 768px) {
    .segment-toolbar { display: none !important; }
    .segment-edit-bar { display: flex; }
}
@media (min-width: 769px) {
    .segment-edit-bar { display: none !important; }
}

/* ===== 编辑模式切换滑块 (状态栏左下角) ===== */
.edit-mode-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 1px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--ctrl-stroke-default);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.edit-mode-switch .ems-opt {
    position: relative;
    z-index: 2;
    width: 40px;
    text-align: center;
    font-size: 10px;
    line-height: 16px;
    color: var(--text-tertiary);
    transition: color 0.18s ease;
}
.edit-mode-switch .ems-opt.active { color: #eaf7ff; }
.edit-mode-switch .ems-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    background: rgba(76, 194, 255, 0.32);
    border: 1px solid rgba(76, 194, 255, 0.58);
    transition: transform 0.2s ease;
    z-index: 1;
}
.edit-mode-switch[data-mode="segment"] .ems-knob { transform: translateX(40px); }
@media (max-width: 768px) {
    .edit-mode-switch { display: none; }
}

/* ===== 片段编辑: 右侧侧边板 (轨道头) ===== */
.segment-side-panel {
    position: absolute;
    left: 0;
    width: 120px;
    z-index: 20;
    /* 实底而非毛玻璃: 大画布上的 backdrop-filter 在窗口切换/缩放时会触发整层重建, 造成卡顿 */
    background: rgba(16, 19, 23, 0.97);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
    font-size: 11px;
    user-select: none;
}
.seg-lane-row {
    position: absolute;
    left: 0;
    right: 0;
    padding: 4px 6px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.seg-lane-row .seg-lane-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.seg-lane-row .seg-lane-name {
    font-weight: 600;
    color: #e4e8ec;
    /* 自动分割片段后轨道名可能是音色名, 超长时省略 */
    max-width: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seg-lane-btn {
    width: 18px;
    height: 16px;
    padding: 0;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid var(--ctrl-stroke-default);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
    cursor: pointer;
}
.seg-lane-btn.active[data-act="mute"] { background: rgba(255, 96, 96, 0.32); color: #ffd9d9; border-color: rgba(255, 96, 96, 0.6); }
.seg-lane-btn.active[data-act="solo"] { background: rgba(255, 206, 84, 0.32); color: #fff3cf; border-color: rgba(255, 206, 84, 0.6); }
.seg-lane-vol {
    width: 100%;
    height: 12px;
    margin: 3px 0 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.seg-lane-vol::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}
.seg-lane-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border-radius: 50%;
    background: #4a90d9;
}
.seg-lane-vol::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); }
.seg-lane-vol::-moz-range-thumb { width: 9px; height: 9px; border: none; border-radius: 50%; background: #4a90d9; }
.seg-lane-resize {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 7px;
    cursor: ns-resize;
}

/* ===== 片段编辑: 右键菜单 ===== */
.segment-context-menu {
    position: fixed;
    min-width: 148px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(24, 30, 38, 0.96);
    border: 1px solid var(--ctrl-stroke-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    z-index: 100050;
    font-size: 12px;
    color: var(--text-primary);
}
.segment-context-menu .seg-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.segment-context-menu .seg-menu-item:hover { background: rgba(74, 144, 217, 0.16); }
.segment-context-menu .seg-menu-item.disabled { opacity: 0.38; pointer-events: none; }
.segment-context-menu .seg-menu-sep { height: 1px; margin: 3px 4px; background: rgba(255, 255, 255, 0.1); }

/* ===== 片段编辑: 重命名浮层 =====
   容器提供唯一背景, 输入框只保留描边, 避免"浮层 + 输入框"双层底色叠加 */
.seg-rename-pop {
    position: fixed;
    padding: 8px;
    border-radius: 8px;
    background: rgba(24, 30, 38, 0.96);
    border: 1px solid var(--ctrl-stroke-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    z-index: 100060;
}
.seg-rename-input {
    display: block;
    width: 176px;
    height: 28px;
    padding: 0 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--ctrl-stroke-secondary);
    border-radius: var(--radius-sm);
    outline: none;
}
.seg-rename-input::placeholder { color: var(--text-tertiary); }
.seg-rename-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* ===== 片段编辑模式 (剪映风格) ===== */
.segment-edit-bar {
    border-color: rgba(255, 255, 255, 0.14);
}
.segment-edit-bar > i {
    color: #98a2ac;
}
.segment-edit-bar .lyrics-edit-bar-count {
    color: #e4e8ec;
    background: rgba(255, 255, 255, 0.10);
}
/* 片段编辑的操作按钮在桌面端也保持可见 (覆盖歌词条的桌面端隐藏规则) */
.segment-edit-bar .lyrics-edit-bar-ops {
    display: flex;
}
.segment-edit-bar .lyrics-op-btn {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
}
.segment-edit-bar .lyrics-op-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}
#btn-segments.active {
    background: rgba(74, 144, 217, 0.20);
    color: #e4e8ec;
}

/* 歌词编辑模式提示条 (顶部居中) */
.lyrics-edit-bar {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 92vw;
    padding: 7px 10px 7px 14px;
    border-radius: 999px;
    background: rgba(22, 33, 62, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(78, 205, 196, 0.5);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-size: 12px;
    z-index: 9999;
}
.lyrics-edit-bar > i {
    color: var(--accent, #4ecdc4);
}
.lyrics-edit-bar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}
.lyrics-edit-bar-count {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--accent, #4ecdc4);
    background: rgba(78, 205, 196, 0.14);
    white-space: nowrap;
}
.lyrics-edit-bar-exit {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--ctrl-stroke-default, #555);
    background: var(--ctrl-fill-default, #1c1c1c);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}
.lyrics-edit-bar-exit:hover {
    background: var(--ctrl-fill-secondary, #262626);
}
/* 工具栏: 轨道新建 / 剪切复制粘贴 */
@media (min-width: 769px) {
    .lyrics-edit-bar-lanes,
    .lyrics-edit-bar-ops {
        display: none;
    }
}
.lyrics-edit-bar-lanes,
.lyrics-edit-bar-ops {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.lyrics-lane-add,
.lyrics-op-btn {
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(78, 205, 196, 0.4);
    background: rgba(78, 205, 196, 0.12);
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
}
.lyrics-lane-add:hover,
.lyrics-op-btn:hover {
    background: rgba(78, 205, 196, 0.26);
}
.lyrics-op-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) {
    .lyrics-edit-bar-text { display: none; }
    .lyrics-overlay { bottom: 17%; }
    /* 手机端: 允许换行, 避免工具栏溢出屏幕 */
    .lyrics-edit-bar {
        gap: 6px;
        row-gap: 5px;
        padding: 6px 8px;
        max-width: 96vw;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
    }
    .lyrics-lane-add,
    .lyrics-op-btn { padding: 5px 8px; }
}

/* 歌词编辑小悬浮窗 (剪映风格: 位置跟随鼠标) */
.lyric-editor-pop {
    position: fixed;
    z-index: 10050;
    width: 232px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(22, 33, 62, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(233, 69, 96, 0.55);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-size: 12px;
}
.lyric-editor-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.lyric-editor-pop-title {
    color: var(--accent, #4ecdc4);
    font-size: 11px;
    font-weight: 600;
}
.lyric-editor-pop-close {
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
}
.lyric-editor-pop-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.lyric-editor-pop-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--ctrl-stroke-default, #444);
    border-radius: 6px;
    background: var(--ctrl-fill-default, #1c1c1c);
    color: var(--text-primary, #fff);
    font-size: 13px;
    outline: none;
}
.lyric-editor-pop-input:focus {
    border-color: var(--accent, #4ecdc4);
}
.lyric-editor-pop-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.lyric-editor-pop-spacer {
    flex: 1;
}
.lyric-editor-pop-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--ctrl-stroke-default, #555);
    background: var(--ctrl-fill-default, #1c1c1c);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}
.lyric-editor-pop-btn:hover {
    background: var(--ctrl-fill-secondary, #262626);
}
.lyric-editor-pop-btn.is-primary {
    border-color: transparent;
    background: var(--accent, #4ecdc4);
    color: #08211f;
    font-weight: 600;
}
.lyric-editor-pop-btn.is-danger {
    border-color: rgba(233, 69, 96, 0.6);
    color: #e94560;
}
.lyric-editor-pop-btn.is-danger:hover {
    background: rgba(233, 69, 96, 0.16);
}
/* 剪切/复制/粘贴 图标按钮 (紧凑) */
.lyric-editor-pop-icon {
    width: 26px;
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
}
.lyric-editor-pop-icon:disabled {
    opacity: 0.38;
    cursor: default;
}

/* Light visual polish only: keep layout and behavior unchanged. */
.toolbar,
.status-bar,
#status-bar {
    box-shadow: inset 0 -1px rgba(255,255,255,0.035);
}

.toolbar-btn,
.status-control-btn,
.popup-btn,
.file-menu-item,
.functions-menu-item,
.fab-context-menu-item {
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.toolbar-btn:hover,
.status-control-btn:hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 4px 14px rgba(0,0,0,0.18);
}

.toolbar-btn:active,
.status-control-btn:active,
.popup-btn:active {
    transform: translateY(1px) scale(0.98);
}

.file-menu,
.functions-menu,
.context-menu,
.fab-context-menu {
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.46), inset 0 1px rgba(255,255,255,0.06) !important;
}

.file-menu-item:hover,
.functions-menu-item:hover,
.ctx-item:hover,
.fab-context-menu-item:hover {
    background: linear-gradient(90deg, rgba(78,205,196,0.16), rgba(255,255,255,0.07));
}

.functions-menu-item:hover i,
.file-menu-item:hover i,
.fab-context-menu-item:hover i {
    color: var(--accent, #4ecdc4);
}

/* 移动端小屏：优先折叠部分按钮 */
@media (max-width: 768px) {
    .toolbar-collapsible[data-group="overflow"] {
        /* 由 JS 根据宽度判断显隐 */
    }
    .toolbar-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #btn-settings { display: inline-flex !important; }
    #btn-functions { display: inline-flex !important; }
}

/* ==================================================================
   2. 主体内容区域
   ================================================================== */
.main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* ----- 左侧音轨面板 — WinUI 3 NavigationView 风格 ----- */
.track-panel {
    width: var(--track-panel-width);
    background: var(--mica-base-alt);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--ctrl-stroke-default);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

/* WinUI 3 NavigationView PaneHeader */
.track-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ctrl-stroke-default);
    background: transparent;
    flex-shrink: 0;
}

.track-panel-header h3 {
    font-size: var(--font-size-body-strong);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-family);
}

.track-panel-header h3 i {
    color: var(--accent);
    font-size: 14px;
}

/* WinUI 3 Badge */
.track-panel-count {
    font-size: var(--font-size-caption);
    color: var(--text-secondary);
    background: var(--ctrl-fill-default);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.track-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

/* WinUI 3 NavigationViewItem (紧凑) */
.track-panel-list .instrument-btn {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    margin: 2px var(--space-1);
    background: transparent;
    border: 1px solid transparent;
    width: calc(100% - 8px);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: var(--font-size-body);
    transition: background var(--anim-fast);
    min-height: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    border-radius: var(--radius-sm);
}

.track-panel-list .instrument-btn::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-teal);
    flex-shrink: 0;
}

.track-panel-list .instrument-btn:hover {
    background: var(--ctrl-fill-hover);
}

.track-panel-list .instrument-btn.selected {
    background: var(--ctrl-fill-pressed);
    color: var(--accent);
}

/* WinUI 3 AppBarButton (底部) */
.track-panel-add {
    width: 100%;
    padding: var(--space-2);
    background: transparent;
    border: none;
    border-top: 1px solid var(--ctrl-stroke-default);
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--anim-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 32px;
}

.track-panel-add:hover {
    color: var(--accent);
    background: var(--ctrl-fill-hover);
}

.track-panel-add i {
    font-size: 12px;
}

/* ----- 钢琴卷帘容器 ----- */
#piano-roll-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 底部钢琴键盘展开时预留空间，避免遮挡卷帘 */
#piano-roll-container.keyboard-open {
    padding-bottom: 64px;
}

#piano-roll {
    display: block;
    cursor: crosshair;
    touch-action: none;
}

/* ----- 钢琴卷帘工具条 ----- */
.tool-bar {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 50;
    display: flex;
    gap: 4px;
    background: rgba(32, 32, 32, 0.9);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--ctrl-stroke-default);
}

.tool-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.tool-btn:hover {
    background: var(--ctrl-fill-hover);
    color: var(--text-primary);
}
.tool-btn.active {
    background: var(--ctrl-accent-fill);
    color: #fff;
}

@media (max-width: 768px) {
    .tool-bar {
        display: none !important;
    }
}

/* ==================================================================
   3. 底部状态栏 — WinUI 3 CommandBar (底部)
   ================================================================== */
.status-bar {
    height: var(--status-height);
    background: var(--mica-base-alt);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--ctrl-stroke-default);
    display: flex;
    align-items: center;
    padding: 0 var(--space-2);
    gap: var(--space-2);
    font-size: var(--font-size-caption);
    flex-shrink: 0;
    z-index: 50;
    flex-wrap: wrap;
}

.status-section {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.status-left {
    flex-shrink: 0;
    min-width: 0;
}

.status-pos {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family-mono);
    white-space: nowrap;
}

/* ----- 状态栏播放控制 — WinUI 3 PlayPause ----- */
.status-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    justify-content: center;
}

.status-control-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anim-fast), transform var(--anim-fast);
}

.status-control-btn:hover {
    background: var(--ctrl-fill-hover);
}

.status-control-btn:active {
    background: var(--ctrl-fill-pressed);
    transform: scale(0.94);
}

/* ==================================================================
   3a. 钢琴键盘 (动态创建)
   ================================================================== */
#piano-keyboard {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    /* 背景使用面板透明度 + 表面材质 (与工具栏/状态栏一致, 可透出背景图) */
    background-color: rgba(20, 20, 34, var(--surface-bg-alpha));
    backdrop-filter: var(--surface-blur);
    -webkit-backdrop-filter: var(--surface-blur);
}
#piano-keyboard:active {
    cursor: grabbing;
}
/* 触摸设备隐藏原生横向滚动条, 使用拖拽平移 */
@media (pointer: coarse) {
    #piano-keyboard {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #piano-keyboard::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* WinUI 3 主播放按钮 (AccentButton) */
.status-play-btn {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: var(--accent-on-accent);
    border: none;
}

.status-play-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.status-play-btn.playing {
    background: var(--accent);
}

.status-time {
    color: var(--text-secondary);
    font-size: var(--font-size-caption);
    font-family: var(--font-family-mono);
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
}

/* ----- 状态栏右侧 ----- */
.status-right {
    flex-shrink: 0;
    margin-left: auto;
}

/* WinUI 3 DropDownButton / SubtleButton */
.status-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-caption);
    font-family: var(--font-family);
    transition: background var(--anim-fast), border-color var(--anim-fast);
    min-height: 24px;
    line-height: 1.2;
}

.status-btn:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}

.status-btn:active {
    background: var(--ctrl-fill-pressed);
}

/* WinUI 3 乐器色块: 纯色圆角正方形, 无边框无发光 */
.inst-color-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-xs);
    background: var(--inst-0);
    flex-shrink: 0;
    box-shadow: none;
    border: none;
}

.inst-name {
    font-weight: 500;
}

/* ==================================================================
   4. 底部钢琴键盘 (已移除)
   ================================================================== */
/*
.piano-keyboard-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 5;
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: var(--piano-toggle-height);
    overflow: hidden;
}

.piano-keyboard-wrap.expanded {
    height: calc(var(--piano-toggle-height) + var(--piano-expanded-height));
}

.piano-toggle-bar {
    height: var(--piano-toggle-height);
    background: rgba(22, 33, 62, 0.9);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: background 0.2s;
}

.piano-toggle-bar:hover {
    background: rgba(22, 33, 62, 0.95);
}

.piano-toggle-handle {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.piano-toggle-label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 500;
    letter-spacing: 1px;
    user-select: none;
}

.piano-keyboard {
    height: var(--piano-expanded-height);
    background: #1a1a1a;
    display: flex;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #333;
}
*/

/* 钢琴白键 (已移除)
.piano-white-key {
    flex: 1;
    min-width: 24px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #999;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    transition: background 0.1s;
    z-index: 1;
}

.piano-white-key:hover {
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
}

.piano-white-key:active,
.piano-white-key.pressed {
    background: linear-gradient(to bottom, #d0d0d0 0%, #c8c8c8 100%);
    border-bottom-width: 0;
}

.piano-white-key .key-label {
    font-size: 9px;
    color: #666;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
    font-family: 'Segoe UI', sans-serif;
}

/* 钢琴黑键 (已移除)
.piano-black-key {
    position: absolute;
    width: 16px;
    height: var(--piano-key-black-height);
    background: linear-gradient(to bottom, #3a3a3a 0%, #1a1a1a 100%);
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    transition: background 0.1s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.piano-black-key:hover {
    background: linear-gradient(to bottom, #4a4a4a 0%, #2a2a2a 100%);
}

.piano-black-key:active,
.piano-black-key.pressed {
    background: linear-gradient(to bottom, #222 0%, #111 100%);
    height: calc(var(--piano-key-black-height) - 2px);
}

.piano-black-key .key-label {
    font-size: 7px;
    color: #aaa;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}
*/

/* ==================================================================
   5. 右键/长按上下文菜单 —— 毛玻璃 (Win10 紧凑风格)
   ================================================================== */
.context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--mica-acrylic);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    padding: 2px 0;
    min-width: 160px;
    max-width: 240px;
    box-shadow: var(--shadow-flyout);
    display: none;
    overflow: hidden;
    /* 横屏高度有限时, 防止菜单超出视口 */
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    font-family: var(--font-family);
}

.context-menu.visible {
    display: block;
    animation: flyoutShow 100ms cubic-bezier(0, 0, 0, 1);
}

.context-menu-item {
    /* Win10 风格紧凑 padding, 高度约 24px */
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--anim-fast);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    line-height: 1.2;
    user-select: none;
}

.context-menu-item:hover {
    background: var(--ctrl-fill-hover);
    color: var(--text-primary);
}

.context-menu-item i {
    width: 14px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.context-menu-item:hover i {
    color: var(--accent);
}

.context-menu-item.danger {
    color: var(--accent-red);
}

.context-menu-item.danger i {
    color: var(--accent-red);
}

.context-menu-item.danger:hover {
    background: rgba(255, 107, 107, 0.15);
}

.context-menu-divider {
    height: 1px;
    background: var(--ctrl-stroke-default);
    margin: 2px 0;
}

/* ==================================================================
   6. 乐器选择弹窗 —— 毛玻璃
   ================================================================== */
.instrument-popup {
    position: fixed;
    z-index: 9998;
    background: rgba(20, 20, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    min-width: 220px;
    max-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: none;
    overflow: hidden;
}

.instrument-popup.visible {
    display: block;
}

.instrument-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.instrument-popup-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.instrument-popup-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.instrument-popup-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.instrument-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 44px;
    font-size: 13px;
    color: #d0d0e0;
}

.instrument-popup-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.instrument-popup-item.selected {
    background: rgba(233, 69, 96, 0.15);
    color: #fff;
}

.instrument-popup-item .inst-icon-block {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
}

.instrument-popup-item.selected .inst-icon-block {
    border-color: transparent;
}

/* ==================================================================
   7. 弹窗通用 — WinUI 3 Acrylic 背景
   ================================================================== */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 遮罩层: 仅半透明黑色, 不使用模糊 (兼容性更好) */
    background: rgba(0, 0, 0, 0.55);
    /* 模态弹窗需覆盖一切常驻 UI 与悬浮菜单 (工具栏菜单/右键菜单/抽屉/浮层面板 均在 10006 以下) */
    z-index: 100200;
    align-items: center;
    justify-content: center;
}

.popup.active {
    display: flex;
    animation: popupFadeIn var(--anim-control);
}

/* 音色替代设置弹窗: 需显示在 MIDI 导入弹窗(100200)之上 */
#midi-substitute-popup {
    z-index: 100240;
}
/* 音色替代槽位选择菜单: 需显示在替代弹窗(100240)之上 */
#substitute-slot-menu {
    z-index: 100260;
}

@keyframes popupFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-content {
    /* WinUI 3 Acrylic 表面: 半透明 + 背景模糊 */
    background: rgba(26, 26, 40, 0.86);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 8px;
    min-width: 280px;
    max-width: 90vw;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: dialogShow var(--anim-control);
}
/* 不支持 backdrop-filter 的浏览器: 回退为高不透明度实底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .popup-content {
        background: rgba(26, 26, 40, 0.98);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.popup-content h4 {
    margin: 0 0 6px 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.popup-content label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
}

.popup-content input[type="range"] {
    width: 100%;
    margin: var(--space-2) 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    /* 不设轨道背景: 只保留滑块本体, 避免在弹窗里出现多余的色块 */
    background: transparent;
    border-radius: var(--radius-pill);
    outline: none;
    border: none;
}
.popup-content input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    border: 3px solid #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform var(--anim-fast);
}
.popup-content input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
.popup-content input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    border: 3px solid #fff;
    cursor: pointer;
}

/* WinUI 3 ContentDialog 底部按钮 */
.popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

.popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    min-height: 28px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background var(--anim-fast), border-color var(--anim-fast), transform var(--anim-fast);
    border: 1px solid transparent;
    user-select: none;
    line-height: 1.3;
    /* 默认暗色背景: 无修饰类 (如"关于 MiauNoteBlock") 时不显示白色 */
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
    border-color: var(--ctrl-stroke-default);
}
.popup-btn:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}

.popup-btn-cancel {
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
    border-color: var(--ctrl-stroke-default);
}
.popup-btn-cancel:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}
.popup-btn-cancel:active {
    background: var(--ctrl-fill-pressed);
    transform: scale(0.98);
}

.popup-btn-primary {
    background: var(--accent);
    color: var(--accent-on-accent);
    border-color: transparent;
}
.popup-btn-primary:hover {
    background: var(--accent-hover);
}
.popup-btn-primary:active {
    background: var(--accent-pressed);
    transform: scale(0.98);
}

.popup-content input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.popup-content input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0 2px 0 0;
    accent-color: var(--accent);
}

.popup-content button {
    /* 仅重置基础字体/颜色, 不强制尺寸背景, 避免污染 .midi-tab / .midi-sub-tab 等专用按钮 */
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.popup-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    gap: 8px;
}

/* ==================================================================
   7a. MIDI 导入弹窗 — WinUI 3 ContentDialog 风格
   ================================================================== */
.midi-import-dialog {
    background: rgba(26, 26, 40, 0.86);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    width: 620px;
    max-width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: dialogShow var(--anim-control);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .midi-import-dialog {
        background: rgba(26, 26, 40, 0.98);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* 大屏幕: MIDI 导入弹窗自动放大 */
@media (min-width: 1200px) {
    .midi-import-dialog {
        width: 860px;
        max-height: 90vh;
    }
}
@media (min-width: 1600px) {
    .midi-import-dialog {
        width: 1000px;
        max-height: 92vh;
    }
}

@keyframes dialogShow {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* WinUI 3 ContentDialog Header: 标题 20px Subtitle 字体 */
.midi-import-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px;
    background: transparent;
    border-bottom: 1px solid var(--ctrl-stroke-default);
}

.midi-import-header i {
    font-size: 18px;
    color: var(--accent);
}

.midi-import-header h3 {
    font-size: var(--font-size-subtitle);
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    flex: 1;
    line-height: 1.4;
}

/* WinUI 3 ContentDialog CloseButton */
.midi-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anim-fast), color var(--anim-fast);
}
.midi-close-btn:hover {
    background: var(--ctrl-fill-hover);
    color: var(--text-primary);
}
.midi-close-btn:active {
    background: var(--ctrl-fill-pressed);
}

/* 文件信息 */
.midi-file-info {
    background: var(--ctrl-fill-tertiary);
    border-bottom: 1px solid var(--ctrl-stroke-default);
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}
.midi-file-info strong { color: var(--accent-teal); }

/* WinUI 3 PivotView 标签页: 透明文字按钮, 选中时底部横条 + 文字亮起 */
.midi-tabs {
    display: flex;
    border-bottom: 1px solid var(--ctrl-stroke-default);
    flex-shrink: 0;
    padding: 0 4px;
    gap: 2px;
}
.midi-tab {
    flex: 1;
    padding: 3px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--anim-fast), border-color var(--anim-fast);
    font-family: var(--font-family);
    border-radius: 0;
    line-height: 1.4;
    white-space: nowrap;
}
.midi-tab:hover {
    color: var(--text-primary);
    background: transparent;
}
.midi-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 标签页内容 */
.midi-tab-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}
.midi-tab-panel { display: none; }
.midi-tab-panel.active { display: block; }

/* MIDI 子标签页 */
.midi-sub-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.midi-sub-tab {
    padding: 4px 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0;
    transition: color var(--anim-fast), border-bottom-color var(--anim-fast);
}
.midi-sub-tab:hover {
    color: var(--text-primary);
    background: none;
}
.midi-sub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent-default, #4c9aff);
}

/* 音色拟合 · 推荐选项 (档位缩放拟合槽数) */
.fitting-level {
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 10px;
}
.fitting-level-label {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.fitting-level-seg {
    display: flex;
    gap: 3px;
}
.fitting-level-btn {
    padding: 3px 9px;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    background: var(--ctrl-fill-default);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    min-height: 24px;
    transition: background var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast);
}
.fitting-level-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-default, #4c9aff);
}
.fitting-level-btn.active {
    background: rgba(76, 154, 255, 0.22);
    border-color: rgba(76, 154, 255, 0.7);
    color: #8fc5ff;
}

/* 音色替代弹窗 tab bar (与 .midi-sub-tabs 统一样式) */
.midi-sub-tab-bar {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid var(--ctrl-stroke-default);
    flex-shrink: 0;
}

.midi-sub-panel { display: none; }
.midi-sub-panel.active { display: block; }

/* 表格: 滚动统一由外层 .midi-tab-content 负责。
   原先内层固定 max-height(360px / 移动端 54vh) + overflow:auto 自行滚动,
   当可视区较矮时 wrap 底部被裁掉, 内层滚动条滚到底也看不到最后一行。
   用 !important 压过文件末尾 "Final WinUI flyout pass" 与移动端媒体查询的同名规则。 */
.midi-table-wrap {
    max-height: none !important;
    overflow: visible !important;
}

.midi-table {
    min-width: 560px;
}

/* MIDI 轨道子面板 */
.midi-track-panel-wrap {
    display: flex;
    flex-direction: column;
}

#midi-track-table-wrap {
    overflow: visible !important;
}

.midi-track-table {
    table-layout: fixed;
    min-width: 660px;
}

.midi-track-table th,
.midi-track-table td {
    text-align: center;
    vertical-align: middle;
}

.midi-track-table th:nth-child(1),
.midi-track-table td:nth-child(1) { width: 40px; }
.midi-track-table th:nth-child(2),
.midi-track-table td:nth-child(2) { width: auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.midi-track-table th:nth-child(3),
.midi-track-table td:nth-child(3) { width: 70px; }
.midi-track-table th:nth-child(4),
.midi-track-table td:nth-child(4) { width: 70px; }
.midi-track-table th:nth-child(5),
.midi-track-table td:nth-child(5),
.midi-track-table th:nth-child(6),
.midi-track-table td:nth-child(6),
.midi-track-table th:nth-child(7),
.midi-track-table td:nth-child(7) { width: 70px; }

.midi-track-table tbody tr {
    position: relative;
}

/* 静音行：半透明黑色蒙版 (用 td 背景色, 避免 tr::after 在表格中不可靠) */
.midi-track-table tbody tr.muted td {
    background: rgba(0, 0, 0, 0.45);
}

/* 排除生成行：黑色遮罩（只读状态） */
.midi-track-table tbody tr.excluded td {
    background: rgba(0, 0, 0, 0.55);
}

.midi-track-table tbody tr.muted.excluded td {
    background: rgba(0, 0, 0, 0.55);
}

.midi-track-btn {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--ctrl-stroke-default);
    background: var(--ctrl-fill-default);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--anim-fast);
    position: relative;
    z-index: 10;
}

.midi-track-btn:hover:not(:disabled) {
    background: var(--ctrl-fill-hover);
    color: var(--text-primary);
    border-color: var(--ctrl-stroke-hover);
}

.midi-track-btn.on {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--text-on-accent);
}

.midi-track-btn.solo.on {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #000;
}

.midi-track-btn.exclude.on {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--text-on-accent);
}

.midi-track-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* MIDI 轨道播放器 */
.midi-track-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-top: 1px solid var(--ctrl-stroke-default);
    background: var(--ctrl-fill-tertiary);
    flex-shrink: 0;
}

.midi-track-player-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--anim-fast);
    flex-shrink: 0;
}

.midi-track-player-btn:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.midi-track-player-btn.play {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    font-size: 15px;
}

.midi-track-player-btn.play:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.midi-track-player-btn.play.playing {
    background: var(--accent);
}

.midi-track-progress-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.midi-track-progress {
    flex: 1;
    height: 6px;
    background: var(--ctrl-fill-default);
    border-radius: var(--radius-pill);
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.midi-track-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: var(--radius-pill);
    width: 0%;
    pointer-events: none;
}

.midi-track-progress-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--neutral-12);
    border: 2px solid var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: 0%;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(76, 194, 255, 0.4);
}

.midi-track-progress-time {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-family-mono);
    min-width: 100px;
    text-align: right;
    white-space: nowrap;
}
.midi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.midi-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.midi-table th {
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-dim);
    font-weight: 500;
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.midi-table td {
    padding: 3px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    vertical-align: middle;
}
.midi-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.midi-table select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    cursor: pointer;
}
.midi-table select:focus { border-color: var(--accent-teal); outline: none; }
.midi-table .midi-ignore { opacity: 0.4; }
.midi-table .percussion-note { font-weight: 600; color: var(--accent-teal); font-size: 12px; }
.midi-table .midi-use-fitting-label {
    display: inline-block;
    background: rgba(0, 255, 204, 0.1);
    color: var(--accent-teal);
    border: 1px solid rgba(0, 255, 204, 0.25);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
}
.midi-table .midi-octave-range {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}
.midi-preview-btn {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 4px;
    transition: all 0.15s ease;
}
.midi-preview-btn:hover {
    background: rgba(0, 255, 204, 0.12);
    color: var(--accent-teal);
    border-color: rgba(0, 255, 204, 0.35);
}
.midi-preview-btn:active {
    transform: scale(0.95);
}
.midi-notice {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    max-width: 80%;
    text-align: center;
    z-index: 1000;
    pointer-events: none;
    animation: midi-notice-in 0.2s ease;
}
.midi-notice-info {
    background: rgba(0, 255, 204, 0.12);
    color: var(--accent-teal);
    border: 1px solid rgba(0, 255, 204, 0.3);
}
.midi-notice-error {
    background: rgba(255, 80, 80, 0.15);
    color: #ff7a7a;
    border: 1px solid rgba(255, 80, 80, 0.35);
}
@keyframes midi-notice-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 设置 */
.midi-settings {
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    flex-shrink: 0;
}
.midi-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    align-items: center;
}
.midi-settings-row:last-child { margin-bottom: 0; }
.midi-settings-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.midi-settings-row input[type="checkbox"],
.midi-settings-row input[type="radio"] {
    accent-color: var(--accent-teal);
    cursor: pointer;
}
.midi-settings-row input[type="number"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 12px;
    width: 44px;
}
.midi-settings-row select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
}

/* WinUI 3 ContentDialog Footer - 主按钮在右 */
.midi-import-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 8px 12px;
    background: transparent;
    border-top: 1px solid var(--ctrl-stroke-default);
}

/* WinUI 3 Button 标准样式 */
.midi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body);
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background var(--anim-fast), transform var(--anim-fast);
    min-height: 32px;
    border: 1px solid transparent;
    user-select: none;
    line-height: 1.4;
}

/* WinUI 3 StandardButton (次要按钮) */
.midi-btn-cancel {
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
    border-color: var(--ctrl-stroke-default);
}
.midi-btn-cancel:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}
.midi-btn-cancel:active {
    background: var(--ctrl-fill-pressed);
    transform: scale(0.98);
}

/* WinUI 3 AccentButton / FilledButton (主按钮) */
.midi-btn-import {
    background: var(--accent);
    color: var(--accent-on-accent);
    border-color: transparent;
}
.midi-btn-import:hover {
    background: var(--accent-hover);
}
.midi-btn-import:active {
    background: var(--accent-pressed);
    transform: scale(0.98);
}
.midi-btn-import:disabled {
    background: var(--ctrl-fill-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}
.midi-btn-import.loading {
    opacity: 0.7;
    pointer-events: none;
}

.midi-import-body { display: none; }

/* --- 音色拟合 --- */

.midi-table-timbre th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 4px;
    font-weight: 600;
    white-space: nowrap;
}

.midi-table-timbre td {
    padding: 3px 3px;
    vertical-align: middle;
}

/* 水平紧凑: 除「乐器」列外, 其余列收缩到内容宽度,
   剩余宽度全部给乐器名列, 避免按钮之间出现大片空白。
   垂直方向保持舒适的 3px 行距 (不压缩上下留白)。 */
.midi-table-timbre thead th {
    width: 1%;
}
.midi-table-timbre thead th.timbre-col-name {
    width: auto;
}

.timbre-col-preview {
    min-width: 66px;
    width: auto;
    text-align: center;
    white-space: nowrap;
}

/* 试听内容靠右贴紧下一列, 消除按钮与音色槽之间的空白 */
.midi-table-timbre td.timbre-col-preview {
    text-align: right;
    padding-right: 4px;
}
.midi-table-timbre td.timbre-col-preview .timbre-preview-wrap {
    justify-content: flex-end;
}

/* 拟合表内自定义下拉与槽位同高 */
.midi-table-timbre .cdd-trigger {
    padding: 2px 3px;
    gap: 2px;
    font-size: 11px;
    line-height: 1.4;
}

.timbre-col-name {
    min-width: 104px;
}

.timbre-preview-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
}

.timbre-preview-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all var(--anim-fast);
    flex-shrink: 0;
    margin-right: 0;
}

.timbre-preview-btn:hover {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}

.timbre-preview-btn.playing {
    background: var(--accent);
    color: var(--text-on-accent);
    animation: pulse 1s ease-in-out infinite;
}

.timbre-pitch-select {
    width: 46px;
    height: 22px;
    min-height: 0;
    line-height: 18px;
    padding: 1px 2px;
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 11px;
    font-family: var(--font-family);
    cursor: pointer;
}

.timbre-select {
    padding: 4px 6px;
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-family);
    cursor: pointer;
    min-width: 90px;
    transition: border-color var(--anim-fast);
}

.timbre-select:focus {
    outline: none;
    border-color: var(--accent);
}

.timbre-select.has-value {
    border-color: var(--accent);
    background: rgba(76, 194, 255, 0.08);
}

/* 音色槽可点击按钮样式 */
.timbre-slot-btn {
    padding: 2px 4px;
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 11px;
    transition: border-color 0.15s, background 0.15s;
    min-width: 64px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
}
.timbre-slot-btn:hover {
    border-color: var(--accent);
    background: rgba(76, 194, 255, 0.08);
}
.timbre-slot-btn:active {
    background: rgba(76, 194, 255, 0.15);
}

/* 音色槽: 选择框 + 右侧紧凑音量输入框 (0-100, 可拖动调节) */
.timbre-slot-inner {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}
.timbre-slot-inner .timbre-slot-btn {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.timbre-slot-inner .timbre-slot-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 提高优先级以覆盖通用 input[type="number"] 的 32px 最小高度 */
.midi-table-timbre .timbre-slot-vol {
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
    min-height: 0;
    line-height: 18px;
    box-sizing: border-box;
    padding: 1px 2px;
    font-size: 11px;
    font-family: var(--font-family);
    text-align: center;
    color: var(--text-primary);
    background: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm);
    cursor: ns-resize;
    /* 防止拖动调节时选中文本 */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.midi-table-timbre .timbre-slot-vol:hover {
    border-color: var(--accent);
}
.midi-table-timbre .timbre-slot-vol:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(76, 194, 255, 0.08);
}
.midi-table-timbre .timbre-slot-vol:disabled {
    opacity: 0.35;
    cursor: default;
}
.midi-table-timbre tbody tr.channel-excluded .timbre-slot-vol {
    pointer-events: none;
    opacity: 0.4;
}

/* 拟合表: channel 被排除的行 — 黑色遮罩 + 只读 */
.midi-table-timbre tbody tr.channel-excluded td {
    background: rgba(0, 0, 0, 0.55);
}
.midi-table-timbre tbody tr.channel-excluded .timbre-slot-btn,
.midi-table-timbre tbody tr.channel-excluded .timbre-preview-btn,
.midi-table-timbre tbody tr.channel-excluded .timbre-pitch-select {
    pointer-events: none;
    opacity: 0.4;
}

/* 延音轨道试听按钮 */
.sustain-track-preview-btn:hover {
    background: var(--ctrl-fill-hover) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.sustain-track-preview-btn.playing {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent) !important;
}

#sustain-tracks-popup .settings-body {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

#sustain-tracks-popup .sustain-tracks-list {
    min-width: 520px;
}

#sustain-tracks-popup .sustain-track-item {
    min-width: 520px;
}

@media (max-width: 768px) {
    #sustain-tracks-popup .popup-content {
        width: 96vw;
        max-width: 96vw !important;
        max-height: 92vh !important;
    }
    #sustain-tracks-popup .settings-body {
        padding: 8px;
    }
    #sustain-tracks-popup .sustain-tracks-list,
    #sustain-tracks-popup .sustain-track-item {
        min-width: 460px;
    }
    #sustain-tracks-popup .sustain-track-preview-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
}

/* 设置弹窗标签页 */
.settings-tabs {
    display: flex;
    gap: 2px;
    padding: 0 10px;
    border-bottom: 1px solid var(--ctrl-stroke-default);
    background: rgba(255, 255, 255, 0.02);
    position: sticky;
    top: 0;
    z-index: 3;
}
.settings-tab {
    transition: all 0.15s;
    padding: 5px 12px;
    font-size: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0;
    position: relative;
    font-weight: 500;
}
.settings-tab:hover {
    color: var(--text-primary);
    background: var(--ctrl-fill-default);
}
.settings-tab.active {
    color: var(--accent);
    background: transparent;
}
.settings-tab.active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
}
.settings-tab-panel {
    display: none;
}
.settings-tab-panel.active {
    display: block;
}
.settings-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-inline-row .settings-label {
    margin: 0;
}
.settings-control {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 4px;
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
}
#fps-indicator {
    position: fixed;
    left: 8px;
    bottom: 8px;
    z-index: 10010;
    display: none;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.68);
    color: #8ff0c8;
    font: 12px/1.2 monospace;
    pointer-events: none;
}

/* 音色槽左侧小图标 (不加边框/发光/阴影) */
.timbre-slot-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.timbre-slot-icon-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
}
.timbre-slot-text {
    display: inline-block;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.timbre-slot-menu {
    position: fixed;
    z-index: 10002;
    background: rgba(22, 33, 62, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 2px 0;
    min-width: 150px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    /* 默认最大高度, JS 会根据视口动态覆盖 */
    max-height: min(260px, calc(100vh - 32px));
}

/* 右键音色菜单项 (默认舒适模式) */
.timbre-menu-item {
    box-sizing: border-box;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    font-size: 12px;
    color: var(--text-primary);
    transition: background 0.12s;
}

.timbre-menu-item:hover,
.timbre-menu-item:focus {
    background: rgba(255, 255, 255, 0.08);
}

.timbre-menu-item.selected {
    background: rgba(76, 194, 255, 0.15);
}

/* 紧凑模式: 当菜单被动态标记为 compact 时进一步压缩 */
.timbre-slot-menu.compact .timbre-menu-item {
    padding: 2px 8px;
    min-height: 22px;
    gap: 6px;
    font-size: 11px;
}

.timbre-slot-menu.compact .timbre-menu-icon {
    width: 16px;
    height: 16px;
}

.timbre-menu-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.timbre-menu-icon-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #888;
    font-size: 11px;
    font-style: italic;
}

.timbre-menu-icon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.timbre-menu-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 音色拟合行内乐器名称 */
.midi-inst-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.midi-inst-sub {
    display: block;
    font-size: 10px;
    color: var(--text-tertiary);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==================================================================
   7b. 任务进度弹窗 — WinUI 3 ContentDialog
   ================================================================== */
.task-progress-dialog {
    background: var(--mica-base);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dialog);
    padding: var(--space-6);
    min-width: 320px;
    max-width: 420px;
    animation: dialogShow var(--anim-control);
}

.task-progress-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 0 var(--space-3) 0;
    background: transparent;
    border-bottom: none;
    font-size: var(--font-size-subtitle);
    font-weight: 600;
    color: var(--text-primary);
}

.task-progress-header i {
    font-size: 20px;
    color: var(--accent);
    animation: task-pulse 1.5s ease-in-out infinite;
}

@keyframes task-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.task-progress-header h3 {
    font-size: var(--font-size-subtitle);
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    flex: 1;
}

.task-progress-body {
    padding: var(--space-3) 0 0 0;
}

.task-progress-filename {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    word-break: break-all;
    line-height: 1.4;
}

.task-progress-bar-wrap {
    width: 100%;
    height: 4px;
    background: var(--ctrl-fill-default);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.task-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-teal));
    border-radius: var(--radius-pill);
    transition: width 0.2s linear;
    position: relative;
}

.task-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: task-shimmer 1.5s linear infinite;
}

@keyframes task-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.task-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim);
}

.task-progress-percent {
    font-weight: 600;
    color: var(--accent-teal);
    min-width: 36px;
}

.task-progress-speed {
    color: var(--text-dim);
}

.task-progress-eta {
    color: var(--text-dim);
    text-align: right;
}


/* ==================================================================
   8.5. 设置弹窗 (Settings) — WinUI 3 ContentDialog
   ================================================================== */
.settings-dialog {
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    padding: 0;
    background: var(--mica-base);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dialog);
    animation: dialogShow var(--anim-control);
}

/* 大屏幕: 设置弹窗适度放大 */
@media (min-width: 1200px) {
    .settings-dialog {
        width: 540px;
        max-height: 92vh;
    }
}
.settings-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--ctrl-stroke-default);
    background: transparent;
}
.settings-header h4 {
    flex: 1;
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-subtitle);
    font-weight: 600;
    font-family: var(--font-family);
}
.settings-header i {
    color: var(--accent);
    font-size: 16px;
}
.settings-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anim-fast), color var(--anim-fast);
    padding: 0;
    font-size: 14px;
    line-height: 1;
}
.settings-close-btn:hover {
    background: var(--ctrl-fill-hover);
    color: var(--text-primary);
}
.settings-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.about-body {
    padding: 18px 20px 16px;
    gap: 14px;
}
.about-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.about-logo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.about-brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    text-align: left;
}
.about-brand-copy h3,
.about-brand-copy p,
.about-details p {
    margin: 0;
}
.about-brand-copy h3 {
    font-size: 16px;
    line-height: 1.2;
}
.about-brand-copy p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}
.about-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: left;
}
.about-details .about-capabilities {
    margin-bottom: 3px;
    color: var(--text-tertiary);
    font-size: 11px;
}
.about-details a {
    color: var(--accent);
    text-decoration: none;
}
.about-details a:hover {
    text-decoration: underline;
}
.about-details .fa-arrow-up-right-from-square {
    font-size: 10px;
}
@media (max-width: 420px) {
    .about-body { padding: 14px 16px; }
    .about-brand { gap: 10px; }
}
.settings-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-row-block {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.settings-label {
    flex: 0 0 auto;
    min-width: 60px;
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* 个性化: 背景图片文件选择按钮 (原生 file input 套用 Fluent 控件样式) */
.settings-file-input {
    font-size: 12px;
    color: transparent; /* 隐藏原生"未选择文件"文字, 文件名由右侧 span 显示 */
    max-width: 170px;
    cursor: pointer;
}
.settings-file-input::file-selector-button {
    padding: 5px 12px;
    font-size: 12px;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-sm, 6px);
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.settings-file-input::file-selector-button:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}
.settings-file-name {
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-label-icon {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 0;
}
.settings-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.settings-hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-caption);
    flex: 1;
}

/* 滑块 + 数字 行 (用于音符间隔等) */
.settings-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.settings-range-row input[type="range"] {
    flex: 1;
    min-width: 0;
}
.settings-range-row > span {
    font-family: var(--font-family-mono);
    color: var(--accent);
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}
.settings-range-row .settings-unit {
    color: var(--text-tertiary);
    font-size: var(--font-size-caption);
    font-weight: normal;
    min-width: auto;
}

/* 通用提示文字 (用于弹窗中说明性文字) */
.hint-text {
    color: var(--text-tertiary);
    font-size: var(--font-size-caption);
    line-height: 1.6;
    margin: 0;
}

/* 弹窗内的链接 (WinUI 3 Hyperlink 风格) */
.popup-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    text-decoration: none;
    font-size: var(--font-size-body);
    padding: 6px 0;
    transition: color var(--anim-fast);
    word-break: break-all;
}

.popup-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.popup-link i {
    color: var(--accent);
    flex-shrink: 0;
}
.settings-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--accent);
    color: var(--accent-on-accent);
    border: 1px solid transparent;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-caption);
    font-family: var(--font-family);
    font-weight: 500;
    transition: background var(--anim-fast);
    min-height: 28px;
}
.settings-toggle-btn:hover { background: var(--accent-hover); }
.settings-toggle-btn:active { background: var(--accent-pressed); }

/* WinUI 3 ToggleSwitch (iOS 风格开关) */
.settings-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
}
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--ctrl-fill-default);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-pill);
    transition: background var(--anim-fast), border-color var(--anim-fast);
}
.settings-switch-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    top: 2px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    transition: transform var(--anim-fast), background var(--anim-fast);
}
.settings-switch:hover .settings-switch-slider {
    background-color: var(--ctrl-fill-hover);
}
.settings-switch input:checked + .settings-switch-slider {
    background-color: var(--accent);
    border-color: var(--accent);
}
.settings-switch input:checked + .settings-switch-slider::before {
    transform: translateX(20px);
    background-color: var(--accent-on-accent);
}

/* 速度 (TPS) 设置 — WinUI 3 Slider */
.settings-tempo-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}
.settings-tempo-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-family-mono);
    text-align: center;
    letter-spacing: 0.04em;
}
.settings-tempo-slider-wrap {
    width: 100%;
    padding: var(--space-2) 0;
}

/* 收音机式 (指针居中) 速度滑块 */
.settings-tempo-radio-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.settings-tempo-radio {
    position: relative;
    width: 100%;
    height: 56px;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a24 0%, #0e0e16 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}
.settings-tempo-radio-track {
    position: absolute;
    top: 8px;
    left: 0;
    height: 40px;
    /* 实际宽度由 JS 设置 (511 * 4 = 2044px) */
    will-change: transform;
}
.settings-tempo-tick {
    position: absolute;
    top: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}
.settings-tempo-tick-major {
    height: 24px;
    background: rgba(255, 255, 255, 0.35);
    top: 0;
}
.settings-tempo-tick-num {
    position: absolute;
    top: 26px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-family-mono);
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}
.settings-tempo-radio-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 40px;
    background: var(--accent);
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 6px rgba(76, 194, 255, 0.8);
}
.settings-tempo-radio-pointer::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -5px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border: 2px solid #fff;
    border-radius: 50%;
}
.settings-tempo-radio-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #ffb74d;
    background: rgba(255, 183, 77, 0.08);
    border: 1px solid rgba(255, 183, 77, 0.3);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}
#settings-tempo-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--p, 20%), var(--ctrl-fill-default) var(--p, 20%), var(--ctrl-fill-default) 100%);
    border-radius: var(--radius-pill);
    outline: none;
    cursor: pointer;
    border: none;
}
#settings-tempo-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    border: 4px solid #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform var(--anim-fast);
}
#settings-tempo-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
#settings-tempo-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
}
.settings-tempo-row {
    display: flex;
    justify-content: center;
}
.settings-tempo-direct {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-dim);
    width: 100%;
}
#settings-tempo-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--ctrl-fill-tertiary);
    border: 1px solid var(--ctrl-stroke-default);
    border-bottom: 1px solid var(--ctrl-stroke-hover);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-family: var(--font-family-mono);
    border-radius: var(--radius-sm);
    transition: border-color var(--anim-fast), background var(--anim-fast);
    outline: none;
}
#settings-tempo-input:hover {
    background: var(--ctrl-fill-default);
    border-color: var(--ctrl-stroke-hover);
}
#settings-tempo-input:focus {
    border-color: var(--accent);
    border-bottom-color: var(--accent);
}

/* WinUI 3 通用输入控件基础样式 */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="email"],
textarea,
select {
    background: var(--ctrl-fill-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--ctrl-stroke-default);
    border-bottom: 1px solid var(--ctrl-stroke-hover);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-body);
    font-family: var(--font-family);
    transition: border-color var(--anim-fast), background var(--anim-fast);
    outline: none;
    min-height: 32px;
}
input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
    background: var(--ctrl-fill-default);
    border-color: var(--ctrl-stroke-hover);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    background: var(--ctrl-fill-default);
}
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--ctrl-fill-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .settings-dialog { width: calc(100vw - 24px); }
    .settings-label { min-width: 90px; font-size: 12px; }
    .settings-hint { display: none; }
}

/* ==================================================================
   9. 滚动条 — WinUI 3 紧凑风格 (8px 细条)
   ================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    transition: background var(--anim-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.30);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ==================================================================
   10. Note渲染提示 —— 钢琴卷帘中的音符块样式
   canvas 内由 JS 绘制，CSS 仅提供辅助效果
   ================================================================== */
.note-block-label {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    font-family: 'Segoe UI', sans-serif;
}

/* ==================================================================
   11. 响应式 —— 移动端适配
   ================================================================== */

/* 横屏抽屉相关元素默认隐藏, 仅在移动横屏时显示 */
.landscape-menu-btn,
.landscape-drawer,
.landscape-drawer-mask {
    display: none;
}

/* 工具栏标题与 FAB 默认隐藏，仅在移动端显示 */
.toolbar-title,
.mobile-fab-bar,
.mobile-fab-deselect,
.mobile-fab-single,
.fab-context-menu {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --toolbar-height: 52px;
        --status-height: 36px;
        --track-panel-width: 160px;
        --piano-expanded-height: 90px;
        --piano-key-white-height: 72px;
        --piano-key-black-height: 44px;
    }

    /* ============================================
       隐私政策弹窗（强制同意）
       ============================================ */
    .privacy-popup-mask {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        /* 隐私弹窗为强制同意流程, 需位于普通弹窗(100200)之上 */
        z-index: 100300;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .privacy-popup {
        background: #1e1e2e;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 14px 16px;
        max-width: 460px;
        width: 100%;
        /* 隐私政策正文较长: 弹窗限高, 正文内部滚动, 同意按钮始终可见 */
        max-height: calc(100svh - 32px);
        display: flex;
        flex-direction: column;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
        text-align: center;
    }
    .privacy-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        margin: 0 0 12px;
        font-size: 13px;
        line-height: 1.65;
        color: var(--text-secondary, #d0d0e0);
        text-align: left;
        /* pre-line: 保留政策文本中的段落换行, 同时正常折行 */
        white-space: pre-line;
    }
    .privacy-popup-title {
        font-size: 17px;
        font-weight: 600;
        color: #fff;
        margin: 0 0 8px 0;
    }
    .privacy-popup-message {
        font-size: 13px;
        line-height: 1.5;
        color: #d0d0e0;
        margin: 0 0 10px 0;
    }
    .privacy-popup-actions {
        display: flex;
        justify-content: center;
    }
    .privacy-popup-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: var(--accent-teal, #4ecdc4);
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
    }
    .privacy-popup-btn:hover {
        background: #5dd8d0;
    }
    .privacy-popup-btn:active {
        transform: scale(0.97);
    }

    /* ========== 竖屏模式: 单个悬浮按钮 ========== */
    /* 默认隐藏（桌面端/横屏） */
    .mobile-fab-single,
    .mobile-fab-deselect {
        display: none;
    }
    .fab-context-menu {
        display: none;
    }

    @media (max-width: 768px) and (orientation: portrait) {
        .mobile-fab-deselect {
            display: flex;
            position: fixed;
            right: 72px;
            bottom: 84px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(30, 30, 46, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-primary, #eaeaea);
            cursor: pointer;
            z-index: 9997;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            align-items: center;
            justify-content: center;
            font-size: 15px;
            transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
        }
        .mobile-fab-deselect:hover {
            transform: scale(1.08);
            background: rgba(40, 40, 60, 0.96);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        }
        .mobile-fab-deselect:active {
            transform: scale(0.95);
        }
        .mobile-fab-deselect-text {
            width: auto;
            min-width: 44px;
            height: 32px;
            padding: 0 10px;
            border-radius: 16px;
            font-size: 12px;
            white-space: nowrap;
        }
        .mobile-fab-single {
            display: flex;
            position: fixed;
            right: 16px;
            bottom: 80px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--accent, #4cc2ff);
            border: none;
            color: white;
            cursor: pointer;
            z-index: 9997;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .mobile-fab-single:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 16px rgba(0,0,0,0.4);
        }
        .mobile-fab-single:active {
            transform: scale(0.95);
        }
        .fab-context-menu {
            display: none;
            position: fixed;
            right: 16px;
            bottom: 140px;
            background: rgba(22, 33, 62, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            padding: 6px 0;
            min-width: 140px;
            z-index: 9998;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }
        .fab-context-menu.visible {
            display: block;
            animation: flyoutShow 100ms cubic-bezier(0, 0, 0, 1);
        }
        .fab-context-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background 0.12s;
            font-size: 13px;
            color: var(--text-primary, #eaeaea);
        }
        .fab-context-menu-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .fab-context-menu-item i {
            width: 16px;
            text-align: center;
            color: var(--text-secondary, #888);
            font-size: 13px;
        }
        .fab-context-menu-item:hover i {
            color: var(--accent, #4cc2ff);
        }
        .fab-context-menu-item.fab-danger {
            color: #ff6b6b;
        }
        .fab-context-menu-item.fab-danger i {
            color: #ff6b6b;
        }
        .fab-context-menu-item.fab-danger:hover {
            background: rgba(255, 107, 107, 0.15);
        }
    }

    /* 工具栏：仅图标 */
    .toolbar {
        padding: 0 8px;
        gap: 6px;
    }

    .toolbar-btn .label {
        display: none;
    }

    .toolbar-btn {
        padding: 8px;
    }

    .toolbar-tempo {
        padding: 4px 8px;
        gap: 4px;
    }

    .toolbar-tempo label {
        display: none;
    }

    #tempo-slider {
        width: 50px;
    }

    #tempo-value {
        min-width: 40px;
        font-size: 11px;
    }

    .toolbar-divider {
        margin: 0 1px;
    }

    /* 左侧面板：覆盖层 */
    .track-panel {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);
    }

    .track-panel.open {
        transform: translateX(0);
    }

    /* 状态栏 */
    .status-bar {
        padding: 0 6px;
        gap: 6px;
        font-size: 11px;
        flex-wrap: wrap;
    }

    /* .status-song-name (已移除)
    .status-song-name {
        max-width: 100px;
    }
*/

    .status-pos {
        display: none;
    }

    .progress-time {
        min-width: 60px;
        font-size: 10px;
    }

    .inst-name {
        display: none;
    }

    .status-btn {
        padding: 6px 8px;
    }

    /* 钢琴键盘 (已移除)
    .piano-white-key {
        min-width: 20px;
    }

    .piano-black-key {
        width: 14px;
    }

    .piano-white-key .key-label {
        font-size: 7px;
    }

    .piano-black-key .key-label {
        font-size: 6px;
    }
*/

    /* 乐器选择器 */
    #btn-instrument-selector {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        min-width: auto !important;
        flex-shrink: 0;
    }
    #btn-instrument-selector #inst-name-text {
        display: inline !important;
        white-space: nowrap !important;
    }
    #inst-color-dot {
        flex-shrink: 0;
    }

    /* 弹窗 */
    .popup-content {
        padding: 6px;
        min-width: auto;
        width: 90vw;
    }

    .context-menu {
        min-width: 160px;
    }

    .context-menu-item {
        padding: 10px 14px;
        font-size: 14px;
    }

    .instrument-popup {
        max-width: 90vw;
    }

    /* MIDI 导入弹窗移动端 */
    .midi-import-dialog {
        width: 94vw;
        max-width: 94vw;
        max-height: 90vh;
        border-radius: 12px;
    }

    .midi-import-header {
        padding: 6px 10px;
    }

    .midi-import-header h3 {
        font-size: 15px;
    }

    .midi-import-body {
        padding: 8px;
    }

    .midi-file-info {
        padding: 6px 10px;
    }

    .midi-setting-item {
        padding: 8px;
    }

    .midi-import-footer {
        padding: 8px 10px;
        gap: 8px;
    }

    .midi-btn {
        padding: 6px 12px;
        font-size: 13px;
        flex: 1;
        justify-content: center;
    }

    /* 任务进度弹窗移动端 */
    .task-progress-dialog {
        width: 88vw;
        max-width: 88vw;
    }

    .task-progress-body {
        padding: 16px 18px;
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    :root {
        --toolbar-height: 48px;
        --status-height: 34px;
        --track-panel-width: 140px;
    }

    .toolbar-btn {
        padding: 6px;
        min-width: 40px;
        min-height: 40px;
    }

    .toolbar-btn .icon {
        font-size: 16px;
    }

    #tempo-slider {
        width: 40px;
    }

    /* .status-song-name (已移除)
    .status-song-name {
        max-width: 80px;
        font-size: 10px;
    }
*/

    .progress-time {
        min-width: 50px;
        font-size: 9px;
    }
}

/* ==================================================================
   11a. 桌面端工具栏增强
   ================================================================== */
@media (min-width: 769px) {
    :root {
        --toolbar-height: 48px;
    }
    .toolbar {
        padding: 0 12px;
        gap: 6px;
    }
    .toolbar-btn {
        min-width: 36px;
        min-height: 36px;
        font-size: 14px;
    }
    .toolbar-btn .icon {
        font-size: 18px;
    }
    .toolbar-collapsible[data-group="overflow"] {
        display: inline-flex !important;
    }
    .toolbar-more-btn {
        display: none !important;
    }
    #btn-open, #btn-file, #btn-about {
        display: inline-flex !important;
    }
}

/* ==================================================================
   12. 安全区域适配 (iPhone notch)
   ================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    .status-bar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* .piano-keyboard-wrap (已移除)
    .piano-keyboard-wrap {
        padding-bottom: env(safe-area-inset-bottom);
    }
    */

    body {
        padding: env(safe-area-inset-top) 0 0 0;
    }
}

/* ==================================================================
   13. 触摸设备优化
   ================================================================== */
@media (pointer: coarse) {
    .toolbar-btn,
    .track-panel-list .instrument-btn,
    .track-panel-add,
    .popup-content button,
    .context-menu-item,
    .instrument-popup-item,
    .status-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .progress-bar {
        min-height: 12px;
    }

    /* ========== 竖屏模式: 单个悬浮按钮 ========== */
    /* 默认隐藏（桌面端/横屏） */
    .mobile-fab-single {
        display: none;
    }
    .fab-context-menu {
        display: none;
    }

    @media (max-width: 768px) and (orientation: portrait) {
        .mobile-fab-single {
            display: flex;
            position: fixed;
            right: 16px;
            bottom: 80px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--accent, #4cc2ff);
            border: none;
            color: white;
            cursor: pointer;
            z-index: 9997;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .mobile-fab-single:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 16px rgba(0,0,0,0.4);
        }
        .mobile-fab-single:active {
            transform: scale(0.95);
        }
        .fab-context-menu {
            display: none;
            position: fixed;
            right: 16px;
            bottom: 140px;
            background: rgba(22, 33, 62, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            padding: 6px 0;
            min-width: 140px;
            z-index: 9998;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }
        .fab-context-menu.visible {
            display: block;
            animation: flyoutShow 100ms cubic-bezier(0, 0, 0, 1);
        }
        .fab-context-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background 0.12s;
            font-size: 13px;
            color: var(--text-primary, #eaeaea);
        }
        .fab-context-menu-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .fab-context-menu-item i {
            width: 16px;
            text-align: center;
            color: var(--text-secondary, #888);
            font-size: 13px;
        }
        .fab-context-menu-item:hover i {
            color: var(--accent, #4cc2ff);
        }
        .fab-context-menu-item.fab-danger {
            color: #ff6b6b;
        }
        .fab-context-menu-item.fab-danger i {
            color: #ff6b6b;
        }
        .fab-context-menu-item.fab-danger:hover {
            background: rgba(255, 107, 107, 0.15);
        }
    }

    /* 工具栏：仅图标 */
    .toolbar {
        padding: 0 8px;
        gap: 6px;
    }

    .toolbar-btn .label {
        display: none;
    }

    .toolbar-btn {
        padding: 8px;
    }

    .toolbar-tempo {
        padding: 4px 8px;
        gap: 4px;
    }

    .toolbar-tempo label {
        display: none;
    }

    #tempo-slider {
        width: 50px;
    }

    #tempo-value {
        min-width: 40px;
        font-size: 11px;
    }

    .toolbar-divider {
        margin: 0 1px;
    }

    /* 左侧面板：覆盖层 */
    .track-panel {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);
    }

    .track-panel.open {
        transform: translateX(0);
    }

    /* 状态栏 */
    .status-bar {
        padding: 0 6px;
        gap: 6px;
        font-size: 11px;
        flex-wrap: wrap;
    }

    .status-pos {
        display: none;
    }

    .progress-time {
        min-width: 60px;
        font-size: 10px;
    }

    .inst-name {
        display: none;
    }

    .status-btn {
        padding: 6px 8px;
    }

    /* 弹窗 */
    .popup-content {
        padding: 10px;
        min-width: auto;
        width: 90vw;
    }

    .context-menu {
        min-width: 160px;
    }

    .context-menu-item {
        padding: 10px 14px;
        font-size: 14px;
    }

    .instrument-popup {
        max-width: 90vw;
    }

    /* MIDI 导入弹窗移动端 */
    .midi-import-dialog {
        width: 94vw;
        max-width: 94vw;
        max-height: 90vh;
        border-radius: 12px;
    }

    .midi-import-header {
        padding: 10px 12px;
    }

    .midi-import-header h3 {
        font-size: 15px;
    }

    .midi-import-body {
        padding: 14px;
    }

    .midi-file-info {
        padding: 12px;
    }

    .midi-setting-item {
        padding: 12px;
    }

    .midi-import-footer {
        padding: 12px 14px;
        gap: 8px;
    }

    .midi-btn {
        padding: 10px 16px;
        font-size: 13px;
        flex: 1;
        justify-content: center;
    }

    /* 任务进度弹窗移动端 */
    .task-progress-dialog {
        width: 88vw;
        max-width: 88vw;
    }

    .task-progress-body {
        padding: 16px 18px;
    }

    /* ========== 横屏模式：短高度设备（手机横屏） ========== */
    @media (max-width: 768px) and (orientation: landscape) {
        :root {
            --toolbar-height: 36px;
            --status-height: 28px;
        }

        /* 顶部工具栏：横屏时移入侧边栏抽屉, 顶栏本身隐藏 */
        .toolbar {
            display: none;
        }

        /* 工具栏按钮：更紧凑 */
        .toolbar-btn {
            padding: 4px 8px;
            min-width: 28px;
            min-height: 28px;
            font-size: 12px;
        }

        .toolbar-tempo-btn {
            padding: 0 6px;
        }

        /* 横屏居中显示标题 */
        .toolbar-title {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Press Start 2P', 'Consolas', monospace;
            font-size: 11px;
            color: #ff3b30;
            text-shadow:
                1px 1px 0 rgba(0, 0, 0, 0.6),
                0 0 8px rgba(255, 59, 48, 0.4);
            letter-spacing: 1px;
            pointer-events: none;
            z-index: 1;
            white-space: nowrap;
        }

        /* 横屏右上角菜单按钮 */
        .landscape-menu-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 4px;
            right: 6px;
            width: 30px;
            height: 28px;
            border-radius: 4px;
            background: transparent;
            border: 1px solid var(--ctrl-stroke-default);
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            z-index: 9996;
        }
        .landscape-menu-btn:hover {
            background: var(--ctrl-fill-hover);
        }
        .landscape-menu-btn:active {
            transform: scale(0.92);
        }

        /* 横屏右侧抽屉: 宽度为屏幕的一半 */
        .landscape-drawer {
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 50vw;
            background: var(--mica-base);
            border-left: 1px solid var(--ctrl-stroke-default);
            z-index: 9998;
            transform: translateX(100%);
            transition: transform 0.2s ease-out;
            overflow-y: auto;
        }
        .landscape-drawer.visible {
            transform: translateX(0);
        }
        .landscape-drawer-mask {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9997;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease-out;
        }
        .landscape-drawer-mask.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .landscape-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid var(--ctrl-stroke-default);
        }
        .landscape-drawer-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .landscape-drawer-close {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 4px;
            color: var(--text-primary);
            font-size: 16px;
            cursor: pointer;
        }
        .landscape-drawer-close:hover {
            background: var(--ctrl-fill-hover);
        }
        .landscape-drawer-body {
            padding: 8px;
        }
        .landscape-drawer-body .toolbar-section {
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            margin-bottom: 10px;
        }
        .landscape-drawer-body .toolbar-btn {
            width: 100%;
            justify-content: flex-start;
            padding: 8px 12px;
            gap: 12px;
            min-height: 36px;
        }
        .landscape-drawer-body .toolbar-btn .label {
            display: inline;
            font-size: 13px;
        }
        .landscape-drawer-body .toolbar-divider {
            display: none;
        }

        /* 状态栏：横屏时作为播放控制 + 进度条区域 */
        .status-bar {
            height: 28px;
            padding: 0 8px;
            gap: 8px;
            font-size: 11px;
        }

        .status-left {
            display: none;
        }

        .status-controls {
            gap: 4px;
            flex: 0 0 auto;
        }

        .status-control-btn {
            width: 22px;
            height: 22px;
            font-size: 10px;
        }

        .status-control-btn.status-play-btn {
            width: 24px;
            height: 24px;
        }

        /* 进度文字：显示 tick 进度 */
        .status-time,
        .progress-time {
            min-width: auto;
            font-size: 11px;
            font-family: var(--font-family-mono);
            color: var(--text-secondary);
            margin-left: auto;
            padding-right: 8px;
        }

        .status-right {
            display: none;
        }

        /* 横屏：FAB 按钮位置上移，适配更矮的视口 */
        .mobile-fab-deselect {
            bottom: 46px !important;
            right: 68px !important;
            width: 38px !important;
            height: 38px !important;
        }
        .mobile-fab-single {
            bottom: 44px !important;
            right: 16px !important;
            width: 44px !important;
            height: 44px !important;
        }
        .fab-context-menu {
            bottom: 96px !important;
            right: 16px !important;
        }
    }
}

/* ==================================================================
   横屏模式：独立媒体查询（覆盖宽度 > 768px 且高度 <= 500px 的设备）
   ================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 769px) {
    :root {
        --toolbar-height: 36px;
        --status-height: 28px;
    }

    /* 顶部工具栏：更紧凑 */
    .toolbar {
        padding: 0 12px;
        min-height: 36px;
        height: 36px;
    }

    .toolbar-btn {
        padding: 4px 10px;
        min-width: 28px;
        min-height: 28px;
        font-size: 13px;
    }

    /* 横屏居中标题 */
    .toolbar-title {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Press Start 2P', 'Consolas', monospace;
        font-size: 11px;
        color: #ff3b30;
        text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.6),
            0 0 8px rgba(255, 59, 48, 0.4);
        letter-spacing: 1px;
        pointer-events: none;
        z-index: 1;
        white-space: nowrap;
    }

    /* 折叠抽屉仅手机横屏 (≤768px) 使用, 桌面/平板端隐藏, 避免遮挡工具栏右侧功能按钮 */
    .landscape-menu-btn {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 4px;
        right: 8px;
        width: 32px;
        height: 28px;
        border-radius: 4px;
        background: transparent;
        border: 1px solid var(--ctrl-stroke-default);
        color: var(--text-primary);
        font-size: 14px;
        cursor: pointer;
        z-index: 9996;
    }
    .landscape-menu-btn:hover {
        background: var(--ctrl-fill-hover);
    }
    .landscape-menu-btn:active {
        transform: scale(0.92);
    }

    /* 横屏右侧抽屉 (桌面端隐藏) */
    .landscape-drawer {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 70vw;
        background: var(--mica-base);
        border-left: 1px solid var(--ctrl-stroke-default);
        z-index: 9998;
        transform: translateX(100%);
        transition: transform 0.2s ease-out;
        overflow-y: auto;
    }
    .landscape-drawer.visible {
        transform: translateX(0);
    }
    .landscape-drawer-mask {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 9997;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-out;
    }
    .landscape-drawer-mask.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .landscape-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border-bottom: 1px solid var(--ctrl-stroke-default);
    }
    .landscape-drawer-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .landscape-drawer-close {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 4px;
        color: var(--text-primary);
        font-size: 16px;
        cursor: pointer;
    }
    .landscape-drawer-close:hover {
        background: var(--ctrl-fill-hover);
    }
    .landscape-drawer-body {
        padding: 8px;
    }
    .landscape-drawer-body .toolbar-section {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-bottom: 10px;
    }
    .landscape-drawer-body .toolbar-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 8px 12px;
        gap: 12px;
        min-height: 36px;
    }
    .landscape-drawer-body .toolbar-btn .label {
        display: inline;
        font-size: 13px;
    }
    .landscape-drawer-body .toolbar-divider {
        display: none;
    }

    /* 状态栏：横屏时作为播放控制 + 进度条区域 */
    .status-bar {
        height: 28px;
        padding: 0 12px;
        gap: 12px;
        font-size: 11px;
    }

    .status-left {
        display: none;
    }

    .status-controls {
        gap: 6px;
        flex: 0 0 auto;
    }

    .status-control-btn {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .status-control-btn.status-play-btn {
        width: 24px;
        height: 24px;
    }

    /* 进度文字：显示 tick 进度 */
    .status-time,
    .progress-time {
        font-size: 11px;
        font-family: var(--font-family-mono);
        color: var(--text-secondary);
        margin-left: auto;
        padding-right: 10px;
        min-width: auto;
    }

    .status-right {
        flex-shrink: 0;
    }

    /* 横屏：右侧轨道面板不需要覆盖样式，保持默认 */
    .track-panel {
        position: static;
        width: var(--track-panel-width);
        transform: none;
        box-shadow: none;
    }

    .track-panel-toggle {
        display: none;
    }

    /* 横屏：隐藏移动端悬浮操作按钮，改为使用单按钮菜单 */
    .mobile-fab-bar {
        display: none;
    }

    /* 横屏：显示单个悬浮按钮 + 菜单（与竖屏一致的交互） */
    .mobile-fab-deselect {
        display: flex;
        position: fixed;
        right: 68px;
        bottom: 46px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(30, 30, 46, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-primary, #eaeaea);
        cursor: pointer;
        z-index: 9997;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .mobile-fab-deselect:hover {
        transform: scale(1.08);
        background: rgba(40, 40, 60, 0.96);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    .mobile-fab-deselect:active {
        transform: scale(0.95);
    }
    .mobile-fab-deselect-text {
        width: auto;
        min-width: 44px;
        height: 30px;
        padding: 0 10px;
        border-radius: 15px;
        font-size: 12px;
        white-space: nowrap;
    }
    .mobile-fab-single {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--accent, #4cc2ff);
        border: none;
        color: white;
        cursor: pointer;
        z-index: 9997;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .mobile-fab-single:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    }
    .mobile-fab-single:active {
        transform: scale(0.95);
    }
    .fab-context-menu {
        display: none;
        position: fixed;
        right: 16px;
        bottom: 96px;
        background: rgba(22, 33, 62, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        padding: 6px 0;
        min-width: 150px;
        z-index: 9998;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    .fab-context-menu.visible {
        display: block;
        animation: flyoutShow 100ms cubic-bezier(0, 0, 0, 1);
    }
    .fab-context-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        transition: background 0.12s;
        font-size: 13px;
        color: var(--text-primary, #eaeaea);
    }
    .fab-context-menu-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    .fab-context-menu-item i {
        width: 16px;
        text-align: center;
        color: var(--text-secondary, #888);
        font-size: 13px;
    }
    .fab-context-menu-item:hover i {
        color: var(--accent, #4cc2ff);
    }
    .fab-context-menu-item.fab-danger {
        color: #ff6b6b;
    }
    .fab-context-menu-item.fab-danger i {
        color: #ff6b6b;
    }
    .fab-context-menu-item.fab-danger:hover {
        background: rgba(255, 107, 107, 0.15);
    }

    /* 横屏：为底部状态栏区域让出空间，不与画布重叠 */
    .main-content {
        padding-bottom: 0;
    }
}

/* ==================================================================
   14. 工具按钮禁用状态
   ==================================================================*/
.toolbar-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==================================================================
   15. 文件菜单
   ================================================================== */
.file-menu {
    position: fixed;
    z-index: 10000;
    background: var(--mica-acrylic);
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: var(--radius-md);
    padding: var(--space-1) 0;
    min-width: 200px;
    box-shadow: var(--shadow-flyout);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-family: var(--font-family);
    animation: flyoutShow 167ms cubic-bezier(0.16, 1, 0.3, 1);
}

.file-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background var(--anim-fast);
    white-space: nowrap;
    color: var(--text-primary);
    user-select: none;
}
.file-menu-item:hover { background: var(--ctrl-fill-hover); }
.file-menu-item:active { background: var(--ctrl-fill-pressed); }
.file-menu-item i { width: 16px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.file-menu-item:hover i { color: var(--accent); }
.file-menu-divider { height: 1px; background: var(--ctrl-stroke-default); margin: var(--space-1) 0; }
.file-menu-has-sub { position: relative; }
.file-menu-arrow { margin-left: auto; font-size: 10px; opacity: 0.7; }

/* 轨道右键菜单 — WinUI 3 MenuFlyout */
.track-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background var(--anim-fast);
    color: var(--text-primary);
    user-select: none;
}
.track-menu-item:hover { background: var(--ctrl-fill-hover); }
.track-menu-item i { width: 16px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.track-menu-divider { height: 1px; background: var(--ctrl-stroke-default); margin: var(--space-1) 0; }
.track-menu-danger { color: var(--accent-red); }
.track-menu-danger:hover { background: rgba(255, 107, 107, 0.15); color: var(--accent-red); }
.track-menu-danger i { color: var(--accent-red); }

/* ==================================================================
   15.1 历史文件弹窗 — WinUI 3 ContentDialog
   ================================================================== */
.history-dialog {
    min-width: 480px;
    max-width: 640px;
    width: 80vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.history-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.history-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-body);
    padding: 40px 20px;
    gap: 12px;
}

.history-empty i {
    font-size: 48px;
    color: var(--text-dim);
    opacity: 0.5;
}

.history-empty p {
    margin: 0;
    color: var(--text-tertiary);
}

.history-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    border-top: 1px solid var(--ctrl-stroke-default);
    border-bottom: 1px solid var(--ctrl-stroke-default);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body);
    color: var(--text-primary);
}

.history-table thead th {
    text-align: left;
    padding: 10px 16px;
    background: var(--ctrl-fill-default);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-caption);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--ctrl-stroke-default);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.history-table tbody tr {
    border-bottom: 1px solid var(--ctrl-stroke-default);
    transition: background var(--anim-fast);
}

.history-table tbody tr:hover {
    background: var(--ctrl-fill-hover);
}

.history-table tbody tr:last-child {
    border-bottom: none;
}

.history-table td {
    padding: 10px 16px;
    vertical-align: middle;
}

.history-name {
    font-weight: 500;
    color: var(--text-primary);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-date,
.history-size {
    color: var(--text-tertiary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-caption);
    white-space: nowrap;
}

.history-action {
    text-align: right;
}

.history-action .popup-btn {
    padding: 4px 14px;
    font-size: var(--font-size-caption);
    min-height: 26px;
}

.history-action-col {
    text-align: right;
}

@media (max-width: 600px) {
    .history-dialog {
        min-width: auto;
        width: 92vw;
        max-width: 92vw;
    }

    .history-table thead th,
    .history-table td {
        padding: 8px 10px;
    }

    .history-name {
        max-width: 120px;
    }
}

/* ==================================================================
   16. 状态栏进度条
   ================================================================== */
.status-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    margin: 0 12px;
    min-width: 60px;
}
.status-progress-fill {
    height: 100%;
    background: var(--accent-teal);
    border-radius: 3px;
    /* 线性过渡, 让底部状态栏进度条追平播放进度 */
    transition: width 0.08s linear;
}
.status-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--accent-teal);
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    /* 线性过渡, 同步进度条 */
    transition: left 0.08s linear;
}

/* ==================================================================
   17. 轨道面板折叠按钮
   ================================================================== */
#track-panel-toggle.track-panel-toggle,
.track-panel-toggle {
    position: absolute;
    top: 24px;
    left: 10px;
    z-index: 1001;
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 42, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    visibility: visible !important;
    opacity: 0.8 !important;
    pointer-events: auto !important;
}
#track-panel-toggle.track-panel-toggle:hover,
.track-panel-toggle:hover {
    background: rgba(28, 28, 58, 0.98);
    color: var(--text-primary);
    transform: translateY(-1px);
}
#track-panel-toggle.track-panel-toggle.collapsed i,
.track-panel-toggle.collapsed i {
    transform: rotate(180deg);
}

/* ==================================================================
   18. 移动端浮动按钮可见性修复
   ================================================================== */
@media (max-width: 768px) {
    /* 确保移动端悬浮按钮和取消选择按钮始终可见 */
    #mobile-fab-single.mobile-fab-single,
    #mobile-fab-deselect.mobile-fab-deselect,
    .mobile-fab-single,
    .mobile-fab-deselect {
        display: flex !important;
        z-index: 9997 !important;
    }
    #fab-context-menu.fab-context-menu,
    .fab-context-menu {
        z-index: 9998 !important;
    }
    .floating-btn, .action-btn, .cancel-select-btn {
        display: flex !important;
        z-index: 100 !important;
    }
    .track-panel-toggle {
        display: none !important;
    }
}

/* ==================================================================
   19. MIDI 导入标签页移动端布局修复
   ================================================================== */
@media (max-width: 768px) {
    .midi-import-dialog {
        width: 96vw;
        max-width: 96vw;
        max-height: 92vh;
    }
    .midi-import-header {
        padding: 4px 7px;
        gap: 6px;
    }
    .midi-import-header h3 {
        font-size: 14px;
        line-height: 1.2;
    }
    .midi-close-btn {
        width: 26px;
        height: 26px;
    }
    .midi-file-info {
        padding: 4px 7px;
        gap: 5px 8px;
        font-size: 10px;
    }
    .midi-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 2px;
        padding: 0 2px;
    }
    .midi-tab {
        flex: 0 0 auto;
        padding: 2px 5px;
        font-size: 10px;
        white-space: nowrap;
        min-width: 0;
        color: var(--text-secondary);
        line-height: 1.35;
    }
    .midi-tab:hover {
        color: var(--text-primary);
    }
    .midi-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }
    .midi-sub-tabs {
        gap: 1px;
        margin-bottom: 4px;
        padding: 0 1px;
    }
    .midi-sub-tab {
        flex: 0 0 auto;
        padding: 1px 4px;
        font-size: 10px;
        color: var(--text-secondary);
        line-height: 1.35;
    }
    .midi-sub-tab:hover,
    .midi-sub-tab.active {
        color: var(--accent);
    }
    .fitting-level {
        gap: 4px;
        padding-left: 6px;
    }
    .fitting-level-label {
        display: none;
    }
    .fitting-level-btn {
        padding: 2px 6px;
        font-size: 10px;
        min-height: 21px;
    }
    .midi-settings {
        padding: 6px 8px;
    }
    .midi-settings-row {
        margin-bottom: 5px;
        font-size: 11px;
        gap: 4px;
    }
    .midi-settings-row label {
        font-size: 11px;
    }
    .midi-settings-row select,
    .midi-settings-row input[type="number"] {
        min-height: 24px;
        padding: 1px 4px !important;
        font-size: 11px !important;
    }
    .midi-table-wrap {
        max-height: 54vh;
    }
    .midi-table {
        font-size: 10px;
        min-width: 520px;
    }
    .midi-table th,
    .midi-table td {
        padding: 3px 4px;
    }
    .midi-track-table {
        min-width: 600px;
    }
    .midi-track-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 10px;
        border-radius: 5px;
    }
    .midi-preview-btn,
    .timbre-preview-btn,
    .midi-track-player-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 10px;
    }
    .midi-btn {
        min-height: 28px;
        padding: 4px 10px;
        font-size: 11px;
    }
    .midi-import-footer {
        padding: 6px 8px;
        gap: 6px;
    }
    .midi-track-player {
        gap: 6px;
        padding: 5px 7px;
    }
    .midi-track-progress-time {
        min-width: 66px;
        font-size: 10px;
    }
    .timbre-slot-text {
        max-width: 54px;
    }
    /* 音色替代弹窗移动端适配 */
    #midi-substitute-popup .popup-content {
        max-width: 96vw;
        width: 96vw;
    }
    .midi-substitute-table {
        font-size: 10px;
    }
    .midi-substitute-table th,
    .midi-substitute-table td {
        padding: 3px 4px;
    }
    .midi-substitute-table select {
        font-size: 10px;
        padding: 1px 2px;
    }
    #midi-substitute-tracks .sustain-track-item {
        min-width: 460px;
    }
    .midi-sub-tab-bar .midi-sub-tab {
        padding: 4px 8px;
        font-size: 11px;
    }
    #midi-octave-mode-hint span {
        font-size: 10px;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .midi-import-dialog {
        max-height: 96vh;
    }
    .midi-file-info {
        display: none;
    }
    .midi-tab {
        padding: 1px 3px;
        font-size: 10px;
    }
    .midi-table-wrap {
        max-height: 50vh;
    }
}

/* ==================================================================
   20. 缩放精度弹窗按钮样式与移动端网格布局
   ================================================================== */
.scale-btn {
    padding: 6px 10px;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 6px;
    background: var(--ctrl-fill-default);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}
.scale-btn:hover {
    background: var(--ctrl-fill-hover);
    color: var(--text-primary);
}
.scale-btn.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 768px) {
    .scale-btn {
        padding: 4px 6px;
        font-size: 11px;
    }
    /* Grid layout for mobile portrait */
    #scale-precision-popup .settings-row > div[style*="flex"] {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    #scale-precision-popup .settings-row > div[style*="flex"] {
        grid-template-columns: repeat(7, 1fr) !important;
    }
}

/* ==================================================================
   21. Mini roll 拖拽禁用（改为指针光标）
   ================================================================== */
.sustain-track-mini-roll, .midi-track-mini-roll {
    cursor: pointer !important;
    overflow: hidden !important;
    touch-action: none;
}

/* ========== 音色替代弹窗样式 ========== */
.midi-substitute-table th { text-align: left; padding: 6px 8px; font-size: 11px; color: var(--text-secondary); border-bottom: 1px solid var(--ctrl-stroke-default); background: rgba(0,0,0,0.2); }
.midi-substitute-table td { border-bottom: 1px solid rgba(255,255,255,0.04); }
.midi-substitute-table tr:hover td { background: rgba(255,255,255,0.03); }
.midi-substitute-table select { cursor: pointer; }
.midi-substitute-table select:hover { border-color: var(--accent, #4c9aff); }
#midi-substitute-tracks > div:hover { background: rgba(255,255,255,0.04); }
#midi-substitute-tracks .sustain-track-item { min-width: 520px; }
#midi-octave-mode-hint span { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Final responsive dialog and touch-device overrides. Keeping these together prevents
   older media rules from treating a landscape phone as a desktop editor. */
.privacy-popup {
    width: min(620px, calc(100vw - 24px));
    max-height: min(82svh, 520px);
    overflow: auto;
    box-sizing: border-box;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52);
}
.privacy-popup-title { margin: 0 0 8px; font-size: 16px; }
.privacy-popup-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; font-size: 11px; }
.privacy-popup-links a { color: var(--accent); text-decoration: none; }
.privacy-language-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.privacy-language-label select { flex: 1; min-width: 0; }
.popup > .popup-content,
.app-dialog-box,
.settings-dialog,
.midi-import-dialog {
    box-sizing: border-box;
    max-width: min(760px, calc(100vw - 24px));
    max-height: 84svh;
}
.app-dialog-box {
    display: flex;
    flex-direction: column;
}
.app-dialog-box .settings-header,
.app-dialog-box .popup-actions {
    flex: 0 0 auto;
}
.app-dialog-box .settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.popup-content { overflow: auto; }
.midi-import-dialog { width: min(760px, calc(100vw - 24px)); }
.midi-tabs, .midi-sub-tabs, .midi-sub-tab-bar {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}
.midi-tab, .midi-sub-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    color: var(--text-secondary);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
}
.midi-tab:hover, .midi-tab.active, .midi-sub-tab:hover, .midi-sub-tab.active { color: var(--accent); }
.midi-tab:hover, .midi-sub-tab:hover { color: var(--text-primary); }
.midi-tab.active, .midi-sub-tab.active { border-bottom-color: var(--accent); background: transparent; }
.midi-table-wrap, .midi-track-table-wrap { overflow: auto; overscroll-behavior: contain; }
.context-menu { background: rgba(26, 26, 46, 0.84) !important; border-color: transparent !important; box-shadow: 0 16px 40px rgba(0,0,0,0.48) !important; }

@media (hover: none) and (pointer: coarse) {
    .tool-bar { display: none !important; }
    #mobile-fab-single.mobile-fab-single, #mobile-fab-deselect.mobile-fab-deselect { display: flex !important; z-index: 9997 !important; }
    #fab-context-menu.fab-context-menu { z-index: 9998 !important; }
    .track-panel-toggle { display: none !important; }
    .toolbar { padding-right: 8px !important; }
    .toolbar-right { margin-left: auto !important; }
    #btn-settings, #btn-about, #btn-functions { display: inline-flex !important; }
    /* 触控端横屏: 汉堡按钮/抽屉由 max-width:768px 横屏媒体查询控制 (顶部工具栏已移入抽屉),
       这里不再强制隐藏 */
}

@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    /* Override legacy width-only desktop rules for touch phones in landscape. */
    .tool-bar { display: none !important; }
    #mobile-fab-single.mobile-fab-single, #mobile-fab-deselect.mobile-fab-deselect { display: flex !important; }
    #fab-context-menu.fab-context-menu { display: none; }
    #fab-context-menu.fab-context-menu.visible { display: block !important; }
}

@media (max-width: 768px) {
    .privacy-popup { padding: 12px; max-height: 88svh; }
    .popup > .popup-content, .app-dialog-box, .settings-dialog, .midi-import-dialog { max-width: calc(100vw - 16px); max-height: 90svh; }
    .midi-import-dialog { width: calc(100vw - 16px); }
    .midi-import-header, .midi-import-footer { padding: 6px 8px; }
    .midi-settings, .settings-body { padding: 8px 10px; }
    .midi-tab { padding: 3px 6px; font-size: 11px; }
    .midi-sub-tab { padding: 2px 5px; font-size: 10px; }
}

@media (max-width: 768px) and (orientation: landscape) {
    .popup > .popup-content, .app-dialog-box, .settings-dialog, .midi-import-dialog { max-height: 94svh; }
    .midi-file-info { display: none; }
}

/* Final WinUI flyout pass.  These rules intentionally live last because older
   mobile overrides are duplicated above and otherwise win in landscape. */
.context-menu,
.file-menu,
.functions-menu,
.toolbar-more-menu,
.fab-context-menu,
    .track-context-menu,
    .timbre-slot-menu,
    #track-more-menu,
#track-volume-popup,
#numpad-range-popover,
#instrument-submenu,
#instrument-popup,
#history-submenu {
    background: rgba(32, 32, 32, 0.82) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(28px) saturate(1.25);
    -webkit-backdrop-filter: blur(28px) saturate(1.25);
    overflow-x: auto;
    overscroll-behavior: contain;
}

.context-menu,
.file-menu,
.functions-menu,
.toolbar-more-menu,
.fab-context-menu,
    .track-context-menu,
    .timbre-slot-menu,
    #track-more-menu,
#track-volume-popup,
#numpad-range-popover,
#instrument-submenu,
#instrument-popup,
#history-submenu {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    scrollbar-width: thin;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    #mobile-fab-single.mobile-fab-single {
        right: max(12px, env(safe-area-inset-right)) !important;
        /* Keep the button above the compact landscape status toolbar. */
        bottom: max(calc(var(--status-height, 28px) + 8px), calc(env(safe-area-inset-bottom) + 8px)) !important;
    }

    #mobile-fab-deselect.mobile-fab-deselect {
        right: max(62px, calc(env(safe-area-inset-right) + 54px)) !important;
        bottom: max(calc(var(--status-height, 28px) + 10px), calc(env(safe-area-inset-bottom) + 10px)) !important;
    }

    #fab-context-menu.fab-context-menu {
        right: auto !important;
        bottom: auto !important;
        max-height: calc(100svh - 16px) !important;
    }
}

/* The instrument selector is a label, not an icon-only status button.  Its
   content must remain readable even when inherited status-button dimensions
   are applied by an older responsive rule. */
#btn-instrument-selector {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    height: 28px;
    align-items: center !important;
    justify-content: flex-start;
    flex: 0 0 auto !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

#btn-instrument-selector #inst-color-dot {
    display: inline-flex !important;
    width: 16px !important;
    height: 16px !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px !important;
    vertical-align: middle;
}

#btn-instrument-selector #inst-color-dot img {
    display: block;
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
}

#btn-instrument-selector #inst-color-dot.instrument-icon-fallback::after {
    content: '\f001';
    color: #fff;
    font: 9px/1 'Font Awesome 6 Free';
    font-weight: 900;
}

#btn-instrument-selector #inst-name-text {
    display: block !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    vertical-align: middle;
}

/* ==================== Toast 通知 ==================== */
#toast-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 340px;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    background: rgba(28, 28, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: #e0e0e0;
    font-size: 13px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-wrap: wrap;
}
.toast.toast-show {
    opacity: 1;
    transform: translateX(0);
}
.toast.error {
    border-color: rgba(255, 100, 100, 0.3);
}
.toast .toast-message {
    flex: 1;
    min-width: 0;
}
.toast .toast-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.toast .toast-progress-fill {
    height: 100%;
    background: #4ecdc4;
    border-radius: 2px;
    transition: width 0.2s ease;
    width: 0%;
}
.toast.error .toast-progress-fill {
    background: #ff6b6b;
}

/* ==================================================================
   触控屏工具切换器 (覆盖手机竖屏/横屏 + 大屏触控屏/平板)
   - 折叠态: 单个圆形按钮 (60% 透明度), 显示当前工具图标
     位置与 "+" 悬浮按钮的 X 中心对齐 (竖屏在其下方, 横屏在其上方)
   - 展开态: 工具栏从按钮左侧铺开 (按钮本身不动);
     选择工具后保持展开, 点击工具栏以外的位置才收起
   - 显示条件: (hover:none) and (pointer:coarse)
     即所有以触控为主输入的设备 (含大屏触控屏/平板), 不限手机尺寸
   - 动画: 快, 三次缓入缓出 cubic-bezier
   ================================================================== */

/* 默认在所有平台隐藏 */
.mobile-tool-switcher {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .mobile-tool-switcher {
        display: flex;
        flex-direction: row; /* HTML 顺序: 先 bar 后 trigger → 按钮固定最右, 工具栏向左展开 */
        align-items: center;
        gap: 8px;
        position: fixed;
        /* X 对齐 "+" (竖屏: right:16 宽48 → 中心距右 40px; 按钮宽42 → right = 40-21 = 19px) */
        right: 19px;
        /* 竖屏: 位于 "+" 正下方 (FAB bottom:80 高48), 留 4px 空隙 */
        bottom: 34px;
        z-index: 9996;
        user-select: none;
        -webkit-user-select: none;
    }

    /* 折叠触发按钮: 当前工具图标, 60% 透明度 */
    .mobile-tool-trigger {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 50%;
        background: rgba(28, 28, 40, var(--surface-bg-alpha, 0.9));
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: var(--text-primary, #eaeaea);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
        opacity: 0.6; /* 折叠态 60% 透明, 弱化视觉以便提示可点击 */
        transition: transform 0.12s cubic-bezier(0.65, 0, 0.35, 1),
                    opacity 0.14s cubic-bezier(0.65, 0, 0.35, 1),
                    box-shadow 0.12s ease;
    }
    .mobile-tool-trigger:active {
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* 展开的完整工具栏: 从按钮左侧向左铺开, 默认收起 (宽度 0 + 透明 + 不可交互) */
    .mobile-tool-bar {
        display: flex;
        gap: 3px;
        padding: 4px;
        border-radius: 8px;
        border: 1px solid var(--ctrl-stroke-default);
        background: rgba(28, 28, 40, var(--surface-bg-alpha, 0.9));
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        overflow: hidden;               /* 收起时隐藏溢出的工具按钮 */
        white-space: nowrap;
        max-width: 0;
        opacity: 0;
        transform: translateX(10px);    /* 从按钮位置向左滑出 */
        pointer-events: none;
        transition: max-width 0.14s cubic-bezier(0.65, 0, 0.35, 1),
                    opacity 0.12s cubic-bezier(0.65, 0, 0.35, 1),
                    transform 0.12s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .mobile-tool-switcher.open .mobile-tool-bar {
        max-width: 200px;               /* 5 个工具按钮 + 间隔的宽度 */
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }
    /* 展开时触发按钮回到正常透明度 */
    .mobile-tool-switcher.open .mobile-tool-trigger {
        opacity: 1;
    }
    /* 工具按钮: 复用桌面 .tool-btn 外观, 移动端略紧凑 */
    .mobile-tool-bar .tool-btn {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
}

/* 横屏: 工具切换器移到 "+" 按钮上方
   与 #mobile-fab-single 的横屏规则 (见下方同媒体查询) 完全对齐:
   FAB: right = max(12px, safe-area-right), 宽 44 → 中心距右 = max(12px, safe) + 22;
        切换器宽 42 → right = 中心距右 - 21 = max(12px, safe) + 1
   FAB: bottom = max(var(--status-height) + 8, safe-bottom + 8), 高 44 → 顶部在
        bottom + 44; 切换器再留 8px 空隙 → bottom = FAB_bottom_def + 44 + 8 = +52 */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .mobile-tool-switcher {
        right: calc(max(12px, env(safe-area-inset-right)) + 1px);
        bottom: calc(max(calc(var(--status-height, 28px) + 8px), calc(env(safe-area-inset-bottom) + 8px)) + 52px);
    }
}

/* ==================================================================
   22. 创作辅助悬浮窗
   ================================================================== */
.assist-panel {
    position: fixed;
    z-index: 100300;
    width: 300px;
    max-width: calc(100vw - 16px);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: rgba(24, 26, 40, 0.96);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-size: 13px;
    color: var(--text-primary, #eaeaea);
}
.assist-panel-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    user-select: none;
    cursor: move;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.03);
}
.assist-panel-close {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary, #aaa);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.assist-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.assist-panel-body {
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 60px;
}
.assist-panel-body::-webkit-scrollbar {
    width: 6px;
}
.assist-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.assist-empty {
    padding: 22px 8px;
    text-align: center;
    color: var(--text-tertiary, #888);
    font-size: 13px;
}
.assist-find-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 8px 0 4px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #eaeaea);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.assist-find-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* 选择工具: 功能区块 */
.assist-func-block {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.assist-func-block:last-of-type {
    border-bottom: none;
}
.assist-func-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #eaeaea);
    margin-bottom: 6px;
}
.assist-func-title i {
    color: var(--accent, #6ab0ff);
    margin-right: 4px;
}
.assist-apply-btn {
    width: 100%;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1px solid rgba(76, 154, 255, 0.4);
    border-radius: 6px;
    background: rgba(76, 154, 255, 0.15);
    color: var(--accent, #6ab0ff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.assist-apply-btn:hover {
    background: rgba(76, 154, 255, 0.28);
    border-color: rgba(76, 154, 255, 0.6);
}
.assist-apply-btn:active {
    background: rgba(76, 154, 255, 0.35);
}
.assist-select {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #fff);
    font-size: 12px;
    box-sizing: border-box;
    min-height: 26px;
}
.assist-select:focus {
    outline: none;
    border-color: var(--accent, #6ab0ff);
}
.assist-text {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #fff);
    font-size: 12px;
    box-sizing: border-box;
    min-height: 26px;
}
.assist-text:focus {
    outline: none;
    border-color: var(--accent, #6ab0ff);
}

/* Tab 按钮组 (单选模式) */
.assist-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
}
.assist-tab {
    flex: 1;
    padding: 6px 4px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}
.assist-tab.active {
    background: rgba(76, 154, 255, 0.22);
    color: var(--accent, #6ab0ff);
    font-weight: 600;
}
.assist-tab:not(.active):hover {
    color: var(--text-primary);
}

/* 配置行 */
.assist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 28px;
}
.assist-row label {
    font-size: 12px;
    color: var(--text-secondary, #b0b0b0);
    flex-shrink: 0;
}
.assist-number {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #fff);
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    min-height: 26px;
}
.assist-number:focus {
    outline: none;
    border-color: var(--accent, #6ab0ff);
}

/* 按钮式 Toggle (开/关) */
.assist-toggle {
    min-width: 44px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #aaa);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-height: 26px;
}
.assist-toggle.active {
    background: rgba(76, 194, 255, 0.24);
    border-color: rgba(76, 194, 255, 0.6);
    color: #7fd4ff;
}

/* 单选/分段按钮组 */
.assist-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.assist-seg-btn {
    flex: 1;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #aaa);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    min-height: 26px;
}
.assist-seg-btn.active {
    background: rgba(76, 154, 255, 0.25);
    border-color: rgba(76, 154, 255, 0.7);
    color: #8fc5ff;
}
.assist-seg-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
}

/* 遮罩层: 点击面板外区域关闭 */
.assist-panel-mask {
    display: none !important;
}

/* ==================================================================
   23. 音符查找/替换浮层
   ================================================================== */
.find-panel {
    position: fixed;
    top: 48px;
    right: 12px;
    z-index: 9510;
    width: 380px;
    max-width: calc(100vw - 16px);
    max-height: min(80vh, 640px);
    display: flex;
    flex-direction: column;
    background: rgba(24, 26, 40, 0.96);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-size: 12px;
    color: var(--text-primary, #eaeaea);
}
.find-panel-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    user-select: none;
    cursor: move;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.03);
}
.find-panel-close {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary, #aaa);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.find-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.find-panel-body {
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 查找/替换模式切换 */
.find-modes {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
}
.find-mode {
    flex: 1;
    padding: 6px 4px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 12px;
    cursor: pointer;
}
.find-mode.active {
    background: rgba(76, 154, 255, 0.22);
    color: var(--accent, #6ab0ff);
    font-weight: 600;
}

/* 分区标题 */
.find-sec-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-tertiary, #8b8f9a);
    margin: 2px 0 8px;
}
.find-sec-title:not(:first-child) {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* 条件行: 标签 + 控件 + 摘要 */
.find-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin-bottom: 8px;
}
.find-row-label {
    flex: 0 0 34px;
    font-size: 12px;
    color: var(--text-secondary, #a8adb8);
}
.find-range-tilde {
    flex: 0 0 auto;
    color: var(--text-tertiary, #8b8f9a);
    font-size: 12px;
}

/* 「选择X」按钮: 点击打开悬浮选择窗 */
.find-pick-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #eaeaea);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.find-pick-btn i {
    font-size: 11px;
    color: var(--accent, #6ab0ff);
}
.find-pick-btn:hover {
    background: rgba(76, 154, 255, 0.16);
    border-color: rgba(76, 154, 255, 0.5);
}
.find-pick-btn-sm {
    padding: 5px 8px;
}

/* 已选摘要: 过长时右侧淡出省略 */
.find-pick-sum {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-primary, #eaeaea);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
}
.find-pick-sum.is-default {
    color: var(--text-tertiary, #8b8f9a);
    -webkit-mask-image: none;
    mask-image: none;
}
.find-num {
    flex: 0 0 84px;
    width: 84px;
    box-sizing: border-box;
}
/* 音调范围行: 起点/摘要 ~ 终点/摘要 五列网格 */
.find-row.find-key-range {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
}
.find-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 2px;
}
.find-select-all {
    margin-left: auto;
}
.find-primary {
    background: rgba(76, 154, 255, 0.24);
    border-color: rgba(76, 154, 255, 0.6);
    color: #9ecbff;
}
.find-primary:hover {
    background: rgba(76, 154, 255, 0.34);
}

/* ===== 悬浮选择窗 (音色 / 音调) ===== */
.find-pick-pop {
    position: fixed;
    z-index: 9600;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-width: min(340px, calc(100vw - 16px));
    max-height: min(56vh, 420px);
    background: rgba(22, 24, 36, 0.98);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.find-pick-pop-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.find-pick-pop-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #eaeaea);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.find-pick-pop-tool {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #bbb);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.find-pick-pop-tool:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
}
.find-pick-pop-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.find-pick-pop-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}
.find-pick-pop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.find-pick-pop-grid.is-key {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.find-pick-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #c3c7d1);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.find-pick-cell:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.find-pick-cell.active {
    background: rgba(76, 154, 255, 0.24);
    border-color: rgba(76, 154, 255, 0.75);
    color: #9ecbff;
    font-weight: 600;
}
.find-pick-cell-empty {
    grid-column: 1 / -1;
    justify-content: center;
    color: var(--text-tertiary, #8b8f9a);
}
.find-pick-ic {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
}
.find-pick-ic img {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.find-pick-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.find-pick-sub {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-tertiary, #8b8f9a);
    font-family: var(--font-family-mono, monospace);
}
.find-mini-btn {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #bbb);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    min-height: 24px;
    white-space: nowrap;
}
.find-mini-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

/* 段模式切换 (音调/音量) */
.find-seg {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    padding: 2px;
}
.find-seg-btn {
    flex: 1;
    padding: 4px 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 11px;
    cursor: pointer;
    min-height: 24px;
}
.find-seg-btn.active {
    background: rgba(76, 154, 255, 0.22);
    color: var(--accent, #6ab0ff);
}

/* 分段按钮在条件行内撑满剩余宽度, 且不额外撑高行 */
.find-row .find-seg {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* 结果导航栏 */
.find-result-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}
.find-nav-btn {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #bbb);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.find-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}
.find-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.find-count {
    flex: 1;
    text-align: center;
    font-family: var(--font-family-mono, monospace);
    font-size: 12px;
    color: var(--text-secondary, #bbb);
}

/* 替换区 */
.find-replace-area {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 触控端: 悬浮窗与查找浮层控件的触控尺寸 */
@media (hover: none) and (pointer: coarse) {
    .assist-panel {
        width: min(300px, calc(100vw - 16px));
        max-height: 60vh;
    }
    .assist-tab,
    .assist-seg-btn,
    .assist-toggle,
    .find-mode,
    .find-seg-btn,
    .find-mini-btn,
    .find-nav-btn,
    .find-pick-btn,
    .find-pick-pop-tool {
        min-height: 32px;
    }
    .find-pick-cell {
        min-height: 36px;
    }
    .assist-number {
        min-height: 32px;
    }
    .assist-apply-btn,
    .assist-select,
    .assist-text {
        min-height: 32px;
    }
}

/* 移动端竖屏: 悬浮窗/查找浮层占满可用宽度 */
@media (max-width: 768px) {
    .find-panel {
        top: 8px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        max-height: 70vh;
    }
}

/* ==================================================================
   自定义音色管理 / 信息设置弹窗
   ================================================================== */
.ci-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 10px;
    flex-wrap: wrap;
}
/* 屏幕阅读器/程序化文件输入 (不可见但可聚焦, 供自动化与可访问性) */
.ci-sr-file {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ci-topbar .popup-btn {
    height: 30px;
    line-height: 1;
}
.ci-topbar-hint {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    flex: 1;
    min-width: 180px;
}
.ci-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px 2px 2px 0;
}
.ci-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    transition: background 0.12s, border-color 0.12s;
}
.ci-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
.ci-item-color {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.ci-item-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ci-item-name {
    font-size: 13px;
    color: var(--text-primary, #eaeaea);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-item-sub {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-item-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ci-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #bbb);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ci-mini-btn:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
.ci-mini-btn.danger:hover {
    background: rgba(230, 90, 90, 0.25);
    border-color: rgba(230, 90, 90, 0.5);
    color: #ffb3b3;
}
.ci-empty {
    text-align: center;
    padding: 34px 16px;
    color: var(--text-tertiary, #888);
    font-size: 13px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 10px;
}
.ci-name-err {
    color: #ff8383;
    font-size: 12px;
    margin: 2px 0 0 68px;
}
.ci-color-section {
    margin-top: 8px;
}
.ci-rgb-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ci-rgb-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ci-rgb-preview {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    background: #4aa3ff;
}
.ci-hex-input {
    width: 80px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font-family-mono, Consolas, monospace);
    border: 1px solid var(--ctrl-stroke-default, #444);
    border-radius: var(--radius-sm, 6px);
    background: var(--ctrl-fill-default, #1c1c1c);
    color: var(--text-primary, #fff);
    box-sizing: border-box;
}
.ci-rgb-sliders {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ci-rgb-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ci-rgb-slider-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #bbb);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.ci-rgb-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.ci-slider-r { background: linear-gradient(to right, #000, #ff0000); }
.ci-slider-g { background: linear-gradient(to right, #000, #00ff00); }
.ci-slider-b { background: linear-gradient(to right, #000, #0000ff); }
.ci-rgb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.4);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ci-rgb-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.ci-rgb-slider-val {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ci-rgb-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.ci-rgb-preset {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}
.ci-rgb-preset:hover { transform: scale(1.15); }
.ci-basekey-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ci-basekey-hint {
    font-family: var(--font-family-mono, Consolas, monospace);
    font-size: 12px;
    color: var(--accent, #4aa3ff);
    background: rgba(74, 163, 255, 0.12);
    padding: 2px 8px;
    border-radius: 4px;
}
.ci-basekey-tip {
    font-size: 11px;
    color: var(--text-tertiary, #888);
}

/* ==================================================================
   音频修正窗口
   ================================================================== */
.ci-fix-source {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    margin-bottom: 6px;
    word-break: break-all;
}
.ci-fix-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 10px;
    align-items: stretch;
}
@media (max-width: 860px) {
    .ci-fix-layout { grid-template-columns: 1fr; }
}
.ci-fix-left {
    min-width: 0;
}
.ci-fix-wave {
    display: block;
    width: 100%;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #0e1017;
    box-sizing: border-box;
}
.ci-fix-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.ci-fix-detect {
    font-size: 12px;
    color: var(--accent, #4aa3ff);
    background: rgba(74, 163, 255, 0.12);
    border-radius: 6px;
    padding: 6px 8px;
    line-height: 1.5;
}
.ci-fix-detect.muted {
    color: var(--text-secondary, #bbb);
    background: rgba(255, 255, 255, 0.05);
}
.ci-fix-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ci-fix-slider-label {
    width: 38px;
    font-size: 12px;
    color: var(--text-secondary, #bbb);
    flex-shrink: 0;
}
.ci-fix-slider-row input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--accent, #4aa3ff);
}
.ci-fix-slider-val {
    width: 52px;
    text-align: right;
    font-family: var(--font-family-mono, Consolas, monospace);
    font-size: 12px;
    color: var(--text-primary, #eaeaea);
    flex-shrink: 0;
}
.ci-fix-base-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #bbb);
    flex-wrap: wrap;
}
.ci-fix-base-row b {
    color: var(--accent, #4aa3ff);
    font-family: var(--font-family-mono, Consolas, monospace);
}
.ci-fix-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ci-fix-btns .popup-btn {
    height: 30px;
    line-height: 1;
}
.ci-fix-tip {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    line-height: 1.5;
}
.ci-fix-monitor-wrap {
    position: relative;
    margin-top: 10px;
}
.ci-fix-monitor {
    display: block;
    width: 100%;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: #0e1017;
    box-sizing: border-box;
}
.ci-fix-live {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-tertiary, #888);
    font-family: var(--font-family-mono, Consolas, monospace);
    min-height: 14px;
}

/* ==================================================================
   欢迎引导界面 (启动时显示)
   ================================================================== */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.55);
    animation: fadeIn 0.18s ease;
}
.welcome-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    border-radius: 12px;
    overflow: hidden;
    background: #2b2b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.welcome-side {
    width: 268px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 22px 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow-y: auto;
}
.welcome-logo {
    width: 128px;
    height: 128px;
    object-fit: contain;
    image-rendering: pixelated;
}
.welcome-title {
    margin: 12px 0 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #eaeaea);
    letter-spacing: 0.2px;
}
.welcome-version {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--text-tertiary, #888);
}
.welcome-version-state {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: #6ecb6e;
}
.welcome-tagline {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-secondary, #bbb);
}
.welcome-link {
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent, #4cc2ff);
    text-decoration: none;
    word-break: break-all;
}
.welcome-link:hover {
    color: #7fd3ff;
    text-decoration: underline;
}
.welcome-social {
    margin-top: auto;
    padding-top: 22px;
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--text-tertiary, #888);
}
.welcome-social-title {
    margin: 0 0 2px;
}
.welcome-social-row {
    margin: 0;
}
.welcome-social-row a {
    color: var(--accent, #4cc2ff);
    text-decoration: none;
}
.welcome-social-row a:hover {
    text-decoration: underline;
}
.welcome-sep {
    margin: 0 4px;
    color: rgba(255, 255, 255, 0.22);
}
.welcome-social-text {
    white-space: nowrap;
}
.welcome-main {
    flex: 1;
    min-width: 0;
    padding: 26px 30px;
    overflow-y: auto;
}
.welcome-prompt {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-secondary, #bbb);
}
.welcome-action {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-primary, #eaeaea);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.welcome-action:hover {
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}
.welcome-action i {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    font-size: 17px;
    color: var(--text-secondary, #bbb);
}
.welcome-action-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.welcome-action-title {
    display: flex;
    align-items: center;
    gap: 6px;
}
.welcome-action-sub {
    font-size: 11.5px;
    color: var(--text-tertiary, #888);
}
.welcome-new-badge {
    padding: 0 5px;
    border-radius: 3px;
    background: var(--accent, #4cc2ff);
    color: #06283d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 14px;
}
.welcome-action-primary {
    margin-top: 6px;
    border-color: rgba(76, 194, 255, 0.4);
    background: rgba(76, 194, 255, 0.12);
}
.welcome-action-primary:hover {
    background: rgba(76, 194, 255, 0.2);
}
.welcome-action-primary i {
    color: var(--accent, #4cc2ff);
}
.welcome-resume-hint {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--text-tertiary, #888);
    white-space: nowrap;
}
.welcome-recent {
    margin: 4px 0 10px;
    padding-left: 32px;
}
.welcome-recent-title {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--text-secondary, #bbb);
}
.welcome-recent-list {
    max-height: 176px;
    overflow-y: auto;
}
.welcome-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 3px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary, #bbb);
    font-size: 12.5px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.welcome-recent-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary, #eaeaea);
}
.welcome-recent-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.welcome-recent-time {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-tertiary, #888);
}
.welcome-recent-item.missing {
    opacity: 0.42;
    cursor: default;
}
.welcome-recent-item.missing:hover {
    background: none;
    color: var(--text-secondary, #bbb);
}
.welcome-recent-empty {
    padding: 3px 8px;
    font-size: 12.5px;
    color: var(--text-tertiary, #888);
}

/* ==================================================================
   本地缓存占用清理弹窗
   ================================================================== */
.storage-clean-desc {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-secondary, #bbb);
}
.storage-clean-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.storage-clean-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ctrl-stroke-default);
    border-radius: 8px;
    background: var(--ctrl-fill-default);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.storage-clean-row:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}
.storage-clean-row input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}
.storage-clean-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary);
}
.storage-clean-size {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-tertiary, #888);
    font-variant-numeric: tabular-nums;
}
.storage-clean-warn {
    margin: 2px 0 0;
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(255, 140, 66, 0.12);
    color: var(--accent-orange, #ff8c42);
    font-size: 11.5px;
    line-height: 1.6;
}
.storage-clean-total {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ctrl-stroke-default);
    font-size: 12px;
    color: var(--text-tertiary, #888);
    text-align: right;
}
/* --- 平板 / 中等宽度: 侧栏收窄 --- */
@media (max-width: 900px) {
    .welcome-card { max-width: 680px; }
    .welcome-side { width: 236px; padding: 26px 18px 20px; }
}

/* --- 手机竖屏 / 小屏: 单栏堆叠 --- */
@media (max-width: 768px) {
    .welcome-overlay {
        padding: 12px;
        padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    }
    .welcome-card {
        flex-direction: column;
        max-height: 94vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .welcome-side {
        width: 100%;
        padding: 18px 16px 14px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        overflow-y: visible;
    }
    .welcome-logo {
        width: 80px;
        height: 80px;
    }
    .welcome-tagline { margin-top: 10px; }
    .welcome-social {
        margin-top: 12px;
        padding-top: 0;
    }
    .welcome-main {
        padding: 16px 16px 20px;
        overflow-y: visible;
    }
    .welcome-recent { padding-left: 0; }
    .welcome-recent-list {
        max-height: 38vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .welcome-action { padding: 10px; }
}

/* --- 超窄屏: 进一步压缩 --- */
@media (max-width: 420px) {
    .welcome-logo { width: 64px; height: 64px; }
    .welcome-title { font-size: 16px; }
    .welcome-side { padding: 14px 12px 12px; }
    .welcome-main { padding: 12px 12px 16px; }
    .welcome-social-row { line-height: 1.7; }
    .welcome-social-text { white-space: normal; }
    .welcome-resume-hint { display: none; }
}

/* --- 手机横屏: 恢复紧凑两栏, 利用横向空间 --- */
@media (max-width: 768px) and (orientation: landscape) {
    .welcome-card {
        flex-direction: row;
        max-height: 96vh;
        overflow: hidden;
    }
    .welcome-side {
        width: 190px;
        padding: 16px 14px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: none;
        overflow-y: auto;
    }
    .welcome-logo { width: 56px; height: 56px; }
    .welcome-title { margin-top: 8px; font-size: 15px; }
    .welcome-tagline { display: none; }
    .welcome-social { margin-top: auto; padding-top: 12px; }
    .welcome-main { padding: 14px 16px; overflow-y: auto; }
    .welcome-recent { padding-left: 0; }
    .welcome-recent-list { max-height: none; overflow-y: visible; }
    .welcome-resume-hint { display: none; }
}

/* --- 大屏横屏矮窗口: 压缩侧栏留出纵向空间 --- */
@media (min-width: 769px) and (orientation: landscape) and (max-height: 560px) {
    .welcome-card { max-height: 96vh; }
    .welcome-side { padding: 16px; }
    .welcome-logo { width: 76px; height: 76px; }
    .welcome-tagline { display: none; }
    .welcome-social { padding-top: 10px; }
    .welcome-recent-list { max-height: 30vh; }
}

/* --- 触屏: 放大点击目标 --- */
@media (pointer: coarse) {
    .welcome-action { min-height: 44px; }
    .welcome-recent-item {
        min-height: 36px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* ==================================================================
   模态弹窗: 固定内容区高度 + 分组标题 + 移动端紧凑布局
   (追加在文件末尾, 以覆盖上方历史规则)
   ================================================================== */

/* 带标签页 / 列表的功能弹窗: 内容区高度固定, 切换标签页不再抖动, 超出部分内部滚动
   (仅作用于「设置」与「MIDI 导入」这两个含 TAB 的弹窗, 避免影响其他自适应弹窗) */
#settings-popup { --dialog-body-h: 440px; }
#settings-popup .settings-body {
    flex: 0 1 var(--dialog-body-h);
    height: var(--dialog-body-h);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* MIDI 导入弹窗的内容区改为「按内容自适应 + 视口上限」, 见文件末尾的紧凑布局段 */

/* 设置项分组标题 */
.settings-group { display: flex; flex-direction: column; }
.settings-group + .settings-group { margin-top: 4px; }
.settings-group-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
    padding: 2px 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 4px;
}
/* 从属于上一个开关的子选项: 缩进 + 次要文字色; 总开关关闭时整体变暗 */
.settings-row.settings-sub-row { padding-left: 20px; }
.settings-row.settings-sub-row .settings-label { color: var(--text-secondary); font-weight: 400; }
.settings-row.settings-sub-row.is-disabled { opacity: 0.45; }

/* 移动端: 收紧内边距与间距, 把纵向空间还给可操作项 */
@media (max-width: 768px) {
    #settings-popup { --dialog-body-h: min(440px, calc(100svh - 176px)); }
    .settings-header { padding: 6px 10px; }
    .settings-body { padding: 6px 8px; gap: 8px; }
    .settings-tabs { padding: 0 6px; }
    .settings-row { padding: 1px 0; }
    .settings-group + .settings-group { margin-top: 2px; }
    .popup-actions { margin-top: 6px; }
    .about-body { padding: 10px 12px; gap: 10px; }
    #midi-substitute-popup .settings-body { padding: 8px 10px; }
    .midi-settings { padding: 6px 8px; }
    .settings-row.settings-sub-row { padding-left: 14px; }
}

/* ==========================================================================
   弹窗统一排版规范 (Dialog layout system)
   复用项目既有 token: --space-* / --radius-* / --font-size-* / --text-*
   层级顺序: 对话框标题 > 分组标题 > 选项行 > 行内控件
   核心留白规则: 分组之间 > 组内行间 > 行内控件间
   ========================================================================== */
.popup-content {
    --dlg-row-h: 30px;
    --dlg-control-h: 26px;
    --dlg-divider: rgba(255, 255, 255, 0.06);
}

/* 分组标题: 作为「标签」层级, 小而克制, 不与对话框标题争视觉权重 */
.popup-content .settings-group-title,
.popup-content .midi-settings > .settings-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: var(--space-3) 0 var(--space-1);
    padding: 0;
    border-bottom: none;
}
.popup-content .settings-group:first-of-type .settings-group-title,
.popup-content .midi-settings > .settings-group-title:first-child {
    margin-top: 0;
}

/* 分组: 靠留白分组, 去掉逐行横线 */
.popup-content .settings-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1) 0 var(--space-2);
    border-top: 1px solid var(--dlg-divider);
}
.popup-content .settings-group:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* 选项行 */
.popup-content .settings-row,
.popup-content .midi-settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--dlg-row-h);
    padding: 1px 0;
    border-bottom: none;
    font-size: 13px;
    color: var(--text-secondary);
}

/* 标签 */
.popup-content .settings-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* 行内布局: 标签靠左, 控件靠右 */
.popup-content .settings-row.settings-inline-row {
    justify-content: space-between;
}
.popup-content .settings-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: 132px;
}
.popup-content .settings-control-wide {
    flex: 1 1 auto;
    min-width: 180px;
}
.popup-content .settings-control select {
    flex: 1 1 auto;
    min-width: 0;
}
.popup-content .settings-control input[type="range"] {
    flex: 1 1 auto;
    min-width: 80px;
}

/* 统一表单控件外观 (限定在弹窗的选项行内, 避免波及 MIDI 数据表格里的控件) */
.popup-content .settings-row select,
.popup-content .settings-row input[type="number"],
.popup-content .settings-row input[type="text"],
.popup-content .midi-settings-row select,
.popup-content .midi-settings-row input[type="number"],
.popup-content .midi-settings-row input[type="text"],
.popup-content .settings-control select,
.popup-content .settings-control input[type="number"],
.popup-content .settings-control input[type="text"] {
    height: var(--dlg-control-h);
    padding: 0 var(--space-2);
    font-size: 12px;
    line-height: var(--dlg-control-h);
    border-radius: var(--radius-sm);
    border: 1px solid var(--ctrl-stroke-default);
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
}
.popup-content .settings-row select:hover,
.popup-content .settings-row input[type="number"]:hover,
.popup-content .settings-row input[type="text"]:hover,
.popup-content .midi-settings-row select:hover,
.popup-content .settings-control select:hover {
    border-color: var(--ctrl-stroke-hover);
}
.popup-content .settings-row input[type="checkbox"],
.popup-content .settings-row input[type="radio"],
.popup-content .midi-settings-row input[type="checkbox"],
.popup-content .midi-settings-row input[type="radio"] {
    margin: 0;
    accent-color: var(--accent);
}

/* 小号按钮 / 数值 / 提示文字 */
.popup-content .settings-mini-btn {
    height: var(--dlg-control-h);
    padding: 0 var(--space-2);
    font-size: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--ctrl-stroke-default);
    background: var(--ctrl-fill-default);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.popup-content .settings-mini-btn:hover {
    background: var(--ctrl-fill-hover);
    border-color: var(--ctrl-stroke-hover);
}
.popup-content .settings-value {
    min-width: 40px;
    text-align: right;
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.popup-content .settings-hint {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-tertiary);
}
.popup-content .settings-row.settings-inline-row .settings-hint {
    flex: 1 0 100%;
}
.popup-content .settings-hint-block {
    display: block;
    padding: var(--space-1) 0;
}

/* 子选项: 缩进 + 次要文字色, 与父项形成层级 */
.popup-content .settings-row.settings-sub-row {
    padding-left: var(--space-4);
}
.popup-content .settings-row.settings-sub-row .settings-label {
    color: var(--text-secondary);
    font-weight: 400;
}

/* MIDI 弹窗: 小节留白大于行距; 文件信息弱化 */
.popup-content .midi-settings {
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: none;
}
.popup-content .midi-settings-row {
    gap: var(--space-2) var(--space-3);
}
.popup-content .midi-file-info {
    padding: var(--space-2) var(--space-4);
    font-size: 11px;
    line-height: 1.6;
    gap: var(--space-2) var(--space-4);
}

/* 弹窗底部按钮区: 与内容拉开一档 */
.popup-content .popup-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--dlg-divider);
}

/* 移动端: 收紧留白, 但不破坏层级 */
@media (max-width: 768px) {
    .popup-content .settings-row,
    .popup-content .midi-settings-row {
        min-height: 28px;
        gap: var(--space-1) var(--space-2);
        font-size: 12px;
    }
    .popup-content .settings-control {
        min-width: 112px;
    }
    .popup-content .settings-control-wide {
        min-width: 140px;
    }
    .popup-content .midi-settings {
        padding: 4px 8px 10px;
    }
    .popup-content .settings-row.settings-sub-row {
        padding-left: var(--space-3);
    }
}

/* ==========================================================================
   MIDI 导入弹窗 · 紧凑单列布局
   层级: 弹窗标题 > 标签页 > 分组标题 > 选项行 > 行内控件
   目标: 桌面端默认窗口一屏显示完整「基本设置」, 手机端允许滚动
   ========================================================================== */
#midi-popup .midi-import-dialog {
    width: min(780px, calc(100vw - 24px));
    max-width: min(780px, calc(100vw - 24px));
    max-height: calc(100svh - 28px);
    /* 只让内容区滚动, 标题/标签/底部按钮固定 */
    overflow: hidden;
}
#midi-popup .midi-tab-content {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#midi-popup .settings-header { padding: 8px 12px; }
#midi-popup .midi-file-info { padding: 6px 14px; gap: 4px 18px; font-size: 11px; }
#midi-popup .midi-tabs { padding: 0 12px; }
#midi-popup .popup-actions { margin-top: 6px; padding-top: 8px; }

/* 单栏分组 */
.midi-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 14px 10px;
}
.midi-group { display: flex; flex-direction: column; gap: 1px; }
.midi-group-title {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.midi-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    min-height: 26px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.midi-row-sub { padding-left: 18px; }
.midi-row-warn {
    color: var(--accent-orange, #ff8c42);
    font-size: 11.5px;
    gap: 6px;
}
.midi-row-warn i { font-size: 12px; }
.midi-row-label {
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 64px;
}
.midi-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.midi-check input { margin: 0; }
.midi-choice { display: inline-flex; align-items: center; gap: 14px; }
.midi-choice-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    cursor: pointer;
}
.midi-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}
.midi-field-label { color: var(--text-tertiary); font-size: 12px; }
.midi-hint-text { font-size: 11px; color: var(--text-tertiary); }
.midi-help { font-size: 12px; color: var(--text-tertiary); cursor: help; }

/* 行内控件尺寸统一 */
#midi-popup .midi-control {
    height: 26px;
    min-width: 132px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--ctrl-fill-default, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--ctrl-stroke-default, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-sm, 4px);
}
#midi-popup .midi-control-sm { min-width: 78px; }
#midi-popup .midi-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    background: var(--ctrl-fill-default, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--ctrl-stroke-default, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
}
#midi-popup .midi-mini-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent, #4a90d9);
}

/* 手机端: 允许滚动, 行高改为触控友好 */
@media (max-width: 768px) {
    #midi-popup .midi-import-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100svh - 16px);
    }
    .midi-settings { padding: 6px 10px 8px; gap: 8px; }
    .midi-row { min-height: 30px; gap: 6px 10px; font-size: 12px; }
    .midi-row-label { min-width: 56px; }
    #midi-popup .midi-control { min-width: 110px; }
    #midi-popup .midi-control-sm { min-width: 72px; }
    #midi-popup .midi-file-info { padding: 6px 10px; gap: 3px 12px; }
}