:root {
  --bg:#ffffff;
  --text:#2f3136;
  --muted:#9aa0a6;
  --faint:#c4c7cd;
  --line:#ececf0;
  --panel:#f6f7f9;
  --accent:#5b7cfa;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mono); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100%;
}

/* ---------- Nav ---------- */
.nav { position:relative; display:flex; align-items:center; gap:40px;
       max-width:1120px; width:100%; margin:0 auto; padding:22px 30px; }
.nav .nav-account { margin-left:auto; }
.brand { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:700;
         letter-spacing:-0.02em; text-decoration:none; color:var(--text); }
.brand .logo { width:26px; height:26px; color:var(--accent); }
.brand .accent { color:var(--accent); }
.logo { stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.tabs { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:30px; }
.tab { color:var(--muted); text-decoration:none; font-size:15px; transition:color .12s; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); }

/* ---------- Main ---------- */
.main { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
        max-width:1120px; width:100%; margin:0 auto; padding:24px 30px 90px; }

.conn { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--muted);
        background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 15px; }
.conn select { border:0; background:transparent; font:inherit; color:var(--text); cursor:pointer; }
.conn button { border:0; background:transparent; color:var(--accent); cursor:pointer; font:inherit; padding:0; }
.dot { width:8px; height:8px; border-radius:50%; background:#d1d5db; flex:none; }
.dot.on { background:var(--good); }
/* compact MIDI status: a keyboard icon, dulled when no keyboard is connected, green when it is (detail in the title tooltip) */
.kbd-ind { display:inline-flex; align-items:center; position:relative; }
.kbd-ind .kbd-icon { width:20px; height:20px; color:var(--muted); opacity:.4; transition:color .12s, opacity .12s; }
.kbd-ind.on .kbd-icon { color:var(--good); opacity:1; }
.kbd-ind:hover .kbd-icon { color:var(--text); opacity:1; }   /* highlight on hover */
.kbd-tip { position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); background:#2b2b2b; color:#fff;
           font-size:12px; padding:5px 9px; border-radius:6px; white-space:nowrap; display:none; z-index:20; pointer-events:none; }
.kbd-ind:hover .kbd-tip { display:block; }   /* instant — no native title delay */
.err { color:var(--bad); font-size:13px; margin-top:12px; }

.filterbar { display:inline-flex; gap:4px; background:var(--panel); border:1px solid var(--line);
             border-radius:12px; padding:5px; }
.filterbar.locked { opacity:.4; pointer-events:none; }
.filterbars { display:flex; gap:14px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin-top:7vh; }
.filter-group { display:flex; flex-direction:column; align-items:center; gap:6px; }
.fg-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* triads + 7ths are mutually exclusive → one connected pill, divided, each label centered over its group */
.type-combo { display:inline-flex; align-items:stretch; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:5px; }
.type-combo.locked { opacity:.4; pointer-events:none; }
.type-seg { position:relative; display:flex; align-items:center; gap:4px; padding:0 4px; }
.type-seg .fg-label { position:absolute; top:-20px; left:0; right:0; text-align:center; }
.type-div { width:1px; align-self:stretch; background:var(--line); margin:3px 3px; }
/* × between the type pill and voicing = "type compounds with voicing" */
.combo-x { align-self:flex-end; margin-bottom:12px; font-size:20px; color:var(--muted); user-select:none; }
/* voicing filter: a small icon that opens a popover — keeps voicings out of the main row as chord types grow */
.voice-filter { position:relative; display:inline-flex; align-items:flex-end; }
.vf-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line); background:var(--panel); border-radius:10px; color:var(--muted); cursor:pointer; }
.vf-btn:hover { border-color:var(--accent); color:var(--accent); }
.vf-btn.on { color:var(--accent); border-color:var(--accent); }   /* a specific voicing is filtered (not "any") */
.vf-btn svg { width:18px; height:18px; }
.vf-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:30; display:flex; flex-direction:column; align-items:center; gap:8px;
          background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:0 8px 26px rgba(0,0,0,.12); }
.vf-pop[hidden] { display:none; }   /* beat the class's display:flex so the hidden attribute works */
.vf-pop-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.site-footer { max-width:620px; margin:80px auto 40px; padding:0 20px; display:flex; justify-content:center; align-items:center; gap:24px; color:var(--muted); font-size:13px; line-height:1.6; }
.site-footer a.footer-link { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-family:var(--mono); font-size:14px; text-decoration:none; }
.site-footer a.footer-link:hover { color:var(--accent); }
.footer-icon { width:20px; height:20px; display:block; }
.test-summary { text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:18px 0 0; }
.inv-tag { display:block; font-size:15px; font-weight:600; color:var(--accent); letter-spacing:.04em; margin-top:8px; text-align:center; }
/* keep the filter row on one line even though the card is only 720px — break out and center, chart stays 720 */
.dash-section .filterbars { margin:0 0 20px; position:relative; left:50%; transform:translateX(-50%); width:max-content; flex-wrap:nowrap; }
.dash-section .filterbars .filterbar { margin:0; }
.filter { font-family:var(--mono); font-size:14px; color:var(--muted); background:transparent; border:0;
          border-radius:8px; padding:7px 16px; cursor:pointer; transition:color .12s, background .12s, box-shadow .12s; }
.filter:hover { color:var(--text); }
.filter.active { color:var(--accent); background:var(--bg); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.filter.free, .filter.sep { margin-left:8px; border-left:1px solid var(--line); padding-left:12px; }

.stage { margin-top:4vh; min-height:200px; width:100%;
         display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:16px; }
.stage.flash-good { animation:flashGood .4s ease-out; }
@keyframes flashGood { 0%{ background:rgba(34,197,94,.11);} 100%{ background:transparent;} }
.stage.flash-bad { animation:flashBad .4s ease-out; }
@keyframes flashBad { 0%{ background:rgba(239,68,68,.12);} 100%{ background:transparent;} }

.idle-msg { color:var(--muted); font-size:18px; }
.prompt-label { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:30px; }
.chord-name { font-weight:600; font-size:clamp(48px, 9vw, 96px); line-height:1.05; letter-spacing:-0.02em; color:var(--text); text-align:center; }
.held { color:var(--muted); font-size:14px; margin-top:18px; min-height:18px; letter-spacing:.04em; }

.start-btn { margin-top:30px; font-family:var(--mono); font-size:15px; color:var(--text);
             background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 28px; cursor:pointer;
             transition:border-color .12s, color .12s; }
.start-btn:hover { border-color:var(--accent); color:var(--accent); }

.hud { display:none; gap:36px; margin-top:44px; align-items:baseline; }
.hud .item { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; flex-shrink:0; }
.hud b { font-size:34px; font-weight:700; color:#b7bac1; font-variant-numeric:tabular-nums; }
.hud b.dim { color:var(--faint); }
.hud i { font-style:normal; font-size:14px; color:var(--muted); }

.done-total { font-weight:700; font-size:clamp(52px, 10vw, 92px); line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.pb-badge { display:inline-block; font-size:13px; color:var(--accent); border:1px solid var(--accent);
            border-radius:999px; padding:4px 13px; margin-top:14px; }
.note-line { font-size:13px; color:var(--muted); margin-top:12px; }
.splits { margin:24px auto 0; max-width:340px; width:100%; }
.split-row { display:flex; justify-content:space-between; padding:6px 4px; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.split-row:last-child { border-bottom:0; }
.split-row .nm { color:var(--text); }
.split-row .tm { font-variant-numeric:tabular-nums; }
.split-row.fast .tm { color:var(--good); }
.split-row.slow .tm { color:var(--warn); }
.split-row.miss .nm { color:var(--bad); }

/* ---------- Top 5 ---------- */
.board { margin-top:60px; width:100%; max-width:440px; }
.board-title { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.board-list { list-style:none; margin:0; padding:0; }
.board-list li { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font-size:14px; }
.board-list li .rank { width:16px; color:var(--muted); flex:none; }
.board-list li .who { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.board-list li .time { color:var(--text); font-variant-numeric:tabular-nums; flex:none; }
.board-list li .avg { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; flex:none; }
.board-list li .bacc { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; flex:none; width:34px; text-align:right; }
.board-list li .date { color:var(--muted); font-size:12px; flex:none; width:42px; text-align:right; }
.board-list li.top1 .rank, .board-list li.top1 .time { color:var(--accent); font-weight:700; }
.board-list li.justset { background:rgba(34,197,94,.10); border-radius:8px; }
.board-empty { color:var(--muted); font-size:13px; }

/* mode nav: Time Trials / Practice segmented toggle at the top of the page */
.mode-nav { display:flex; justify-content:center; gap:26px; width:fit-content; margin:0; }
.mode-tab { display:inline-flex; align-items:center; gap:7px; padding:0;
            color:var(--muted); font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; transition:color .12s; }
.mode-tab svg { width:17px; height:17px; }
.mode-tab:hover { color:var(--accent); }
.practice-placeholder { text-align:center; color:var(--muted); font-size:16px; margin-top:12vh; }

/* play layout: chord (hero) with the keyboard hint beneath it, centered */
.play-grid { display:flex; justify-content:center; width:100%; margin:6vh auto 0; }
.play-grid .panel { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; }
.chord-row { display:flex; align-items:center; justify-content:center; gap:36px; }
.chord-row .chord-hint { margin:0; }

/* ---------- Placeholder pages ---------- */
.soon { margin-top:14vh; display:flex; flex-direction:column; align-items:center; gap:10px; }
.soon .emoji { font-size:44px; }
.soon .title { font-size:28px; font-weight:700; letter-spacing:-0.02em; }
.soon .sub { color:var(--muted); font-size:15px; }

/* ---------- Account area + auth modal ---------- */
.nav-account { display:flex; align-items:center; gap:12px; }
.nav-btn { font-family:var(--mono); font-size:14px; color:var(--muted); background:transparent;
           border:1px solid var(--line); border-radius:8px; padding:7px 14px; cursor:pointer;
           transition:color .12s, border-color .12s; }
.nav-btn:hover { color:var(--text); border-color:var(--accent); }
.user-menu { position:relative; }
.user-menu::after { content:""; position:absolute; top:100%; right:0; width:100%; height:12px; }  /* hover bridge across the gap */
.nav-user { font-family:var(--mono); font-size:14px; color:var(--accent); background:transparent; border:0;
            cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.nav-user .caret { font-size:11px; color:var(--muted); }
.user-dropdown { position:absolute; right:0; top:calc(100% + 10px); min-width:172px; display:none; flex-direction:column; gap:2px;
                 background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 10px 28px rgba(0,0,0,.12); z-index:40; }
.user-menu:hover .user-dropdown, .user-menu:focus-within .user-dropdown { display:flex; }
.user-dropdown a, .user-dropdown button { text-align:left; font-family:var(--mono); font-size:14px; color:var(--text);
                 background:transparent; border:0; border-radius:7px; padding:9px 12px; cursor:pointer; text-decoration:none; }
.user-dropdown a:hover, .user-dropdown button:hover { background:var(--panel); }
.user-dropdown .dd-logout { color:var(--text); border-top:1px solid var(--line); margin-top:3px; border-radius:0; }

.modal-overlay { position:fixed; inset:0; background:rgba(20,22,28,.45); display:flex;
                 align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; z-index:50; }
.modal-overlay[hidden] { display:none; }
.modal { position:relative; width:100%; max-width:360px; margin:auto; background:var(--bg); border:1px solid var(--line);
         border-radius:16px; padding:28px; box-shadow:0 14px 44px rgba(0,0,0,.14); }
.modal-title { font-size:20px; font-weight:700; margin:0 0 18px; text-align:center; }
.modal-close { position:absolute; top:10px; right:14px; background:transparent; border:0; font-size:24px;
               line-height:1; color:var(--muted); cursor:pointer; }
.modal-close:hover { color:var(--text); }
.modal form { display:flex; flex-direction:column; gap:10px; }
.modal form[hidden] { display:none; }   /* let the hidden attribute win over display:flex */
.modal input { font-family:var(--mono); font-size:15px; color:var(--text); background:var(--panel);
               border:1px solid var(--line); border-radius:9px; padding:11px 13px; }
.modal input:focus { outline:none; border-color:var(--accent); }
.modal-submit { margin-top:6px; font-family:var(--mono); font-size:15px; font-weight:600; color:#fff;
                background:var(--accent); border:0; border-radius:9px; padding:12px; cursor:pointer;
                transition:filter .12s; }
.modal-submit:hover { filter:brightness(1.06); }
.modal-submit:disabled { opacity:.6; cursor:not-allowed; }
.modal-msg { margin-top:14px; font-size:13px; text-align:center; min-height:18px; line-height:1.4; }
.modal-msg.error { color:var(--bad); }
.modal-msg.ok { color:var(--good); }
.modal-switch { margin-top:16px; text-align:center; font-size:13px; color:var(--muted); }
.modal-switch a { color:var(--accent); cursor:pointer; text-decoration:none; }
.modal-switch a:hover { text-decoration:underline; }

/* ---------- Dashboard ---------- */
.dash-gate { margin-top:14vh; text-align:center; color:var(--muted); font-size:16px; }
.dash-gate a { color:var(--accent); text-decoration:none; }
.dash-gate a:hover { text-decoration:underline; }

.kpis { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:6vh; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 26px; text-align:center; min-width:150px; }
.kpi-val { font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi-lab { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }

.dash-section { margin-top:52px; width:100%; max-width:720px; }
.dash-title { font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); text-align:center; margin-bottom:14px; }
.dash-section .filterbar { display:flex; margin:0 auto 20px; }
.chart-empty { color:var(--muted); font-size:13px; text-align:center; padding:36px 0; }

.pr-banner { text-align:center; margin:0 0 16px; min-height:32px; }
.pr-banner span { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:13px; color:var(--text);
                  background:rgba(91,124,250,.10); border:1px solid rgba(91,124,250,.28); border-radius:999px; padding:6px 15px; }
.pr-banner b { color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }

.chart-svg { width:100%; height:auto; }
.chart-svg .grid { stroke:var(--line); stroke-width:1; }
.chart-svg .line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart-svg .dot  { fill:var(--accent); transition:r .12s ease; }
.chart-svg .hit  { fill:transparent; cursor:pointer; }
.chart-svg .crosshair { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; opacity:.45; }
.chart-svg .tip rect { fill:var(--text); }
.chart-svg .tip text { fill:#fff; font-size:12px; font-family:var(--mono); text-anchor:middle; }
.chart-svg .ylab, .chart-svg .xlab { fill:var(--muted); font-size:11px; font-family:var(--mono); }
.chart-svg .ylab { text-anchor:end; }
.chart-svg .xlab { text-anchor:middle; }
.chart-svg .axis-title { fill:var(--muted); font-size:11px; font-family:var(--mono); text-anchor:middle; letter-spacing:.05em; }

@media (max-width:560px){
  .nav { padding:18px 18px; }
  .mode-tab { padding:7px 10px; }
  .mode-tab span { display:none; }   /* icons-only in the header on small screens */
  .tabs { gap:22px; }
  .stage { margin-top:5vh; }
  .dash-section .filterbar { flex-wrap:wrap; }
}