:root {
  --bg: #e7e7e5;
  --panel: #f6f6f4;
  --panel-2: #ececea;
  --hair: #d6d6d2;
  --line: #bdbdb8;
  --string: #5f5f5b;
  --nut: #2e2e2c;
  --text: #1b1b1a;
  --muted: #84847f;
  --faint: #a3a39e;
  --dot: #ff6d00;
  --dot-edge: #e55f00;
  --dot-text: #e05a00;
  --root: #14b84a;
  --root-edge: #0f9a3c;
  --root-text: #0c9a3a;
  --x: #8e8e89;
  --inlay: #cbcbc6;
  --strong: #3d3d3a;
  --hover: #fbfbfa;
  --tint: rgba(0, 0, 0, 0.04);
  --input-bg: #fff;
  --seg-on: #fff;
  --step: #dededa;
  --step-hover: #d2d2ce;
  --tuning-hover: #e4e4e1;
  --preview: #5c5c58;
  --dtop: #9d9d98;
  --save-off-bg: #dcdcd8;
  --save-off-fg: #9a9a95;
  --inbox-bg: #f1f1ee;
  --inbox-border: #d2d2cd;
  --inbox-hover: #f5f5f2;
  --section: #4a4a46;
  --section-line: #cfcfca;
  --nav-hover: #e2e2de;
  --ease: cubic-bezier(.25, .8, .3, 1);
  --fast: 120ms;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body[data-view="analyzer"] { height: 100%; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--dot); outline-offset: 2px; border-radius: 8px; }

[hidden] { display: none !important; }

.analyzer {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  width: 100%;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  gap: 10px;
  margin: 0 auto;
}

/* ---- chord symbols ---- */
.ch { white-space: nowrap; letter-spacing: -0.01em; }
.ch .sub { font-size: 0.6em; }
.ch .sup { font-size: 0.54em; position: relative; top: -0.8em; margin-left: 0.04em; }
.ch .sub + .sup, .ch .sup + .sub { margin-left: 0.03em; }

/* ---- header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; }
.top .back { margin-left: -8px; align-self: center; }
.current { margin: 0; font-weight: 400; font-size: 38px; line-height: 1; padding: 0.28em 0 0.04em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.current .hint { font-size: 18px; color: var(--faint); }
.tuning-btn { display: grid; justify-items: center; gap: 4px; padding: 8px 12px; border-radius: 12px; transition: background var(--fast) ease; flex: none; }
.tuning-btn:hover { background: var(--panel); }
.tn { font-weight: 700; letter-spacing: 0.06em; word-spacing: 0.1em; font-size: 17px; color: var(--strong); margin-right: -0.06em; white-space: nowrap; }
.tname { font-size: 13px; color: var(--muted); }

/* ---- stage ---- */
.stage { display: grid; min-height: 0; gap: 12px; }
.board { min-height: 0; min-width: 0; position: relative; }
.fb { position: absolute; inset: 0; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

body.v .stage { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
body.h .analyzer { max-width: 1320px; grid-template-rows: auto auto auto; align-content: start; gap: 14px; }
body.h .stage { grid-template-rows: clamp(190px, 48vh, 400px) auto; }
body.h .current { font-size: 44px; }
@media (max-height: 480px) {
  body.h .analyzer { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); }
  body.h .top { min-height: 48px; }
  body.h .current { font-size: 32px; }
  body.h .cands button { padding: 10px 12px 6px; font-size: 22px; }
}

/* ---- fretboard ---- */
.fb .wires line { stroke: var(--line); stroke-width: 1.5; }
.fb .nut { stroke: var(--nut); stroke-width: 5; stroke-linecap: round; }
.fb .strings line { stroke: var(--string); }
.fb .inlay circle { fill: var(--inlay); }
.fb .nums text { fill: var(--faint); font-size: 12px; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.fb .mark { opacity: 0; transition: opacity var(--fast) ease; }
.fb .mark.on { opacity: 1; }
.fb .mark path { stroke: var(--x); stroke-width: 3; stroke-linecap: round; fill: none; }
.fb .secondary text { fill: var(--dot-text); text-anchor: middle; dominant-baseline: central; font-weight: 500; }
.fb .secondary text.root { fill: var(--root-text); }
.fb .ghost { fill: var(--dot); opacity: 0; transition: opacity var(--fast) ease; pointer-events: none; }
.fb .ghost.on { opacity: 0.28; }
.fb .dot { opacity: 0; pointer-events: none; transition: transform 150ms var(--ease), opacity var(--fast) ease; }
.fb .dot.on { opacity: 1; }
.fb .dot.jump { transition: opacity var(--fast) ease; }
.fb .dot .body { transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: transform 160ms cubic-bezier(.3, 1.45, .5, 1); }
.fb .dot.on .body { transform: scale(1); }
.fb .disc { fill: var(--dot); stroke: var(--dot-edge); stroke-width: 1.5; transition: opacity var(--fast) ease; }
.fb .square { fill: var(--root); stroke: var(--root-edge); stroke-width: 1.5; opacity: 0; transition: opacity var(--fast) ease; }
.fb .dot.root .disc { opacity: 0; }
.fb .dot.root .square { opacity: 1; }
.fb .label { fill: #fff; text-anchor: middle; dominant-baseline: central; font-weight: 600; transition: fill var(--fast) ease; }


/* ---- alternatives ---- */
.side { min-height: 0; display: flex; flex-direction: column; }
.cands { list-style: none; margin: 0; padding: 6px; background: var(--panel); border-radius: 14px; overflow: auto; flex: 1; scrollbar-width: none; }
.cands::-webkit-scrollbar { display: none; }
.cands li { transition: opacity 140ms ease, transform 140ms var(--ease); }
.cands li.enter { opacity: 0; transform: translateY(3px); }
.cands button { display: block; width: 100%; text-align: left; padding: 14px 12px 10px; border-radius: 10px; font-size: 25px; line-height: 1; color: var(--muted); transition: color var(--fast) ease, background var(--fast) ease; }
.cands button:hover { background: var(--panel-2); }
.cands button[aria-pressed="true"] { color: var(--text); }
.cands.empty { background: transparent; }
.cands button.long { font-size: 21px; }
.cands button.longer { font-size: 18px; }
.current.long { font-size: 32px; }
.current.longer { font-size: 26px; }

body.h .cands { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; flex: none; }
body.h .cands button { width: auto; padding: 16px 16px 10px; font-size: 27px; }

/* ---- bottom bar ---- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.seg { display: inline-flex; background: var(--panel); border-radius: 9px; padding: 2px; flex: none; }
.seg button { padding: 6px 9px; border-radius: 7px; font-size: 13px; color: var(--muted); transition: background var(--fast) ease, color var(--fast) ease; }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.moves { display: flex; gap: 4px; }
.move { display: grid; justify-items: center; gap: 2px; padding: 4px 10px; border-radius: 10px; font-size: 12px; color: var(--strong); transition: background var(--fast) ease, opacity var(--fast) ease; }
.move:hover:not(:disabled) { background: var(--panel); }
.move:disabled, .clear:disabled { opacity: 0.3; }
.move svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease); }
body.v .move.higher svg { transform: rotate(180deg); }
body.h .move.lower svg { transform: rotate(-90deg); }
body.h .move.higher svg { transform: rotate(90deg); }
.clear { padding: 9px 12px; border-radius: 10px; font-size: 15px; color: var(--muted); transition: background var(--fast) ease, color var(--fast) ease, opacity var(--fast) ease; }
.clear:hover:not(:disabled) { background: var(--panel); color: var(--text); }

body.h .bar { justify-content: flex-start; gap: 18px; }
body.h .move { grid-auto-flow: column; align-items: center; gap: 4px; padding: 8px 12px; font-size: 14px; }
body.h .move svg { width: 20px; height: 20px; }
body.h .clear { margin-left: auto; }

@media (max-width: 370px) {
  .seg button { padding: 8px 9px; font-size: 14px; }
  .move { padding: 4px 6px; }
}

/* ---- sheet ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 10; visibility: hidden; transition: visibility 0s linear 180ms; }
.sheet-wrap.open { visibility: visible; transition: none; }
.scrim { position: absolute; inset: 0; background: rgba(20, 20, 18, 0.28); opacity: 0; transition: opacity 160ms ease; }
.sheet-wrap.open .scrim { opacity: 1; }
.sheet {
  position: absolute; left: 50%; bottom: 0; width: min(520px, 100%);
  max-height: min(86dvh, 760px); display: flex; flex-direction: column;
  background: var(--panel); border-radius: 18px 18px 0 0; box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translate(-50%, 24px); opacity: 0;
  transition: transform 180ms var(--ease), opacity 140ms ease;
}
.sheet-wrap.open .sheet { transform: translate(-50%, 0); opacity: 1; }
body.h .sheet { bottom: auto; top: 50%; border-radius: 18px; transform: translate(-50%, calc(-50% + 16px)); }
body.h .sheet-wrap.open .sheet { transform: translate(-50%, -50%); }
.sheet header { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 10px 10px 6px; }
.sheet h2 { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 600; }
.sheet header .back { grid-column: 1; grid-row: 1; justify-self: start; }
.sheet header #sheetClose { grid-column: 3; grid-row: 1; justify-self: end; }
.sheet-body { overflow: auto; padding: 6px 14px 16px; }
.ghost-btn { padding: 8px 12px; border-radius: 9px; color: var(--dot-text); font-size: 15px; transition: background var(--fast) ease; }
.ghost-btn:hover { background: var(--panel-2); }
.ghost-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }

.tunings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tunings li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.tuning-pick { display: grid; justify-items: center; gap: 4px; padding: 11px 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1.5px solid transparent; transition: border-color var(--fast) ease, background var(--fast) ease; }
.tuning-pick:hover { background: var(--tuning-hover); }
.tuning-pick[aria-pressed="true"] { border-color: var(--dot); }
.tuning-pick .tn { font-size: 18px; }
.add-btn { display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--muted); transition: color var(--fast) ease, border-color var(--fast) ease; }
.add-btn:hover { color: var(--text); border-color: var(--muted); }

.name-input { width: 100%; font: inherit; font-size: 17px; color: var(--text); background: var(--input-bg); border: 1.5px solid var(--hair); border-radius: 11px; padding: 11px 12px; outline: none; }
.name-input:focus { border-color: var(--dot); }
.string-edit { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.string-edit li { display: grid; grid-template-columns: 1fr 44px 64px 44px; align-items: center; gap: 6px; background: var(--panel-2); border-radius: 11px; padding: 5px 6px 5px 12px; }
.string-edit .sn { color: var(--muted); font-size: 14px; }
.string-edit .nv { text-align: center; font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.step { height: 38px; border-radius: 9px; background: var(--step); font-size: 20px; transition: background var(--fast) ease, opacity var(--fast) ease; }
.step:hover:not(:disabled) { background: var(--step-hover); }
.step:disabled { opacity: 0.3; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.primary { padding: 11px 18px; border-radius: 11px; background: var(--dot); color: #fff; font-weight: 600; transition: background var(--fast) ease; }
.primary:hover { background: var(--dot-edge); }
.danger { padding: 11px 16px; border-radius: 11px; color: #d6332a; margin-right: auto; transition: background var(--fast) ease; }
.danger:hover { background: var(--panel-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ---- back buttons ---- */
.back { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; }
.back svg, .icon-only svg, .fab svg, .nav svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.back svg { width: 24px; height: 24px; }

/* ---- pages (songs, song) ---- */
.page { max-width: 980px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.page-top { display: flex; align-items: center; gap: 8px; min-height: 64px; margin-bottom: 10px; }
.page-top .back { margin-left: -8px; }
.title-wrap { flex: 1; min-width: 0; }
.page-title { margin: 0; flex: 1; font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.page-title.editable { cursor: text; border-radius: 8px; transition: background var(--fast) ease; }
.page-title.editable:hover { background: var(--tint); }
.page-meta { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.page-top .tuning-btn .tn { font-size: 16px; }
.empty-note { color: var(--muted); text-align: center; margin: 48px 0; font-size: 15px; }
.inline-input { width: 100%; font: inherit; color: inherit; letter-spacing: inherit; background: var(--input-bg); border: 1.5px solid var(--dot); border-radius: 8px; padding: 0 6px; margin: -1.5px -7.5px; outline: none; }
.page-foot { display: flex; justify-content: center; margin-top: 36px; }
.page-foot .danger { margin: 0; }

.fab {
  position: fixed; z-index: 5;
  right: max(18px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dot); color: #fff;
  box-shadow: 0 6px 18px rgba(229, 95, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 140ms var(--ease), background var(--fast) ease;
}
.fab:hover { background: var(--dot-edge); }
.fab:active { transform: scale(0.94); }
.fab svg { width: 28px; height: 28px; stroke-width: 2.6; }
@media (min-width: 1040px) { .fab { right: calc(50% - 490px + 14px); } }

/* song list */
.song-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.song-row { display: grid; grid-template-columns: 1fr auto; align-items: center; background: var(--panel); border-radius: 14px; transition: background var(--fast) ease, transform 120ms var(--ease); }
.song-row:hover { background: var(--hover); }
.song-main { display: grid; gap: 4px; padding: 14px 4px 14px 16px; cursor: pointer; min-width: 0; outline: none; border-radius: 14px; }
.song-main:focus-visible { box-shadow: inset 0 0 0 2px var(--dot); }
.song-name { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-meta { font-size: 13px; color: var(--muted); }
.song-preview { font-size: 14px; color: var(--preview); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.icon-only { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 6px; border-radius: 10px; color: var(--muted); transition: background var(--fast) ease, color var(--fast) ease; }
.icon-only:hover { background: var(--panel-2); color: var(--text); }
.icon-only svg { width: 20px; height: 20px; stroke-width: 2; }

/* chord cards */
.chord-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .chord-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } }
.chord-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  background: var(--panel); border-radius: 18px; padding: 14px 10px 8px; text-align: left;
  transition: transform 140ms var(--ease), box-shadow 140ms ease, background var(--fast) ease;
}
.chord-card:hover { background: var(--hover); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); }
.chord-card:active { transform: scale(0.98); }
.card-name { font-size: 26px; line-height: 1; padding: 6px 6px 0; min-height: 40px; white-space: nowrap; overflow: hidden; }
.card-name.long { font-size: 21px; }
.card-name.longer { font-size: 17px; }
.card-num { position: absolute; top: 10px; right: 14px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.diagram { display: block; width: 100%; height: auto; margin-top: 4px; }
.diagram .d-fret { stroke: var(--line); stroke-width: 1.2; }
.diagram .d-top { stroke: var(--dtop); stroke-width: 1.4; }
.diagram .d-nut { stroke: var(--nut); stroke-width: 4; stroke-linecap: round; }
.diagram .d-string { stroke: var(--string); }
.diagram .d-num { fill: var(--faint); font-size: 9px; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.diagram .d-x { stroke: var(--x); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.diagram .d-open { fill: var(--dot-text); font-size: 10.5px; font-weight: 650; text-anchor: middle; dominant-baseline: central; }
.diagram .d-open.root { fill: var(--root-text); }
.diagram .d-dot { fill: var(--dot); }
.diagram .d-root { fill: var(--root); }
.diagram .d-label { fill: #fff; font-weight: 650; text-anchor: middle; dominant-baseline: central; }

/* ---- song bar in the analyzer ---- */
.songbar { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; background: var(--panel); border-radius: 14px; padding: 5px; }
.songbar-mid { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.pos { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav { position: relative; overflow: hidden; height: 46px; border-radius: 10px; display: grid; place-items: center; color: var(--text); transition: background var(--fast) ease, opacity var(--fast) ease; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.nav svg { width: 26px; height: 26px; }
.nav:hover { background: var(--panel-2); }
.nav.dim { opacity: 0.28; }
.nav.add { color: var(--dot-text); }
.nav::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--dot); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 120ms ease, opacity 120ms ease; }
.nav.holding::after { transform: scaleX(1); opacity: 1; transition: transform 480ms linear, opacity 80ms ease; }
.save { min-width: 92px; padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: 15px; background: var(--dot); color: #fff; transition: background var(--fast) ease, color var(--fast) ease, opacity var(--fast) ease; }
.save:hover:not(:disabled) { background: var(--dot-edge); }
.save:disabled { background: var(--save-off-bg); color: var(--save-off-fg); }
.save.saved { background: var(--root); color: #fff; }
.songbar .icon-only { margin: 0; width: 40px; height: 40px; }
body.h .songbar { max-width: 560px; justify-self: start; width: 100%; }

/* ---- sign in ---- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(360px, 100%); display: grid; gap: 12px; background: var(--panel); border-radius: 20px; padding: 26px 22px 18px; }
.login-card h1 { margin: 0; font-size: 28px; letter-spacing: -0.02em; }
.login-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.login-card .primary { margin-top: 4px; }
.err { color: #d6332a !important; min-height: 1.2em; font-size: 14px !important; }

/* ---- dialog ---- */
.dialog-wrap { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; visibility: hidden; transition: visibility 0s linear 160ms; }
.dialog-wrap.open { visibility: visible; transition: none; }
.dialog-wrap .scrim { position: absolute; inset: 0; background: rgba(20, 20, 18, 0.28); opacity: 0; transition: opacity 140ms ease; }
.dialog-wrap.open .scrim { opacity: 1; }
.dialog { position: relative; width: min(380px, 100%); background: var(--panel); border-radius: 18px; padding: 20px 18px 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); transform: scale(0.96); opacity: 0; transition: transform 160ms var(--ease), opacity 120ms ease; }
.dialog-wrap.open .dialog { transform: scale(1); opacity: 1; }
.dialog h3 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.dialog p { margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.dialog-buttons button { padding: 10px 14px; border-radius: 10px; font-size: 15px; transition: background var(--fast) ease; }
.dialog-buttons .plain:hover { background: var(--panel-2); }
.danger-fill { background: #d6332a; color: #fff; font-weight: 600; }
.danger-fill:hover { background: #bf2a22; }

/* ---- toast ---- */
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); max-width: calc(100% - 32px); background: #2a2a28; color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* views fade in */
.view { animation: view-in 140ms ease; }
@keyframes view-in { from { opacity: 0; } }

/* ---- analyzer header: a small bar (back, song, tuning), the chord name on its own line ---- */
.a-top { min-width: 0; }
.a-bar { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 44px; }
.a-bar .back { margin-left: -8px; }
.a-context { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-bar .tuning-btn { padding: 5px 8px; gap: 1px; }
.a-bar .tuning-btn .tn { font-size: 14px; }
.a-bar .tuning-btn .tname { font-size: 11px; }
body.song-mode .a-bar .tuning-btn { cursor: default; }
body.song-mode .a-bar .tuning-btn:hover { background: none; }
.bar { gap: 6px; }
.bar .clear { padding: 8px 10px; }
.scratchbar { display: flex; justify-content: center; padding: 2px 0 0; }
.scratchbar .save { min-width: 180px; }
body.h .scratchbar { justify-content: flex-start; }

/* ---- song page header: title row, then meta, then the tuning on its own row ---- */
.song-head { display: grid; gap: 6px; margin-bottom: 16px; }
.song-head-row { display: flex; align-items: center; gap: 4px; min-height: 48px; }
.song-head-row .back { margin-left: -8px; }
.song-title { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; padding: 2px 4px; border-radius: 8px; }
.song-title.editable { cursor: text; transition: background var(--fast) ease; }
.song-title.editable:hover { background: var(--tint); }
.song-head .page-meta { margin: 0 0 4px 36px; }
.tuning-chip { justify-self: start; display: inline-flex; align-items: baseline; gap: 10px; margin-left: 32px; padding: 7px 12px; border-radius: 10px; background: var(--panel); transition: background var(--fast) ease; max-width: calc(100% - 32px); }
.tuning-chip:hover { background: var(--hover); }
.tuning-chip .tn { font-size: 15px; }
.tuning-chip .tname { font-size: 13px; }

/* ---- songs list: the Unsorted folder ---- */
.song-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.song-name-row .tray { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--dot-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.inbox-row { grid-template-columns: 1fr; background: var(--inbox-bg); border: 1.5px dashed var(--inbox-border); }
.inbox-row:hover { background: var(--inbox-hover); }
.song-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.song-row.lifted { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

/* ---- sections in the chord grid ---- */
.section-item { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 4px 2px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; border-radius: 10px; transition: background var(--fast) ease, transform 140ms var(--ease); }
.section-name { font-size: 15px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--section); cursor: text; padding: 2px 4px; border-radius: 6px; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.section-name:hover { background: var(--tint); }
.section-name .inline-input { text-transform: none; font-weight: 600; min-width: 160px; }
.section-line { flex: 1; height: 1.5px; background: var(--section-line); border-radius: 1px; }
.grid-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.add-section { padding: 9px 16px; border-radius: 10px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 14px; transition: color var(--fast) ease, border-color var(--fast) ease; }
.add-section:hover { color: var(--text); border-color: var(--muted); }
.grid-hint { font-size: 12px; color: var(--faint); text-align: center; }
.card-tuning { font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; }

/* ---- drag and drop ---- */
.chord-grid { position: relative; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chord-card.lifted, .section-item.lifted { transform: scale(1.04); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); z-index: 2; }
.drag-placeholder { opacity: 0.25; }
.drag-ghost { position: fixed !important; z-index: 50; pointer-events: none; margin: 0 !important; transform: scale(1.04) rotate(-1deg); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2); opacity: 0.96; transition: none !important; }
.drag-ghost.section-item { background: var(--panel); padding: 10px 12px; }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* ---- action menu (in the dialog box) ---- */
.dialog-wrap.as-menu .dialog { padding: 8px; width: min(400px, 100%); }
.dialog-wrap.as-menu h3 { padding: 10px 12px 6px; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-items { display: grid; gap: 2px; max-height: min(60vh, 520px); overflow: auto; }
.menu-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 13px 12px; border-radius: 11px; font-size: 16px; transition: background var(--fast) ease; }
.menu-item:hover { background: var(--panel-2); }
.menu-item.danger { color: #d6332a; }
.menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-hint { flex: none; font-size: 13px; color: var(--muted); }
.menu-cancel { justify-content: center; color: var(--muted); margin-top: 4px; border-top: 1px solid var(--hair); border-radius: 0 0 11px 11px; }
@media (max-width: 600px) {
  .dialog-wrap.as-menu { place-items: end center; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
}

/* ---- 0.3.1: controls live under the chord names; no big name above the board ---- */
.a-top { padding-bottom: 4px; }
.side { gap: 8px; }
.cands li.hint { padding: 16px 12px; color: var(--faint); font-size: 15px; }
.cands.empty { background: var(--panel); }
.side .bar { flex: none; padding: 0; }
body.v .side .bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.v .side .seg { grid-column: 1 / -1; display: flex; }
body.v .side .seg button { flex: 1; padding: 8px 4px; }
body.v .side .moves { display: contents; }
body.v .side .move { grid-auto-flow: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: var(--panel); border-radius: 10px; font-size: 13px; }
body.v .side .move svg { width: 18px; height: 18px; }
body.v .side .clear { grid-column: 1 / -1; padding: 8px; background: var(--panel); border-radius: 10px; font-size: 13px; }
body.h .side .bar { justify-content: flex-start; gap: 14px; padding-top: 2px; }

/* bottom bar: one even row */
.songbar { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; }
.songbar .nav { width: 48px; height: 44px; flex: none; background: var(--panel-2); border-radius: 12px; }
.songbar .nav:hover { background: var(--nav-hover); }
.songbar .pos { flex: none; min-width: 58px; text-align: center; font-size: 13px; }
.songbar .save { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; }
.songbar .icon-only { flex: none; width: 44px; height: 44px; border-radius: 12px; }
body.h .songbar { max-width: 520px; }

/* ---- dark mode: a bright workspace grey that still carries white text ---- */
:root[data-theme="dark"] {
  --bg: #55575b;
  --panel: #636569;
  --panel-2: #6e7074;
  --hair: #7a7c80;
  --line: #808286;
  --string: #d9d9d5;
  --nut: #f2f2ee;
  --text: #ffffff;
  --muted: #d0d0cc;
  --faint: #acaeaa;
  --dot: #ff6d00;
  --dot-edge: #e55f00;
  --dot-text: #ffa04a;
  --root: #14b84a;
  --root-edge: #0f9a3c;
  --root-text: #6ee597;
  --x: #c4c5c1;
  --inlay: #6c6e72;
  --strong: #f3f3f0;
  --hover: #6a6c70;
  --tint: rgba(255, 255, 255, 0.08);
  --input-bg: #4c4e52;
  --seg-on: #85878b;
  --step: #7a7c80;
  --step-hover: #86888c;
  --tuning-hover: #777a7e;
  --preview: #e2e2de;
  --dtop: #a3a5a9;
  --save-off-bg: #74767a;
  --save-off-fg: #b9bbb7;
  --inbox-bg: #5d5f63;
  --inbox-border: #85878b;
  --inbox-hover: #626468;
  --section: #f0f0ec;
  --section-line: #7e8084;
  --nav-hover: #7a7c80;
  color-scheme: dark;
}
:root[data-theme="dark"] .scrim, :root[data-theme="dark"] .dialog-wrap .scrim { background: rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .toast { background: #2c2d30; }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* ---- songs header: dark mode and hand switches ---- */
.page-tools { display: flex; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--panel); font-size: 13px; color: var(--strong); transition: background var(--fast) ease; white-space: nowrap; }
.pill:hover { background: var(--hover); }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- floating Analyzer button, bottom left ---- */
.fab-left {
  position: fixed; z-index: 5;
  left: max(18px, calc(env(safe-area-inset-left) + 14px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  height: 60px; padding: 0 18px 0 16px; border-radius: 30px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); color: var(--strong); font-weight: 600; font-size: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 140ms var(--ease), background var(--fast) ease;
}
.fab-left:hover { background: var(--hover); }
.fab-left:active { transform: scale(0.95); }
.fab-left svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1040px) { .fab-left { left: calc(50% - 490px + 14px); } }

/* ---- left-hand mode: the analyzer mirrored ---- */
body.lefty.v .stage { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
body.lefty.v .stage .board { order: 2; }
body.lefty.h .move.lower svg { transform: rotate(90deg); }
body.lefty.h .move.higher svg { transform: rotate(-90deg); }

/* ==== 0.4 polish: one radius scale, hairline depth, calmer type, tactile buttons ==== */
:root {
  --r-s: 10px; --r-m: 13px; --r-l: 18px; --r-xl: 22px;
  --board: #f2f2f0;
  --selected: #ffffff;
  --edge: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05);
  --lift: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.05);
  --float: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] {
  --board: #5d5f63;
  --selected: #727478;
  --edge: 0 0 0 1px rgba(255, 255, 255, 0.045), 0 1px 2px rgba(0, 0, 0, 0.2);
  --lift: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
  --float: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}
body { font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; }

/* tactile press on every control */
.pill, .seg button, .move, .clear, .save, .nav, .icon-only, .menu-item, .tuning-chip, .tuning-btn,
.add-section, .ghost-btn, .primary, .danger, .step, .tuning-pick, .dialog-buttons button, .cands button {
  transition: transform 110ms var(--ease), background var(--fast) ease, color var(--fast) ease, box-shadow var(--fast) ease, opacity var(--fast) ease;
}
.pill:active, .seg button:active, .move:active:not(:disabled), .clear:active:not(:disabled), .save:active:not(:disabled),
.nav:active, .icon-only:active, .menu-item:active, .tuning-chip:active, .add-section:active, .ghost-btn:active,
.primary:active, .step:active:not(:disabled), .tuning-pick:active, .dialog-buttons button:active, .cands button:active { transform: scale(0.965); }

/* ---- fretboard ---- */
.fb .board-face { fill: var(--board); }
.fb .wires line { stroke: var(--line); stroke-width: 1.15; }
.fb .nut { stroke-width: 6; }
.fb .inlay circle { fill: var(--inlay); }
.fb .nums text { font-size: 11px; font-weight: 500; transition: fill var(--fast) ease; }
.fb .nums text.on { fill: var(--strong); font-weight: 700; }
.fb .dot .body { filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, 0.22)); }
.fb .disc { stroke-width: 1.2; }
.fb .square { stroke-width: 1.2; }
.fb .secondary text { font-weight: 600; letter-spacing: -0.01em; }

/* ---- analyzer frame ---- */
.analyzer { gap: 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.a-bar { min-height: 48px; }
.a-context { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: -0.005em; }
.a-bar .tuning-btn { border-radius: var(--r-s); }
.stage { gap: 14px; }

.cands { padding: 6px; border-radius: var(--r-l); box-shadow: var(--edge); }
.cands li + li { margin-top: 2px; }
.cands button { padding: 13px 14px 11px; border-radius: var(--r-m); font-size: 24px; letter-spacing: -0.015em; }
.cands button[aria-pressed="true"] { background: var(--selected); box-shadow: var(--edge); }
.cands button:hover:not([aria-pressed="true"]) { background: var(--panel-2); }
body.h .cands { padding: 6px; gap: 4px; }
body.h .cands button { padding: 14px 16px 10px; }

.side { gap: 10px; }
body.v .side .bar { gap: 8px; }
body.v .side .seg { padding: 3px; border-radius: var(--r-m); box-shadow: var(--edge); }
body.v .side .seg button { border-radius: var(--r-s); padding: 9px 4px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--selected); box-shadow: var(--edge); }
body.v .side .move, body.v .side .clear { min-height: 40px; border-radius: var(--r-m); box-shadow: var(--edge); font-weight: 500; }
body.v .side .move:hover:not(:disabled), body.v .side .clear:hover:not(:disabled) { background: var(--hover); }
body.v .side .move:disabled, body.v .side .clear:disabled { opacity: 0.42; box-shadow: none; }

.songbar { padding: 6px; gap: 8px; border-radius: var(--r-xl); box-shadow: var(--edge); }
.songbar .nav { border-radius: var(--r-m); background: var(--panel-2); }
.songbar .nav.dim { opacity: 0.35; }
.songbar .pos { font-weight: 500; color: var(--muted); }
.songbar .save { border-radius: var(--r-m); letter-spacing: 0.01em; }
.save:not(:disabled) { box-shadow: 0 2px 8px rgba(229, 95, 0, 0.28); }
.save.saved { box-shadow: 0 2px 8px rgba(15, 154, 60, 0.28); }
.scratchbar .save { height: 46px; border-radius: var(--r-m); }

/* ---- pages ---- */
.page { padding-top: max(18px, env(safe-area-inset-top)); }
.page-top { margin-bottom: 14px; }
.page-title { font-size: 32px; font-weight: 720; letter-spacing: -0.028em; }
.pill { box-shadow: var(--edge); font-weight: 500; }

.song-list { gap: 10px; }
.song-row { border-radius: var(--r-l); box-shadow: var(--edge); transition: background var(--fast) ease, box-shadow 160ms ease, transform 140ms var(--ease); }
.song-row:hover { box-shadow: var(--lift); }
.song-main { padding: 16px 6px 16px 18px; gap: 5px; border-radius: var(--r-l); }
.song-name { font-size: 17.5px; font-weight: 650; letter-spacing: -0.012em; }
.song-meta { font-size: 13px; }
.song-preview { font-size: 14px; margin-top: 1px; }
.inbox-row { box-shadow: none; }
.inbox-row:hover { box-shadow: none; }

.song-head { gap: 8px; margin-bottom: 20px; }
.song-title { font-size: 25px; font-weight: 700; letter-spacing: -0.022em; }
.tuning-chip { border-radius: var(--r-m); box-shadow: var(--edge); padding: 8px 14px; }

.chord-grid { gap: 12px; }
.chord-card { border-radius: var(--r-xl); padding: 16px 12px 10px; box-shadow: var(--edge); transition: transform 160ms var(--ease), box-shadow 180ms ease, background var(--fast) ease; }
.chord-card:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.chord-card:active { transform: scale(0.98); }
.card-name { padding: 4px 6px 0; letter-spacing: -0.015em; }
.card-num { top: 14px; right: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.section-item { padding: 18px 6px 4px; }
.section-name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--muted); }
.section-line { height: 1px; }
.add-section { border-radius: var(--r-m); }

.fab { box-shadow: 0 8px 22px rgba(229, 95, 0, 0.34), 0 2px 5px rgba(0, 0, 0, 0.12); }
.fab-left { box-shadow: var(--float); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); background: color-mix(in srgb, var(--panel) 86%, transparent); }

/* ---- overlays: soft blur behind, rounder and deeper in front ---- */
.scrim, .dialog-wrap .scrim { -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1); }
.sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--float); }
body.h .sheet { border-radius: var(--r-xl); }
.dialog { border-radius: var(--r-xl); box-shadow: var(--float); }
.menu-item { border-radius: var(--r-m); }
.tuning-pick { border-radius: var(--r-m); }
.toast { background: rgba(32, 32, 30, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--r-m); box-shadow: var(--float); font-weight: 500; }
.login-card { border-radius: var(--r-xl); box-shadow: var(--lift); padding: 28px 24px 20px; }
/* a held card or row lifts, whatever hover/press say */
.chord-card.lifted, .section-item.lifted, .song-row.lifted { transform: scale(1.04) !important; box-shadow: var(--float) !important; }
/* meta line and tuning chip start where the title's text starts */
.song-head .page-meta { margin-left: 40px; }
.tuning-chip { margin-left: 40px; max-width: calc(100% - 40px); }

/* ---- bottom bar without a background; Save in the exact middle ---- */
.songbar { display: grid; grid-template-columns: 48px 1fr minmax(150px, 1.5fr) 1fr 48px; align-items: center; gap: 8px; background: none; box-shadow: none; padding: 2px 0 0; border-radius: 0; }
.songbar .pos { justify-self: center; }
.songbar .icon-only { justify-self: center; }
.songbar .save { width: 100%; }
.songbar .nav { box-shadow: var(--edge); background: var(--panel); }
body.h .songbar { max-width: 560px; }
.scratchbar { display: grid; grid-template-columns: 1fr minmax(150px, auto) 1fr; align-items: center; gap: 10px; padding-top: 2px; }
.scratchbar .save { min-width: 150px; }
.to-song { justify-self: start; padding: 10px 12px; border-radius: var(--r-m); color: var(--dot-text); font-size: 14px; font-weight: 500; transition: background var(--fast) ease, opacity var(--fast) ease, transform 110ms var(--ease); }
.to-song:hover:not(:disabled) { background: var(--panel); }
.to-song:active:not(:disabled) { transform: scale(0.965); }
.to-song:disabled { opacity: 0.35; }
body.h .scratchbar { max-width: 560px; }
.songbar { grid-template-columns: 48px minmax(0, 1fr) minmax(118px, 1.4fr) minmax(0, 1fr) 48px; gap: 6px; }
.songbar .pos { min-width: 0; white-space: nowrap; }
.scratchbar { grid-template-columns: minmax(0, 1fr) minmax(140px, auto) minmax(0, 1fr); }
.to-song { white-space: nowrap; }
body[data-view="analyzer"] .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }