/*!
 * 吉他指板大师 /tools/fretboard
 * 视觉复刻 Kepma 吉他指板大师：深色底 + 木质指板 + 靛蓝强调色，三端响应式。
 * 所有颜色走 --fb-* 变量，站点亮色主题下自动切换外壳配色（指板保持木色以还原真实观感）。
 */

/* ============================ 主题变量 ============================ */
.fb-page {
    --fb-bg: #111827;
    --fb-panel: #1f2937;
    --fb-panel-2: #172033;
    --fb-border: rgba(255, 255, 255, .1);
    --fb-text: #f9fafb;
    --fb-muted: #9ca3af;
    --fb-accent: #4f46e5;
    --fb-accent-2: #6366f1;
    --fb-accent-soft: rgba(79, 70, 229, .18);
    --fb-wood-1: #3a231a;
    --fb-wood-2: #24140f;
    --fb-nut: #1a1a1a;
    --fb-fret: rgba(190, 190, 190, .45);
    --fb-string: rgba(214, 170, 110, .55);
    --fb-inlay: rgba(209, 213, 219, .28);
    --fb-dot-in: #ffffff;
    --fb-dot-in-text: #111827;
    --fb-dot-dim: #4b5563;
    --fb-dot-dim-text: #e5e7eb;
    --fb-col: 64px;
    background: var(--fb-bg);
    color: var(--fb-text);
    min-height: 100vh;
}
[data-theme="light"] .fb-page {
    --fb-bg: #f3f4f6;
    --fb-panel: #ffffff;
    --fb-panel-2: #f9fafb;
    --fb-border: rgba(0, 0, 0, .1);
    --fb-text: #111827;
    --fb-muted: #6b7280;
    --fb-accent: #4f46e5;
    --fb-accent-soft: rgba(79, 70, 229, .12);
}

/* ============================ 骨架 ============================ */
.fb-page .fb-wrap { max-width: none; margin: 0; padding: 20px 16px 40px; box-sizing: border-box; }
@media (min-width: 768px) { .fb-page .fb-wrap { padding: 24px 24px 48px; } }
@media (min-width: 1280px) { .fb-page .fb-wrap { padding: 28px 32px 56px; } }

.fb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.fb-head__icon {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    background: var(--fb-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(79, 70, 229, .35);
}
.fb-head__icon svg { width: 26px; height: 26px; }
.fb-head__txt { flex: 1 1 220px; min-width: 0; }
.fb-head__title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .3px; }
.fb-head__sub { margin: 3px 0 0; font-size: 13px; color: var(--fb-muted); }
.fb-head__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================ 通用控件 ============================ */
.fb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--fb-border); background: var(--fb-panel); color: var(--fb-text);
    font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, transform .1s;
}
.fb-btn:hover { background: var(--fb-panel-2); border-color: var(--fb-accent-2); }
.fb-btn:active { transform: translateY(1px); }
.fb-btn:disabled { opacity: .45; cursor: not-allowed; }
.fb-btn.is-on { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
.fb-btn--sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }

.fb-global, .fb-ctl {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
    padding: 14px; border-radius: 14px;
    background: var(--fb-panel); border: 1px solid var(--fb-border);
}
.fb-global { margin-bottom: 16px; }
.fb-fld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fb-muted); }
.fb-sel {
    min-width: 118px; padding: 8px 10px; border-radius: 9px; font-size: 13px;
    background: var(--fb-panel-2); color: var(--fb-text); border: 1px solid var(--fb-border);
}
.fb-sel:focus { outline: 2px solid var(--fb-accent-2); outline-offset: 1px; }
.fb-sel[disabled] { opacity: .6; }

.fb-sw { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; user-select: none; }
.fb-chk { width: 16px; height: 16px; accent-color: var(--fb-accent); cursor: pointer; }

.fb-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--fb-panel-2); border: 1px solid var(--fb-border); }
.fb-seg__btn {
    padding: 7px 13px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--fb-muted); font-size: 12.5px; font-weight: 600;
}
.fb-seg__btn.is-active { background: var(--fb-accent); color: #fff; }

/* 高级调弦 */
.fb-tunebox {
    flex: 1 1 100%; padding: 12px 14px; border-radius: 12px;
    background: var(--fb-panel-2); border: 1px dashed var(--fb-border);
}
.fb-tuning-editor { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-str { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fb-muted); }
.fb-str__no { min-width: 30px; }
.fb-str__sel {
    padding: 6px 8px; border-radius: 8px; font-size: 12.5px;
    background: var(--fb-panel); color: var(--fb-text); border: 1px solid var(--fb-border);
}

/* ============================ 指板卡片 ============================ */
.fb-boards { display: flex; flex-direction: column; gap: 16px; }
.fb-card {
    border-radius: 16px; overflow: hidden;
    background: var(--fb-panel); border: 1px solid var(--fb-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.fb-card__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; background: var(--fb-panel-2); border-bottom: 1px solid var(--fb-border);
}
.fb-card__fold {
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--fb-border); background: var(--fb-panel); color: var(--fb-text);
    font-size: 13px; line-height: 1; transition: transform .18s;
}
.fb-card.is-collapsed .fb-card__fold { transform: rotate(-90deg); }
.fb-card__title { flex: 1 1 200px; margin: 0; font-size: 15px; font-weight: 700; }
.fb-card__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-card__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.fb-card.is-collapsed .fb-card__body { display: none; }
.fb-ctl { background: var(--fb-panel-2); }

/* ============================ 指板本体 ============================ */
.fb-boardwrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.fb-board {
    position: relative; border-radius: 10px; overflow: hidden;
    border-top: 4px solid #1f2937; border-bottom: 4px solid #1f2937;
    background: linear-gradient(180deg, var(--fb-wood-1), var(--fb-wood-2));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    display: inline-block; min-width: 100%;
}
[data-theme="light"] .fb-board { border-top-color: #111827; border-bottom-color: #111827; }
.fb-board__grain {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 10px, rgba(0, 0, 0, .022) 10px 20px);
}
.fb-board__scroll { display: flex; position: relative; }
.fb-board--left .fb-board__scroll { flex-direction: row-reverse; }

.fb-col {
    position: relative; flex: 0 0 var(--fb-col); width: var(--fb-col);
    border-right: 2px solid var(--fb-fret); padding-bottom: 22px;
}
.fb-col--nut { background: var(--fb-nut); border-right: 4px solid #9ca3af; }
.fb-col--nut .fb-string { display: none; }
.fb-cell { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; }
.fb-string {
    position: absolute; left: -5%; width: 110%; top: 50%; transform: translateY(-50%);
    background: var(--fb-string); border-radius: 2px; pointer-events: none;
}
.fb-fretnum {
    position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
    font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fb-muted);
}
.fb-inlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.fb-inlay i { width: 14px; height: 14px; border-radius: 50%; background: var(--fb-inlay); }
.fb-inlay--double { flex-direction: column; gap: 42%; }
.fb-inlay--double i { width: 12px; height: 12px; }

/* 音符圆点 */
.fb-dot {
    position: relative; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    transition: transform .12s, opacity .15s, box-shadow .15s;
    background: var(--fb-dot-in); color: var(--fb-dot-in-text);
}
.fb-dot.is-dim { background: var(--fb-dot-dim); color: var(--fb-dot-dim-text); }
.fb-dot.is-rootnote { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.fb-dot.is-root { background: var(--fb-accent); color: #fff; box-shadow: 0 0 0 2px rgba(129, 140, 248, .95); }
.fb-dot.is-ghost { opacity: 0; transform: scale(.5); }
.fb-col:hover .fb-dot.is-ghost { opacity: .35; transform: scale(.9); }
.fb-dot.is-outside { opacity: .25; }
.fb-dot:hover { transform: scale(1.12); }
.fb-dot.is-hit { background: #10b981 !important; color: #fff !important; }
.fb-dot.is-miss { background: #ef4444 !important; color: #fff !important; }
.fb-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 把位窗口高亮：位置与宽度由 JS 给出「第几列 / 共几列」，像素交给 CSS 按列宽变量计算，
   这样断点变化（--fb-col 64/80/96）自动跟随，无需 JS 重新测量或重建 DOM */
.fb-boxwin {
    position: absolute; top: 4px; bottom: 22px; z-index: 1; pointer-events: none;
    left: calc(var(--fb-col) * var(--fb-box-x, 0));
    width: calc(var(--fb-col) * var(--fb-box-w, 1));
    box-sizing: border-box;
    border: 2px dashed rgba(129, 140, 248, .75); border-radius: 10px;
    background: rgba(79, 70, 229, .12);
}
/* 左手模式：列被 row-reverse 镜像，框要按右边距定位，否则会画到镜像后的另一侧 */
.fb-board--left .fb-boxwin {
    left: auto;
    right: calc(var(--fb-col) * var(--fb-box-x, 0));
}

@media (min-width: 768px) { .fb-page { --fb-col: 80px; } }
@media (min-width: 1280px) { .fb-page { --fb-col: 96px; } }

/* ============================ 图例 / 信息 ============================ */
.fb-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--fb-muted); }
.fb-lg { display: inline-flex; align-items: center; gap: 6px; }
.fb-lg__dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.fb-lg__dot.is-rootnote { background: var(--fb-accent); }
.fb-lg__dot.is-in { background: var(--fb-dot-in); }
.fb-lg__dot.is-dim { background: var(--fb-dot-dim); }

.fb-info {
    padding: 12px 14px; border-radius: 12px; font-size: 13px;
    background: var(--fb-panel-2); border: 1px solid var(--fb-border);
}
.fb-info__row { display: flex; gap: 10px; padding: 3px 0; align-items: baseline; }
.fb-info__k { flex: 0 0 52px; color: var(--fb-muted); font-size: 12px; }
.fb-info__v { flex: 1; min-width: 0; word-break: break-word; }
.fb-tones { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-tone {
    display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 8px;
    background: var(--fb-accent-soft); border: 1px solid transparent;
}
.fb-tone b { font-size: 13.5px; }
.fb-tone i { font-style: normal; color: var(--fb-accent-2); font-weight: 700; font-size: 12px; }
[data-theme="light"] .fb-tone i { color: var(--fb-accent); }
.fb-tone u { text-decoration: none; color: var(--fb-muted); font-size: 11.5px; }

/* ============================ 工具区 ============================ */
.fb-tools { margin-top: 20px; border-radius: 16px; background: var(--fb-panel); border: 1px solid var(--fb-border); overflow: hidden; }
.fb-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 10px 0; background: var(--fb-panel-2); border-bottom: 1px solid var(--fb-border); }
.fb-tab {
    padding: 9px 15px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
    background: transparent; color: var(--fb-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.fb-tab.is-active { background: var(--fb-panel); color: var(--fb-text); border-color: var(--fb-border); box-shadow: 0 -2px 0 var(--fb-accent) inset; }
.fb-pane { padding: 16px; }
.fb-pane[hidden] { display: none !important; }

.fb-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.fb-empty { margin: 6px 0; font-size: 13px; color: var(--fb-muted); }

/* 和弦图 */
.fb-voicing-list { display: flex; flex-wrap: wrap; gap: 14px; }
.fb-voic {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px; border-radius: 12px; background: var(--fb-panel-2); border: 1px solid var(--fb-border);
}
.fb-voic__meta { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--fb-muted); }
.fb-voic__meta b { color: var(--fb-text); font-size: 13px; }
.fb-dg { position: relative; display: inline-block; }
.fb-dg__head, .fb-dg__row { display: grid; grid-template-columns: repeat(var(--dg-str, 6), 20px); }
.fb-dg__head { height: 16px; }
.fb-dg__mk { font-size: 10px; color: var(--fb-muted); text-align: center; line-height: 16px; }
.fb-dg__row { border-top: 1px solid rgba(156, 163, 175, .35); }
.fb-dg__row:first-of-type { border-top: 2px solid rgba(229, 231, 235, .8); }
.fb-dg__c { position: relative; height: 22px; display: flex; align-items: center; justify-content: center; }
.fb-dg__c::before {
    content: ''; position: absolute; left: 50%; top: -11px; bottom: -11px; width: 1px;
    background: rgba(156, 163, 175, .35); transform: translateX(-50%);
}
.fb-dg__dot {
    position: relative; z-index: 2; min-width: 17px; height: 17px; border-radius: 50%;
    background: var(--fb-accent); color: #fff; font: 700 10px/17px ui-monospace, monospace; text-align: center;
}
.fb-dg__base { position: absolute; left: -22px; top: 18px; font: 600 10px/1 ui-monospace, monospace; color: var(--fb-muted); }
.fb-dg__str { display: grid; grid-template-columns: repeat(var(--dg-str, 6), 20px); margin-top: 4px; }
.fb-dg__str span { text-align: center; font: 600 10px/1 ui-monospace, monospace; color: var(--fb-muted); }

/* 反查 */
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fb-chip {
    min-width: 42px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--fb-border); background: var(--fb-panel-2); color: var(--fb-text);
    font-size: 13px; font-weight: 600;
}
.fb-chip.is-on { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
.fb-find__grp { margin-bottom: 16px; }
.fb-find__grp h4 { margin: 0 0 8px; font-size: 13.5px; }
.fb-find__list { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-pill {
    padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--fb-border); background: var(--fb-panel-2); color: var(--fb-text);
}
.fb-pill:hover { border-color: var(--fb-accent-2); background: var(--fb-accent-soft); }

/* 练习 */
.fb-trainer-box { display: flex; flex-direction: column; gap: 12px; }
.fb-trainer-target {
    padding: 18px; border-radius: 12px; text-align: center; font-size: 15px; font-weight: 600;
    background: var(--fb-panel-2); border: 1px dashed var(--fb-border); color: var(--fb-muted);
}
.fb-trainer-target.is-on { color: var(--fb-text); border-color: var(--fb-accent-2); background: var(--fb-accent-soft); font-size: 18px; }
.fb-trainer-stat { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--fb-muted); }
.fb-trainer-stat b { color: var(--fb-text); font-size: 15px; }

/* 说明 */
.fb-doc h4 { margin: 16px 0 6px; font-size: 14px; }
.fb-doc p, .fb-doc li { font-size: 13.5px; line-height: 1.75; color: var(--fb-muted); }
.fb-doc ul { margin: 4px 0; padding-left: 20px; }
.fb-doc b { color: var(--fb-text); }
.fb-foot { margin: 22px 0 0; font-size: 12.5px; color: var(--fb-muted); text-align: center; }

/* Toast */
.fb-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
    padding: 10px 18px; border-radius: 10px; z-index: 99999;
    background: rgba(17, 24, 39, .95); color: #fff; font-size: 13px;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.fb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ============================ 手机端 ============================ */
@media (max-width: 767px) {
    .fb-head__title { font-size: 18px; }
    .fb-head__sub { font-size: 12px; }
    .fb-card__acts .fb-btn--sm { padding: 6px 8px; font-size: 11.5px; }
    .fb-ctl, .fb-global { gap: 8px 10px; padding: 12px; }
    .fb-sel { min-width: 96px; font-size: 12.5px; }
    .fb-tab { padding: 8px 12px; font-size: 12.5px; }
    .fb-dot { width: 28px; height: 28px; font-size: 11.5px; }
    .fb-cell { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .fb-dot, .fb-btn, .fb-card__fold, .fb-toast { transition: none; }
}