/* =========================================================================
   Telas trazidas do Cadenzia (teoria escrita, estúdio, biblioteca de acordes,
   backing tracks, afinador e estatísticas), com as cores e fontes deste app.
   As regras ficam sob .cz para não interferir no resto.
   ========================================================================= */
.cz, .chord-modal {
  --paper-2: var(--card-2); --paper-3: var(--soft); --ink-3: var(--muted); --ok: var(--good);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
.cz { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cz .section-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; }
.serif { font-family: var(--serif); letter-spacing: -.01em; }
.hint { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; line-height: 1.7; color: var(--muted); margin: 0; }
.input { border: 1px solid var(--rule-2); background: var(--card); border-radius: 9px; padding: 8px 12px; font-size: 14px; color: var(--ink); width: 100%; }
.input:focus { outline: none; border-color: var(--ink-2); }
textarea.input.code { font-family: var(--mono); font-size: 11.5px; resize: vertical; }
.cz .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* botões da marcação do Cadenzia → visual deste app */
.cz-port .btn:not(.ghost):not(.line):not(.danger) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cz-port .btn:not(.ghost):not(.line):not(.danger):hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cz-port .btn.ghost { background: var(--card); border-color: var(--rule-2); color: var(--ink); }
.cz-port .btn.ghost:hover { border-color: var(--ink-2); background: var(--card); }
.cz-port .btn.small { padding: 6px 11px; font-size: 13px; }
.cz-port .btn.line { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn.danger-fill { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-fill:hover { filter: brightness(1.08); border-color: var(--bad); }
.cz-port .field input, .cz-port .field select, .cz-port .field textarea, .cz-port .t-sel { border-radius: 9px; background-color: var(--card); }
.cz-port .choices button, .cz-port .t-pills button, .cz-port .t-voic { border-radius: 10px; background: var(--card); }
.cz-port .t-staff, .cz-port .t-fret, .cz-port .e-card, .cz-port .fb-legend, .cz-port .bt-player, .cz-port .bt-drop { border-radius: 14px; }
.cz-port .e-chip { border-radius: 10px; }
.cz-port .feedback { font-size: 14.5px; }
.cz-port .feedback.ok, .cz-port .feedback.bad { padding: 10px 14px; border-radius: 10px; }
.cz-port .feedback.ok { background: var(--good-soft); }
.cz-port .feedback.bad { background: var(--bad-soft); }

/* teoria, estúdio, componentes, afinador, acordes e faixas (originais) */
.cz .t-prompt{font-family:var(--serif);font-size:clamp(20px,3.4vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.cz .t-prompt b{font-weight:400;font-style:italic;color:var(--accent)}
.cz .t-note{font-size:12px;line-height:1.5;color:var(--muted)}
.cz .t-ans{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-3);word-break:break-word}
.cz .t-rows{display:grid;gap:0;max-width:560px}
.cz .t-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(48px,auto);gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule)}
.cz .t-row2{grid-template-columns:44px minmax(0,1fr) minmax(48px,auto)}
.cz .t-deg{font-family:var(--serif);font-size:20px;color:var(--ink)}
.cz .t-fixed{font-family:var(--serif);font-size:20px;padding:8px 12px;border:1px solid var(--rule);color:var(--ink-3)}
.cz .t-sel{background-color:transparent;border:1px solid var(--rule-2);padding:8px 28px 8px 10px;font-family:var(--sans);font-size:14px;color:var(--ink);border-radius:0;min-height:40px;width:100%;min-width:0;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cz .t-sel:focus{outline:none;border-color:var(--ink)}
.cz .t-sel:disabled{opacity:.7}
.cz .t-sel option,.cz .t-sel optgroup{background:var(--paper);color:var(--ink)}
.cz .t-mark{font-family:var(--mono);font-size:12px;white-space:nowrap}
.cz .t-row.ok .t-mark,.cz .t-link.ok .t-mark{color:var(--ok)}
.cz .t-row.bad .t-mark,.cz .t-link.bad .t-mark{color:var(--bad)}
.cz .t-row.bad .t-sel,.cz .t-link.bad .t-sel{border-color:var(--bad)}
.cz .t-row.ok .t-sel,.cz .t-link.ok .t-sel{border-color:var(--ok)}
.cz .t-chain{display:flex;flex-wrap:wrap;gap:12px}
.cz .t-link{display:flex;flex-direction:column;gap:6px;min-width:112px;flex:1 1 112px;max-width:170px}
.cz .t-chord{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;color:var(--ink);padding-bottom:2px;border-bottom:1px solid var(--rule)}
.cz .t-pills{display:flex;flex-wrap:wrap;gap:6px}
.cz .t-pills button,.cz .choices button.ok,.cz .choices button.bad{border:1px solid var(--rule-2);padding:9px 14px;min-height:40px;font-size:13px;color:var(--ink);background:transparent;border-radius:0;transition:all .15s}
.cz .t-pills button:hover{border-color:var(--ink);background:var(--paper-2)}
.cz .t-pills button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cz .t-pills button.ok{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.cz .choices button.ok{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.cz .choices button.bad{border-color:var(--bad);color:var(--bad)}
.cz .t-staff{display:block;width:100%;max-width:400px;height:auto;color:var(--ink);border:1px solid var(--rule);background:var(--paper-2);padding:6px 4px}
.cz .t-fret{display:block;width:100%;max-width:680px;height:auto;color:var(--ink);border:1px solid var(--rule);background:var(--paper-2);padding:6px 4px}
.cz .t-hit{cursor:pointer}
.cz .t-hit:hover{fill:var(--accent);fill-opacity:.18}
.cz .t-readout{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-3);margin-top:8px}
.cz .t-satb{max-width:420px}
.cz .t-satb th{text-transform:none;letter-spacing:.04em;font-size:12px}
.cz #tiAcc button{font-size:20px;line-height:1;padding:6px 14px}
.cz .t-satb td,.cz .t-satb th{padding:8px 10px;font-family:var(--mono);font-size:13px}
.cz .t-gprog{font-family:var(--serif);font-size:22px;color:var(--faint)}
.cz .t-gprog .now{color:var(--accent)}
.cz .t-gprog .done{color:var(--ink)}
.cz .t-gcap{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cz .t-gsvg{width:150px;color:var(--ink)}
.cz .t-gopts{display:flex;flex-wrap:wrap;gap:10px}
.cz .t-voic{width:150px;padding:6px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);transition:all .15s}
.cz .t-voic:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)}
.cz .t-voic.ok{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.cz .t-voic.bad{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}

@media(max-width:560px){.cz .t-row{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr)}
.cz .t-row .t-mark{grid-column:2 / 4;margin-top:-2px}
.cz .t-row2{grid-template-columns:34px minmax(0,1fr)}
.cz .t-row2 .t-mark{grid-column:2}
}
.cz .choices.answered button:not(.picked):not(.ok){opacity:.4;pointer-events:none}
.cz .choices.answered button.picked{pointer-events:none}
.cz .choices button.picked.ok{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok);color:var(--ok)}
.cz .choices button.picked.bad{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad);color:var(--bad)}
.cz .fb-legend{font-size:12px;line-height:1.7;color:var(--ink-3);padding:10px 14px;border:1px solid var(--rule);background:var(--paper-2);max-width:880px}
.cz .fb-legend .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.cz .fb-legend b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink)}
.cz .fb-legend i{font-style:normal;color:var(--faint);margin:0 8px}
.cz .e-circ{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(260px,1fr);gap:clamp(18px,3vw,40px);align-items:start}
.cz .e-circ-wrap{max-width:460px;width:100%}
.cz #ecSvg{display:block;width:100%;height:auto;overflow:visible}
.cz .ec-seg{cursor:pointer;outline:none}
.cz .ec-sec{stroke:var(--paper);stroke-width:1.5;transition:fill .25s,opacity .25s}
.cz .ec-sec.maj{fill:var(--paper-3);fill-opacity:.75}
.cz .ec-sec.min{fill:var(--paper-2)}
.cz .ec-seg:hover .ec-sec,.cz .ec-seg:focus-visible .ec-sec{fill:var(--accent);fill-opacity:.28}
.cz .ec-sec.sel{fill:var(--accent);fill-opacity:1}
.cz .ec-band{fill:none;stroke:var(--accent);stroke-width:2;stroke-opacity:.8;stroke-linejoin:round;pointer-events:none}
.cz .ec-t{font-family:var(--serif);fill:var(--ink);text-anchor:middle;pointer-events:none}
.cz .ec-t.maj{font-size:21px}
.cz .ec-t.min{font-size:15px;fill:var(--ink-2);font-family:var(--sans)}
.cz .ec-t.sel{fill:#fff}
.cz .ec-s{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle;pointer-events:none}
.cz .ec-core{fill:var(--paper);stroke:var(--rule-2)}
.cz .ec-big{font-family:var(--serif);font-size:38px;fill:var(--ink);text-anchor:middle}
.cz .ec-sm{font-family:var(--mono);font-size:10px;letter-spacing:.2em;fill:var(--muted);text-anchor:middle;text-transform:uppercase}
.cz .e-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cz .e-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.cz .e-title em{font-style:italic;color:var(--accent)}
.cz .e-line{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:6px 0}
.cz .e-line b{font-weight:600;color:var(--ink)}
.cz .e-line.mono{font-family:var(--mono);font-size:12px}
.cz .e-dim{color:var(--muted)}
.cz .e-bad{color:var(--bad)}
.cz .e-card{border:1px solid var(--rule);background:var(--paper-2);padding:18px 20px;margin-bottom:14px;max-width:880px}
.cz .e-table{margin:12px 0 16px;max-width:520px}
.cz .e-table td,.cz .e-table th{padding:9px 8px}
.cz .e-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cz .e-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;padding:9px 8px 7px;border:1px solid var(--rule-2);background:var(--paper);transition:all .25s}
.cz .e-chip b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;color:var(--ink)}
.cz .e-chip i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);margin-top:5px}
.cz .e-chip.root{background:var(--ink);border-color:var(--ink)}
.cz .e-chip.root b{color:var(--paper)}
.cz .e-chip.root i{color:var(--paper);opacity:.7}
.cz .e-chip.hi{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.cz .e-chip.hi b{color:var(--accent)}
.cz .e-fret{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cz .e-fret svg{min-width:620px;max-width:880px;width:100%;height:auto;display:block;color:var(--ink)}
.cz .e-row{display:flex;gap:14px;align-items:flex-start;padding:6px 0}
.cz .e-row + .e-row{border-top:1px solid var(--rule)}
.cz .e-rowname{font-family:var(--serif);font-size:20px;color:var(--ink);margin-top:2px}
.cz .e-tag{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--ink);font-family:var(--serif);font-size:15px;flex:0 0 auto;margin-top:2px}
.cz .e-tag.b{border-color:var(--accent);color:var(--accent)}
.cz .e-presets{margin:2px 0}
.cz .e-presets button{font-size:12px;padding:8px 12px;min-height:36px}
.cz .e-wide{max-width:640px}
.cz .e-wide input{width:100%;font-family:var(--mono);font-size:16px;letter-spacing:.04em}
.cz .e-roman{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-family:var(--serif);font-size:clamp(26px,4vw,40px);line-height:1.15;color:var(--ink)}
.cz .e-roman i{font-style:normal;color:var(--faint);font-size:.7em}
.cz .e-roman.e-big{font-size:clamp(28px,4.4vw,44px)}
.cz .e-roman.e-rsub{font-size:clamp(18px,2.4vw,24px);color:var(--accent);font-style:italic;margin-top:4px}
.cz .e-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin:0 0 14px;max-width:880px}
.cz .e-ccard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:14px 14px 12px;border:1px solid var(--rule-2);background:var(--paper);transition:all .25s var(--ease);min-width:0}
.cz .e-ccard:hover{border-color:var(--ink);background:var(--paper-2);transform:translateY(-2px)}
.cz .e-ccard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper))}
.cz .e-ccard.out{border-style:dashed}
.cz .e-cname{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink);max-width:100%;overflow-wrap:anywhere}
.cz .e-croman{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--accent)}
.cz .e-ctag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-height:12px}
.cz .e-fn{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor}
.cz .e-fn.none{color:var(--muted)}
.cz .e-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:6px}
.cz .e-sub{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n r" "w w";gap:2px 10px;align-items:baseline;text-align:left;padding:12px 14px;border:1px solid var(--rule-2);background:var(--paper)}
.cz .e-sub:hover{border-color:var(--accent);background:var(--paper-2)}
.cz .e-sub .e-cname{grid-area:n;font-size:24px}
.cz .e-sub .e-croman{grid-area:r;font-size:16px}
.cz .e-swhy{grid-area:w;font-size:12px;line-height:1.45;color:var(--ink-3)}
.cz .e-msg{color:var(--ink-3);min-height:1.4em}

@media(max-width:820px){.cz .e-circ{grid-template-columns:1fr}
.cz .e-circ-wrap{margin:0 auto}
}

@media(max-width:560px){.cz .e-chip{min-width:40px}
.cz .e-chip b{font-size:20px}
.cz .e-cname{font-size:26px}
.cz .e-card{padding:14px}
}
.cz .fields{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end}
.cz .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.cz .field > span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cz .field input,.cz .field select,.cz .field textarea{background:transparent;border:1px solid var(--rule-2);
  padding:10px 12px;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink);
  border-radius:0;min-height:42px;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.cz .field select{padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;background-color:transparent}
.cz .field input:focus,.cz .field select:focus,.cz .field textarea:focus{outline:none;border-color:var(--ink)}
.cz .field input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;min-height:20px;height:20px}
.cz .field input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--rule-2)}
.cz .field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--ink);margin-top:-7.5px;border-radius:0;transform:rotate(45deg)}
.cz .field input[type=range]::-moz-range-track{height:1px;background:var(--rule-2)}
.cz .field input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--ink);border:none;border-radius:0;transform:rotate(45deg)}
.cz .field input[type=checkbox]{width:18px;height:18px;min-height:auto;margin:0;accent-color:var(--accent)}
.cz .choices{display:flex;flex-wrap:wrap;gap:8px}
.cz .choices button{padding:10px 16px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:-.005em;border-radius:0;transition:all .2s;min-height:42px}
.cz .choices button:hover{border-color:var(--ink);background:var(--paper-2)}
.cz .feedback{margin-top:8px;font-size:13px;min-height:1.4em;color:var(--muted)}
.cz .feedback.ok{color:var(--ok)}
.cz .feedback.bad{color:var(--bad)}
.cz .beats{display:flex;gap:8px;padding:20px 0 8px;flex-wrap:wrap}
.cz .beat{width:34px;height:34px;border:1px solid var(--rule-2);background:transparent;transition:all .1s;position:relative}
.cz .beat.on{background:var(--ink);border-color:var(--ink)}
.cz .beat.accent.on{background:var(--accent);border-color:var(--accent)}
.cz .beat::after{content:attr(data-i);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.1em}
.cz .mic-signal{margin-top:14px}
.cz .mic-signal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.cz .mic-signal-head strong{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cz .mic-signal-track{height:5px;background:var(--rule);overflow:hidden}
.cz .mic-signal-track>div{height:100%;width:0%;background:var(--accent);transition:width .08s ease}
.cz .calib-guide{padding:14px;border:1px solid var(--rule);background:var(--paper-2);margin-bottom:16px}
.cz .calib-guide strong{font-family:var(--serif);font-size:19px}
.cz .calib-guide p{font-size:12px;line-height:1.6;margin:8px 0 0;color:var(--ink-2)}
.cz .calib-status{font-family:var(--mono);font-size:11px;color:var(--muted);min-height:18px;margin-top:12px}
.cz .calib-manual{margin-top:20px;border-top:1px solid var(--rule);padding-top:12px}
.cz .calib-manual summary{cursor:pointer;font-size:12px;color:var(--muted)}
.cz .calib-manual .field span{font-size:12px;color:var(--ink-2)}
.cz .calib-manual .field strong{font-family:var(--mono);margin-left:7px}
.cz .beat-pulse{width:88px;height:88px;border:1px solid var(--rule-2);margin:20px 0;display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:all .08s}
.cz .beat-pulse.hit{background:var(--accent);border-color:var(--accent);color:#fff}
.cz .bpm{font-family:var(--serif);font-size:clamp(48px,10vw,96px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.cz .bpm small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:400}
.cz .history{max-height:240px;overflow-y:auto;font-family:var(--mono);font-size:11px;border-top:1px solid var(--rule);letter-spacing:.02em}
.cz .history div{padding:8px 0;border-bottom:1px solid var(--rule);color:var(--ink-3);display:grid;grid-template-columns:44px 1fr;gap:12px}
.cz .history div strong{color:var(--ink);font-weight:500}
.cz .history div:last-child{border-bottom:0}
.cz .progress{display:flex;flex-wrap:wrap;gap:8px}
.cz .progress .step{padding:8px 14px;border:1px solid var(--rule-2);font-family:var(--mono);font-size:11px;color:var(--ink-2);transition:all .15s}
.cz .progress .step.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cz table{width:100%;border-collapse:collapse}
.cz th,.cz td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--rule);font-size:14px;font-weight:400}
.cz th{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cz td.fn{font-family:var(--serif);font-size:16px;font-weight:400}
.cz .fn-T{color:var(--ok)}
.cz .fn-SD{color:var(--ink-2)}
.cz .fn-D{color:var(--accent)}
.cz .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:16px}
.cz .stat-card{background:var(--paper);padding:20px 16px;display:flex;flex-direction:column;gap:6px}
.cz .stat-card .num{font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.cz .stat-card .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cz .level{display:flex;flex-direction:column;gap:8px}
.cz .level-bar{height:1px;background:var(--rule-2);position:relative}
.cz .level-fill{height:1px;background:var(--ink);transition:width .5s var(--ease);position:absolute;left:0;top:0}
.cz .level-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cz .level-meta strong{color:var(--ink);font-weight:500}
.cz .tuner-gauge{position:relative;width:100%;max-width:400px;margin:6px auto 0}
.cz .tuner-svg{display:block;width:100%;height:auto;overflow:visible}
.cz .tuner-svg .tg-track{fill:none;stroke:var(--paper-3);stroke-width:16;stroke-linecap:round}
.cz .tuner-svg .tg-zone{fill:none;stroke:var(--ok);stroke-width:16;stroke-opacity:.38;transition:stroke-opacity .3s}
.cz .tuner-gauge.in-tune .tg-zone{stroke-opacity:.95}
.cz .tuner-svg .tg-tick{stroke:var(--ink);stroke-opacity:.35;stroke-width:1.2}
.cz .tuner-svg .tg-tick.major{stroke-opacity:.8;stroke-width:1.8}
.cz .tuner-svg .tg-label{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle;letter-spacing:.04em}
.cz .tuner-svg .tg-needle{transform-origin:200px 206px;transform:rotate(0deg);transition:transform .28s cubic-bezier(.3,1.35,.5,1)}
.cz .tuner-svg .tg-needle path{fill:var(--accent);transition:fill .25s}
.cz .tuner-gauge.in-tune .tg-needle path{fill:var(--ok)}
.cz .tuner-svg .tg-hub{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.cz .tuner-svg .tg-hub-in{fill:var(--ink)}
.cz .tg-lamp{position:absolute;bottom:6px;font-family:var(--serif);font-size:30px;line-height:1;color:var(--faint);transition:color .2s,transform .2s}
.cz .tg-lamp.flat{left:6%}
.cz .tg-lamp.sharp{right:6%}
.cz .tuner-gauge.flat .tg-lamp.flat{color:var(--accent);transform:scale(1.25)}
.cz .tuner-gauge.sharp .tg-lamp.sharp{color:var(--bad);transform:scale(1.25)}
.cz .tuner-readout{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 18px;text-align:center}
.cz .tuner-center{display:flex;flex-direction:column;align-items:center}
.cz .tuner-meta{display:flex;align-items:baseline;gap:16px;justify-content:center;flex-wrap:wrap}
.cz .tuner-note{font-family:var(--serif);font-size:clamp(72px,12vw,128px);line-height:.9;letter-spacing:-.04em;transition:color .25s}
.cz .tuner-note.in-tune{color:var(--ok)}
.cz .tuner-freq{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.cz .tuner-status{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:18px;margin-top:10px;padding:5px 12px;border:1px solid transparent;transition:all .25s}
.cz .tuner-status.flat{color:var(--accent)}
.cz .tuner-status.sharp{color:var(--bad)}
.cz .tuner-status.ok{color:var(--ok);border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.cz .tuner-cents{font-family:var(--serif);font-size:28px;line-height:1;color:var(--ink);min-height:30px}
.cz .tuner-strings{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:4px 0 14px}
.cz .tuner-string{width:58px;height:58px;border-radius:50%;border:1px solid var(--rule-2);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s;position:relative}
.cz .tuner-string:hover{background:var(--paper-2);border-color:var(--ink)}
.cz .tuner-string.on{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 12%,transparent)}
.cz .tuner-string strong{display:block;font-family:var(--serif);font-size:23px;font-weight:400;line-height:1}
.cz .tuner-string span{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--muted);margin-top:3px}
.cz .tuner-string.on span{color:var(--paper);opacity:.8}
.cz .tuner-help{font-size:12px;line-height:1.6;color:var(--muted)}
.cz .tuner-lock{display:none}
.cz .chord-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cz .folder{background:var(--paper);cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:space-between;padding:16px}
.cz .folder:hover{background:var(--paper-2)}
.cz .folder .fname{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.cz .folder .fcount{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--muted)}
.chord-modal{position:fixed;inset:0;background:rgba(15,14,13,.6);z-index:9600;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .25s}
.chord-modal.on{opacity:1;pointer-events:auto}
.cz .chord-sheet{background:var(--paper);border:1px solid var(--rule-2);
  max-width:980px;width:100%;max-height:92vh;overflow-y:auto;
  padding:20px 20px 28px;position:relative;
  transform:scale(.96);transition:transform .25s var(--ease)}
.chord-modal.on .chord-sheet{transform:scale(1)}
.cz .chord-sheet-header{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule);
  position:sticky;top:-20px;background:var(--paper);z-index:2;padding-top:20px}
.cz .chord-sheet-title{font-family:var(--serif);font-size:32px;line-height:1;letter-spacing:-.02em}
.cz .chord-sheet-close{width:36px;height:36px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--rule);color:var(--muted);font-size:16px;
  cursor:pointer;transition:all .2s;flex-shrink:0}
.cz .chord-sheet-close:hover{border-color:var(--ink);color:var(--ink)}
.cz .chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;
  background:transparent;border:0;align-items:stretch}
.cz .chord-grid .item{background:var(--paper);padding:10px;text-align:center;cursor:pointer;
  transition:background .2s;display:grid;place-items:center;min-width:0}
.cz .chord-grid .item:hover{background:var(--paper-2)}
.cz .chord-grid svg{display:block;width:100%;height:auto;max-width:130px;margin:0 auto}
.cz .chord-type-card,.cz .chord-variant-item{background:var(--paper);padding:14px;border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;overflow:hidden}
.cz .chord-type-card{min-width:0;width:100%}

@media(max-width:560px){.cz .chord-grid{grid-template-columns:1fr;gap:12px}
.cz .chord-type-card,.cz .chord-variant-item{padding:12px}

}

@media(min-width:561px) and (orientation:landscape){.cz .chord-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}

}
.cz .chord-type-head{width:100%;display:flex;justify-content:space-between;gap:8px;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:7px}
.cz .chord-type-head strong{font-family:var(--serif);font-size:20px;font-weight:400}
.cz .chord-type-head span,.cz .variant-meta{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--muted)}
.cz .chord-type-card .btn,.cz .chord-variant-item .btn{min-height:32px}
.cz .chord-variant-item{cursor:pointer;position:relative}
.cz .chord-variant-item.is-default{outline:2px solid var(--ink);outline-offset:-2px}
.cz .chord-group-title{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 0 2px;border-bottom:1px solid var(--rule)}
.cz .bt-drop{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:18px;border:1px dashed var(--rule-2);transition:background .15s,border-color .15s}
.cz .bt-drop.over{background:var(--paper-2);border-color:var(--ink)}
.cz .bt-drop-hint{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.cz .bt-status{min-height:18px;margin:12px 0 4px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cz .bt-status .bar{display:block;height:2px;margin-top:6px;background:var(--rule)}
.cz .bt-status .bar i{display:block;height:100%;background:var(--accent);transition:width .2s}
.cz .bt-player{margin:14px 0 26px;padding:clamp(16px,3vw,28px);border:1px solid var(--ink);background:var(--paper-2)}
.cz .bt-name{width:100%;font-family:var(--serif);font-size:clamp(28px,5vw,44px);line-height:1.1;border:none;border-bottom:1px solid transparent;background:transparent;color:var(--ink);padding:2px 0 6px;margin-bottom:18px}
.cz .bt-name:hover{border-bottom-color:var(--rule-2)}
.cz .bt-name:focus{outline:none;border-bottom-color:var(--ink)}
.cz .bt-stats{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);margin-bottom:18px}
.cz .bt-stat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;background:var(--paper);text-align:center;min-width:0}
.cz .bt-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cz .bt-big{font-family:var(--serif);font-weight:400;font-size:clamp(42px,8vw,72px);line-height:1;color:var(--ink)}
.cz .bt-stat-key .bt-big{color:var(--accent)}
.cz .bt-sub{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);min-height:14px}
.cz .bt-key-row{display:flex;align-items:stretch;gap:6px}
.cz .bt-key-row select{min-width:112px;padding:8px 10px;border:1px solid var(--rule-2);background:var(--paper);font-family:var(--mono);font-size:13px;color:var(--ink)}
.cz .bt-step{width:42px;min-height:40px;border:1px solid var(--ink);font-size:20px;line-height:1;color:var(--ink);background:transparent}
.cz .bt-step:hover{background:var(--ink);color:var(--paper)}
.cz .bt-step:disabled{opacity:.35;pointer-events:none}
.cz .bt-tempo{display:flex;align-items:center;gap:8px;width:100%;max-width:220px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cz .bt-tempo input{flex:1;min-width:0;accent-color:var(--ink)}
.cz .bt-tempo-txt{font:inherit;color:inherit;background:none;border:none;padding:2px 4px;min-width:44px}
.cz .bt-transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px}
.cz .bt-time{font-family:var(--mono);font-size:12px;color:var(--ink-3);min-width:96px}
.cz .bt-seek{flex:1 1 220px;min-width:160px;accent-color:var(--accent)}
.cz .bt-opts{margin-bottom:12px}
.cz .bt-ab div{display:flex;align-items:center;gap:6px}
.cz .bt-ab-txt{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:4px}
.cz .bt-fix{margin-top:8px;border-top:1px solid var(--rule);padding-top:12px}
.cz .bt-fix summary{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cz .bt-fix .field div{display:flex;gap:6px}
.cz .bt-list-head{display:flex;justify-content:space-between;margin:8px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cz .bt-list{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:12px}
.cz .bt-list:empty{display:none}
.cz .bt-item{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:12px 14px;background:var(--paper);cursor:pointer}
.cz .bt-item:hover{background:var(--paper-2)}
.cz .bt-item.on{box-shadow:inset 3px 0 0 var(--accent)}
.cz .bt-item-name{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz .bt-item-meta{grid-column:1;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}
.cz .bt-item .btn{grid-row:1/3;grid-column:2}

@media(max-width:700px){.cz .bt-stats{grid-template-columns:1fr 1fr}
.cz .bt-stat-key{grid-column:1/-1}
}
.cz .au-ck{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-2);margin:2px 0 14px;cursor:pointer}
.cz .au-ck input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent);flex:0 0 auto}
.cz .au-ck a{color:var(--accent)}
.cz .au-gwrap{display:flex;justify-content:center;min-height:44px;margin:4px 0 12px}
.cz .au-fine{font-size:11.5px;margin:10px 0 0}
.cz .au-fine a{color:var(--accent)}
.cz .au-msg{min-height:20px;font-size:13px;margin-bottom:10px;color:var(--muted)}
.cz .au-msg.bad{color:var(--bad)}
.cz .au-msg.ok{color:var(--ok)}
.cz .au-primary{width:100%}
.cz .au-primary.danger{background:var(--bad);border-color:var(--bad)}
.cz .au-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.cz .au-link{font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.cz .au-link:hover{color:var(--accent)}
.cz .au-card2{display:grid;gap:0;border:1px solid var(--rule);margin-bottom:16px;max-width:560px}
.cz .au-card2 > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 14px;border-bottom:1px solid var(--rule)}
.cz .au-card2 > div:last-child{border-bottom:0}
.cz .au-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cz .au-card2 b{font-weight:500;font-size:14px;overflow-wrap:anywhere;text-align:right}
.cz .au-actions{display:flex;flex-wrap:wrap;gap:8px}
.cz .danger-t{color:var(--bad)!important}

.cz .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cz-tuner { max-width: 700px; margin: 0 auto; width: 100%; align-items: stretch; }
.cz-tuner .fields, .cz-tuner .actions { justify-content: center; }
.tuner-ref { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chord-modal .chord-sheet { border-radius: 18px; box-shadow: var(--shadow-lg); background: var(--card); }
.chord-modal .chord-sheet-header { background: var(--card); }
.chord-modal .chord-type-card, .chord-modal .chord-variant-item { border-radius: 12px; background: var(--card-2); color: var(--ink); }
.chord-modal .chord-type-card:hover, .chord-modal .chord-variant-item:hover { border-color: var(--ink-2); cursor: pointer; }
.chord-modal .kicker { margin-top: 4px; }
.cz .chord-folders { border-radius: 14px; overflow: hidden; }
.cz .folder { border: 0; text-align: left; color: var(--ink); font: inherit; }
.cz .folder .fname { font-weight: 600; }
.cz .bt-item .btn { justify-self: end; }

/* estatísticas */
.cz .stat-card { background: var(--card); }
.cz .stats-grid { border-radius: 14px; overflow: hidden; }
.cz .level-bar { height: 6px; border-radius: 6px; background: var(--soft); }
.cz .level-fill { height: 6px; border-radius: 6px; background: var(--accent); }
.cz .bpm { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.danger-zone { border: 1px solid var(--bad); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.week-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 120px; max-width: 640px; }
.wb { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.wb i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; }
.wb span { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; }
.mod-bars.wide { max-width: 720px; }
.mod-bars.wide .mod-bar { grid-template-columns: minmax(180px, 1.2fr) 1fr; text-decoration: none; padding: 4px 0; }

/* conta */
.au-note { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.au-fine { font-size: 12px; color: var(--muted); }
.au-ck { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 2px 0 14px; cursor: pointer; }
.au-ck input { width: 18px; height: 18px; accent-color: var(--accent); }
.au-gwrap { display: flex; justify-content: center; min-height: 44px; margin: 4px 0 12px; }
.au-msg { min-height: 20px; font-size: 13.5px; margin-bottom: 10px; color: var(--muted); }
.au-msg.bad { color: var(--bad); } .au-msg.ok { color: var(--good); }
.au-card2 { display: grid; border: 1px solid var(--rule); border-radius: 14px; margin-bottom: 16px; max-width: 560px; background: var(--card); overflow: hidden; }
.au-card2 > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.au-card2 > div:last-child { border-bottom: 0; }
.au-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.au-card2 b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; text-align: right; }
.au form { display: flex; flex-direction: column; gap: 10px; }

/* topo: sessão e conta */
.sess-btn { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 6px 10px; gap: 6px; }
.sess-btn.on { background: var(--accent); color: var(--accent-ink); }
.sess-btn.on:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.05); }
.acct-btn { position: relative; }
.acct-dot { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); opacity: 0; }
.acct-btn.on .acct-dot { opacity: 1; }

/* ritmo */
.mdot.grp { width: 18px; height: 18px; border-color: var(--ink-2); }
.tap-pad.big-tap { min-height: 150px; max-width: 380px; font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: .08em; margin-top: 0; }
.toast.bad { background: var(--bad); color: #fff; }
.stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) { .sess-txt { display: none; } .cz .e-circ { grid-template-columns: 1fr; } }
.cz .chord-folders { gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.cz .folder { border: 1px solid var(--rule); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cz .folder:hover { border-color: var(--ink-2); background: var(--card); box-shadow: var(--shadow); }
@media (max-width: 560px) { .cz .chord-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .cz .chord-type-card, .cz .chord-variant-item { padding: 8px; } .cz .chord-type-head { flex-direction: column; align-items: center; } }

/* ---------- acordes: dificuldade, notas, braço, comparação, favoritos ---------- */
.chips-row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 20px; }
.dchip { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; }
.dchip.d1 { color: var(--good); } .dchip.d2 { color: var(--warn); } .dchip.d3 { color: var(--bad); }
.omit { font-family: var(--mono); font-size: 9.5px; color: var(--muted); padding: 2px 6px; border-radius: 6px; background: var(--soft); }
.chord-notes { text-align: center; line-height: 1.35; } .chord-notes b { font-family: var(--serif); font-size: 13.5px; font-weight: 600; display: block; } .chord-notes i { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--muted); }
.capo-note { color: var(--accent); }
.vbtns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 2px; }
.ib { border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2); border-radius: 8px; padding: 3px 8px; font-size: 12px; cursor: pointer; min-height: 28px; }
.ib:hover { border-color: var(--ink-2); color: var(--ink); } .ib.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chord-modal .chord-type-card, .chord-modal .chord-variant-item { align-items: stretch; }
.chord-modal .chord-type-card svg, .chord-modal .chord-variant-item svg { align-self: center; }
.chord-modal .chord-type-card .btn { align-self: center; }
.board-panel, .compare-panel { border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; background: var(--card-2); margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.board-panel .viewer-board { padding: 8px 6px 4px; box-shadow: none; } .board-panel .viewer-board .fretboard { min-width: 760px; }
.fb-mark.dim { opacity: .38; } .fb-mark.played { opacity: 1; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cmp-col { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; } .cmp-col svg { max-width: 190px; width: 100%; }
.cmp-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cmp-hint { margin: 0 0 10px; }
.favs { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fav-card { border: 1px solid var(--rule); border-radius: 12px; background: var(--card); padding: 8px; text-align: center; cursor: pointer; } .fav-card svg { width: 100%; max-width: 130px; }
.favs-empty { border: 1px dashed var(--rule-2); border-radius: 12px; padding: 12px 14px; }
.caged-note { border: 1px solid var(--rule); border-radius: 12px; padding: 8px 14px; background: var(--card-2); max-width: 760px; font-size: 14px; } .caged-note summary { cursor: pointer; font-weight: 600; } .caged-note a { color: var(--accent); }
.caged-row, .pg-row, .tr-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; align-items: flex-start; }
.pg-card { flex: 0 0 150px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); padding: 8px; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .pg-card svg { width: 100%; }
.pg-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-2px); }
.pg-arrow { align-self: center; color: var(--muted); font-size: 20px; } .pg-meta { font-size: 14px; color: var(--ink-2); }
.fb-mark.c0 circle { stroke: #d9731c; stroke-width: 2.5; } .fb-mark.c1 circle { stroke: #2f6f5e; stroke-width: 2.5; } .fb-mark.c2 circle { stroke: #4a8fd6; stroke-width: 2.5; } .fb-mark.c3 circle { stroke: #a8332a; stroke-width: 2.5; } .fb-mark.c4 circle { stroke: #8a5fb8; stroke-width: 2.5; }
/* identificar */
.id-strings { display: grid; grid-template-columns: repeat(6, minmax(70px, 1fr)); gap: 8px; max-width: 640px; }
.id-grid { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: start; } @media (max-width: 640px) { .id-grid { grid-template-columns: 1fr; } .id-strings { grid-template-columns: repeat(3, 1fr); } }
.id-diagram svg { width: 100%; } .id-row { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); } .id-row b { font-family: var(--serif); font-size: 20px; grid-row: span 2; align-self: center; } .id-row span { font-size: 13.5px; } .id-row small { color: var(--muted); }
.id-row.first b { color: var(--accent); }
/* troca */
.tr-ready { display: flex; flex-direction: column; gap: 12px; } .tr-run { display: grid; grid-template-columns: minmax(200px, 300px) 140px; gap: 24px; align-items: center; justify-content: center; }
.tr-hud { grid-column: 1 / -1; display: flex; gap: 18px; justify-content: center; font-family: var(--mono); font-size: 14px; flex-wrap: wrap; } .tr-time { font-family: var(--serif); font-size: 40px; color: var(--accent); }
.tr-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; } .tr-big svg { width: 100%; } .tr-next { opacity: .7; } .tr-next svg { width: 100%; }
.quiz-chord { max-width: 180px; margin: 4px auto 0; } .quiz-chord.small { max-width: 140px; margin: 8px 0; } .quiz-chord svg { width: 100%; color: var(--ink); }
.ok-t { color: var(--good); }
@media (max-width: 560px) { .cmp-grid { grid-template-columns: 1fr 1fr; } .tr-run { grid-template-columns: 1fr; } }