* { box-sizing: border-box; }

/* ===== 黑白单色主题变量 ===== */
:root {
    --bg-primary: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f5f5f5;
    --bg-hover: #eeeeee;
    --text-primary: #000000;
    --text-secondary: #404040;
    --text-muted: #737373;
    --border-color: #e0e0e0;
    --border-strong: #000000;
    --accent: #000000;
    --accent-inverse: #ffffff;
    --color-primary: #3B82F6;
    --color-success: #10B981;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
    /* 英文分词工具 */
    --wt-word-bg: rgba(0, 0, 0, 0.05);
    --wt-word-hover: rgba(0, 0, 0, 0.12);
    --wt-word-active: rgba(0, 0, 0, 0.18);
    --wt-popup-bg: #ffffff;
    --wt-popup-border: #e0e0e0;
    --wt-disabled: #a3a3a3;
}

/* ===== 深色模式：纯黑背景 + 白字 ===== */
body.dark-mode {
    --bg-primary: #0a0a0a;
    --bg-card: #111111;
    --bg-elevated: #1a1a1a;
    --bg-hover: #262626;
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --border-color: #262626;
    --border-strong: #ffffff;
    --accent: #ffffff;
    --accent-inverse: #000000;
    --color-primary: #60A5FA;
    --color-success: #34D399;
    --color-danger: #F87171;
    --color-warning: #FBBF24;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.7);
    /* 英文分词工具 */
    --wt-word-bg: rgba(255, 255, 255, 0.08);
    --wt-word-hover: rgba(255, 255, 255, 0.15);
    --wt-word-active: rgba(255, 255, 255, 0.22);
    --wt-popup-bg: #111111;
    --wt-popup-border: #262626;
    --wt-disabled: #525252;
}

/* ===== 基础样式 ===== */
body {
    font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    background: var(--bg-primary) !important;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 强制所有背景/文字/边框回归单色 */
body .bg-white,
body .bg-gray-50,
body .bg-gray-100 { background: var(--bg-card) !important; }
body .bg-gray-200,
body .bg-gray-300 { background: var(--bg-elevated) !important; }
body .hover\:bg-gray-50:hover,
body .hover\:bg-gray-100:hover,
body .hover\:bg-gray-200:hover { background: var(--bg-hover) !important; }

body .text-gray-800,
body .text-gray-900,
body .text-black { color: var(--text-primary) !important; }
body .text-gray-600,
body .text-gray-700 { color: var(--text-secondary) !important; }
body .text-gray-400,
body .text-gray-500 { color: var(--text-muted) !important; }

body .border-gray-100,
body .border-gray-200,
body .border-gray-300 { border-color: var(--border-color) !important; }

/* 彩色按钮统一为黑白 */
body .bg-blue-500,
body .bg-blue-600,
body .bg-green-500,
body .bg-green-600,
body .bg-purple-500,
body .bg-purple-600,
body .bg-orange-500,
body .bg-orange-600,
body .bg-red-500,
body .bg-red-600,
body .bg-indigo-500,
body .bg-indigo-600,
body .bg-teal-500,
body .bg-teal-600,
body .bg-amber-500,
body .bg-amber-600 { background: var(--accent) !important; color: var(--accent-inverse) !important; }

body .hover\:bg-blue-600:hover,
body .hover\:bg-green-600:hover,
body .hover\:bg-purple-600:hover,
body .hover\:bg-orange-600:hover,
body .hover\:bg-red-600:hover,
body .hover\:bg-indigo-600:hover,
body .hover\:bg-teal-600:hover,
body .hover\:bg-amber-600:hover { opacity: 0.85; }

body .text-blue-600,
body .text-blue-700,
body .text-green-600,
body .text-green-700,
body .text-purple-600,
body .text-purple-700,
body .text-orange-600,
body .text-orange-700,
body .text-red-600,
body .text-red-700,
body .text-indigo-600,
body .text-indigo-700,
body .text-teal-600,
body .text-teal-700,
body .text-amber-600,
body .text-amber-700 { color: var(--text-primary) !important; }

body .bg-blue-50,
body .bg-blue-100,
body .bg-green-50,
body .bg-green-100,
body .bg-purple-50,
body .bg-purple-100,
body .bg-orange-50,
body .bg-orange-100,
body .bg-red-50,
body .bg-red-100,
body .bg-indigo-50,
body .bg-indigo-100,
body .bg-teal-50,
body .bg-teal-100,
body .bg-amber-50,
body .bg-amber-100 { background: var(--bg-elevated) !important; }

body .border-blue-100,
body .border-blue-200,
body .border-green-100,
body .border-green-200,
body .border-purple-100,
body .border-purple-200,
body .border-orange-100,
body .border-orange-200,
body .border-red-100,
body .border-red-200,
body .border-indigo-100,
body .border-indigo-200,
body .border-teal-100,
body .border-teal-200,
body .border-amber-100,
body .border-amber-200 { border-color: var(--border-color) !important; }

body input[type="text"],
body input[type="number"],
body input[type="password"] {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode-input {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.segment-scroll::-webkit-scrollbar {
    width: 6px;
}
.segment-scroll::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: 3px;
}
.segment-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.segment-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
body input[type="range"] { background: var(--border-color); }
body .jianpu-display { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
body .jianpu-display .jianpu-empty { color: var(--text-muted) !important; }

/* 通用过渡效果 */
* { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
button, a { transition: all 0.2s ease; }

/* ===== 简谱渲染样式（simple 模式三行网格） ===== */
body .jianpu-display { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
body .jianpu-display .jianpu-empty { color: var(--text-muted) !important; }

.jianpu-display {
    font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
    letter-spacing: 2px;
    line-height: 1.6;
}

/* 混合内容渲染样式（简谱 + 歌词/按钮等） */
.jianpu-mixed-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.6;
}
.jianpu-plain-text {
    font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
    color: #374151;
    letter-spacing: 2px;
    white-space: pre-wrap;
}
body.dark-mode .jianpu-plain-text {
    color: #f3f4f6;
}

/* 跟读结果高亮 */
.shadow-word-match {
    color: var(--color-success);
    text-decoration: underline;
    font-weight: 600;
}
.shadow-word-miss {
    color: var(--color-danger);
    text-decoration: line-through;
    font-weight: 600;
}

/* ===== 音孔三层结构样式（从 editor.html 同步） ===== */
/* 音符组容器：宽度由音孔决定，数字居中 */
.note-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4px;
    vertical-align: top;
}

/* 音孔箭头：宽度锚点 */
.hole-arrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 18px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: bold;
    margin-top: 2px;
    line-height: 1.2;
}

/* 吹气箭头：红色向下 */
.hole-arrow--blow {
    color: #dc2626;
}

/* 吸气箭头：蓝色向上 */
.hole-arrow--draw {
    color: #2563eb;
}

/* 未知孔位 */
.hole-arrow--unknown {
    color: #6b7280;
}

/* 推键图标 */
.push-indicator {
    font-size: 12px;
    min-height: 14px;
    line-height: 1;
}

/* 五线谱显示区域 */
.staff-display {
    font-family: 'Georgia', serif;
}
.staff-display svg {
    max-width: 100%;
    height: auto;
}

/* simple 模式：一行内多列，每列固定三行栅格 */
.jianpu-simple-row {
    --jp-row-top:  0.55em;
    --jp-row-mid:  1.2em;
    --jp-row-bot:  1.1em;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    vertical-align: middle;
    line-height: 1.2;
}
.jianpu-cell {
    display: inline-grid;
    grid-template-rows: var(--jp-row-top) var(--jp-row-mid) var(--jp-row-bot);
    justify-items: center;
    align-items: stretch;
    margin: 0 2px;
    min-width: 0.55em;
}
.jianpu-cell-top {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.jianpu-cell-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.jianpu-cell-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}
.jianpu-simple-row .jianpu-cell .jianpu-num { color: #2c3e50; font-weight: normal; line-height: 1; }
.jianpu-dur-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 2.2em;
}
.jianpu-underline.jianpu-underline-dur {
    display: block;
    border-bottom: 2px solid currentColor;
    margin-top: 3px;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
}
.jianpu-underline.jianpu-underline-dur.jianpu-underline-tight { margin-top: 2px; }
.jianpu-cell.jianpu-dotted .jianpu-dot-inline {
    position: absolute;
    top: 50%;
    right: -0.3em;
    transform: translateY(-50%);
    font-size: 1.2em;
    line-height: 1;
}
.jianpu-cell.jianpu-dotted .jianpu-num { position: relative; padding-right: 0.6em; }
.jianpu-punct-in-row {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    margin: 0 4px;
    min-height: calc(var(--jp-row-top) + var(--jp-row-mid) + var(--jp-row-bot));
}

/* 八度点 */
.jianpu-oct-dot-high, .jianpu-oct-dot-high2 {
    font-size: 0.5em;
    line-height: 1;
    color: #e74c3c;
}
.jianpu-oct-dot-high2 { color: #c0392b; }
.jianpu-oct-dot-low, .jianpu-oct-dot-low2 {
    font-size: 0.5em;
    line-height: 1;
    color: #3498db;
}
.jianpu-oct-dot-low2 { color: #2980b9; }

/* 八度数字着色 */
.jianpu-num-high  { color: #e74c3c !important; font-weight: bold; }
.jianpu-num-high2 { color: #c0392b !important; font-weight: bold; }
.jianpu-num-low   { color: #3498db !important; font-weight: bold; }
.jianpu-num-low2  { color: #2980b9 !important; font-weight: bold; }

/* 基础标点 */
.jianpu-bar { color: #e74c3c; font-weight: bold; margin: 0 8px; }
.jianpu-dash { color: #3498db; display: inline-block; width: 0.5em; height: 0; border-bottom: 2px solid #3498db; vertical-align: middle; overflow: hidden; }
.jianpu-rest { color: #95a5a6; margin: 0 4px; }
.jianpu-tie { color: #9b59b6; display: inline-block; width: 0.5em; height: 0; border-bottom: 2px solid #9b59b6; overflow: hidden; }
.jianpu-percussion { color: #e67e22; font-weight: bold; }
.jianpu-octave-shift { font-size: 0.7em; color: #888; vertical-align: middle; margin: 0 2px; }
.jianpu-octave-up { color: #e74c3c; }
.jianpu-octave-down { color: #3498db; }
.jianpu-final-bar { color: #e74c3c; font-weight: bold; font-size: 1.2em; margin: 0 6px; }
.jianpu-repeat-start { color: #27ae60; font-weight: bold; font-size: 1.1em; }
.jianpu-repeat-end { color: #c0392b; font-weight: bold; font-size: 1.1em; }

/* 连音线：弧绝对定位在音符上方，不占 DOM 高度 */
.jianpu-slur {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
}
.jianpu-slur-arc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    width: 100%;
    height: 10px;
    border: none;
    border-top: 2px solid #333;
    border-radius: 50% 50% 0 0;
    margin-bottom: 2px;
    min-width: 16px;
    box-sizing: border-box;
    pointer-events: none;
}
.jianpu-slur-notes {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    position: relative;
    z-index: 1;
}

.jianpu-empty { color: #bdc3c7; }

/* 简谱画布：顶部预留弧线空间；工具栏用 z-10 隔离 */
body.dark-mode .jianpu-simple-row .jianpu-cell .jianpu-num:not(.jianpu-num-high):not(.jianpu-num-high2):not(.jianpu-num-low):not(.jianpu-num-low2) {
    color: var(--text-primary) !important;
}
body.dark-mode .jianpu-toolbar-row {
    background: var(--bg-card) !important;
}
.jianpu-display-canvas {
    padding-top: max(2.5rem, 1.2em + 18px);
}

/* 当前段落高亮 - 黑白高对比 */
.segment-current {
    background: var(--bg-elevated);
    border-left: 3px solid var(--border-strong);
    transition: all 0.3s ease;
}

/* 段落操作按钮 */
.segment-list-btn {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
    transition: all 0.2s ease;
}
.segment-list-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    opacity: 1;
}

/* 段落列表项 */
.segment-item {
    transition: all 0.2s ease;
}
.segment-item:hover {
    background: var(--bg-hover);
}
.segment-dragging {
    opacity: 0.5;
    background: var(--bg-elevated);
}
.segment-drop-target {
    border-color: var(--border-strong) !important;
    background: var(--bg-hover);
}

/* 按钮和交互元素 */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--text-muted);
    outline-offset: 2px;
}

/* 加载动画 */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* 错误提示 */
.error-message {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* 成功提示 */
.success-message {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* 信息提示 */
.info-message {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* ===== 英文分词工具样式 ===== */
.word-tokenizer { position: relative; z-index: 30; }
.word-tokenizer-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.wt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    cursor: move;
    user-select: none;
}
.wt-drag-icon { font-size: 18px; color: var(--text-muted); cursor: grab; }
.wt-drag-icon:active { cursor: grabbing; }
.wt-mode-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #E5E7EB;
    border-radius: 8px;
    padding: 2px 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.wt-mode-btn {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    min-height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.wt-mode-btn:hover { background: rgba(0,0,0,0.05); }
.wt-mode-btn.active { background: #10B981; color: white; }
.wt-status { margin-top: 8px; padding: 4px 8px; border-radius: 6px; font-size: 11px; color: var(--text-muted); background: var(--bg-primary); min-height: 20px; }
.wt-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.wt-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--wt-word-bg);
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.1s ease;
    border: 1.5px solid transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.wt-word:hover { background: var(--wt-word-hover); }
.wt-word.selected { border-color: #3B82F6; background: var(--wt-word-active); }
.wt-word-empty { opacity: 0.3; pointer-events: none; }
.wt-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.15);
    border-left: 3px solid #F59E0B;
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.1s ease;
}
.wt-group:hover { background: rgba(245, 158, 11, 0.25); }
.wt-group.selected { border-color: #3B82F6; }
.wt-group-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
    line-height: 1;
}
.wt-group-remove:hover { background: rgba(239, 68, 68, 0.4); }
.wt-popup {
    position: absolute;
    z-index: 100;
    background: var(--wt-popup-bg);
    border: 1px solid var(--wt-popup-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    max-width: 320px;
    pointer-events: auto;
}
.wt-popup-content { padding: 10px 12px; }
.wt-popup-arrow {
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--wt-popup-border);
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}
.wt-play-btn {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    min-height: 30px;
}
.wt-play-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.wt-delay-label { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.wt-delay-input { width: 50px; padding: 2px 4px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 11px; text-align: center; }
.wt-delay-unit { font-size: 11px; color: var(--text-muted); }
.wt-rate-btn {
    width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-primary); font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
    padding: 0;
}
.wt-rate-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.wt-rate-display { font-size: 11px; color: var(--text-primary); min-width: 32px; text-align: center; }
.wt-engine-select {
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 11px;
}

/* ===== 节拍倒计时覆盖层 ===== */
#metronomeOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#metronomeOverlay.visible {
    opacity: 1;
}
#metronomeBeatDisplay {
    font-size: 80px;
    font-weight: bold;
    color: #f59e0b;
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
    line-height: 1;
    text-align: center;
}
body.dark-mode #metronomeBeatDisplay {
    color: #fbbf24;
}
#metronomeSubText {
    font-size: 16px;
    color: #6b7280;
    text-align: center;
    margin-top: 4px;
}

/* ===== 对齐工具侧边栏 ===== */
#alignmentOverlay {
    border-left: 1px solid #374151;
}
#waveformContainer {
    position: relative;
    min-height: 64px;
}
#alignmentProgressLine {
    transition: left 0.05s linear;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.6);
}
#alignmentSyncPoint {
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
}

/* ===== 播放器控制栏 ===== */
#playerControlBar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* ===== 视频播放器 ===== */
#videoPlayer {
    background: #000;
    border-radius: 8px;
}

/* ===== 响应式布局 ===== */

/* PC: 视频区 flex row（视频左，图片右） */
body.layout-pc #videoSection { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }
body.layout-pc #imageArea { flex: 0 0 auto; }
body.layout-pc #localPlayerSection { flex: 1; min-width: 0; }
/* 手机: 视频区 flex column-reverse（图片上，视频下） */
body.layout-mobile #videoSection { display: flex; flex-direction: column-reverse; gap: 12px; }
body.layout-mobile #imageArea { width: fit-content !important; max-width: 100%; align-self: center; }
body.layout-mobile #imageDropZone { min-height: 120px; }

/* 默认：PC 布局 - Grid 两栏 70/30 */
body.layout-pc #playerContainer {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto auto auto;
    gap: 16px;
    align-items: start;
}
body.layout-pc #videoSection { grid-column: 1; grid-row: 1; }
body.layout-pc #wordTokenizerContainer { grid-column: 1; }
body.layout-pc #jianpuSection { margin-bottom: 0; }
body.layout-pc #segmentListSection {
    grid-column: 2;
    grid-row: 1 / 4;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    width: 340px;
}

/* 手机布局：单栏堆叠 */
body.layout-mobile #playerContainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.layout-mobile #segmentListSection {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(calc(100% - 56px));
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    width: 100%;
}
body.layout-mobile #segmentListSection.expanded {
    transform: translateY(0);
}
body.dark-mode.layout-mobile #segmentListSection {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* 底部浮层拖拽手柄 */
.bottom-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 6px 0 8px 0;
    cursor: grab;
    user-select: none;
}
.bottom-sheet-handle:active {
    cursor: grabbing;
}
.bottom-sheet-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    pointer-events: none;
}
/* 手机布局外不显示手柄 */
body.layout-pc .bottom-sheet-handle { display: none; }

/* 手机布局下隐藏快捷键提示 */
body.layout-mobile .layout-pc-only { display: none; }

/* 手机布局下的容器间距 */
body.layout-mobile #jianpuSection { margin-bottom: 0; }

/* Demo 下拉菜单 */
.demo-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.demo-menu-item:first-child { border-radius: 6px 6px 0 0; }
.demo-menu-item:last-child { border-radius: 0 0 6px 6px; }
.demo-menu-item:only-child { border-radius: 6px; }

/* Demo 来源说明链接 */
#demoSourceArea a { color: var(--text-secondary); text-decoration: underline; }
#demoSourceArea a:hover { color: var(--text-primary); }

/* 阴影卡片统一收敛 */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}