/* ======================================================================
   在线吉他谱播放器（Guitar Pro） /tools/guitarpro
   ----------------------------------------------------------------------
   布局：左侧工具面板（上传 / 范例 / 最近 / 音轨 / 显示设置）
        + 右侧谱面舞台（曲谱信息 / 播放条 / 可滚动谱面）
   设计基线：
     · 8px 间距栅格、12~14px 圆角、单一强调色 + 中性灰阶（避免多彩噪音）
     · 触控目标 ≥40px（手机 ≥44px）、字号阶梯 11.5 / 12.5 / 13 / 15 / 19
     · 三端断点：≥1400 大屏加留白 · 1100~1399 标准双栏 · 900~1099 紧凑双栏
                768~899 单列（面板两列） · ≤767 手机（播放条吸底）
   ====================================================================== */

/* 占满电脑端屏幕（保留左侧导航栏） */
body[data-page="tools"].page-guitarpro-full .app,
body[data-page="tools"].page-guitarpro-full .main-content,
body[data-page="tools"] .page-guitarpro-full {
    max-width: 100%;
    width: 100%;
}
body[data-page="tools"].page-guitarpro-full .main-content { border-right: 0; }

/* ---------------- 设计令牌 ---------------- */
.gp {
    /* 结构与层级 */
    --gp-stage-bg: var(--bg-secondary);
    --gp-panel-bg: var(--bg-primary);
    --gp-line: var(--border-color);
    /* 文字层级 */
    --gp-text: var(--text-primary);
    --gp-sub: var(--text-secondary);
    /* 强调只给主操作用 */
    --gp-accent: var(--accent);
    /* 谱面纸张（与站点主题解耦，夜间另有开关） */
    --gp-sheet-bg: #fff;
    --gp-sheet-ink: #14181d;
    /* 圆角与阴影 */
    --gp-r-sm: 8px;
    --gp-r: 12px;
    --gp-r-lg: 16px;
    --gp-shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
    --gp-shadow-2: 0 10px 30px rgba(0, 0, 0, .18);
}

.gp {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);   /* 移动端地址栏收起时更准 */
    min-height: 520px;
    background: var(--gp-stage-bg);
    color: var(--gp-text);
}

/* ★ 关键兜底：.gp-info / .gp-empty / .gp-loading / .gp-error 都声明了 display:flex，
   作者样式的优先级高于浏览器默认的 [hidden]{display:none}，
   不在这里强制兜底的话，hidden 属性会被忽略 —— 信息条、空态、加载遮罩、错误框会一直显示。 */
#gp [hidden],
#gpStageInner[hidden],
.gp-info[hidden],
.gp-empty[hidden],
.gp-loading[hidden],
.gp-error[hidden],
.gp-player[hidden] { display: none !important; }

/* 键盘可见焦点（无障碍） */
.gp button:focus-visible,
.gp input:focus-visible,
.gp select:focus-visible,
.gp summary:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
}

/* ---------------- 顶部 ---------------- */
.gp-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--gp-panel-bg);
    border-bottom: 1px solid var(--gp-line);
}
.gp-head-icon {
    width: 44px; height: 44px; flex: none;
    border-radius: var(--gp-r);
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gp-accent), #7c4dff);
    color: #fff;
    box-shadow: var(--gp-shadow-1);
}
.gp-head-icon svg { width: 26px; height: 26px; }
.gp-head-text { flex: 1 1 320px; min-width: 0; }
.gp-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; line-height: 1.3; }
.gp-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--gp-sub); }
.gp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 按钮：主操作用强调色，次要操作保持中性，避免「到处都是蓝色」 */
.gp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 34px; padding: 0 13px;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    background: var(--gp-panel-bg);
    color: var(--gp-text);
    font-size: 13px; line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.gp-btn:hover { background: var(--bg-hover); border-color: var(--gp-accent); }
.gp-btn:active { transform: translateY(1px); }
.gp-btn-primary { background: var(--gp-accent); border-color: var(--gp-accent); color: #fff; font-weight: 600; }
.gp-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
/* 次要操作：去掉实心强调，只在 hover 时提示 */
.gp-btn-quiet { background: transparent; color: var(--gp-sub); border-color: transparent; }
.gp-btn-quiet:hover { background: var(--bg-hover); color: var(--gp-text); border-color: var(--gp-line); }
.gp-btn-danger { color: var(--danger); }
.gp-btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
.gp-btn[disabled], .gp-btn.is-off { opacity: .5; cursor: not-allowed; }

/* ---------------- 主体骨架 ---------------- */
.gp-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: var(--gp-side-w, 320px) minmax(0, 1fr);
    min-height: 0;
}
.gp-side {
    border-right: 1px solid var(--gp-line);
    background: var(--gp-panel-bg);
    overflow-y: auto;
    padding: 0 14px 14px;
    scrollbar-width: thin;
}
/* 细滚动条，避免侧栏出现粗重的系统滚动条打断视觉 */
.gp-side::-webkit-scrollbar { width: 8px; }
.gp-side::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gp-sub) 35%, transparent); border-radius: 8px; }
.gp-side::-webkit-scrollbar-track { background: transparent; }

/* 侧栏标题条 + 收起按钮（收起后谱面更宽） */
.gp-side-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 0 8px;
    background: var(--gp-panel-bg);
}
.gp-side-title { font-size: 12px; font-weight: 700; color: var(--gp-sub); letter-spacing: .5px; }
.gp-side-fold {
    width: 28px; height: 28px;
    border: 1px solid var(--gp-line); border-radius: var(--gp-r-sm);
    background: transparent; color: var(--gp-sub);
    font-size: 13px; line-height: 1; cursor: pointer;
}
.gp-side-fold:hover { background: var(--bg-hover); color: var(--gp-text); border-color: var(--gp-accent); }

/* 折叠态：把左栏让给谱面 */
.gp-main.is-side-collapsed { grid-template-columns: minmax(0, 1fr); }
.gp-main.is-side-collapsed .gp-side { display: none; }
.gp-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--gp-stage-bg);
    position: relative;
}
.gp-stage.is-drag::after {
    content: '松开即可打开谱面';
    position: absolute; inset: 12px;
    border: 2px dashed var(--gp-accent);
    border-radius: var(--gp-r-lg);
    background: color-mix(in srgb, var(--gp-accent) 12%, transparent);
    display: grid; place-items: center;
    font-size: 17px; font-weight: 700; color: var(--gp-accent);
    pointer-events: none;
    z-index: 5;
}

/* ---------------- 侧栏分组 ---------------- */
.gp-panel {
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r);
    background: var(--gp-panel-bg);
    margin-bottom: 10px;
    overflow: hidden;
}
.gp-panel > summary,
.gp-panel-head {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.gp-panel > summary::-webkit-details-marker { display: none; }
.gp-panel > summary:hover,
.gp-panel-head:hover { background: var(--bg-hover); }
.gp-panel-head::after,
.gp-panel > summary::after {
    content: '▾';
    font-size: 11px; color: var(--gp-sub);
    transition: transform .18s;
}
.gp-panel[open] > summary::after { transform: rotate(180deg); }
.gp-panel-body { padding: 2px 12px 12px; }

/* 上传区 */
.gp-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px 12px;
    border: 2px dashed var(--gp-line);
    border-radius: var(--gp-r);
    background: var(--gp-stage-bg);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.gp-drop:hover { border-color: var(--gp-accent); background: var(--bg-hover); }
.gp-drop-icon { font-size: 24px; line-height: 1; }
.gp-drop-main { font-size: 13.5px; font-weight: 700; }
.gp-drop-sub { font-size: 12px; color: var(--gp-sub); line-height: 1.6; }
.gp-formats { margin: 10px 0 0; font-size: 11.5px; color: var(--gp-sub); line-height: 1.7; word-break: break-word; }

/* 列表（范例 / 最近） */
.gp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-demo, .gp-recent-open {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; min-height: 40px; padding: 8px 10px;
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-sm);
    background: var(--gp-panel-bg);
    color: var(--gp-text);
    text-align: left; cursor: pointer;
    font-size: 13px;
    transition: border-color .15s, background .15s;
}
.gp-demo:hover, .gp-recent-open:hover { border-color: var(--gp-accent); background: var(--bg-hover); }
.gp-demo-name { font-weight: 600; }
.gp-demo-meta, .gp-recent-size { font-size: 11.5px; color: var(--gp-sub); }
.gp-recent { display: flex; align-items: stretch; gap: 6px; }
.gp-recent .gp-recent-name { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-recent-del {
    flex: none; width: 34px; min-height: 40px;
    border: 1px solid var(--gp-line); border-radius: var(--gp-r-sm);
    background: var(--gp-panel-bg); color: var(--gp-sub); cursor: pointer;
}
.gp-recent-del:hover { color: var(--danger); border-color: var(--danger); }
.gp-hint { font-size: 12px; color: var(--gp-sub); padding: 6px 2px; line-height: 1.6; }

/* 音轨：卡片化，S/M 触控更大 */
.gp-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 8px;
    padding: 8px 10px;
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-sm);
    background: var(--gp-panel-bg);
    margin-bottom: 6px;
}
.gp-track:hover { border-color: color-mix(in srgb, var(--gp-accent) 45%, var(--gp-line)); }
.gp-track-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gp-track-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-track-meta { grid-column: 1; font-size: 11px; color: var(--gp-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-track-btns { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; }
.gp-mini {
    width: 32px; height: 32px;
    border: 1px solid var(--gp-line); border-radius: var(--gp-r-sm);
    background: var(--gp-panel-bg); color: var(--gp-sub);
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.gp-mini:hover { border-color: var(--gp-accent); color: var(--gp-text); }
.gp-mini.is-on { background: var(--gp-accent); border-color: var(--gp-accent); color: #fff; }
.gp-track-empty { font-size: 12px; color: var(--gp-sub); padding: 6px 0; }

/* 设置行 */
.gp-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12.5px; }
.gp-row > label, .gp-row-label { flex: 0 0 84px; color: var(--gp-sub); }
.gp-select, .gp-num {
    flex: 1 1 auto; min-width: 0;
    height: 32px; padding: 0 8px;
    border: 1px solid var(--gp-line); border-radius: var(--gp-r-sm);
    background: var(--gp-panel-bg); color: var(--gp-text); font-size: 12.5px;
}
.gp-num { width: 76px; flex: none; }
.gp-range { flex: 1 1 auto; min-width: 0; accent-color: var(--gp-accent); }
.gp-val { flex: none; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gp-sub); }
.gp-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-height: 32px; }
.gp-checks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gp-btns { display: flex; gap: 6px; margin-top: 8px; }

/* ---------------- 曲谱信息条（chip 化） ---------------- */
.gp-info {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--gp-panel-bg);
    border-bottom: 1px solid var(--gp-line);
    font-size: 13px;
}
.gp-info-title { font-size: 15px; font-weight: 700; }
.gp-info-sub { color: var(--gp-sub); font-size: 12px; }
.gp-info-items { display: flex; gap: 6px; flex-wrap: wrap; color: var(--gp-sub); font-size: 12px; }
.gp-info-items > span {
    padding: 3px 9px;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    background: var(--gp-stage-bg);
    white-space: nowrap;
}
.gp-info-items b { color: var(--gp-text); font-weight: 600; }

/* ---------------- 播放条 ---------------- */
.gp-player {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 16px;
    background: var(--gp-panel-bg);
    border-bottom: 1px solid var(--gp-line);
}
.gp-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-play { min-width: 100px; justify-content: center; font-weight: 600; }
.gp-play.is-playing { background: var(--gp-accent); border-color: var(--gp-accent); color: #fff; }
.gp-seek-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 0; }
.gp-seek { flex: 1 1 auto; min-width: 120px; accent-color: var(--gp-accent); }
.gp-time { font-size: 12px; color: var(--gp-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 跟奏位置：当前小节 / 总小节 */
.gp-bar-info {
    padding: 2px 8px;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    background: var(--gp-stage-bg);
    font-size: 11.5px; color: var(--gp-sub);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gp-knobs {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 12px; color: var(--gp-sub);
    padding-top: 2px;
    border-top: 1px dashed var(--gp-line);
}
.gp-knob { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.gp-knob input[type=range] { width: 92px; accent-color: var(--gp-accent); }
.gp-knob select {
    height: 30px; padding: 0 6px;
    border: 1px solid var(--gp-line); border-radius: var(--gp-r-sm);
    background: var(--gp-panel-bg); color: var(--gp-text); font-size: 12px;
}

/* ---------------- 谱面区 ---------------- */
.gp-sheet-host {
    position: relative;
    flex: 1 1 auto;
    min-height: 240px;
    padding: 12px;
}
/* 纸张：与舞台背景分层，圆角 + 轻阴影，阅读更聚焦 */
.gp-sheet {
    position: absolute; inset: 12px;
    overflow: auto;
    padding: 16px 18px 40px;
    background: var(--gp-sheet-bg);
    color: var(--gp-sheet-ink);
    border-radius: var(--gp-r);
    box-shadow: var(--gp-shadow-1);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.gp-sheet-dark { --gp-sheet-bg: #10141b; }
.gp-sheet .at-surface { background: transparent; }
.gp-sheet svg, .gp-sheet canvas { max-width: none; }
.gp-sheet .at-system-bracket-box { fill: currentColor; }

/* 空态 */
.gp-empty {
    position: absolute; inset: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 24px; text-align: center;
    border-radius: var(--gp-r);
    background: var(--gp-panel-bg);
}
.gp-empty h2 { margin: 0; font-size: 17px; }
.gp-empty p { margin: 0; max-width: 520px; font-size: 13px; line-height: 1.75; color: var(--gp-sub); }
.gp-empty-icon { font-size: 38px; }
.gp-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* 加载 / 错误 / 提示 */
.gp-loading {
    position: absolute; inset: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(255, 255, 255, .82);
    background: color-mix(in srgb, var(--gp-panel-bg) 86%, transparent);
    border-radius: var(--gp-r);
    z-index: 4;
}
.gp-spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid var(--gp-line); border-top-color: var(--gp-accent);
    animation: gp-spin .8s linear infinite;
}
@keyframes gp-spin { to { transform: rotate(360deg); } }
.gp-loading-tip { font-size: 13px; color: var(--gp-sub); }

.gp-error {
    position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
    z-index: 6;
    max-width: min(680px, 92%);
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--danger);
    border-radius: var(--gp-r);
    background: var(--gp-panel-bg);
    box-shadow: var(--gp-shadow-2);
}
.gp-error-icon { color: var(--danger); font-size: 18px; line-height: 1.2; }
.gp-error-body { flex: 1 1 auto; min-width: 0; }
.gp-error-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.gp-error-msg { font-size: 12px; color: var(--gp-sub); word-break: break-word; line-height: 1.6; }
.gp-error-close {
    min-width: 32px; min-height: 32px;
    border: 0; border-radius: var(--gp-r-sm);
    background: none; color: var(--gp-sub); cursor: pointer; font-size: 14px;
}
.gp-error-close:hover { background: var(--bg-hover); color: var(--gp-text); }

/* 谱面浮动工具条（缩放 / 版面 / 面板 / 专注），不占用纵向空间 */
.gp-sheet-tools {
    position: absolute; top: 18px; right: 20px;
    z-index: 7;
    display: flex; gap: 4px;
    padding: 4px;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gp-panel-bg) 88%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: var(--gp-shadow-1);
}
.gp-tool {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--gp-sub);
    font-size: 14px; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
}
.gp-tool:hover { background: var(--bg-hover); color: var(--gp-text); }
.gp-tool:active { transform: translateY(1px); }

/* 专注模式：只留谱面 + 播放条，适合跟弹 */
body.gp-focus .gp-head,
body.gp-focus .gp-side,
body.gp-focus .gp-help { display: none !important; }
body.gp-focus .gp { height: 100vh; height: 100dvh; }
body.gp-focus .gp-main { grid-template-columns: minmax(0, 1fr); }
body.gp-focus .gp-sheet-host { padding: 8px; }
body.gp-focus .gp-sheet { inset: 8px; }
body.gp-focus .gp-empty { inset: 8px; }

.gp-sf-tip {
    position: absolute; right: 18px; bottom: 14px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--gp-panel-bg); border: 1px solid var(--gp-line);
    font-size: 11px; color: var(--gp-sub); z-index: 3;
}

.gp-toast {
    position: fixed; right: 18px; bottom: 18px;
    z-index: 100000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.gp-toast .gp-toast {
    position: relative; right: auto; bottom: auto;
    padding: 10px 14px; border-radius: var(--gp-r-sm);
    background: var(--bg-elevated); color: #fff;
    box-shadow: var(--gp-shadow-2);
    font-size: 13px; max-width: 320px; line-height: 1.5;
    pointer-events: auto;
}
.gp-toast .gp-toast-err { background: var(--danger); }

/* ---------------- 使用说明 ---------------- */
.gp-help {
    margin: 0;
    padding: 12px 20px 26px;
    background: var(--gp-panel-bg);
    border-top: 1px solid var(--gp-line);
    color: var(--gp-text);
}
.gp-help > summary {
    cursor: pointer; user-select: none; list-style: none;
    font-size: 13.5px; font-weight: 700;
    padding: 4px 0;
}
.gp-help > summary::-webkit-details-marker { display: none; }
.gp-help > summary::before { content: '\25B8 '; color: var(--gp-sub); }
.gp-help[open] > summary::before { content: '\25BE '; }
.gp-help-body { padding-top: 8px; font-size: 12.5px; line-height: 1.8; color: var(--gp-sub); }
.gp-help-body ol { margin: 0 0 8px; padding-left: 20px; }
.gp-help-body b { color: var(--gp-text); }
.gp-help-body a { color: var(--gp-accent); }

/* ==========================================================
   响应式
   ========================================================== */

/* 大屏：更多留白、左栏更宽 */
@media (min-width: 1400px) {
    .gp-main { --gp-side-w: 340px; }
    .gp-head { padding: 16px 28px; }
    .gp-title { font-size: 20px; }
    .gp-sheet-host { padding: 16px 20px; }
    .gp-sheet { inset: 16px 20px; padding: 20px 24px 48px; }
    .gp-empty { inset: 16px 20px; }
}

/* 标准双栏（默认）→ 1100px 以下改为紧凑双栏，左栏收窄 */
@media (max-width: 1199px) and (min-width: 900px) {
    .gp-main { --gp-side-w: 288px; }
    .gp-side { padding: 12px; }
    .gp-title { font-size: 18px; }
    .gp-sub { font-size: 12px; }
}

/* 平板竖屏 / 窄窗口：单列；侧栏面板两列网格，减少滚动 */
@media (max-width: 899px) {
    .gp { height: auto; min-height: 0; }
    .gp-main { grid-template-columns: minmax(0, 1fr); }
    .gp-side {
        border-right: 0;
        border-top: 1px solid var(--gp-line);
        order: 2;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }
    .gp-side .gp-panel { margin-bottom: 0; }
    .gp-stage { order: 1; }
    .gp-sheet-host { height: 62vh; padding: 10px; }
    .gp-sheet { inset: 10px; }
    .gp-empty { inset: 10px; }
    .gp-loading { inset: 10px; }
    .gp-head { padding: 12px 14px; }
    .gp-title { font-size: 17px; }
}

/* 手机：单列 + 触控优先 + 播放条吸底 */
@media (max-width: 767px) {
    .gp-head { gap: 10px; padding: 10px 12px; }
    .gp-head-icon { width: 38px; height: 38px; border-radius: 10px; }
    .gp-head-icon svg { width: 22px; height: 22px; }
    .gp-title { font-size: 16px; }
    .gp-sub { font-size: 12px; }
    .gp-head-actions { width: 100%; }
    .gp-head-actions .gp-btn { flex: 1 1 auto; min-height: 40px; }

    .gp-side { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 8px; }
    /* 单列布局下左栏没有「收起」的意义，隐藏入口 */
    .gp-side-head { display: none; }
    .gp-sheet-tools { top: 14px; right: 14px; }
    .gp-sheet-host { height: 58vh; padding: 8px; }
    .gp-sheet { inset: 8px; padding: 10px 10px 32px; }
    .gp-empty { inset: 8px; padding: 18px; }
    .gp-loading { inset: 8px; }

    /* 播放条吸底：滚到页面底部时一直可操作 */
    .gp-player {
        position: sticky;
        bottom: 0;
        z-index: 30;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .12);
        border-top: 1px solid var(--gp-line);
        border-bottom: 0;
    }
    .gp-transport { gap: 6px; }
    .gp-play { min-width: 88px; min-height: 44px; }
    .gp-tool { width: 36px; height: 36px; font-size: 15px; }
    .gp-sheet-tools { top: 12px; right: 12px; gap: 2px; padding: 3px; }
    .gp-bar-info { display: none; }   /* 手机端播放条空间紧张，优先保留时间 */
    .gp-btn { min-height: 40px; }
    .gp-mini { width: 36px; height: 36px; }
    .gp-seek-wrap { flex: 1 1 100%; order: 3; }
    .gp-knobs { gap: 8px 12px; }
    .gp-knob { flex: 1 1 46%; }
    .gp-knob input[type=range] { width: 100%; }
    .gp-knob select { flex: 1 1 auto; min-width: 0; height: 34px; }

    .gp-row { flex-wrap: wrap; }
    .gp-row > label, .gp-row-label { flex: 0 0 100%; }
    .gp-select, .gp-num, .gp-range { width: 100%; flex: 1 1 auto; }
    .gp-select, .gp-num { height: 40px; }

    .gp-info { gap: 8px; padding: 8px 12px; font-size: 12.5px; }
    .gp-info-title { font-size: 14px; }
    .gp-info-items { gap: 6px; }

    .gp-help { padding: 10px 14px 22px; }
    .gp-toast { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; }
    .gp-toast .gp-toast { max-width: none; }

    /* 防 iOS 聚焦缩放（仅本工具内的表单控件） */
    .gp input, .gp select, .gp textarea { font-size: 16px; }
}

/* 超小屏 */
@media (max-width: 420px) {
    .gp-head-icon { width: 34px; height: 34px; }
    .gp-title { font-size: 15.5px; }
    .gp-info-items { gap: 5px; }
    .gp-info-items > span { padding: 2px 7px; font-size: 11.5px; }
    .gp-knob { flex: 1 1 100%; }
    .gp-empty-actions .gp-btn { flex: 1 1 100%; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .gp-sheet { scroll-behavior: auto; }
    .gp-spinner { animation-duration: 2s; }
    .gp-btn, .gp-mini, .gp-panel > summary::after { transition: none; }
}

/* 打印：只留谱面 */
@media print {
    .gp-head, .gp-side, .gp-player, .gp-info, .gp-help,
    .gp-empty, .gp-loading, .gp-error, .gp-toast, .gp-sf-tip, .gp-sheet-tools { display: none !important; }
    .gp, .gp-main, .gp-stage, .gp-sheet-host { display: block !important; height: auto !important; }
    .gp-sheet { position: static !important; overflow: visible !important; box-shadow: none !important; }
}