:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14161a;--panel:#1d2026;--text:#e8eaed;--muted:#9aa0a6;--chord:#ffb84d;--accent:#4d9fff;--original:#6ee7a0}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:-apple-system,PingFang TC,Microsoft JhengHei,Noto Sans TC,sans-serif}.perform{flex-direction:column;height:100%;display:flex}.topbar{padding:10px 14px 6px}.title{margin:0 0 6px;font-size:20px;font-weight:700}.meta{align-items:center;gap:8px;display:flex}.spacer{flex:1}.badge{color:var(--muted);border:1px solid #333842;border-radius:999px;padding:2px 10px;font-size:12px}.badge.current{color:var(--text)}.badge.current.transposed{color:var(--chord);border-color:var(--chord)}.font-btn{background:var(--panel);color:var(--text);border:1px solid #333842;border-radius:8px;padding:4px 10px;font-size:13px}.key-row{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding:8px 14px;display:flex;overflow-x:auto}.key-row::-webkit-scrollbar{display:none}.key-btn{min-width:52px;color:var(--text);background:var(--panel);touch-action:manipulation;border:1px solid #333842;border-radius:10px;flex:none;padding:12px 0;font-size:16px;font-weight:700}.key-btn.original{border-color:var(--original)}.key-btn.active{background:var(--accent);border-color:var(--accent);color:#0b0d10}.sheet-scroll{flex:1;padding:10px 14px 40px;overflow:auto}.sheet{min-width:100%;display:inline-block}.sheet-line{white-space:nowrap;margin-bottom:.9em}.seg{vertical-align:bottom;flex-direction:column;align-items:flex-start;display:inline-flex}.seg-chord{min-height:1.25em;color:var(--chord);white-space:pre;padding-right:.4em;font-family:SF Mono,Menlo,Consolas,monospace;font-size:.9em;font-weight:700}.seg-text{white-space:pre}.section-label{color:var(--accent);border:1px solid var(--accent);border-radius:6px;margin:.4em 0 .8em;padding:1px 10px;font-size:.8em;display:inline-block}.page{flex-direction:column;height:100%;display:flex}.subtitle{color:var(--muted);font-size:12px}.hint{color:var(--muted);padding:8px 14px;font-size:13px}.row{align-items:center;gap:10px;display:flex}.row.space-between{justify-content:space-between}.primary-btn{background:var(--accent);color:#0b0d10;touch-action:manipulation;border:none;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:700}.primary-btn:disabled{opacity:.45}.primary-btn.wide{width:100%}.ghost-btn{color:var(--text);touch-action:manipulation;background:0 0;border:1px solid #333842;border-radius:8px;padding:8px 12px;font-size:13px}.ghost-btn.danger{color:#ff7d7d;border-color:#5a3038}.badge.draft{color:#ffb84d;border-color:#6b5426}.bottom-bar{padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid #23262d}.library-list{flex:1;padding:8px 14px 96px;overflow-y:auto}.library-item{background:var(--panel);cursor:pointer;border:1px solid #2a2e36;border-radius:12px;align-items:center;gap:10px;margin-bottom:10px;padding:14px;display:flex}.library-item-main{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.library-title{text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;overflow:hidden}.library-sub{color:var(--muted);font-size:12px}.fab{right:18px;bottom:calc(18px + env(safe-area-inset-bottom));background:var(--accent);color:#0b0d10;touch-action:manipulation;border:none;border-radius:999px;padding:16px 22px;font-size:16px;font-weight:800;position:fixed;box-shadow:0 6px 20px #00000073}.capture-main{flex-direction:column;flex:1;gap:14px;padding:14px;display:flex;overflow-y:auto}.drop-zone{cursor:pointer;text-align:center;border:2px dashed #3a3f49;border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex}.drop-icon{font-size:42px}.photo-preview{object-fit:contain;border-radius:12px;max-width:100%;max-height:55vh}.preview-box,.analyzing-box,.error-box{flex-direction:column;align-items:center;gap:14px;padding:16px 0;display:flex}.spinner{border:3px solid #333842;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:#ff9d9d;text-align:center;padding:0 16px}.title-input{color:var(--text);background:0 0;border:none;border-bottom:1px dashed #3a3f49;width:100%;padding:2px 0;font-size:18px;font-weight:700}.flag-strip{background:#241d12;border-block:1px solid #4a3a1c;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:flex}.flag-strip.clean{color:#6ee7a0;background:#12241a;border-color:#1c4a30}.flag-count{color:#ffb84d}.flag-chip{background:var(--panel);color:#ffb84d;border:1px solid #6b5426;border-radius:8px;padding:6px 10px;font-family:SF Mono,Menlo,Consolas,monospace;font-weight:700}.flag-chip.flag-unparseable{color:#ff7d7d;border-color:#5a3038}.flag-chip small{opacity:.75;margin-left:4px;font-weight:400}.review-main{flex-direction:column;flex:1;display:flex;overflow:hidden}.photo-pane{background:#000;border-bottom:1px solid #23262d;max-height:34vh;overflow:auto}.photo-pane img{width:100%;display:block}.seg-chord{text-align:left;cursor:default;background:0 0;border:none;padding:0 .4em 0 0}.seg-chord.editable{cursor:pointer;border-radius:4px}.seg-chord.editable:active{background:#2c3a52}.seg-chord.flag-off-key{color:#ffd34d;-webkit-text-decoration:underline wavy #ffd34d;text-decoration:underline wavy #ffd34d;text-decoration-thickness:1.5px}.seg-chord.flag-unparseable{color:#ff7d7d;-webkit-text-decoration:underline wavy #ff7d7d;text-decoration:underline wavy #ff7d7d;text-decoration-thickness:1.5px}.seg-chord.placeholder{pointer-events:none}.editor-overlay{z-index:50;background:#0000008c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.chord-editor{background:var(--panel);padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #333842;border-radius:16px 16px 0 0;flex-direction:column;gap:12px;width:min(560px,100%);display:flex}.chord-input{background:var(--bg);color:var(--chord);border:1px solid #333842;border-radius:10px;flex:1;min-width:0;padding:10px 12px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:20px;font-weight:700}.chord-input.invalid{color:#ff9d9d;border-color:#ff7d7d}.chord-suggestions{flex-wrap:wrap;gap:8px;display:flex}.chord-suggestions .ghost-btn{padding:10px 14px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:15px;font-weight:700}