:root {
  /* Fender tweed amp — warm woven tan, oxblood grille, rosewood neck */
  --bg: #b08a4e;            /* tweed cloth tan */
  --surface: #ddc794;       /* aged control-panel cream (warm, not white) */
  --surface-2: #d0b67e;     /* deeper panel */
  --input: #ecdcb1;         /* lacquered cream field */
  --border: #8a6c36;        /* tweed brown */
  --border-dark: #6a5026;   /* dark brown edge */
  --ink: #281a0c;           /* dark walnut text */
  --muted: #6a5430;         /* brown taupe */
  --oxblood: #7c2419;       /* deep oxblood (grille cloth) */
  --oxblood-2: #97301f;     /* hover */
  --burnt: #b85e16;         /* burnt orange */
  --brass: #ad8a4f;         /* brass trim */
  --panel-dark: #2c2014;    /* amp chassis / faceplate */
  --wood: #3a2613;          /* rosewood fretboard */

  /* note roles — vivid against the dark wood neck */
  --role-R: #46c46e;   /* green  — punchy on rosewood */
  --role-3: #f2b81c;   /* gold   */
  --role-5: #46a6ea;   /* blue   */
  --role-7: #b070e8;   /* purple */
  --role-T: #ff5fa0;   /* rose   */
  --role-A: #ef5640;   /* brick  */
  --role-o: #b6a585;   /* faded  */

  --accent: var(--oxblood);
  --on-accent: var(--on-accent);     /* text on accent-coloured buttons/chips */
}

/* ---- amp + acoustic themes (override the palette) ---- */
body[data-theme="blackface"] {
  --bg: #1a1c1b; --surface: #2a2d2c; --surface-2: #232524; --input: #313433;
  --border: #41464a; --border-dark: #565c60; --ink: #e7eae9; --muted: #99a0a0;
  --oxblood: #2fb6cc; --oxblood-2: #45c6da; --burnt: #8fd3df; --brass: #aeb5b8;
  --panel-dark: #0c0d0d; --on-accent: #07242b;
}
body[data-theme="marshall"] {
  --bg: #161410; --surface: #211e18; --surface-2: #1a1813; --input: #2a261d;
  --border: #5a4b28; --border-dark: #7a6730; --ink: #efe7d0; --muted: #a08f64;
  --oxblood: #d4af37; --oxblood-2: #e3c456; --burnt: #b8902a; --brass: #c9a94e;
  --panel-dark: #0b0a07; --on-accent: #1c1505;
}
body[data-theme="orange"] {
  --bg: #c05a14; --surface: #f3e9d6; --surface-2: #e9dcc2; --input: #f8f1e2;
  --border: #b6976a; --border-dark: #8a6a3c; --ink: #2a1b0d; --muted: #6e5436;
  --oxblood: #2c1b0d; --oxblood-2: #4a3219; --burnt: #c05a14; --brass: #8a6a3c;
  --panel-dark: #2a1b0d; --on-accent: #f3e9d6;
}
body[data-theme="vox"] {
  --bg: #b6a079; --surface: #efe7d2; --surface-2: #e4d8bd; --input: #f6efdd;
  --border: #9c7f50; --border-dark: #6f5430; --ink: #2a1d0e; --muted: #6b5436;
  --oxblood: #5a3a1c; --oxblood-2: #714826; --burnt: #b8902a; --brass: #c4a24b;
  --panel-dark: #2a1d0e; --on-accent: #f3ead4;
}
body[data-theme="acoustic"] {
  --bg: #e3d3ab; --surface: #f6efdb; --surface-2: #efe5c9; --input: #fbf5e6;
  --border: #c9ad7e; --border-dark: #a07f4c; --ink: #2c2113; --muted: #7a6238;
  --oxblood: #a86a24; --oxblood-2: #c07f30; --burnt: #c89048; --brass: #c2a062;
  --panel-dark: #5a3d22; --on-accent: #2c1f0d;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; max-width: 100%; }
body {
  color: var(--ink);
  font-family: 'Work Sans', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* woven tweed cloth */
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(45deg, rgba(40,24,8,.13) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(135deg, rgba(255,238,200,.11) 0 1px, transparent 1px 5px);
}
h1, h2, h3 { font-family: 'Oswald', sans-serif; font-weight: 600; margin: 0; }
.mono { font-family: 'Oswald', sans-serif; }
.label, .ctl > label, .bbx-label, .now-label, .pa-sub, .tc-role,
.sl-head, .kf-prog-label, .kf-pick-head, .insp-tip-label, .tb-sub, .transport .field label {
  font-family: 'Oswald', sans-serif !important; text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; font-weight: 500; color: var(--muted);
}

/* header — amp faceplate with tweed grille */
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel-dark);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px);
  border-bottom: 3px solid var(--brass);
  padding: 12px 20px; position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { color: var(--burnt); font-size: 20px; }
.brand-name {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: .08em; color: #f3e7cc;
}
.app-version { color: #b8a371; font-family: 'Oswald', sans-serif; letter-spacing: .1em; font-size: 12px; margin-left: auto; }
.readme-link {
  cursor: pointer; color: #f1e6cb; background: transparent;
  border: 1px solid var(--brass); font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 13px; border-radius: 4px; font-size: 12px;
}
.readme-link:hover { background: var(--burnt); border-color: var(--burnt); color: #fff; }

.main { max-width: 1000px; margin: 0 auto; padding: 22px 16px 64px; }

/* panels — amp-style cream plates with a brass top edge */
.controls, .playalong, .nowbar, .board-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brass);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px rgba(59,41,23,.10);
  margin-bottom: 16px;
}
.controls { display: flex; gap: 22px; flex-wrap: wrap; padding: 18px; }
.ctl { display: flex; flex-direction: column; gap: 9px; }
.ctl.grow { flex: 1 1 340px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

select, input[type=text], input[type=number] {
  background: var(--input); color: var(--ink);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 8px 10px; font-size: 14px; min-width: 0; font-family: 'Work Sans', sans-serif;
}
input[type=text] { flex: 1 1 220px; }
select:focus, input:focus { outline: none; border-color: var(--oxblood); box-shadow: 0 0 0 2px rgba(140,42,32,.15); }

/* segmented — like amp selector switches */
.seg { display: inline-flex; background: var(--input); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.seg button {
  background: transparent; color: var(--muted); border: none;
  padding: 8px 14px; font-size: 13px; cursor: pointer; border-right: 1px solid var(--border);
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em;
}
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--oxblood); color: var(--on-accent); font-weight: 600; }
.seg button:not(.active):hover { color: var(--ink); background: #f0e3c6; }
.seg button:disabled { opacity: .38; cursor: not-allowed; }
.seg button:disabled:hover { background: transparent; color: var(--muted); }

.btn {
  background: var(--input); color: var(--ink); border: 1px solid var(--border-dark);
  border-radius: 5px; padding: 8px 15px; cursor: pointer; font-size: 13px;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em;
}
.btn:hover { border-color: var(--oxblood); color: var(--oxblood); }
.btn.primary { background: var(--oxblood); color: var(--on-accent); border-color: var(--oxblood); }
.btn.primary:hover { background: var(--oxblood-2); color: #fff; }
.btn.ghost { background: transparent; }

.pane { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.hidden { display: none !important; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--input); color: var(--ink); border: 1px solid var(--border-dark);
  border-radius: 5px; padding: 7px 14px; font-size: 15px; cursor: pointer;
  font-family: 'Oswald', sans-serif; letter-spacing: .03em;
}
.chip.active { background: var(--oxblood); color: var(--on-accent); border-color: var(--oxblood); }
.prog-nav { justify-content: center; gap: 16px; }
.prog-pos { color: var(--muted); font-family: 'Oswald', sans-serif; min-width: 52px; text-align: center; }

/* transport */
.transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 10px 12px; }
.transport .field { display: flex; align-items: center; gap: 6px; }
.transport input[type=number] { width: 64px; }
.beat-dots { display: inline-flex; gap: 5px; }
.beat-dots .bd { width: 10px; height: 10px; border-radius: 50%; background: var(--border); border: 1px solid var(--border-dark); }
.beat-dots .bd.on { background: var(--burnt); border-color: var(--burnt); }
.beat-dots .bd.accent.on { background: var(--oxblood); border-color: var(--oxblood); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); cursor: pointer; }

/* box bar above the neck — fixed, wraps; only the neck below scrolls sideways */
.board-modes-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px dotted var(--border); }
.board-box-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.board-wrap { padding: 16px; }
.board-scroll { overflow-x: auto; }

/* play along */
.playalong { padding: 14px 18px; }
.pa-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.playalong h3 { font-size: 19px; text-transform: uppercase; letter-spacing: .04em; color: var(--oxblood); }
.pa-collapse { margin-left: auto; align-self: center; width: 28px; height: 28px; flex: none;
  border-radius: 6px; border: 1px solid var(--border-dark); background: transparent; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.pa-collapse:hover { color: var(--ink); border-color: var(--oxblood); }
.playalong.collapsed { padding-bottom: 14px; }
.playalong.collapsed .pa-head { margin-bottom: 0; }
.playalong.collapsed .pa-body { display: none; }
.pa-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pa-chip { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
  padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border-dark); color: var(--muted); background: transparent; cursor: pointer; }
.pa-chip.active { border-color: var(--oxblood); color: var(--on-accent); background: var(--oxblood); }
.launch-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.launch { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.launch .ic { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ic-spotify { background: #1db954; }
.ic-ytm { background: #ff0000; }
.ic-yt { background: #ff0000; border-radius: 50%; }
.ic-ug { background: var(--burnt); }
.pa-query { color: var(--muted); font-family: 'Oswald', sans-serif; letter-spacing: .04em; font-size: 12px; margin-top: 8px; }
.pa-query b { color: var(--ink); }

/* in-app YouTube mini-player — fixed to the bottom of the screen */
.yt-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--panel-dark); border-top: 3px solid var(--brass);
  padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -5px 18px rgba(0,0,0,.35); }
.yt-mini { display: flex; align-items: center; gap: 8px; max-width: 1000px; margin: 0 auto; }
.yt-frame-wrap { width: 110px; height: 62px; flex: none; border-radius: 4px; overflow: hidden; background: #000; }
#ytFrame, #ytFrame iframe { width: 110px; height: 62px; border: 0; display: block; }
.yt-panel.no-video .yt-frame-wrap { display: none; }
.yt-ctl { background: var(--input); border: 1px solid var(--border-dark); color: var(--ink); border-radius: 6px;
  min-width: 36px; height: 34px; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.yt-ctl:hover { border-color: var(--oxblood); }
.yt-play { background: var(--oxblood); color: var(--on-accent); border-color: var(--oxblood); min-width: 44px; font-size: 16px; }
.yt-title { flex: 1; min-width: 0; font-family: 'Work Sans', sans-serif; font-size: 13px; color: #ecdfc2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-open { text-decoration: none; color: var(--brass); font-size: 18px; padding: 0 4px; }
.yt-close { min-width: 30px; font-size: 18px; }
.yt-msg { max-width: 1000px; margin: 7px auto 0; font-family: 'Oswald', sans-serif; letter-spacing: .03em; font-size: 12px; color: #cbb78d; }
.yt-msg:empty { display: none; }
body.yt-open { padding-bottom: 92px; }

/* find key + result */
.keyfind #kfSong { flex: 1 1 200px; }
.keyfind #kfArtist { flex: 1 1 150px; }
.kf-result { margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--oxblood); border-radius: 5px; padding: 12px 14px; }
.kf-result.kf-miss { border-left-color: var(--muted); }
.kf-found { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kf-song { flex-basis: 100%; font-family: 'Oswald', sans-serif; letter-spacing: .04em; font-size: 13px; color: var(--muted); }
.kf-key { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--oxblood); letter-spacing: .03em; }
.kf-bpm { font-family: 'Oswald', sans-serif; font-size: 15px; letter-spacing: .05em; color: var(--ink); }
.kf-spin { color: var(--muted); font-family: 'Oswald', sans-serif; letter-spacing: .04em; font-size: 13px; }
.kf-prog { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--border-dark); }
.kf-prog-chords { font-family: 'Oswald', sans-serif; font-size: 17px; color: var(--ink); letter-spacing: .03em; }
.kf-loadprog { margin-left: auto; }
.kf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* shortlist */
.kf-pick-head { margin-bottom: 8px; }
.kf-cand { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  background: var(--input); color: var(--ink); border: 1px solid var(--border-dark); border-radius: 5px;
  padding: 9px 12px; margin-bottom: 6px; cursor: pointer; }
.kf-cand:hover { border-color: var(--oxblood); }
.kf-cand-title { font-size: 14.5px; font-weight: 600; }
.kf-cand-artist { font-family: 'Oswald', sans-serif; letter-spacing: .04em; font-size: 12px; color: var(--muted); }

/* now playing */
.nowbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; }
.now-chord { display: flex; align-items: baseline; gap: 10px; }
.now-name { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 32px; color: var(--oxblood); text-transform: uppercase; letter-spacing: .03em; }
.tone-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.tone-chip { display: flex; flex-direction: column; align-items: center; border-radius: 5px; padding: 5px 12px; min-width: 56px; color: #201509; }
.tc-role { color: inherit; opacity: .85; }
.tc-notes { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; }

/* fretboard — dark rosewood neck */
.fretboard { width: 100%; min-width: 760px; display: block; }
.wood { fill: var(--wood); stroke: #261a0e; }
.fret { stroke: #b9b3a0; stroke-width: 2; }
.nut { stroke: #e8dcc0; stroke-width: 5; }
.string { stroke: #c9b683; }
.inlay { fill: #cdbf9c; }
.fretnum { fill: var(--muted); font-family: 'Oswald', sans-serif; font-size: 12px; text-anchor: middle; }
.strlabel { fill: var(--muted); font-family: 'Oswald', sans-serif; font-size: 13px; text-anchor: middle; font-weight: 600; }

.mark { stroke-width: 2; }
.mark-name { text-anchor: middle; font-size: 13px; font-weight: 700; pointer-events: none; font-family: 'Work Sans', sans-serif; }
.mk { cursor: default; }
.role-R { fill: var(--role-R); stroke: #3c7a45; }
.role-3 { fill: var(--role-3); stroke: #b27d10; }
.role-5 { fill: var(--role-5); stroke: #34739c; }
.role-7 { fill: var(--role-7); stroke: #7a4ba2; }
.role-T { fill: var(--role-T); stroke: #bb4571; }
.role-A { fill: #3a2418; stroke: var(--role-A); }
.role-o { fill: var(--role-o); stroke: #8f7d59; opacity: .6; }
.role-text-R, .role-text-3, .role-text-5, .role-text-T { fill: #201509; }
.role-text-7 { fill: #fff; }
.role-text-o { fill: #2b2017; }
.role-text-A { fill: var(--role-A); }
.reach { stroke-dasharray: 4 3; stroke-width: 2.5; fill-opacity: .3; }
.char-ring { fill: none; stroke: #fff6df; stroke-width: 2.6; opacity: .92; }
.cs-apply { color: var(--oxblood); text-decoration: none; white-space: nowrap; font-weight: 600; }
.cs-apply:hover { text-decoration: underline; }
.ghost { opacity: .92; }
.role-o.ghost { opacity: .4; }

/* coaching */
.coach { display: flex; flex-direction: column; gap: 8px; }
.tip { display: flex; gap: 10px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 5px; padding: 11px 14px; }
.tip-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--muted); }
.tip-home { border-left-color: var(--role-R); } .tip-home .tip-dot { background: var(--role-R); }
.tip-third { border-left-color: var(--role-3); } .tip-third .tip-dot { background: var(--role-3); }
.tip-fifth { border-left-color: var(--role-5); } .tip-fifth .tip-dot { background: var(--role-5); }
.tip-seventh { border-left-color: var(--role-7); } .tip-seventh .tip-dot { background: var(--role-7); }
.tip-spice { border-left-color: var(--role-T); } .tip-spice .tip-dot { background: var(--role-T); }
.tip-avoid { border-left-color: var(--role-A); } .tip-avoid .tip-dot { background: var(--role-A); }

.role-bg-R { background: var(--role-R); } .role-bg-3 { background: var(--role-3); }
.role-bg-5 { background: var(--role-5); } .role-bg-7 { background: var(--role-7); color: #fff; }
.role-bg-T { background: var(--role-T); }

.footer { text-align: center; color: var(--muted); font-family: 'Oswald', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; font-size: 12px; padding: 24px; border-top: 1px solid var(--border); margin-top: 36px; }

/* modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(43,32,23,.55);
  z-index: 20; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--surface); border: 1px solid var(--border-dark); border-top: 4px solid var(--brass);
  border-radius: 6px; max-width: 660px; width: 100%; max-height: 86vh; overflow: auto; box-shadow: 0 12px 40px rgba(43,32,23,.35); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface);
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--oxblood); }
.modal-close { cursor: pointer; font-size: 22px; color: var(--muted); line-height: 1; }
.modal-body { padding: 18px 22px; }
.modal-body h3 { margin: 18px 0 8px; color: var(--oxblood); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.modal-body h3:first-child { margin-top: 0; }
.legend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.legend-list .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -2px; }
.dot.role-R { background: var(--role-R); } .dot.role-3 { background: var(--role-3); }
.dot.role-5 { background: var(--role-5); } .dot.role-7 { background: var(--role-7); }
.dot.role-T { background: var(--role-T); }
.dot.role-A { background: #3a2418; border: 2px solid var(--role-A); width: 10px; height: 10px; }
.dot.role-o { background: var(--role-o); }
.dot.reach-dot { background: transparent; border: 2px dashed var(--oxblood); width: 10px; height: 10px; }
.fine { color: var(--muted); font-size: 12.5px; }

/* theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.theme-card { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-dark); border-radius: 8px; padding: 10px 12px; }
.theme-card:hover { border-color: var(--oxblood); }
.theme-card.active { border-color: var(--oxblood); box-shadow: inset 0 0 0 2px var(--oxblood); }
.theme-sw { position: relative; width: 46px; height: 32px; border-radius: 5px; flex: none;
  border: 1px solid rgba(0,0,0,.3); overflow: hidden; display: inline-block; }
.theme-sw-panel { position: absolute; left: 5px; top: 6px; width: 24px; height: 20px; border-radius: 3px; }
.theme-sw-acc { position: absolute; right: 5px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.theme-name { font-family: 'Oswald', sans-serif; letter-spacing: .04em; font-size: 14px; color: var(--ink); }

@media (max-width: 640px) {
  .topbar { gap: 7px; padding: 10px 12px; flex-wrap: wrap; }
  .brand-name { font-size: 17px; }
  .app-version { display: none; }
  .readme-link { padding: 4px 9px; font-size: 11px; margin-right: 6px !important; }
  .now-name { font-size: 26px; }
  .ctl.grow { flex-basis: 100%; }
}

/* suggest */
#suggestText { width: 100%; background: var(--input); color: var(--ink); border: 1px solid var(--border);
  border-radius: 5px; padding: 10px; font-family: 'Work Sans', sans-serif; font-size: 14px; resize: vertical; }
#suggestText:focus { outline: none; border-color: var(--oxblood); }
.suggest-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sl-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 9px 12px; font-size: 13.5px; }
.sl-when { display: block; font-family: 'Oswald', sans-serif; letter-spacing: .05em; font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }

/* tuner */
.tuner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.tuner-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  background: var(--input); color: var(--ink); border: 1px solid var(--border-dark); border-radius: 8px; padding: 16px 8px; }
.tuner-btn:hover { border-color: var(--oxblood); }
.tuner-btn.active { background: var(--oxblood); color: var(--on-accent); border-color: var(--oxblood); }
.tb-note { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px; line-height: 1; }
.tb-sub { color: inherit; opacity: .8; }
.tuner-now { margin-top: 14px; text-align: center; color: var(--muted); font-family: 'Oswald', sans-serif; letter-spacing: .05em; font-size: 13px; min-height: 18px; }
.tuner-now strong { color: var(--oxblood); }

/* inspiration */
.insp-result { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.insp-head { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; color: var(--oxblood); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.insp-basis { font-family: 'Oswald', sans-serif; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: .03em; font-weight: 400; }
.insp-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 9px 12px; }
.insp-tip-label { color: var(--oxblood) !important; min-width: 92px; flex: none; padding-top: 1px; }
.insp-songs ul { margin: 4px 0 0; padding-left: 18px; }
.insp-songs li { font-size: 13.5px; margin-bottom: 3px; }
.insp-song { background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font-family: 'Work Sans', sans-serif; font-size: 13.5px; color: var(--oxblood); }
.insp-song:hover { text-decoration: underline; }
.insp-ai { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 12px 14px; font-size: 14px; line-height: 1.55; }