/* Analysis service screens — same editorial language as the QuemÉoCantô pages:
 * frosted glass over lavender, Manrope in light weights, mint accent, numbered
 * editorial section headers. This file adds the dark counterpart
 * ("lavanda-noite"): the ground shifts to indigo-violet — never neutral black —
 * and the glass becomes low-alpha white over it.
 *
 * Every color lives in a token. Components never hardcode an rgba that changes
 * between themes. These screens have no theme toggle (the service JS owns the
 * pages and knows nothing about themes), so resolution is CSS-automatic:
 * light by default, @media (prefers-color-scheme: dark) follows the OS.
 *
 * Color semantics stay aligned with the plots: blue = compressed fold (belt),
 * red = breathy / head voice. The comparison page uses the SAME scale as the
 * figures it shows — no new hues.
 */

:root {
  --ink: #2b2e42;
  --ink-2: #3a3e55;
  --ink-3: rgba(50, 54, 84, 0.62);
  --ink-4: rgba(60, 64, 96, 0.46);

  --mint: #8fe7bf;
  --mint-ink: #123a2b;
  --mint-strong: #1a9e6e;

  /* register semantics — same blue/red as the analysis colormaps */
  --belt: #1c5cab;
  --leve: #a32f2e;

  --ok: #1a9e6e;
  --atencao: #a87a18;
  --alerta: #a33636;

  --glass: rgba(255, 255, 255, 0.42);
  --glass-2: rgba(255, 255, 255, 0.26);
  --glass-hover: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(255, 255, 255, 0.55);
  --hair: rgba(60, 64, 96, 0.14);
  --brilho: rgba(255, 255, 255, 0.5);   /* inner top highlight of glass cards */
  --tinta-suave: rgba(60, 64, 96, 0.13); /* meter tracks, muted fills */

  --fundo-solido: #a6a3c2;
  --fundo: radial-gradient(120% 90% at 50% 12%,
    #d8dae6 0%, #c4c7d8 34%, #b3b4cb 60%, #a6a3c2 100%);
  --nevoa-1: rgba(150, 160, 220, 0.5);
  --nevoa-2: rgba(120, 220, 190, 0.2);

  --sombra: 0 26px 60px -22px rgba(40, 45, 90, 0.42);
  --sombra-sm: 0 10px 26px -14px rgba(40, 45, 90, 0.34);

  --max: 1120px;
  color-scheme: light;
}

/* lavanda-noite */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef8;
    --ink-2: #cdd0e4;
    --ink-3: rgba(214, 218, 240, 0.66);
    --ink-4: rgba(206, 211, 240, 0.44);

    --mint: #8fe7bf;
    --mint-ink: #0f3526;
    --mint-strong: #6fdcac;

    --belt: #6ea8e8;
    --leve: #e07a76;

    --ok: #6fdcac;
    --atencao: #e6c072;
    --alerta: #e08585;

    --glass: rgba(255, 255, 255, 0.07);
    --glass-2: rgba(255, 255, 255, 0.045);
    --glass-hover: rgba(255, 255, 255, 0.12);
    --glass-line: rgba(255, 255, 255, 0.15);
    --hair: rgba(214, 220, 255, 0.13);
    --brilho: rgba(255, 255, 255, 0.07);
    --tinta-suave: rgba(214, 220, 255, 0.12);

    --fundo-solido: #181a2c;
    --fundo: radial-gradient(120% 90% at 50% 12%,
      #35375a 0%, #2a2c49 34%, #20223a 60%, #181a2c 100%);
    --nevoa-1: rgba(139, 148, 222, 0.25);
    --nevoa-2: rgba(120, 220, 190, 0.1);

    --sombra: 0 26px 60px -22px rgba(5, 6, 20, 0.65);
    --sombra-sm: 0 10px 26px -14px rgba(5, 6, 20, 0.5);
    color-scheme: dark;
  }
}

/* ---- base ---------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
/* The `hidden` attribute is only display:none in the browser stylesheet, so ANY
   author rule with `display` beats it. Two elements used to show up early because
   of that: the code field (.linha is flex) and the "ver o resultado" link (.voltar
   is inline-flex). This holds for any `hidden` the interface uses from now on. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.62; font-weight: 400;
  color: var(--ink);
  background: var(--fundo-solido);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding: 26px 16px calc(60px + env(safe-area-inset-bottom));
  position: relative; overflow-x: hidden;
}
/* The atmosphere lives on fixed viewport layers, not on background-attachment:
 * fixed — iOS ignores that and long pages would scroll past the gradient.
 * ::before is the lavender vignette, ::after holds the haze blobs. */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
body::before { background: var(--fundo); }
body::after {
  background:
    radial-gradient(760px 760px at 50% -8%, var(--nevoa-1) 0%, transparent 62%),
    radial-gradient(620px 620px at 8% 104%, var(--nevoa-2) 0%, transparent 60%),
    radial-gradient(900px 620px at 92% 60%, var(--nevoa-2) 0%, transparent 58%);
}
main { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }

a { color: var(--mint-strong); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 2px; border-radius: 4px; }

/* ---- type ---------------------------------------------------------------- */

h1 {
  font-size: clamp(32px, 6vw, 46px); font-weight: 300; line-height: 1.08;
  letter-spacing: -0.015em; text-wrap: balance;
}
h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 13px; text-wrap: balance; }
h3 {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--ink-4); margin-bottom: 13px;
}
.olho {   /* the app's "Now Playing": tiny, lots of tracking */
  font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-4); margin-bottom: 12px;
}
.lede { font-size: 17.5px; font-weight: 300; color: var(--ink-2); margin-top: 14px;
        line-height: 1.55; max-width: 34em; }
.dim { color: var(--ink-3); }
.belt { color: var(--belt); font-weight: 700; }
.leve { color: var(--leve); font-weight: 700; }

/* giant thin display type — the hero h1 of the upload screen */
.gigante {
  font-size: clamp(38px, 5.6vw, 72px); font-weight: 250; line-height: 1.04;
  letter-spacing: -0.02em; text-wrap: balance;
}
.gigante em { font-style: normal; font-weight: 600; color: var(--mint-strong); }

/* ---- surfaces ------------------------------------------------------------ */

.card {
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line); border-radius: 22px;
  box-shadow: var(--sombra), inset 0 1px 10px var(--brilho);
  padding: 20px 21px; margin-bottom: 16px;
}

/* numbered editorial section header: hairline on top, big thin number, h2 300 */
.sec { margin: 76px 0 18px; }
.sec h2 {
  margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 300;
  letter-spacing: -0.015em;
}
.sec h2 em { font-style: normal; font-weight: 600; color: var(--mint-strong); }
.secn { display: flex; align-items: baseline; gap: 18px;
        border-top: 1px solid var(--hair); padding-top: 26px; }
.secn .num { font-size: 44px; font-weight: 200; line-height: 1; color: var(--ink-4);
             letter-spacing: -0.02em; flex: none; }
.secn .nota-sec { margin: 8px 0 0; color: var(--ink-3); font-size: 14.5px; max-width: 44em; }

/* topo */
.voltar {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500;
  color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); padding: 8px 15px; border-radius: 20px; margin-bottom: 22px;
}
.voltar:hover { background: var(--glass-hover); text-decoration: none; }

/* page header row of the analysis pages: back pill left, actions right (zip design) */
.cab-pagina { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 54px; }
.cab-pagina .voltar { margin-bottom: 0; }
.cab-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab-acoes .olho { margin-bottom: 0; letter-spacing: 0.12em; }
.tema-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }

/* two-tone giant title of the analysis pages (zip design) */
.h1-analise { font-size: clamp(34px, 4.8vw, 62px); font-weight: 250; line-height: 1.06;
  letter-spacing: -0.02em; max-width: 16em; text-wrap: balance; }
.h1-analise .h1-dim { color: var(--ink-3); }

/* índice */
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .cards { grid-template-columns: 1fr 1fr; } }
.mcard {
  display: block; color: var(--ink); font-weight: 400;
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line); border-radius: 22px; padding: 22px;
  box-shadow: var(--sombra), inset 0 1px 10px var(--brilho);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.mcard:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--sombra), inset 0 1px 10px var(--brilho);
}
.mcard .art { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.mcard .mus { font-size: 27px; font-weight: 300; line-height: 1.12; margin: 8px 0 12px; letter-spacing: -0.01em; }
.mcard .mec { font-size: 14.5px; font-weight: 600; }

/* achados */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 15px; }
.kv dt { color: var(--ink-3); font-weight: 400; }
.kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* achados as the zip design's open hairline grid: each dt+dd pair comes wrapped
 * in a <div> (valid inside <dl>), label over value, hairline on top, no card */
.kv.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 40px; margin: 0; }
.kv.grade > div { border-top: 1px solid var(--hair); padding-top: 12px; }
.kv.grade dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-4); font-weight: 600; }
.kv.grade dd { margin: 5px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.kv.grade dd.belt { color: var(--belt); }
.kv.grade dd.leve { color: var(--leve); }

/* open resumo paragraph under an uncarded section */
.aberto-resumo { margin-top: 26px; font-size: 15px; font-weight: 300;
  line-height: 1.65; max-width: 46em; }

/* método: details rows with hairline tops, no glass card (zip design) */
.metodo details { border-top: 1px solid var(--hair); }
.metodo details:last-child { border-bottom: 1px solid var(--hair); }
.metodo summary { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; font-size: 14.5px; padding: 14px 2px; list-style: none; }
.metodo summary::-webkit-details-marker { display: none; }
.metodo summary::after { content: "+"; font-weight: 300; font-size: 19px;
  color: var(--ink-4); flex: none; transition: transform 0.2s; }
.metodo details[open] summary::after { transform: rotate(45deg); }
.metodo details > *:not(summary) { margin-bottom: 16px; }

/* tabela */
.tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 540px; }
th, td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th {
  color: var(--ink-4); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
td { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

/* botões — pílulas de vidro */
button {
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 20px; padding: 10px 16px; cursor: pointer; min-height: 42px;
  transition: background .15s, transform .15s;
}
button:hover { background: var(--glass-hover); }
button.on {
  background: var(--mint); border-color: rgba(40, 120, 90, 0.3);
  color: var(--mint-ink); font-weight: 700;
}
/* muted is not "active": mint is reserved for solo, gray for mute */
button.mut {
  background: var(--tinta-suave); border-color: var(--hair);
  color: var(--ink-2); font-weight: 700;
}
.chips { display: flex; gap: 9px; flex-wrap: wrap; }

/* lente de harmônicos — the "Praticar Canto" membrane.
   It IS the whole transport: the ring is the track, the center is the play. */
@keyframes gira-h { to { transform: rotate(360deg); } }
@keyframes gira-ah { to { transform: rotate(-360deg); } }
@keyframes respira { 0%,100% { transform: translateY(0) scale(1); }
                     50% { transform: translateY(-7px) scale(1.012); } }
#lente { position: relative; display: flex; align-items: center; justify-content: center;
  margin: 10px auto 22px; width: 320px; height: 320px; animation: respira 7s ease-in-out infinite; }
#lente .glow {
  position: absolute; inset: -38px; border-radius: 50%;
  background: radial-gradient(circle, var(--nevoa-1) 0%, transparent 66%);
  filter: blur(20px);
}
#lente .marcas-gira { position: absolute; inset: 2px; animation: gira-h 60s linear infinite; }
#lente .marcas-gira i { position: absolute; display: block; }
#lente .anel-gira {
  position: absolute; inset: 12px; border-radius: 50%;
  border: 1px solid var(--glass-line); animation: gira-ah 90s linear infinite;
}
#lente .shell {
  position: absolute; inset: 26px; border-radius: 50%;
  background: linear-gradient(150deg, var(--brilho), transparent 46%, rgba(30, 40, 80, 0.14));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sombra),
              inset 0 2px 14px var(--brilho),
              inset 0 -18px 40px rgba(30, 40, 90, 0.22);
}
#lente .specular {
  position: absolute; inset: 26px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 50% at 32% 26%, rgba(255, 255, 255, 0.45) 0%, transparent 55%);
}
#lentecv { position: relative; border-radius: 50%; cursor: pointer; width: 306px; height: 306px; }
#lente .nota-centro {
  position: absolute; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
/* Glyph and note occupy the SAME fixed-height slot, so the swap never moves the
   layout. Stopped shows the play; playing shows the note; playing with the pointer
   over the lens brings the glyph back, now as pause. The swap is all CSS. */
#lente .nota-centro .centro {
  pointer-events: auto; background: none; border: 0; box-shadow: none; padding: 0;
  min-height: 0; height: 52px; width: 132px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
#lente .nota-centro .centro:hover { background: none; transform: none; }
#lente .glifo { display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); transition: color .15s, transform .15s; }
#lente .nota-centro .centro:hover .glifo { color: var(--ink); transform: scale(1.09); }
#lente .n { display: none; font-size: 38px; font-weight: 300; line-height: 1;
  letter-spacing: -0.015em; color: var(--ink); }

#lente.tocando .glifo { display: none; }
#lente.tocando .n { display: block; }
/* Only where a real pointer exists. Touch has no hover, and on iOS the first tap
   on an element with :hover tends to only trigger the state instead of clicking —
   it would feel like the pause does not work. */
@media (hover: hover) and (pointer: fine) {
  #lente.tocando:hover .glifo { display: flex; }
  #lente.tocando:hover .n { display: none; }
}

#lente .nota-centro .m {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  min-height: 1.5em; margin-top: 6px;
}
#lente .nota-centro .t {
  font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 8px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
#lente .nota-centro .t .sep { opacity: 0.45; margin: 0 3px; }

/* transporte */
.time { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
        letter-spacing: 0.04em; color: var(--ink-3); }

/* leituras */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.st {
  flex: 1 1 96px; padding: 11px 14px; border-radius: 16px;
  background: var(--glass-2); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.st .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em;
         color: var(--ink-4); font-weight: 600; }
.st .v { font-size: 23px; font-weight: 300; font-variant-numeric: tabular-nums;
         line-height: 1.28; letter-spacing: -0.01em; }
.st .v small { font-size: 11px; color: var(--ink-4); font-weight: 500; }

/* faixas */
.tr { display: grid; grid-template-columns: 1fr 56px 96px; align-items: center;
      gap: 12px; padding: 11px 4px; border-top: 1px solid var(--hair); }
.tr:first-child { border-top: 0; }
.tr.off { opacity: 0.4; }
.tr .nm { font-size: 14px; font-weight: 600; }
.tr .hz { font-size: 11px; color: var(--ink-4); font-weight: 500;
          font-variant-numeric: tabular-nums; }
.tr .mt { height: 9px; margin-top: 7px; border-radius: 5px; overflow: hidden;
          background: var(--tinta-suave); }
.tr .mt i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width .06s linear; }
.tr .db { font-size: 11.5px; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.tr .ct { display: flex; gap: 7px; justify-content: flex-end; }
.tr .ct button { width: 42px; padding: 0; font-size: 12px; border-radius: 14px; }
.tr.carregando .nm::after { content: " ⋯"; color: var(--mint-strong); }
@media (max-width: 440px) { .tr { grid-template-columns: 1fr 48px 94px; } }

/* figuras */
figure { margin: 0 0 16px; }
figure img {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  border-radius: 18px; border: 1px solid var(--glass-line); box-shadow: var(--sombra);
}
figcaption { color: var(--ink-3); font-size: 13px; margin-top: 11px; line-height: 1.55; }
.zoom { color: var(--mint-strong); font-weight: 700; }
/* lightbox is a dark room in both themes on purpose — the figures are light */
#lb { position: fixed; inset: 0; background: rgba(30, 34, 58, 0.94); z-index: 99;
      display: none; overflow: auto; -webkit-overflow-scrolling: touch;
      backdrop-filter: blur(6px); }
#lb.on { display: block; }
#lb img { display: block; max-width: none; height: auto; }
#lb .x { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 100;
         width: 46px; height: 46px; padding: 0; font-size: 18px;
         background: rgba(255, 255, 255, 0.9); border-color: transparent; color: #2b2e42; }

details summary { color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }
details p { margin-top: 12px; font-size: 14px; color: var(--ink-3); line-height: 1.68; }
details p b { color: var(--ink); font-weight: 700; }
kbd { background: var(--glass-2); border: 1px solid var(--hair); border-radius: 6px;
      padding: 2px 7px; font-size: 11.5px; font-weight: 600; }
footer { color: var(--ink-4); font-size: 12.5px; margin-top: 76px;
         border-top: 1px solid var(--hair); padding-top: 18px; line-height: 1.6; }
#erro { color: var(--alerta); font-size: 14px; font-weight: 600; }

@media (max-width: 520px) {
  #lente { width: 286px; height: 286px; }
  #lentecv { width: 272px; height: 272px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
 * Telas do serviço: entrar, enviar, acompanhar, comparar.
 * Same vocabulary as above — glass, mint, blue = compressed, red =
 * breathy. No new color: the comparison uses the SAME scale as the
 * plots, otherwise the page contradicts the figures it shows.
 * =================================================================== */

/* formulários */
label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.16em; color: var(--ink-4); margin-bottom: 7px; }
input[type=text], input[type=email], input[type=password] {
  font-family: inherit; font-size: 15px; color: var(--ink); width: 100%;
  background: var(--glass-2); border: 1px solid var(--hair);
  border-radius: 14px; padding: 12px 15px; min-height: 46px;
  transition: border-color .15s, background .15s;
}
input::placeholder { color: var(--ink-4); }
input:focus { outline: none; border-color: var(--mint-strong); background: var(--glass); }
.campo { margin-bottom: 15px; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.linha > .campo { flex: 1 1 220px; margin-bottom: 0; }
button.primario {
  background: var(--mint); border-color: rgba(40, 120, 90, 0.3); color: var(--mint-ink);
  font-weight: 700; font-size: 14px; padding: 12px 22px;
}
button.primario:hover { background: var(--mint); filter: brightness(1.04); }
button:disabled { opacity: 0.5; cursor: default; }
button.perigo { color: var(--alerta); }
.ajuda { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.55; }

/* alternador de modo */
.abas { display: flex; gap: 8px; margin-bottom: 20px; }
.abas button { flex: 1 1 0; }

/* zona de arrasto */
.solta {
  border: 1.5px dashed var(--ink-4); border-radius: 18px; padding: 26px 18px;
  text-align: center; background: var(--glass-2); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.solta:hover, .solta.sobre { background: var(--glass-hover); border-color: var(--mint-strong); }
.solta .rot { font-size: 15px; font-weight: 600; }
.solta .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.solta.cheia { border-style: solid; border-color: rgba(26, 158, 110, 0.5);
               background: rgba(143, 231, 191, 0.18); }
.solta input[type=file] { display: none; }
.duplo { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .duplo { grid-template-columns: 1fr 1fr; } }

/* lista de análises */
.item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
        padding: 14px 4px; border-top: 1px solid var(--hair); }
.item:first-child { border-top: 0; }
.item .tt { font-size: 16px; font-weight: 600; line-height: 1.3; }
.item .sub { font-size: 12px; color: var(--ink-4); font-weight: 500; margin-top: 3px; }
.selo { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
        text-transform: uppercase; padding: 3px 9px; border-radius: 10px; margin-right: 7px; }
.selo.pronto { background: rgba(143, 231, 191, 0.5); color: var(--mint-ink); }
.selo.rodando { background: var(--glass-hover); color: var(--ink-2); }
.selo.erro { background: rgba(163, 47, 46, 0.16); color: var(--leve); }

/* log de progresso */
.log { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px;
       line-height: 1.65; color: var(--ink-3); background: var(--glass-2);
       border: 1px solid var(--hair); border-radius: 14px; padding: 13px 15px;
       max-height: 240px; overflow-y: auto; white-space: pre-wrap; }
.log b { color: var(--ink); font-weight: 700; }
.etapa { font-size: 17px; font-weight: 300; margin-bottom: 4px; }
.girando::after { content: ""; display: inline-block; width: 11px; height: 11px;
  margin-left: 9px; border: 2px solid var(--tinta-suave);
  border-top-color: var(--mint-strong); border-radius: 50%;
  animation: gira-h .8s linear infinite; vertical-align: -1px; }
.barra { height: 6px; border-radius: 4px; background: var(--tinta-suave); overflow: hidden;
         margin: 14px 0 4px; }
.barra i { display: block; height: 100%; background: var(--mint-strong); width: 0;
           transition: width .4s ease; }

/* ---- comparação ---- */
/* Placar: números grandes e finos em itens abertos com fio no topo (zip design). */
.placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
          gap: 14px 40px; }
.pl { border-top: 1px solid var(--hair); padding-top: 14px; }
.pl .v { font-size: 38px; font-weight: 200; line-height: 1.1; letter-spacing: -0.02em;
         font-variant-numeric: tabular-nums; }
.pl .v small { font-size: 13px; font-weight: 500; color: var(--ink-4); }
.pl .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em;
         color: var(--ink-4); font-weight: 600; margin-top: 5px; }
.pl .n { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }

/* Fita de notas: cada nota da referência é um bloco, largura = duração.
   Cor = desvio de afinação na MESMA escala dos gráficos (azul/vermelho) —
   os blocos são pintados pelo JS com cores fixas, iguais nos dois temas. */
.fita { display: flex; gap: 3px; align-items: flex-end; height: 92px; margin: 4px 0 10px;
        overflow-x: auto; padding-bottom: 6px; }
.fita .nt { flex: 0 0 auto; min-width: 14px; border-radius: 5px 5px 2px 2px;
            cursor: pointer; position: relative; padding: 0; min-height: 0;
            /* hairline outline so an on-target block still has an edge */
            border: 1px solid var(--hair); box-shadow: none; }
.fita .nt:hover { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.fita .nt.sel { outline: 2px solid var(--mint-strong); outline-offset: 1px; }
.legenda-fita { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px;
                color: var(--ink-3); margin-top: 2px; }
.legenda-fita i { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
                  margin-right: 5px; vertical-align: -1px; }

/* detalhe da nota escolhida + A/B */
.ab { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 620px) { .ab { grid-template-columns: 1fr 1fr; } }
.lado { padding: 15px 16px; border-radius: 18px; background: var(--glass-2);
        border: 1px solid var(--hair); }
.lado .quem { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
              color: var(--ink-4); font-weight: 600; }
.lado .nota { font-size: 30px; font-weight: 300; line-height: 1.15; margin: 5px 0 8px; }
.lado dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.lado dt { color: var(--ink-3); }
.lado dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.trans { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

/* Gráfico com camada por cima: os dados num canvas, a seleção e a barra de
   reprodução em outro. Redesenhar a matriz de harmônicos a cada quadro custaria
   milhares de retângulos por quadro; a camada custa duas linhas.
   The canvases are painted by JS with ink-on-light colors that cannot follow the
   theme, so in the dark theme the chart area gets a light "paper" backing. */
.graf { position: relative; margin-bottom: 12px; touch-action: pan-y;
        border-radius: 12px; overflow: hidden; }
.graf canvas { display: block; width: 100%; }
.graf canvas.over { position: absolute; inset: 0; cursor: crosshair; }
.graf.tocando canvas.over { cursor: default; }
@media (prefers-color-scheme: dark) {
  .graf { background: #e7e9f2; }
}
.trans[data-transporte] { margin-top: 0; }
.trans[data-transporte] button { min-height: 38px; padding: 8px 14px; }