/* SRP Estúdio de Vídeo — identidade do Sindicato Rural de Pindamonhangaba.
   Verde #1e5c30 · ouro #c8a84b · creme #f5efe3 · escuro #0B1612 */

.srpev {
	--ev-verde: #1e5c30;
	--ev-ouro: #c8a84b;
	--ev-ouro-cl: #e0c476;
	--ev-creme: #f5efe3;
	--ev-dark: #0B1612;
	--ev-s1: #0f1d17;
	--ev-s2: #14261e;
	--ev-s3: #1b3227;
	/* Xadrez que denuncia transparência atrás das miniaturas de marca. */
	--ev-xadrez1: #cfcfcf;
	--ev-xadrez2: #bcbcbc;
	--ev-linha: #24402f;
	--ev-txt: #e6ded0;
	--ev-dim: #8f9b90;
	--ev-alerta: #d97b3a;
	--ev-alerta-txt: #f0b98d;
	--ev-rec: #c8433a;
	--ev-rec-txt: #f2b0aa;

	/* Campos de formulário. Ficam à parte das superfícies porque no tema
	   claro o campo é branco enquanto o painel é creme. */
	--ev-campo: #0f1d17;
	--ev-campo-txt: #ffffff;

	/* Marcações desenhadas no canvas — o JS lê estas por getComputedStyle. */
	--ev-vedar: rgba(11,22,18,.42);
	--ev-faixa: rgba(190,206,86,.14);
	--ev-faixa-txt: rgba(190,206,86,.75);
	--ev-onda: rgba(255,255,255,.30);
	--ev-onda-miolo: rgba(255,255,255,.70);
	--ev-onda-corte: rgba(232,205,124,.9);

	/* Faixas da linha do tempo. */
	--ev-cv1: #2c7d43; --ev-cv2: #1e5c30; --ev-cvt: #eaf4ec;

	/* Mira de referência. O verde-limão não é decorativo: é a única cor
	   da paleta que não aparece em pasto, terra, céu nem pelo de boi, que
	   é o conteúdo de praticamente toda peça do Sindicato. */
	--ev-mira-armada: #bece56;
	--ev-ci1: #3a6f8a; --ev-ci2: #274d60; --ev-cit: #e6f0f5;
	--ev-ct1: #d3b158; --ev-ct2: #a9873a; --ev-ctt: #221b08;
	--ev-ca1: #7a5aa8; --ev-ca2: #523a75; --ev-cat: #efe9f7;
	--ev-cc1: #b07c2f; --ev-cc2: #7d5720; --ev-cct: #fff4dd;
	--ev-sombra: rgba(0,0,0,.5);
	--ev-veu: rgba(5,10,8,.78);
	--ev-pino: #ffffff;

	/* O quadro da prévia é preto nos dois temas, de propósito: peça de Reels
	   é vista sobre preto, e julgar cor sobre creme engana. */
	--ev-palco: #000000;
	--ev-carregando: #666666;
	--ev-ok: #7fbf7f;

	/* Tudo o que é desenhado sobre o palco. O palco fica escuro nos dois
	   temas — peça de Reels é vista sobre preto, e julgar cor sobre creme
	   engana — então o que repousa nele não pode herdar a cor de texto da
	   interface. Herdando, no tema claro o ícone virava grafite sobre
	   grafite: 1,01:1 de contraste, invisível. */
	--ev-sobrepalco: #e6ded0;
	--ev-sobrepalco-dim: #9aa79b;
	--ev-sobrepalco-bt: rgba(11,22,18,.5);
	--ev-sobrepalco-borda: rgba(230,222,208,.22);

	/* Fundo da tela de senha e brilhos de ambiente. Ficam à parte de
	   --ev-dark porque o palco continua preto no tema claro, mas a tela de
	   senha não: ela é interface, não prévia. */
	--ev-fundo: #0B1612;
	--ev-brilho1: rgba(30,92,48,.34);
	--ev-brilho2: rgba(200,168,75,.10);
	--ev-sobre: rgba(11,22,18,.95);
	/* Texto sobre superfície colorida (etiqueta de categoria, botão ouro).
	   Fica escuro nos dois temas: a cor por baixo é a mesma nos dois. */
	--ev-emcor: #0b1612;
	/* Realces translúcidos. No tema claro o mesmo ouro a 6% desaparece
	   sobre creme, então os dois temas trazem opacidades próprias. */
	--ev-ouro-fraco: rgba(200,168,75,.06);
	--ev-ouro-medio: rgba(200,168,75,.10);
	--ev-alerta-fraco: rgba(217,123,58,.14);
	--ev-rec-fraco: rgba(200,67,58,.14);
	--ev-alca-fundo: rgba(0,0,0,.34);
	--ev-alca-hover: rgba(255,255,255,.18);
	--ev-alca-forte: rgba(0,0,0,.6);
	--ev-divisor: rgba(36,64,47,.55);

	/* Rampa de referência das predefinições de correção. Fixa nos dois
	   temas de propósito: é uma carta de cor, e carta de cor que muda com o
	   tema não serve para comparar nada. */
	--ev-amostra: linear-gradient(135deg, #1a2b1f 0%, #6f8a5a 42%, #d9c68d 74%, #f7f1e2 100%);

	--ev-ui: 'Oswald', -apple-system, system-ui, sans-serif;
	--ev-disp: 'Playfair Display', Georgia, serif;
	--ev-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.srpev-raiz { margin: 20px 20px 20px 0; }
.srpev-carregando { padding: 40px; color: var(--ev-carregando, #666); font-size: 14px; }

.srpev *, .srpev *::before, .srpev *::after { box-sizing: border-box; }
.srpev button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.srpev input, .srpev select, .srpev textarea {
	font-family: inherit; color: var(--ev-campo-txt); background: var(--ev-campo);
	border: 1px solid var(--ev-linha); border-radius: 4px;
	padding: 5px 7px; font-size: 12px; width: 100%; min-height: 0; line-height: 1.4;
	box-shadow: none;
}
.srpev input:focus, .srpev select:focus, .srpev textarea:focus,
.srpev button:focus-visible, .srpev [tabindex]:focus-visible {
	outline: 2px solid var(--ev-ouro); outline-offset: 1px; border-color: var(--ev-ouro); box-shadow: none;
}
.srpev input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--ev-ouro); }
.srpev input[type=number] { font-family: var(--ev-mono); font-size: 11px; }
.srpev ::-webkit-scrollbar { width: 8px; height: 8px; }
.srpev ::-webkit-scrollbar-thumb { background: var(--ev-linha); border-radius: 4px; }
.ev-oculto { display: none !important; }
.ev-espaco { flex: 1 1 auto; min-width: 0; }
.srpev .ev-topo .ev-espaco { flex: 1 1 auto; }

.ev-app {
	display: grid;
	height: calc(100vh - 92px);
	min-height: 620px;
	grid-template-columns: 74px 244px 1fr 298px;
	grid-template-rows: 52px 1fr 206px;
	grid-template-areas:
		"topo topo topo topo"
		"rail lib palco insp"
		"tl tl tl tl";
	background: var(--ev-dark);
	color: var(--ev-txt);
	font-family: var(--ev-ui);
	font-weight: 300;
	border: 1px solid var(--ev-linha);
	border-radius: 6px;
	overflow: hidden;
	max-width: 100%;
}

/* Sem isto, o conteúdo mínimo de uma área estica a grade inteira
   e joga o inspetor para fora da tela. */
.ev-app > * { min-width: 0; min-height: 0; }

/* ---------- topo ---------- */
.ev-topo {
	grid-area: topo; display: flex; align-items: center; gap: 12px; padding: 0 13px;
	background: var(--ev-s1); border-bottom: 1px solid var(--ev-linha);
	min-width: 0; overflow: hidden;
}
.ev-topo > * { flex: none; }
.ev-marca { display: flex; align-items: center; gap: 9px; padding-right: 13px; border-right: 1px solid var(--ev-linha); white-space: nowrap; }
.ev-marca svg { width: 26px; height: 30px; flex: none; }
.ev-marca b { font-family: var(--ev-disp); font-size: 15px; font-weight: 700; color: var(--ev-creme); }
.ev-marca span { display: block; font-size: 8.5px; letter-spacing: .16em; color: var(--ev-ouro); text-transform: uppercase; margin-top: 1px; white-space: nowrap; }
.srpev .ev-titulo {
	flex: 0 1 220px;
	width: 220px;
	min-width: 90px;
	background: transparent;
	border-color: transparent;
	font-size: 13px;
}
.srpev .ev-titulo:hover { border-color: var(--ev-linha); }
.ev-estado { font-size: 10.5px; color: var(--ev-dim); font-family: var(--ev-mono); white-space: nowrap; overflow: hidden; max-width: 150px; }
.ev-fmt { display: flex; background: var(--ev-s2); border: 1px solid var(--ev-linha); border-radius: 5px; overflow: hidden; }
.ev-fmt button { padding: 5px 11px; font-size: 11px; letter-spacing: .08em; color: var(--ev-dim); border-right: 1px solid var(--ev-linha); }
.ev-fmt button:last-child { border-right: 0; }
.ev-fmt button[aria-pressed=true] { background: var(--ev-verde); color: #fff; }
.ev-btn {
	border: 1px solid var(--ev-linha); border-radius: 5px; padding: 6px 12px;
	font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; background: var(--ev-s2);
}
.ev-btn:hover { border-color: var(--ev-ouro); color: var(--ev-ouro-cl); }
.ev-btn[aria-pressed=true] { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.ev-btn.ev-ouro { background: var(--ev-ouro); color: #12100a; border-color: var(--ev-ouro); font-weight: 500; }
.ev-btn.ev-ouro:hover { background: var(--ev-ouro-cl); color: #12100a; }
.ev-btn:disabled { opacity: .5; cursor: default; }

/* ---------- rail ---------- */
.ev-rail { grid-area: rail; background: var(--ev-s1); border-right: 1px solid var(--ev-linha); padding: 6px 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.ev-rbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px; font-size: 9.5px; letter-spacing: .04em; color: var(--ev-dim); border-left: 2px solid transparent; }
.ev-rbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ev-rbtn:hover { color: var(--ev-txt); background: var(--ev-s2); }
.ev-rbtn[aria-selected=true] { color: var(--ev-ouro); background: var(--ev-s2); border-left-color: var(--ev-ouro); }

/* ---------- painel esquerdo ---------- */
.ev-lib { grid-area: lib; background: var(--ev-s2); border-right: 1px solid var(--ev-linha); display: flex; flex-direction: column; overflow: hidden; }
.ev-lib section { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.ev-ph { padding: 10px 12px 8px; border-bottom: 1px solid var(--ev-linha); flex: none; }
.ev-ph h2 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-creme); margin: 0; padding: 0; }
.ev-ph p { font-size: 10.5px; color: var(--ev-dim); margin: 3px 0 0; line-height: 1.4; }
.ev-pb { flex: 1; overflow-y: auto; padding: 11px 12px; }
.ev-sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-ouro); margin: 12px 0 7px; }
.ev-sub:first-child { margin-top: 0; }
.ev-drop { display: block; width: 100%; border: 1.5px dashed var(--ev-linha); border-radius: 6px; padding: 11px 10px; text-align: center; font-size: 11px; color: var(--ev-dim); line-height: 1.5; }
.ev-drop2 { margin-top: 8px; padding: 15px 10px; }
.ev-drop:hover, .ev-drop.ev-over { border-color: var(--ev-ouro); color: var(--ev-ouro-cl); background: var(--ev-ouro-fraco); }
.ev-drop b { display: block; color: var(--ev-creme); font-size: 12px; font-weight: 500; margin-bottom: 3px; }
.ev-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.ev-grade.ev-col1 { grid-template-columns: 1fr; }
.ev-ativo { position: relative; border: 1px solid var(--ev-linha); border-radius: 5px; overflow: hidden; background: var(--ev-palco); aspect-ratio: 9/12; cursor: pointer; }
.ev-ativo:hover { border-color: var(--ev-ouro); }
.ev-ativo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-semmini { height: 100%; display: grid; place-items: center; font-size: 9px; padding: 8px; text-align: center; line-height: 1.4; }
.ev-tag { position: absolute; top: 3px; left: 3px; font-size: 8px; background: var(--ev-sobre); border-radius: 2px; padding: 1px 4px; color: var(--ev-ouro); }
.ev-nm { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8.5px; padding: 3px 4px; background: linear-gradient(transparent, var(--ev-sobre)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-ativo.ev-som { aspect-ratio: auto; height: 50px; display: flex; align-items: center; gap: 7px; padding: 0 8px; background: var(--ev-s3); }
.ev-ativo.ev-som svg { width: 15px; height: 15px; stroke: var(--ev-ouro); fill: none; stroke-width: 1.6; flex: none; }
.ev-info { min-width: 0; flex: 1; }
.ev-info b { display: block; font-size: 10.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-info span { font-size: 9px; color: var(--ev-dim); font-family: var(--ev-mono); }
.ev-vazio { font-size: 10.5px; color: var(--ev-dim); text-align: center; padding: 16px 6px; line-height: 1.6; margin: 0; }
.ev-lista { display: flex; flex-direction: column; gap: 6px; }
.ev-card { border: 1px solid var(--ev-linha); border-radius: 5px; padding: 8px 10px; background: var(--ev-s3); text-align: left; width: 100%; }
.ev-card:hover { border-color: var(--ev-ouro); }
.ev-card[aria-pressed=true] { border-color: var(--ev-ouro); background: var(--ev-ouro-medio); }
.ev-card:disabled { opacity: .4; cursor: default; }
.ev-card b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ev-creme); }
.ev-card span { font-size: 10px; color: var(--ev-dim); line-height: 1.45; display: block; margin-top: 2px; }
.ev-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.ev-pill { border: 1px solid var(--ev-linha); border-radius: 20px; padding: 3px 9px; font-size: 10.5px; color: var(--ev-dim); }
.ev-pill[aria-pressed=true] { border-color: var(--ev-ouro); color: var(--ev-ouro); background: var(--ev-ouro-medio); }
.ev-gravar { display: flex; align-items: center; gap: 9px; border: 1px solid var(--ev-linha); border-radius: 6px; padding: 9px 11px; background: var(--ev-s3); width: 100%; }
.ev-bolha { width: 26px; height: 26px; border-radius: 50%; background: var(--ev-rec); flex: none; transition: border-radius .2s; }
.ev-gravar.ev-on .ev-bolha { border-radius: 5px; animation: ev-pulsa 1.1s infinite; }
@keyframes ev-pulsa { 50% { opacity: .42; } }
.ev-gtxt { text-align: left; flex: 1; }
.ev-gtxt b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ev-creme); }
.ev-gtxt span { font-size: 10px; color: var(--ev-dim); font-family: var(--ev-mono); }

/* ---------- camadas ---------- */
.ev-cam { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ev-linha); border-radius: 5px; padding: 6px 7px; background: var(--ev-s3); cursor: pointer; }
.ev-cam[aria-selected=true] { border-color: var(--ev-ouro); background: var(--ev-ouro-medio); }
.ev-cam .ev-ic { width: 16px; height: 16px; flex: none; stroke: var(--ev-ouro); fill: none; stroke-width: 1.6; }
.ev-cam .ev-nome { flex: 1; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-cam .ev-zi { font-family: var(--ev-mono); font-size: 9px; color: var(--ev-dim); }
.ev-cam button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; color: var(--ev-dim); flex: none; padding: 0; }
.ev-cam button:hover { background: var(--ev-linha); color: var(--ev-ouro); }
.ev-cam button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ev-cam.ev-oculta .ev-nome { opacity: .4; text-decoration: line-through; }

/* ---------- palco ---------- */
.ev-palco { grid-area: palco; background: var(--ev-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 13px; position: relative; overflow: hidden; }
.ev-moldura { position: relative; box-shadow: 0 0 0 1px var(--ev-linha), 0 14px 40px rgba(0,0,0,.6); background: var(--ev-palco); }
.ev-moldura canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ev-aviso { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); background: var(--ev-alerta-fraco); border: 1px solid var(--ev-alerta); color: var(--ev-alerta-txt); font-size: 10.5px; padding: 5px 11px; border-radius: 4px; display: none; z-index: 5; }
.ev-aviso.ev-on { display: block; }
.ev-hud { position: absolute; left: 11px; bottom: 11px; font-family: var(--ev-mono); font-size: 10px; color: var(--ev-ouro); background: rgba(11,22,18,.8); border: 1px solid var(--ev-linha); border-radius: 4px; padding: 3px 8px; display: none; }
.ev-hud.ev-on { display: block; }
.ev-transporte {
	display: flex; align-items: center; gap: 11px;
	background: var(--ev-s1); border: 1px solid var(--ev-linha);
	border-radius: 6px; padding: 5px 12px;
	color: var(--ev-txt);
}
.ev-transporte button { color: inherit; }
.ev-transporte button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ev-transporte button:hover { color: var(--ev-ouro); }
.ev-tc { font-family: var(--ev-mono); font-size: 11.5px; }
.ev-tc b { color: var(--ev-ouro); font-weight: 400; }
.ev-tc i { font-style: normal; color: var(--ev-dim); }
.ev-dim { color: var(--ev-dim); }

/* ---------- inspector ---------- */
.ev-insp { grid-area: insp; background: var(--ev-s2); border-left: 1px solid var(--ev-linha); display: flex; flex-direction: column; overflow-y: auto; }
.ev-grupo { border-bottom: 1px solid var(--ev-linha); padding: 10px 12px; }
.ev-grupo h3 { font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--ev-ouro); font-weight: 500; margin: 0 0 8px; padding: 0; }
.ev-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ev-linha:last-child { margin-bottom: 0; }
.ev-linha label { font-size: 11px; color: var(--ev-dim); flex: none; width: 72px; }
.ev-val {
	font-family: var(--ev-mono); font-size: 11px; color: var(--ev-creme);
	min-width: 44px; flex: none; text-align: right; white-space: nowrap;
}
.ev-linha label { min-width: 0; overflow-wrap: break-word; }
.ev-grupo, .ev-insp > * { min-width: 0; }
.ev-txtval { font-family: var(--ev-ui); text-align: left; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-par { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 7px; }
.ev-campo { display: flex; flex-direction: column; gap: 3px; }
.ev-campo span { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ev-dim); }
.ev-chave { position: relative; width: 34px; height: 18px; background: var(--ev-linha); border-radius: 9px; flex: none; transition: background .18s; cursor: pointer; }
.ev-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ev-dim); transition: left .18s, background .18s; }
.ev-chave[aria-checked=true] { background: var(--ev-verde); }
.ev-chave[aria-checked=true]::after { left: 18px; background: var(--ev-pino); }
.ev-nota { font-size: 10px; color: var(--ev-dim); line-height: 1.55; margin-top: 7px; padding-left: 9px; border-left: 2px solid var(--ev-linha); }
.ev-nota b { color: var(--ev-ouro-cl); font-weight: 400; }
.ev-linha.ev-mini { gap: 5px; }
.ev-linha.ev-mini button, .ev-minib { font-size: 10px; letter-spacing: .05em; border: 1px solid var(--ev-linha); border-radius: 4px; padding: 3px 8px; color: var(--ev-dim); }
.ev-linha.ev-mini button:hover, .ev-minib:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }

/* ---------- timeline ---------- */
.ev-tl { grid-area: tl; background: var(--ev-s1); border-top: 1px solid var(--ev-linha); display: flex; flex-direction: column; overflow: hidden; }
/* ---------- catálogo de texturas de efeito (inspetor de projeto) ---------- */
.ev-texturas { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.ev-textura { width: 64px; border: 2px solid var(--ev-linha); border-radius: 8px; overflow: hidden; background: var(--ev-s3); cursor: pointer; padding: 0; }
.ev-textura:hover { border-color: var(--ev-ouro); }
.ev-textura.ev-sel { border-color: var(--ev-ouro); }
.ev-textura img { display: block; width: 100%; height: 42px; object-fit: cover; }
.ev-textura span { display: block; font-size: 9px; text-align: center; padding: 2px; font-family: var(--ev-rot, 'Oswald'), sans-serif; letter-spacing: .03em; color: var(--ev-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-texnada { display: grid; place-items: center; height: 42px; font-size: 10px; color: var(--ev-dim); font-family: var(--ev-rot, 'Oswald'), sans-serif; letter-spacing: .05em; }
/* ---------- botões-ícone de alinhamento de texto ---------- */
.ev-pillsalinha { gap: 4px; }
.ev-pilalinha { padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; }
.ev-pilalinha svg { width: 18px; height: 18px; display: block; }
/* ---------- mover camada: setas + réguas H/V ---------- */
.ev-mover { display: flex; gap: 12px; align-items: center; margin-bottom: 9px; }
.ev-movpad { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); gap: 3px; flex: none; }
.ev-movbt { border: 1px solid var(--ev-linha); background: var(--ev-s3); border-radius: 5px; color: var(--ev-ouro); font-size: 14px; line-height: 1; display: grid; place-items: center; padding: 0; }
.ev-movbt:hover { background: var(--ev-ouro); color: var(--ev-dark); border-color: var(--ev-ouro); }
.ev-movcentro { color: var(--ev-dim); font-weight: 700; }
.ev-movreguas { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-movreguas .ev-linha { margin: 0; }
/* ---------- catálogo de marcas do Sindicato (aba Mídia) ---------- */
.ev-marcascat { margin-top: 14px; }
.ev-marcas { display: flex; flex-direction: column; gap: 6px; }
.ev-marcabt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid var(--ev-linha); border-radius: 6px; background: var(--ev-s3); cursor: pointer; }
.ev-marcabt:hover { border-color: var(--ev-ouro); }
.ev-marcaimg { flex: none; width: 46px; height: 34px; border-radius: 4px; display: grid; place-items: center; overflow: hidden;
	background-color: var(--ev-xadrez1);
	background-image: linear-gradient(45deg,var(--ev-xadrez2) 25%,transparent 25%,transparent 75%,var(--ev-xadrez2) 75%), linear-gradient(45deg,var(--ev-xadrez2) 25%,transparent 25%,transparent 75%,var(--ev-xadrez2) 75%);
	background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.ev-marcaimg img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ev-marcanome { min-width: 0; }
.ev-marcanome b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ev-creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-marcanome i { font-style: normal; font-size: 9.5px; color: var(--ev-dim); }
/* Arrastar a agulha não pode virar seleção de texto: sem esta trava, o
   gesto que passa por cima dos nomes dos clipes e dos rótulos das trilhas
   destacava o texto em vez de deslizar a agulha. A régua e as trilhas não
   têm texto para copiar — só rótulos — então bloquear a seleção aqui não
   tira nada de quem edita e conserta o arraste de vez. */
.ev-tl, .ev-tl * { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
/* Enquanto o dedo/ponteiro arrasta, a trava vale para a página inteira:
   o gesto pode sair da faixa e ainda assim não deve pintar seleção. */
.srpev.ev-scrub, .srpev.ev-scrub * { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; cursor: ew-resize !important; }
.ev-tlbar { display: flex; align-items: center; gap: 9px; padding: 5px 12px; border-bottom: 1px solid var(--ev-linha); }
.ev-tlbar .ev-t { font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--ev-dim); }
.ev-tlbar button { font-size: 10.5px; color: var(--ev-dim); border: 1px solid var(--ev-linha); border-radius: 4px; padding: 3px 8px; }
.ev-tlbar button:hover { color: var(--ev-ouro); border-color: var(--ev-ouro); }
.ev-tlwrap { flex: 1; overflow: auto; position: relative; }
.ev-regua { height: 34px; position: sticky; top: 0; z-index: 3; background: var(--ev-s1); border-bottom: 1px solid var(--ev-linha); cursor: ew-resize; display: block; }
.ev-trilhas { position: relative; }
.ev-trilha { display: flex; height: 46px; border-bottom: 1px solid var(--ev-linha); }
.ev-rot { width: 64px; flex: none; position: sticky; left: 0; z-index: 2; background: var(--ev-s1); border-right: 1px solid var(--ev-linha); display: flex; flex-direction: column; justify-content: center; padding-left: 9px; }
.ev-rot b { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--ev-dim); }
.ev-rot i { font-style: normal; font-size: 8px; color: var(--ev-linha); }
.ev-pista { position: relative; flex: 1; }
.ev-clipe { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; overflow: hidden; border: 1px solid var(--ev-sombra); cursor: pointer; display: flex; align-items: center; padding: 0 6px; font-size: 10px; white-space: nowrap; }
.ev-cn { overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.ev-cv { background: linear-gradient(180deg,var(--ev-cv1),var(--ev-cv2)); color: var(--ev-cvt); }
.ev-ci { background: linear-gradient(180deg,var(--ev-ci1),var(--ev-ci2)); color: var(--ev-cit); }
.ev-ct { background: linear-gradient(180deg,var(--ev-ct1),var(--ev-ct2)); color: var(--ev-ctt); }
.ev-ca { background: linear-gradient(180deg,var(--ev-ca1),var(--ev-ca2)); color: var(--ev-cat); }
.ev-cc { background: linear-gradient(180deg,var(--ev-cc1),var(--ev-cc2)); color: var(--ev-cct); }
.ev-clipe[aria-selected=true] { outline: 2px solid var(--ev-ouro); outline-offset: -2px; z-index: 2; }
.ev-vel { margin-left: auto; font-family: var(--ev-mono); font-size: 8.5px; background: rgba(0,0,0,.3); padding: 0 3px; border-radius: 2px; }
.ev-trans { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 17px; height: 17px; border-radius: 3px; background: var(--ev-dark); border: 1px solid var(--ev-ouro); color: var(--ev-ouro); display: grid; place-items: center; font-size: 9px; z-index: 3; padding: 0; }
.ev-trans:hover { background: var(--ev-ouro); color: var(--ev-dark); }
.ev-agulha { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ev-ouro); z-index: 4; pointer-events: none; }
/* A cabeça é a cápsula arredondada dos editores de celular: um alvo de
   leitura maior que o triângulo antigo, sem engordar a linha. */
.ev-agulha::before { content: ""; position: absolute; top: 0; left: -4.5px; width: 10px; height: 16px; border-radius: 5px 5px 6px 6px; background: var(--ev-s1, #fff); border: 1.6px solid var(--ev-tinta, #1c1c1c); box-sizing: border-box; }
.ev-agulha::after { content: ""; position: absolute; top: 15px; left: -0.4px; width: 1.8px; height: 6px; background: var(--ev-tinta, #1c1c1c); }

/* ---------- modal ---------- */
.ev-modal { position: fixed; inset: 0; background: var(--ev-veu); display: none; place-items: center; z-index: 100000; padding: 20px; }
.ev-modal.ev-on { display: grid; }
.ev-cx { background: var(--ev-s2); border: 1px solid var(--ev-linha); border-top: 3px solid var(--ev-ouro); border-radius: 7px; max-width: 580px; width: 100%; max-height: 84vh; overflow: auto; color: var(--ev-txt); font-family: var(--ev-ui); font-weight: 300; }
.ev-cx header { padding: 15px 18px 11px; border-bottom: 1px solid var(--ev-linha); }
.ev-cx header h2 { font-family: var(--ev-disp); font-size: 19px; font-weight: 600; color: var(--ev-creme); margin: 0; padding: 0; }
.ev-cx header p { font-size: 11px; color: var(--ev-dim); margin: 3px 0 0; line-height: 1.5; }
.ev-mcorpo { padding: 15px 18px; font-size: 12px; line-height: 1.65; }
.ev-mcorpo p { margin: 0 0 10px; color: var(--ev-dim); }
.ev-mcorpo strong { color: var(--ev-creme); font-weight: 500; }
.srpev .ev-mcorpo textarea,
.srpev .ev-mcorpo input[type=text],
.srpev .ev-mcorpo input[type=search] { width: 100%; font-size: 12px; line-height: 1.5; }
.ev-mcorpo label { font-size: 11px; color: var(--ev-dim); }
.ev-cx footer { padding: 11px 18px 15px; display: flex; gap: 8px; justify-content: flex-end; }
.ev-alerta { color: var(--ev-alerta-txt); }
.ev-barra { height: 6px; background: var(--ev-s1); border: 1px solid var(--ev-linha); border-radius: 4px; overflow: hidden; margin: 12px 0 8px; }
.ev-barra i { display: block; height: 100%; width: 0; background: var(--ev-ouro); transition: width .2s; }
.ev-prog { font-family: var(--ev-mono); font-size: 11px; }
.ev-projs { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.ev-proj { border: 1px solid var(--ev-linha); border-radius: 5px; padding: 8px 10px; }
.ev-proj b { display: block; font-size: 12px; color: var(--ev-creme); font-weight: 500; }
.ev-proj span { font-size: 10px; color: var(--ev-dim); font-family: var(--ev-mono); }

@media (max-width: 1280px) {
	.ev-app { grid-template-columns: 74px 210px 1fr 260px; }
	.srpev .ev-titulo { flex-basis: 150px; width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
	.srpev *, .srpev *::before, .srpev *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Portão de acesso (shortcode) — centralizado na tela
   ============================================================ */
.srpev-portao-tela {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--ev-fundo);
	background-image:
		radial-gradient(circle at 50% 0%, var(--ev-brilho1), transparent 62%),
		radial-gradient(circle at 50% 100%, var(--ev-brilho2), transparent 58%);
	font-family: var(--ev-ui);
	color: var(--ev-txt);
	overflow: auto;
}
.srpev-portao {
	width: 100%;
	max-width: 340px;
	background: var(--ev-s2);
	border: 1px solid var(--ev-linha);
	border-top: 3px solid var(--ev-ouro);
	border-radius: 8px;
	padding: 30px 28px 24px;
	text-align: center;
	box-shadow: 0 18px 54px rgba(0,0,0,.55);
}
.srpev-brasao { width: 42px; height: 48px; display: block; margin: 0 auto 14px; }
.srpev-portao h2 {
	font-family: var(--ev-disp);
	font-size: 22px;
	font-weight: 600;
	color: var(--ev-creme);
	margin: 0;
	padding: 0;
	line-height: 1.25;
}
.srpev-sub {
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ev-ouro);
	margin: 5px 0 22px;
}
.srpev-portao label {
	display: block;
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ev-dim);
	text-align: left;
	margin-bottom: 6px;
}
.srpev-portao input[type=password] {
	width: 100%;
	background: var(--ev-campo);
	border: 1px solid var(--ev-linha);
	border-radius: 5px;
	color: var(--ev-campo-txt);
	font-family: var(--ev-ui);
	font-size: 22px;
	letter-spacing: .5em;
	text-align: center;
	padding: 11px 10px;
	margin-bottom: 14px;
	box-shadow: none;
}
.srpev-portao input[type=password]:focus {
	outline: 2px solid var(--ev-ouro);
	outline-offset: 1px;
	border-color: var(--ev-ouro);
}
.srpev-portao input[type=password]:disabled { opacity: .45; }
.srpev-entrar {
	width: 100%;
	background: var(--ev-ouro);
	color: #12100a;
	border: 1px solid var(--ev-ouro);
	/* Ouro sobre grafite mantém contraste nos dois temas: não usa token. */
	border-radius: 5px;
	font-family: var(--ev-ui);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 10px;
	cursor: pointer;
}
.srpev-entrar:hover { background: var(--ev-ouro-cl); }
.srpev-entrar:disabled { opacity: .45; cursor: not-allowed; }
.srpev-erro {
	background: var(--ev-rec-fraco);
	border: 1px solid var(--ev-rec);
	border-radius: 5px;
	color: var(--ev-rec-txt);
	font-size: 11.5px;
	line-height: 1.5;
	padding: 8px 10px;
	margin: 0 0 16px;
	text-align: left;
}
.srpev-rodape { font-size: 10.5px; color: var(--ev-dim); margin: 16px 0 0; }

/* ---------- Estúdio no front ---------- */
.srpev-front { position: relative; }
.srpev-front .srpev-raiz { margin: 0; }
.srpev-front .ev-app { height: var(--ev-altura, 100vh); border-radius: 0; border-left: 0; border-right: 0; }
.srpev-sair button {
	background: var(--ev-s2, #14261e);
	border: 1px solid var(--ev-linha, #24402f);
	border-radius: 5px;
	color: var(--ev-dim, #8f9b90);
	font-family: var(--ev-ui);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 11px;
	cursor: pointer;
}
.srpev-sair button:hover { border-color: var(--ev-ouro, #c8a84b); color: var(--ev-ouro, #c8a84b); }

/* O Sair vem do shortcode, fora da raiz do editor. Até o JS encaixá-lo na
   barra superior ele fica fora do canto direito — que é onde mora o
   Exportar. Enquanto não encaixa, some; depois de encaixado, é um item
   normal do fluxo da barra. */
.srpev-front > .srpev-sair { position: absolute; top: -9999px; left: -9999px; }
.ev-vagasair { display: flex; align-items: center; flex: none; }
.ev-vagasair:empty { display: none; }
.srpev-sair.ev-sair-encaixado { position: static; margin: 0; display: flex; align-items: center; }
.srpev-sair.ev-sair-encaixado button { min-height: 30px; }



/* ---------- lista de projetos e mensagens de conferência (v1.2.0) ---------- */
.ev-proj { display: flex; align-items: center; gap: 9px; }
.ev-projinfo { flex: 1; min-width: 0; }
.ev-proj b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-proj .ev-btn { flex: none; padding: 4px 12px; font-size: 10.5px; }
.ev-proj .ev-minib { flex: none; background: none; }
.ev-proj .ev-minib:hover { border-color: var(--ev-rec); color: var(--ev-rec); }
.ev-listaerro { margin: 0 0 12px 18px; padding: 0; list-style: disc; font-size: 11.5px; color: var(--ev-dim); line-height: 1.7; }
.ev-listaerro b { color: var(--ev-creme); font-weight: 500; }
.ev-mcorpo .ev-btn { display: inline-block; }

/* ============================================================
   v1.3.0 — linha do tempo manipulável e ferramentas de animação
   ============================================================ */

/* ---------- clipes com alça de aparar ---------- */
.ev-clipe { padding: 0; user-select: none; touch-action: none; }
.ev-clipe > .ev-corpo {
	flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; padding: 0 4px; display: flex; align-items: center; gap: 4px;
	cursor: grab; position: relative; z-index: 1;
}
.ev-clipe.ev-arrastando > .ev-corpo { cursor: grabbing; }
.ev-alca {
	width: 9px; flex: none; align-self: stretch; cursor: ew-resize;
	position: relative; z-index: 2; border-radius: 3px;
}
.ev-alca::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 2px; height: 14px; border-radius: 1px;
	background: var(--ev-alca-fundo); opacity: 0; transition: opacity .12s;
}
.ev-clipe:hover .ev-alca::after { opacity: 1; }
.ev-alca:hover { background: var(--ev-alca-hover); }
.ev-alca:hover::after { opacity: 1; background: var(--ev-alca-forte); }
.ev-clipe.ev-arrastando { z-index: 6; box-shadow: 0 4px 16px rgba(0,0,0,.5); opacity: .92; }
.ev-clipe .ev-vel { margin-left: auto; }

/* faixas de entrada e saída dentro do clipe de camada */
.ev-fx {
	position: absolute; top: 0; bottom: 0; pointer-events: none;
	background: repeating-linear-gradient(115deg, rgba(11,22,18,.30) 0 4px, transparent 4px 8px);
}
.ev-fxe { left: 0; border-right: 1px solid rgba(11,22,18,.42); }
.ev-fxs { right: 0; border-left: 1px solid rgba(11,22,18,.42); }
.ev-comenf { box-shadow: inset 0 -3px 0 rgba(30,92,48,.75); }

/* guia de encaixe */
.ev-guia {
	position: absolute; top: 0; bottom: 0; width: 1px;
	background: var(--ev-creme); z-index: 5; pointer-events: none;
	display: none; box-shadow: 0 0 6px rgba(245,239,227,.55);
}
.ev-guia.ev-on { display: block; }

.ev-regua { touch-action: none; }
.ev-dica {
	font-size: 9.5px; color: var(--ev-linha); letter-spacing: .04em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1100px) { .ev-dica { display: none; } }

/* ---------- painel de animação ---------- */
.ev-ajustes {
	border: 1px solid var(--ev-linha); border-radius: 5px;
	padding: 9px 10px; margin-top: 7px; background: var(--ev-s1);
}
.ev-ajustes .ev-linha label { width: 66px; }
.ev-ajustes .ev-pills { flex: 1; }
.ev-ajustes .ev-pill { padding: 2px 7px; font-size: 10px; }
.ev-linha.ev-col { flex-direction: column; align-items: stretch; gap: 4px; }
.ev-linha.ev-col label { width: auto; }
.ev-ajustes select { font-size: 11px; }
.ev-btn.ev-larg {
	width: 100%; margin-top: 8px; padding: 5px 10px;
	font-size: 10.5px; text-align: center;
}


/* ============================================================
   v1.4.0 — cada camada na sua faixa
   ============================================================ */
.ev-trilha { height: auto; min-height: 46px; align-items: stretch; }
.ev-rot { padding: 6px 0 6px 9px; justify-content: center; }
.ev-pista { display: flex; flex-direction: column; }
.ev-faixa { position: relative; height: 26px; flex: none; }
.ev-faixa + .ev-faixa { border-top: 1px solid var(--ev-divisor); }
.ev-pista.ev-comfaixas { padding: 3px 0; }
.ev-faixa .ev-clipe { top: 3px; bottom: 3px; }
.ev-vazia { height: 40px; }

/* ---------- fichário do banco de voz ---------- */
.ev-fichario { display: none; margin-top: 10px; }
.ev-fichario.ev-on {
	display: block; border: 1px solid var(--ev-ouro); border-radius: 6px;
	padding: 10px; background: var(--ev-ouro-fraco);
}
.ev-fichacab { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ev-fichacab b { flex: 1; font-size: 11.5px; font-weight: 500; color: var(--ev-creme); }
.srpev .ev-fichario textarea { font-size: 12px; line-height: 1.45; }
.srpev .ev-fichario textarea.ev-falta { border-color: var(--ev-rec); outline: 2px solid var(--ev-rec); }
.ev-fichario .ev-pills { margin: 8px 0; }
.ev-fichario .ev-linha.ev-mini { gap: 6px; }
.ev-fichario .ev-btn { padding: 5px 11px; font-size: 10.5px; }

.ev-busca { margin: 11px 0 8px; }
.srpev .ev-busca input { font-size: 12px; padding: 6px 8px; }
#evCatVoz { margin-bottom: 9px; }

.ev-voz {
	border: 1px solid var(--ev-linha); border-radius: 5px;
	padding: 8px 9px; background: var(--ev-s3);
}
.ev-voz:hover { border-color: rgba(200,168,75,.55); }
.ev-vozcab { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ev-vozcat {
	font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ev-ouro); border: 1px solid rgba(200,168,75,.45);
	border-radius: 3px; padding: 1px 5px;
}
.ev-vozdur { font-family: var(--ev-mono); font-size: 9.5px; color: var(--ev-dim); }
.ev-vozusos {
	margin-left: auto; font-family: var(--ev-mono); font-size: 9px;
	color: var(--ev-verde-cl, #2c7d43);
}
.ev-voztexto {
	font-size: 11.5px; line-height: 1.45; color: var(--ev-txt);
	margin: 0 0 7px; word-break: break-word;
}
.ev-vozacoes { display: flex; gap: 5px; flex-wrap: wrap; }
.ev-vozacoes .ev-minib { font-size: 9.5px; padding: 3px 7px; }
.ev-minib.ev-perigo { margin-left: auto; }
.ev-minib.ev-perigo:hover { border-color: var(--ev-rec); color: var(--ev-rec); }
.ev-clipe.ev-travado > .ev-corpo { cursor: not-allowed; }
.ev-clipe.ev-travado .ev-alca { cursor: not-allowed; }

/* ============================================================
   v1.5.0 — cores de camada e oficina de áudio
   ============================================================ */
.ev-bolinha {
	width: 9px; height: 9px; border-radius: 50%; flex: none;
	box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.ev-cores { display: flex; flex-wrap: wrap; gap: 5px; }
.ev-cor {
	width: 22px; height: 22px; border-radius: 5px; flex: none; padding: 0;
	border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.ev-cor:hover { border-color: var(--ev-ouro); }
.ev-cor[aria-pressed=true] { border-color: var(--ev-creme); }

/* oficina */
.ev-ofgrupo {
	border: 1px solid var(--ev-linha); border-radius: 5px;
	padding: 9px 11px; margin-bottom: 9px; background: var(--ev-s1);
}
.ev-ofgrupo h4 {
	font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ev-ouro); font-weight: 500; margin: 0 0 8px; padding: 0;
}
.ev-ofgrupo .ev-linha label { width: 128px; font-size: 11px; }
.ev-cx .ev-linha.ev-mini { gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.ev-cx .ev-linha.ev-mini .ev-btn { padding: 6px 12px; }

/* montador de fala */
.ev-montagem { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.ev-pedaco {
	border-radius: 4px; padding: 6px 9px; font-size: 11px;
	border-left: 3px solid var(--ev-linha); background: var(--ev-s1);
}
.ev-pedaco b { display: block; color: var(--ev-creme); font-weight: 500; }
.ev-pedaco span { font-size: 10px; color: var(--ev-dim); }
.ev-pedaco.ev-achou { border-left-color: var(--ev-verde); }
.ev-pedaco.ev-faltou { border-left-color: var(--ev-alerta); }
.ev-pedaco.ev-faltou span { color: var(--ev-alerta-txt); }
#evMontar { margin-top: 10px; }

/* ---------- v1.6.0: modal mais largo e legível ---------- */
.ev-cx { max-width: 640px; }
.ev-mcorpo .ev-linha { flex-wrap: wrap; }
.ev-mcorpo .ev-linha label { width: auto; min-width: 64px; }
.ev-mcorpo .ev-linha input[type=range] { flex: 1 1 140px; min-width: 120px; }
.ev-mcorpo > p:first-child { margin-top: 0; }
.ev-mcorpo .ev-nota { margin-top: 12px; }
@media (max-width: 700px) { .ev-cx { max-width: 100%; } }


/* ============================================================
   v1.7.0 — celular

   Uma coluna: prévia em cima, linha do tempo no meio, barra de
   ferramentas embaixo. Os painéis e o inspetor viram gavetas que
   sobem sobre a prévia, como nos editores de celular.
   ============================================================ */
.ev-somovel { display: none; }
.ev-folhacab, .ev-fundofolha { display: none; }

@media (min-width: 781px) {
	.ev-somovel { display: none !important; }
}

@media (max-width: 780px) {
	.srpev-raiz { margin: 0; }

	/* Altura da barra de ferramentas do rodapé, num único lugar.
	   Grade, gavetas e véu leem daqui: quando os três discordam, sobra
	   gaveta em cima de ferramenta — que foi exatamente o defeito da
	   1.11.2. O `env()` reserva o espaço da barrinha do iPhone sem
	   home button; onde não existe, vale zero. */
	.srpev {
		--ev-railh: 58px;
		--ev-railtotal: calc(58px + env(safe-area-inset-bottom, 0px));
	}

	.ev-somovel { display: flex; }
	.srpev .ev-sodesktop { display: none !important; }

	.ev-app {
		grid-template-columns: 1fr;
		grid-template-rows: 48px minmax(160px, 1fr) auto var(--ev-railtotal);
		grid-template-areas: "topo" "palco" "tl" "rail";
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		border: 0;
		border-radius: 0;
	}
	.srpev-front .ev-app { height: 100vh; height: 100dvh; }

	/* ---- barra superior: só o essencial ---- */
	.ev-topo { gap: 8px; padding: 0 10px; }
	.ev-marca { padding-right: 0; border-right: 0; gap: 6px; }
	.ev-marca div { display: none; }
	.ev-marca svg { width: 21px; height: 24px; }
	.srpev .ev-titulo { flex: 1 1 auto; width: auto; min-width: 60px; font-size: 13px; padding: 6px 4px; }
	.ev-estado { display: none; }
	.srpev .ev-topo .ev-btn { padding: 8px 12px; font-size: 11px; min-height: 36px; border-radius: 7px; }
	.srpev .ev-topo .ev-btn.ev-ouro { font-weight: 600; letter-spacing: .06em; }
	#evMenu { align-items: center; justify-content: center; padding: 7px 9px; }

	/* ---- prévia e transporte ----

	   O palco era uma coluna com `justify-content: flex-start`: a moldura
	   crescia até o limite e empurrava o transporte para fora da área
	   visível, que tem `overflow: hidden`. Play, início e fim simplesmente
	   não existiam no celular.

	   Agora o palco é uma grade de duas linhas: a prévia ocupa o que sobrar
	   e o transporte tem altura própria, garantida. Ele nunca sai da tela,
	   por menor que ela seja. */
	.ev-palco {
		display: grid; grid-template-rows: minmax(0, 1fr) 48px;
		padding: 8px 8px 2px; gap: 4px; justify-items: center; align-items: center;
	}
	.ev-moldura { margin: 0 auto; max-height: 100%; }
	.ev-transporte {
		background: transparent; border: 0; padding: 0;
		width: 100%; justify-content: center; gap: 26px;
		grid-row: 2; align-self: center;
	}
	.ev-transporte button { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
	.ev-transporte button svg { width: 20px; height: 20px; }
	/* O tempo corrente cabe e é o que diz onde a agulha está: some só o
	   rótulo do formato, que é informação de conferência. */
	.ev-transporte .ev-tc { display: inline; font-size: 11px; }
	.ev-transporte #evRotFmt { display: none; }
	.ev-aviso { font-size: 9.5px; padding: 4px 9px; max-width: 94%; text-align: center; top: 6px; }

	/* ---- ações do que está selecionado ---- */
	.ev-acoes {
		display: flex; gap: 4px; padding: 6px 8px;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		background: var(--ev-s1); border-top: 1px solid var(--ev-linha);
		scrollbar-width: none;
	}
	.ev-acoes::-webkit-scrollbar { display: none; }
	.ev-acoes:not(.ev-on) { display: none; }
	.ev-acao {
		flex: none; min-width: 62px; padding: 6px 4px;
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		border-radius: 7px; color: var(--ev-txt); background: var(--ev-s3);
		border: 1px solid var(--ev-linha);
	}
	.ev-acao svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
	.ev-acao span { font-size: 9px; letter-spacing: .03em; }
	.ev-acao:active { border-color: var(--ev-ouro); color: var(--ev-ouro); }

	/* ---- linha do tempo ---- */
	.ev-tl { max-height: 46vh; max-height: 46dvh; }
	.ev-tlbar { padding: 5px 10px; gap: 8px; }
	.ev-tctl { font-size: 12px; }
	.ev-tlbar button { padding: 6px 9px; font-size: 11px; min-height: 30px; }
	.ev-rot { display: none; }
	.ev-trilha { min-height: 40px; }
	.ev-faixa { height: 32px; }
	/* A régua e as pistas continuam com a largura em pixels do zoom;
	   o contêiner é que rola. Forçar 100% quebraria o arraste. */
	.ev-alca { width: 15px; }
	.ev-clipe { font-size: 11px; }
	.ev-agulha { left: 0; }
	.ev-agulha::before { border-left-width: 7px; border-right-width: 7px; border-top-width: 10px; left: -7px; }
	.ev-convite { font-size: 12px; }

	/* ---- barra de ferramentas, no rodapé ---- */
	.ev-rail {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 0 env(safe-area-inset-bottom, 0px);
		border-right: 0;
		border-top: 1px solid var(--ev-linha);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Acima das gavetas de propósito. As ferramentas são o caminho
		   para tudo; se um dia outra camada escorregar para cá, que
		   escorregue por baixo delas. */
		position: relative;
		z-index: 70;
	}
	.ev-rail::-webkit-scrollbar { display: none; }
	.ev-rbtn {
		min-width: 56px;
		flex: none;
		border-left: 0;
		border-top: 2px solid transparent;
		padding: 7px 3px 5px;
		gap: 3px;
		justify-content: center;
	}
	.ev-rbtn[aria-selected=true] { border-left-color: transparent; border-top-color: var(--ev-ouro); }
	.ev-rbtn svg { width: 19px; height: 19px; }
	.ev-rbtn span { font-size: 8.5px; letter-spacing: 0; }
	.ev-rbtn.ev-tem { position: relative; }
	.ev-rbtn.ev-tem::after {
		content: ""; position: absolute; top: 5px; right: 10px;
		width: 6px; height: 6px; border-radius: 50%; background: var(--ev-ouro);
	}

	/* ---- gavetas ---- */
	.ev-lib, .ev-insp {
		position: fixed;
		left: 0; right: 0; bottom: var(--ev-railtotal);
		z-index: 60;
		max-height: 64vh;
		max-height: 64dvh;
		border: 0;
		border-top: 2px solid var(--ev-ouro);
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -12px 34px rgba(0,0,0,.55);
		/* Fechada, precisa sair da tela inteira — e a gaveta está ancorada
		   58px acima do fim dela. `translateY(105%)` desloca só 105% da
		   própria altura, então parava justamente em cima da barra de
		   ferramentas: numa gaveta de 60px, cobria 55 dos 58px. Somar o
		   deslocamento da âncora é o que a tira do caminho. */
		transform: translateY(calc(100% + var(--ev-railtotal)));
		visibility: hidden;
		pointer-events: none;
		transition: transform .22s ease, visibility 0s linear .22s;
		overflow: hidden;
	}
	.ev-lib.ev-aberta, .ev-insp.ev-aberta {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: transform .22s ease, visibility 0s;
	}
	.ev-insp.ev-aberta { overflow-y: auto; }

	.ev-folhacab {
		display: flex; align-items: center; gap: 9px;
		padding: 11px 12px 8px;
		border-bottom: 1px solid var(--ev-linha);
		position: sticky; top: 0; background: var(--ev-s2); z-index: 2; flex: none;
	}
	.ev-folhacab b {
		flex: 1; font-size: 12px; font-weight: 500;
		letter-spacing: .12em; text-transform: uppercase; color: var(--ev-creme);
	}
	.ev-puxador {
		position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
		width: 38px; height: 4px; border-radius: 2px; background: var(--ev-linha);
	}
	.ev-fechafolha {
		width: 36px; height: 36px; flex: none;
		border: 1px solid var(--ev-linha); border-radius: 7px;
		color: var(--ev-dim); font-size: 14px; line-height: 1;
	}
	.ev-fundofolha {
		display: block; position: fixed; inset: 0 0 var(--ev-railtotal) 0;
		background: var(--ev-veu); z-index: 55;
		opacity: 0; pointer-events: none; transition: opacity .2s ease;
	}
	.ev-fundofolha.ev-on { opacity: 1; pointer-events: auto; }

	/* ---- janelas ---- */
	.ev-modal { padding: 0; align-items: flex-end; }
	.ev-cx { max-width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 14px 14px 0 0; }
	.ev-modal.ev-tp { align-items: stretch; }
	.ev-modal.ev-tp .ev-cx { max-height: 100vh; height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; }
	.ev-tptexto { font-size: 30px; }
	.ev-ofgrupo .ev-linha label { width: 100%; }
	.ev-ofgrupo .ev-linha { flex-wrap: wrap; }

	/* ---- alvos de toque ---- */
	.srpev .ev-pill { padding: 8px 13px; font-size: 11.5px; }
	.srpev .ev-cor { width: 32px; height: 32px; }
	.srpev .ev-minib { padding: 8px 11px; font-size: 11px; }
	.srpev .ev-cam button { width: 32px; height: 32px; }
	.srpev .ev-chave { width: 44px; height: 26px; }
	.srpev .ev-chave::after { width: 22px; height: 22px; }
	.srpev .ev-chave[aria-checked=true]::after { left: 20px; }
	.srpev input, .srpev select, .srpev textarea { font-size: 16px; }
	.srpev input[type=range] { height: 32px; }
	.ev-linha label { font-size: 12px; }
	.ev-card { padding: 11px 12px; }
	.ev-voz { padding: 11px 12px; }
	.ev-vozacoes .ev-minib { padding: 8px 12px; }

	.srpev-sair { display: none; }
}

@media (max-width: 780px) and (orientation: landscape) {
	/* Deitado sobra largura e falta altura: a barra volta para o lado. */
	.ev-app {
		grid-template-columns: 58px 1fr;
		grid-template-rows: 44px minmax(0, 1fr) auto;
		grid-template-areas: "topo topo" "rail palco" "rail tl";
	}
	.ev-tl { max-height: 40vh; max-height: 40dvh; }
	.ev-rail { flex-direction: column; border-top: 0; border-right: 1px solid var(--ev-linha); overflow-y: auto; }
	.ev-rbtn { min-width: 0; border-top: 0; border-left: 2px solid transparent; }
	.ev-rbtn[aria-selected=true] { border-top-color: transparent; border-left-color: var(--ev-ouro); }
	/* Deitado a barra é coluna: a gaveta encosta no chão e recua pela
	   esquerda. O deslocamento de fechar continua o do retrato, que aqui
	   sobra 58px — sobrar tira da tela, faltar deixaria em cima da barra. */
	.ev-lib, .ev-insp { bottom: 0; left: 58px; max-height: 84vh; max-height: 84dvh; }
	.ev-fundofolha { inset: 0 0 0 58px; }
	.ev-acoes { padding: 4px 6px; }
}


/* ============================================================
   v1.8.0 — celular no modelo dos editores de vídeo
   ============================================================ */

/* faixas vazias convidam à ação, em vez de ficarem mudas */
.ev-convite {
	position: absolute; left: 6px; top: 4px; bottom: 4px; right: 6px;
	border: 1px dashed var(--ev-linha); border-radius: 5px;
	color: var(--ev-dim); font-family: var(--ev-ui); font-size: 11px;
	letter-spacing: .05em; text-align: left; padding: 0 12px;
	display: flex; align-items: center; background: transparent;
}
.ev-convite:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.ev-convitevid { position: absolute; left: 6px; top: 5px; bottom: 5px; right: 6px; }
.ev-faixa.ev-vazia { position: relative; }

/* barra de ações contextuais */
.ev-acoes { display: none; }

/* teleprompter */
.ev-tpbarra { height: 4px; background: var(--ev-s1); border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
.ev-tpbarra i { display: block; height: 100%; background: var(--ev-ouro); transition: width .25s; }
.ev-tptexto {
	font-family: var(--ev-ui); font-size: 26px; font-weight: 400; line-height: 1.4;
	color: var(--ev-creme); text-align: center; margin: 0 0 12px;
	min-height: 2.8em; display: flex; align-items: center; justify-content: center;
}
.ev-tpprox {
	font-size: 12px; color: var(--ev-linha); text-align: center;
	margin: 0 0 14px; font-style: italic;
}
.ev-tpestado { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 14px; }
.ev-tpestado .ev-bolha { width: 14px; height: 14px; background: var(--ev-linha); }
.ev-tpestado .ev-bolha.ev-on { background: var(--ev-rec); animation: ev-pulsa 1.1s infinite; }
.ev-tpestado span:last-child { font-family: var(--ev-mono); font-size: 12px; color: var(--ev-dim); }
.ev-tpbotoes { justify-content: center; }
.srpev textarea.ev-falta { border-color: var(--ev-rec); outline: 2px solid var(--ev-rec); }

/* ============================================================
   v1.9.0 — onda, capa, tema claro e logo configurável
   ============================================================ */

/* ---------- marca configurável ---------- */
.ev-marca .ev-logo {
	width: auto; height: 28px; max-width: 108px; flex: none;
	object-fit: contain; display: block;
}

/* ---------- botão só de ícone (tema) ---------- */
.srpev .ev-btn.ev-icone {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 6px 9px; line-height: 0;
}
.srpev .ev-btn.ev-icone svg { display: block; }

/* ---------- forma de onda ---------- */
/* Fica atrás do rótulo do clipe: o nome do arquivo continua legível e a
   onda ocupa toda a altura útil, que é o que dá para enxergar a pausa. */
.ev-ondacv {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: none; opacity: .85; z-index: 0;
}
.ev-clipe.ev-ca > .ev-corpo { position: relative; z-index: 1; }
.ev-clipe.ev-semonda::after {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.06) 6px 12px);
	pointer-events: none;
}

.ev-ondagrande {
	position: relative; margin: 4px 0 2px;
	border: 1px solid var(--ev-linha); border-radius: 5px;
	background: var(--ev-campo); overflow: hidden; min-height: 76px;
}
.ev-ondagrande canvas { display: block; width: 100%; height: 74px; }
.ev-ondaesp {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-size: 10.5px; color: var(--ev-dim); font-family: var(--ev-mono);
}

/* ---------- painel da capa ---------- */
.ev-capaprev {
	border: 1px solid var(--ev-linha); border-radius: 6px;
	background: var(--ev-dark); overflow: hidden; margin-bottom: 9px;
	display: grid; place-items: center; padding: 7px;
}
.ev-capaprev canvas {
	display: block; width: 100%; height: auto; max-height: 320px;
	object-fit: contain; border-radius: 3px;
}
.srpev .ev-btn.ev-larg.ev-perigo { color: var(--ev-rec); border-color: var(--ev-rec); }
.srpev .ev-btn.ev-larg.ev-perigo:hover { background: var(--ev-rec); color: #fff; }

/* ============================================================
   Tema claro.

   Não é o tema escuro com as cores invertidas por fórmula: as superfícies
   viram creme (a cor da identidade, não branco puro, que cansa a vista sob
   luz de galpão) e todo texto e ícone de ferramenta vira grafite. Verde e
   ouro do Sindicato continuam sendo o acento, com os tons fechados um
   ponto para segurarem contraste sobre fundo claro.

   A prévia do vídeo segue escura nos dois temas de propósito: peça de
   Reels é vista sobre fundo preto, e julgar cor sobre creme engana.
   ============================================================ */
.srpev[data-tema=claro] {
	--ev-verde: #174925;
	--ev-ouro: #7a5d0d;
	--ev-ouro-cl: #5f480a;
	--ev-creme: #17201a;
	--ev-dark: #0B1612;
	--ev-s1: #f5efe3;
	--ev-s2: #fbf7ee;
	--ev-s3: #ece3d1;
	--ev-xadrez1: #e6ddc9;
	--ev-xadrez2: #d3c7ae;
	--ev-linha: #d3c7ae;
	--ev-txt: #17201a;
	--ev-dim: #55604f;
	--ev-alerta: #a04c12;
	--ev-alerta-txt: #8a3f0c;
	--ev-rec: #a5271e;
	--ev-rec-txt: #8d1f18;

	--ev-campo: #ffffff;
	--ev-campo-txt: #14201a;

	--ev-vedar: rgba(11,22,18,.42);
	--ev-faixa: rgba(190,206,86,.14);
	--ev-faixa-txt: rgba(220,232,140,.85);
	--ev-onda: rgba(23,32,26,.28);
	--ev-onda-miolo: rgba(23,32,26,.68);
	--ev-onda-corte: rgba(138,106,18,.9);

	--ev-cv1: #3f9558; --ev-cv2: #2b6f3e; --ev-cvt: #f2fbf4;
	/* O palco continua escuro no tema claro — a prévia é vídeo, não
	   painel — então a mira sobre a imagem quase não muda. O que muda é
	   o botão de apontar, que fica sobre creme: por isso um verde mais
	   fechado, que ali se lê e sobre o vídeo continua saltando. */
	--ev-mira-armada: #8ca030;
	--ev-ci1: #4d87a4; --ev-ci2: #35637a; --ev-cit: #f2fafd;
	--ev-ct1: #e2c46f; --ev-ct2: #bf9a41; --ev-ctt: #241c07;
	--ev-ca1: #8f6dc0; --ev-ca2: #6a4d97; --ev-cat: #faf6ff;
	--ev-cc1: #c78f34; --ev-cc2: #96691f; --ev-cct: #2a1c04;
	--ev-sombra: rgba(23,32,26,.22);
	--ev-veu: rgba(23,32,26,.5);
	--ev-pino: #ffffff;
	--ev-palco: #000000;
	--ev-carregando: #4b5548;
	--ev-ok: #2f6b34;
	/* Iguais aos do tema escuro, de propósito: o fundo por baixo é o mesmo. */
	--ev-sobrepalco: #e6ded0;
	--ev-sobrepalco-dim: #9aa79b;
	--ev-sobrepalco-bt: rgba(11,22,18,.5);
	--ev-sobrepalco-borda: rgba(230,222,208,.22);

	--ev-fundo: #ece4d4;
	--ev-brilho1: rgba(30,92,48,.16);
	--ev-brilho2: rgba(200,168,75,.20);
	--ev-sobre: rgba(23,32,26,.88);
	--ev-emcor: #0b1612;
	--ev-ouro-fraco: rgba(122,93,13,.10);
	--ev-ouro-medio: rgba(122,93,13,.18);
	--ev-alerta-fraco: rgba(160,76,18,.14);
	--ev-rec-fraco: rgba(165,39,30,.12);
	--ev-alca-fundo: rgba(23,32,26,.30);
	--ev-alca-hover: rgba(23,32,26,.55);
	--ev-alca-forte: rgba(23,32,26,.75);
	--ev-divisor: rgba(90,102,86,.35);
	--ev-amostra: linear-gradient(135deg, #1a2b1f 0%, #6f8a5a 42%, #d9c68d 74%, #f7f1e2 100%);

	color-scheme: light;
}

/* O palco continua escuro para a prévia não mentir sobre a peça. */
.srpev[data-tema=claro] .ev-palco { background: #14201a; }
.srpev[data-tema=claro] .ev-moldura { border-color: #2a3a30; }

/* Ícones das ferramentas em tom escuro, como pedido: no tema escuro o
   `currentColor` já resolvia, aqui a barra fica clara e o traço precisa
   descer de tom para não sumir. */
.srpev[data-tema=claro] .ev-rail { background: var(--ev-s2); }
.srpev[data-tema=claro] .ev-rbtn { color: var(--ev-dim); }
.srpev[data-tema=claro] .ev-rbtn svg { stroke: currentColor; }
.srpev[data-tema=claro] .ev-rbtn:hover { color: var(--ev-txt); }
.srpev[data-tema=claro] .ev-rbtn[aria-selected=true] { color: var(--ev-verde); }
/* O transporte repousa sobre o palco, não sobre a interface: as cores vêm
   de --ev-sobrepalco nos dois temas. */
.srpev[data-tema=claro] .ev-transporte button svg { fill: currentColor; }
.srpev[data-tema=claro] .ev-fmt button[aria-pressed=true] { background: var(--ev-verde); color: #fff; }
.srpev[data-tema=claro] .ev-marca b { color: var(--ev-txt); }
.srpev[data-tema=claro] .ev-hud { background: rgba(23,32,26,.9); color: #f5efe3; }
.srpev[data-tema=claro] ::-webkit-scrollbar-thumb { background: var(--ev-linha); }

/* O gravador de voz mantém o vermelho de rec, que é sinal e não decoração. */
.srpev[data-tema=claro] .ev-gravar { background: var(--ev-s3); }

@media (prefers-reduced-motion: reduce) {
	.srpev * { transition: none !important; animation: none !important; }
}

/* ============================================================
   v1.10.0 — ajustes de imagem e cor de texto
   ============================================================ */

/* ---------- predefinições de correção ---------- */
/* Grade de amostras em vez de lista: a escolha aqui é visual, e comparar
   sete miniaturas lado a lado é mais rápido que ler sete nomes. */
.ev-looks {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 5px; margin-bottom: 10px;
}
.ev-look {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 0; border: 0; background: none; cursor: pointer;
}
.ev-lookam {
	display: block; width: 100%; aspect-ratio: 1; border-radius: 4px;
	border: 1px solid var(--ev-linha);
	/* Amostra sintética: um gradiente que passa por sombra, meio-tom e alta
	   luz, para o efeito de cada predefinição aparecer nos três. */
	background: var(--ev-amostra);
	transition: transform .12s;
}
.ev-look i { font-style: normal; font-size: 8.5px; letter-spacing: .04em; color: var(--ev-dim); text-align: center; line-height: 1.2; }
.ev-look:hover .ev-lookam { transform: scale(1.05); }
.ev-look[aria-pressed=true] .ev-lookam { border-color: var(--ev-ouro); box-shadow: 0 0 0 1px var(--ev-ouro); }
.ev-look[aria-pressed=true] i { color: var(--ev-ouro); }
.ev-look:focus-visible .ev-lookam { outline: 2px solid var(--ev-ouro); outline-offset: 2px; }

/* ---------- seletor de cor de texto ---------- */
.ev-corlinha { gap: 6px; align-items: center; }
.srpev input.ev-corpicker {
	width: 34px; height: 30px; flex: none; padding: 2px;
	border: 1px solid var(--ev-linha); border-radius: 5px;
	background: var(--ev-campo); cursor: pointer;
}
.srpev input.ev-corpicker::-webkit-color-swatch-wrapper { padding: 0; }
.srpev input.ev-corpicker::-webkit-color-swatch { border: 0; border-radius: 3px; }
.srpev #evCorHex { flex: 1; font-family: var(--ev-mono); font-size: 11px; text-transform: lowercase; }

/* Veredito de contraste: cor é redundante com o número de propósito, para
   quem não distingue verde de laranja continuar lendo a razão. */
.ev-nivel-otimo { color: var(--ev-ok); }
.ev-nivel-bom { color: var(--ev-ouro); }
.ev-nivel-limite { color: var(--ev-alerta); }
.ev-nivel-ruim { color: var(--ev-rec); }

.ev-nota.ev-notaerro { border-left-color: var(--ev-alerta); color: var(--ev-alerta-txt); }

/* ---------- selo de clipe corrigido ---------- */
.ev-vel.ev-selo { font-family: var(--ev-ui); font-size: 10px; letter-spacing: 0; }

@media (max-width: 780px) {
	.ev-looks { grid-template-columns: repeat(4, 1fr); gap: 6px; }
	.ev-look i { font-size: 9px; }
	.srpev input.ev-corpicker { width: 42px; height: 38px; }
	.srpev #evCorHex { min-height: 38px; font-size: 12px; }
}

/* ============================================================
   v1.11.0 — catálogo do banco de voz
   ============================================================ */

/* O catálogo mora no modal, que tem 580 px. Aqui ele precisa de mais: a
   lista é tabular e os gráficos só se leem com largura. */
.ev-modal .ev-cx:has(.ev-cat) { max-width: 860px; }
.ev-cat { min-height: 260px; }

.ev-catabas { display: flex; gap: 4px; border-bottom: 1px solid var(--ev-linha); margin-bottom: 12px; }
.ev-caba {
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	padding: 7px 13px; color: var(--ev-dim);
	border: 1px solid transparent; border-bottom: 0;
	border-radius: 5px 5px 0 0; margin-bottom: -1px;
}
.ev-caba:hover { color: var(--ev-txt); }
.ev-caba[aria-pressed=true] {
	color: var(--ev-ouro); border-color: var(--ev-linha);
	background: var(--ev-s1); border-bottom: 1px solid var(--ev-s1);
}

/* ---------- números ---------- */
.ev-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 7px; margin-bottom: 14px; }
.ev-fichanum {
	background: var(--ev-s1); border: 1px solid var(--ev-linha);
	border-radius: 6px; padding: 9px 11px;
}
.ev-fichanum b { display: block; font-family: var(--ev-mono); font-size: 18px; color: var(--ev-creme); font-weight: 500; }
.ev-fichanum span { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ev-dim); margin-top: 2px; }

.ev-catgraf { margin-bottom: 16px; }
.ev-catgraf h4 {
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ev-dim); margin: 0 0 8px; padding: 0; font-weight: 400;
}
.ev-graf { width: 100%; height: auto; color: var(--ev-ouro); display: block; }
.ev-grafrot { font-family: var(--ev-ui); font-size: 9.5px; fill: var(--ev-dim); }
.ev-grafval { font-family: var(--ev-mono); font-size: 9.5px; fill: var(--ev-txt); }
.ev-grafvazio { font-family: var(--ev-ui); font-size: 11px; fill: var(--ev-dim); }

.ev-roscalinha { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ev-roscacx { flex: none; color: var(--ev-dim); }
.ev-rosca { width: 132px; height: 132px; display: block; }
.ev-roscanum { font-family: var(--ev-mono); font-size: 22px; fill: var(--ev-creme); }
.ev-roscarot { font-family: var(--ev-ui); font-size: 8.5px; letter-spacing: .1em; fill: var(--ev-dim); text-transform: uppercase; }
.ev-legenda { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.ev-legit { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.ev-legit i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ev-legit b { font-weight: 400; color: var(--ev-txt); flex: 1; }
.ev-legit span { font-family: var(--ev-mono); font-size: 10px; color: var(--ev-dim); }

/* ---------- filtros ---------- */
.ev-catfiltros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.srpev .ev-catbusca { font-size: 12.5px; padding: 8px 10px; }
.ev-catlinha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-catlinha > label {
	font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ev-dim); width: auto; flex: none;
}
.srpev .ev-catlinha select { width: auto; min-width: 140px; font-size: 11px; }
.ev-catconta { font-size: 10.5px; color: var(--ev-dim); font-family: var(--ev-mono); margin: 0; }

/* ---------- lista ---------- */
.ev-catlista { display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow: auto; padding-right: 3px; }
.ev-catitem {
	display: flex; align-items: center; gap: 9px;
	background: var(--ev-s1); border: 1px solid var(--ev-linha);
	border-radius: 5px; padding: 7px 9px;
}
.ev-catitem.ev-marcada { border-color: var(--ev-ouro); background: var(--ev-s3); }
.srpev .ev-catitem input[type=checkbox] { width: auto; flex: none; margin: 0; accent-color: var(--ev-ouro); }
.ev-catcat {
	flex: none; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
	padding: 2px 5px; border-radius: 3px; color: var(--ev-emcor); font-weight: 500;
}
.ev-catmeio { flex: 1; min-width: 0; }
.ev-catmeio b { display: block; font-size: 12px; font-weight: 400; color: var(--ev-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-catmeio span { display: block; font-family: var(--ev-mono); font-size: 9.5px; color: var(--ev-dim); margin-top: 2px; }
.ev-catitem .ev-linha.ev-mini { flex: none; margin: 0; }

.ev-catsel {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	background: var(--ev-s3); border: 1px solid var(--ev-ouro);
	border-radius: 5px; padding: 8px 10px; margin-bottom: 6px;
	position: sticky; top: 0; z-index: 2;
}
.ev-catsel b { font-size: 11px; color: var(--ev-ouro); }
.srpev .ev-catsel select { width: auto; min-width: 170px; font-size: 11px; }
.srpev .ev-btn.ev-perigo { color: var(--ev-rec); border-color: var(--ev-rec); }
.srpev .ev-btn.ev-perigo:hover { background: var(--ev-rec); color: #fff; }

@media (max-width: 780px) {
	.ev-modal .ev-cx:has(.ev-cat) { max-width: 100%; }
	.ev-catitem { flex-wrap: wrap; }
	.ev-catmeio { flex-basis: 100%; order: 3; }
	.ev-catlista { max-height: 52vh; }
	.ev-roscalinha { gap: 12px; }
}

/* ============================================================
   v1.11.1 — tela de falha no arranque

   Antes, qualquer falha deixava a página em "Carregando o Estúdio…" para
   sempre. No celular ninguém tem console para abrir, então o problema
   chegava como "não abre" e sem nada para investigar. Isto aqui é a tela
   que substitui aquela espera.
   ============================================================ */
.srpev-falha {
	display: grid; place-items: center; padding: 28px 18px;
	min-height: 60vh; font-family: var(--ev-ui);
	background: var(--ev-fundo); color: var(--ev-txt);
}
.srpev-falhacx {
	width: 100%; max-width: 520px;
	background: var(--ev-s2); border: 1px solid var(--ev-linha);
	border-top: 3px solid var(--ev-alerta); border-radius: 8px;
	padding: 22px 22px 18px;
}
.srpev-falhacx h2 {
	font-family: var(--ev-disp); font-size: 19px; font-weight: 600;
	color: var(--ev-txt); margin: 0 0 8px; padding: 0; line-height: 1.3;
}
.srpev-falhacx p { font-size: 13px; line-height: 1.55; color: var(--ev-txt); margin: 0 0 10px; }
.srpev-falhadica { color: var(--ev-dim) !important; font-size: 12px !important; }
.srpev-falhalog {
	font-family: var(--ev-mono); font-size: 10.5px; line-height: 1.5;
	background: var(--ev-s1); border: 1px solid var(--ev-linha); border-radius: 5px;
	padding: 10px 12px; margin: 0 0 12px; color: var(--ev-dim);
	white-space: pre-wrap; word-break: break-word;
	max-height: 210px; overflow: auto; user-select: text;
}
.srpev-falhaacoes { display: flex; gap: 8px; flex-wrap: wrap; }
.srpev-falhaacoes button {
	font-family: var(--ev-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	padding: 9px 16px; min-height: 40px; border-radius: 5px; cursor: pointer;
	background: transparent; border: 1px solid var(--ev-linha); color: var(--ev-txt);
}
.srpev-falhaacoes button:first-child {
	background: var(--ev-ouro); border-color: var(--ev-ouro); color: #12100a;
}
.srpev-falhaacoes button:hover { border-color: var(--ev-ouro); }

/* ============================================================
   v1.12.0 — desfazer, guias e aplicar a todos
   ============================================================ */

/* Cores das guias, lidas pelo canvas via getComputedStyle. Ouro para as
   referências do quadro — centro e margens — e azul para alinhamento com
   outra camada: são informações de natureza diferente e a cor evita
   confundir "estou no centro" com "estou junto daquela outra". */
.srpev {
	--ev-guia: #e0c476;
	--ev-guia-cam: #7ac0d6;
}
.srpev[data-tema=claro] {
	--ev-guia: #a8801a;
	--ev-guia-cam: #2c7f9c;
}

/* Desfazer e refazer desabilitados continuam ocupando o lugar em vez de
   sumirem: botão que aparece e some faz a barra dançar a cada ação. */
.srpev .ev-btn.ev-icone:disabled { opacity: .32; cursor: default; }
.srpev .ev-btn.ev-icone:disabled:hover { border-color: var(--ev-linha); color: var(--ev-txt); }

@media (max-width: 780px) {
	/* No celular a barra superior é apertada: desfazer e refazer ficam,
	   porque são os botões que mais salvam trabalho no toque impreciso,
	   mas encolhem. */
	.srpev .ev-topo .ev-btn.ev-icone { padding: 7px 8px; min-height: 34px; }
	#evDesfazer svg, #evRefazer svg { width: 15px; height: 15px; }
}

/* Relatório da gravação: número bom em verde, problema em alerta, conselho
   em tom discreto. O verde só aparece quando o ritmo fechou — dar o mesmo
   destaque para tudo faria ninguém ler nenhum. */
.ev-ok { color: var(--ev-ok); }
.ev-dica { display: block; margin-top: 4px; font-size: 11px; color: var(--ev-dim); line-height: 1.5; }

/* Painel de porcentagem da renderização. O número é o que importa: grande,
   monoespaçado, sem competir com nada ao redor. O detalhe embaixo diz o que
   está acontecendo sem exigir leitura. */
.ev-pctcx { text-align: center; margin: 14px 0 10px; }
.ev-pct {
	font-family: var(--ev-mono); font-size: 42px; font-weight: 500;
	line-height: 1.05; color: var(--ev-creme);
}
.ev-pctdet {
	font-family: var(--ev-mono); font-size: 11px; color: var(--ev-dim);
	min-height: 15px; margin: 2px 0 10px;
}

/* ============================================================
   v1.14.0 — graduação de cor e oficina de áudio
   ============================================================ */

.ev-looks.ev-cat4 { grid-template-columns: repeat(4, 1fr); }

/* Rodas de cor: três lado a lado, porque o valor delas está justamente em
   comparar as faixas tonais de relance. */
.ev-rodas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.ev-rodacx { text-align: center; }
.ev-rodacx svg { width: 100%; height: auto; display: block; cursor: crosshair; touch-action: none; }
.ev-rodacx i {
	display: block; font-style: normal; font-size: 9px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ev-dim); margin-top: 3px;
}

/* Oficina de áudio */
.ev-oficabec { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ev-oficabec b { font-size: 13px; font-weight: 500; color: var(--ev-txt); }
.ev-oficabec span { font-family: var(--ev-mono); font-size: 10.5px; color: var(--ev-dim); }
/* ---------- Oficina de Áudio: abas, diálogo, transcrição, catálogo ---------- */
.ev-oficdlg p { margin: 0 0 8px; }
.ev-oficdlgcab { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ev-oficdlgic { width: 40px; height: 40px; border-radius: 11px; background: var(--ev-voz, #6b5296); display: grid; place-items: center; font-size: 19px; flex: none; }
.ev-oficdlgcab b { display: block; font-size: 14px; color: var(--ev-txt); }
.ev-oficdlgcab span { font-family: var(--ev-mono); font-size: 11px; color: var(--ev-dim); }
.ev-oficdlg .ev-dim { color: var(--ev-dim); font-size: 13px; }
.ev-oficdlgbts { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 10px; }
.ev-oficdlgbts .ev-btn { width: 100%; text-align: center; justify-content: center; padding: 11px; }
.ev-btn.ev-txt { background: transparent; border-color: transparent; color: var(--ev-dim); }
.ev-btn.ev-txt:hover { color: var(--ev-txt); }
.ev-oficdlgchk { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ev-dim); }
.ev-oficabas { display: flex; gap: 2px; border-bottom: 1px solid var(--ev-linha); margin: 12px 0; flex-wrap: wrap; }
.ev-oficaba { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ev-dim); font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: .03em; padding: 9px 12px; cursor: pointer; }
.ev-oficaba:hover { color: var(--ev-txt); }
.ev-oficaba.ev-on { color: var(--ev-txt); border-bottom-color: var(--ev-ouro); }
.ev-oficpainel { min-height: 90px; margin-bottom: 10px; }
.ev-oficrodape { margin-top: 8px; }
.ev-oftexttopo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ev-ofprog { flex: 1; min-width: 80px; height: 6px; background: var(--ev-s3); border-radius: 99px; overflow: hidden; }
.ev-ofprog i { display: block; height: 100%; width: 0; background: var(--ev-verde); transition: width .12s; }
.ev-ofsegs { display: flex; flex-direction: column; gap: 14px; max-height: 300px; overflow: auto; padding-right: 4px; }
.ev-ofseg { display: flex; flex-direction: column; gap: 6px; }
.ev-ofsegcab { display: flex; align-items: center; gap: 8px; }
.ev-ofsegn { width: 22px; height: 22px; border-radius: 50%; background: var(--ev-voz, #6b5296); color: #fff; display: grid; place-items: center; font-size: 11px; font-family: var(--ev-mono); flex: none; }
.ev-oft { font-family: var(--ev-mono); font-size: 11px; color: var(--ev-ouro); }
.ev-ofquem { background: var(--ev-s2); border: 1px solid var(--ev-linha); color: var(--ev-txt); border-radius: 7px; padding: 4px 8px; font-size: 12px; font-weight: 500; }
.ev-offala { background: var(--ev-s2); border: 1px solid var(--ev-linha); border-radius: 8px; padding: 9px 12px; font-size: 14px; line-height: 1.55; color: var(--ev-txt); }
.ev-offala:focus { outline: none; border-color: var(--ev-ouro); }
.ev-ofcat { display: flex; flex-direction: column; }
.ev-oflbl { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--ev-ouro); margin: 10px 0 4px; }
.ev-ofcampo { background: var(--ev-s2); border: 1px solid var(--ev-linha); color: var(--ev-txt); border-radius: 8px; padding: 9px 11px; font-family: 'DM Sans', sans-serif; font-size: 13px; }
.ev-ofcampo:focus { outline: none; border-color: var(--ev-ouro); }
.ev-oftextarea { min-height: 90px; resize: vertical; }
.ev-ofsalvar { margin-top: 14px; width: 100%; justify-content: center; text-align: center; }
.ev-oftranscgrupo { grid-column: 1 / -1; }
.ev-legger { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 12px; text-align: center; }
.ev-legeq { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.ev-legeq span { width: 5px; height: 12px; border-radius: 3px; background: linear-gradient(var(--ev-ouro), var(--ev-verde)); animation: ev-eqpulo 900ms ease-in-out infinite; }
@keyframes ev-eqpulo { 0%, 100% { height: 10px; opacity: .55; } 50% { height: 44px; opacity: 1; } }
.ev-legger .ev-ofprog { width: 70%; max-width: 240px; }
.ev-legstatus { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ev-ouro); }
.ev-legdica { font-size: 13px; color: var(--ev-dim); max-width: 40ch; line-height: 1.5; transition: opacity .22s; min-height: 2.6em; }
@media (prefers-reduced-motion: reduce) { .ev-legeq span { animation: none; height: 26px; } }
/* ---------- Editor de legendas: abas, busca, trechos ---------- */
.ev-legabas { display: flex; gap: 2px; border-bottom: 1px solid var(--ev-linha); margin: 0 0 12px; }
.ev-legaba { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ev-dim); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; padding: 9px 6px; cursor: pointer; }
.ev-legaba:hover { color: var(--ev-txt); }
.ev-legaba.ev-on { color: var(--ev-txt); border-bottom-color: var(--ev-ouro); }
.ev-legpainel { min-height: 60px; }
.ev-legbusca { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.ev-legcampo { background: var(--ev-s2); border: 1px solid var(--ev-linha); color: var(--ev-txt); border-radius: 8px; padding: 8px 10px; font-family: 'DM Sans', sans-serif; font-size: 12.5px; min-width: 0; }
.ev-legcampo:focus { outline: none; border-color: var(--ev-ouro); }
.ev-legsegs { display: flex; flex-direction: column; gap: 9px; max-height: 340px; overflow: auto; padding: 2px 4px 2px 2px; margin: 10px 0; }
.ev-legsegs.ev-grande { max-height: 60vh; }
.ev-legseg { background: linear-gradient(var(--ev-s2), var(--ev-s1)); border: 1px solid var(--ev-linha); border-left: 3px solid transparent; border-radius: 11px; padding: 10px 12px; transition: border-color .15s, box-shadow .15s; }
.ev-legseg:hover { border-left-color: var(--ev-ouro); }
.ev-legseg.ev-atual { border-left-color: var(--ev-ouro); background: var(--ev-s3); box-shadow: inset 0 0 0 1px rgba(200,168,75,.25); }
.ev-legsync { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; }
.ev-legsync label { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--ev-dim); margin-right: 2px; }
.ev-legsync .ev-btn { padding: 5px 10px; font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.ev-legtempo { display: flex; align-items: center; gap: 3px; }
.ev-legtempo .ev-legmini { width: 20px; height: 22px; font-size: 14px; line-height: 1; }
.ev-legseghead { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.ev-legchip { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ev-ouro); background: var(--ev-ouro-medio); border: 1px solid rgba(200,168,75,.3); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.ev-legchip:hover { background: var(--ev-brilho2); border-color: var(--ev-ouro); }
.ev-legquem { background: var(--ev-s2); border: 1px solid var(--ev-linha); color: var(--ev-txt); border-radius: 6px; padding: 3px 6px; font-size: 11px; min-width: 96px; max-width: 130px; }
.ev-legacoes { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.ev-legseg:hover .ev-legacoes { opacity: 1; }
.ev-legmini { width: 24px; height: 24px; display: grid; place-items: center; background: var(--ev-s2); border: 1px solid var(--ev-linha); border-radius: 6px; color: var(--ev-dim); cursor: pointer; font-size: 12px; padding: 0; }
.ev-legmini:hover { color: var(--ev-txt); border-color: var(--ev-ouro); }
.ev-legmini.ev-perigo:hover { color: var(--ev-rec-txt); border-color: var(--ev-rec); }
.ev-legfala { font-size: 14px; line-height: 1.5; color: var(--ev-txt); outline: none; border-radius: 7px; padding: 5px 7px; background: var(--ev-alca-fundo); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.ev-legfala:hover { background: var(--ev-alca-forte); }
.ev-legfala:focus { background: var(--ev-alca-forte); border-color: var(--ev-ouro); box-shadow: 0 0 0 2px rgba(200,168,75,.25); }
.ev-corleg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ev-dim); font-family: 'Oswald', sans-serif; letter-spacing: .04em; }
.ev-corleg input[type=color] { width: 30px; height: 24px; border: 1px solid var(--ev-linha); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
/* ---------- Projetos em cards ---------- */
.ev-projbarra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-projgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 1100px) { .ev-projgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .ev-projgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ev-projgrid { grid-template-columns: repeat(2, 1fr); } }
.ev-projcard { position: relative; border: 1px solid var(--ev-linha); border-radius: 11px; padding: 12px; background: var(--ev-s2); display: flex; flex-direction: column; gap: 8px; }
.ev-projcard:hover { border-color: var(--ev-ouro); }
.ev-projtit { font-size: 13px; color: var(--ev-txt); line-height: 1.25; padding-right: 20px; }
.ev-projmeta { display: flex; flex-direction: column; gap: 2px; font-family: var(--ev-mono); font-size: 10.5px; color: var(--ev-dim); }
.ev-projabrir { width: 100%; justify-content: center; text-align: center; margin-top: auto; }
.ev-projx { position: absolute; top: 8px; right: 8px; }
.ev-oficonda {
	border: 1px solid var(--ev-linha); border-radius: 6px;
	background: var(--ev-campo); overflow: hidden; margin-bottom: 10px;
}
.ev-oficonda canvas { display: block; width: 100%; height: 120px; touch-action: none; }
.ev-oficbts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 6px; }
.ev-oficbts button {
	font-size: 11px; padding: 7px 3px; border-radius: 4px;
	background: transparent; border: 1px solid var(--ev-linha); color: var(--ev-txt); cursor: pointer;
}
.ev-oficbts button:hover:not(:disabled) { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.ev-oficbts button:disabled { opacity: .35; cursor: default; }

@media (max-width: 780px) {
	.ev-looks.ev-cat4 { grid-template-columns: repeat(3, 1fr); }
	.ev-oficbts { grid-template-columns: repeat(3, 1fr); }
	.ev-oficbts button { min-height: 40px; font-size: 12px; }
	.ev-oficonda canvas { height: 100px; }
}

/* ============================================================
   v1.15.0 — transporte da oficina de áudio
   ============================================================ */

/* A agulha da oficina vive numa camada própria sobre a onda: repintar as
   520 colunas do envelope a cada quadro seria desperdício.

   O nome é `ev-ofagulha` e não `ev-agulha` porque este último já pertence à
   agulha da linha do tempo — que é uma linha de 1px com fundo ouro. Reusar
   o nome fez a regra desta cobrir a de lá, e a agulha da linha do tempo
   virou um bloco dourado de 100% de largura por cima das três trilhas. */
.ev-oficonda { position: relative; }
.ev-ofagulha {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: auto; touch-action: none;
}

.ev-ofsel {
	margin-left: auto; font-family: var(--ev-mono); font-size: 10.5px;
	color: var(--ev-ouro);
}

.ev-transp {
	display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
	background: var(--ev-s1); border: 1px solid var(--ev-linha);
	border-radius: 6px; padding: 7px 9px; margin-bottom: 10px;
}
.ev-tbt {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; flex: none; padding: 0;
	background: transparent; border: 1px solid var(--ev-linha);
	border-radius: 5px; color: var(--ev-txt); cursor: pointer;
}
.ev-tbt svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.ev-tbt:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.ev-tbt[aria-pressed=true] {
	background: var(--ev-ouro); border-color: var(--ev-ouro); color: #12100a;
}
/* Play é o botão que a mão procura sem olhar: fica maior que os vizinhos. */
#evTPlay { width: 42px; height: 38px; }
#evTPlay svg { width: 20px; height: 20px; }

.ev-tbt.ev-ttexto {
	width: auto; padding: 0 11px; font-family: var(--ev-ui);
	font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
}
.ev-tempo {
	font-family: var(--ev-mono); font-size: 11.5px; color: var(--ev-txt);
	margin-left: 6px; white-space: nowrap;
}
.srpev .ev-transp select.ev-tvel { width: auto; min-width: 62px; font-size: 11px; }

/* Medidor de amplitude: barra fina que acompanha o que está soando. Serve
   para confirmar de relance que há som saindo — mais rápido que ler a onda. */
.ev-nivel {
	flex: 1; min-width: 46px; height: 6px; border-radius: 3px;
	background: var(--ev-s3); overflow: hidden;
}
.ev-nivel i {
	display: block; height: 100%; width: 0; border-radius: 3px;
	background: var(--ev-ouro); transition: width .06s linear;
}

@media (max-width: 780px) {
	.ev-transp { gap: 6px; padding: 8px; }
	.ev-tbt { width: 42px; height: 42px; }
	#evTPlay { width: 52px; height: 46px; }
	.ev-tbt.ev-ttexto { min-height: 42px; font-size: 11px; }
	.ev-nivel { min-width: 100%; order: 9; }
	.ev-tempo { font-size: 13px; }
}

/* ============================================================
   v1.16.0 — gravador com onda ao vivo
   ============================================================ */

/* O cartão do gravador segue o modelo do Gravador do telefone: a onda
   ocupa o espaço, o tempo é grande, e o botão vermelho é o único alvo
   grande da tela. */
.ev-gravador {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	border: 1px solid var(--ev-linha); border-radius: 10px;
	padding: 14px 12px; background: var(--ev-s3); width: 100%;
}
.ev-gravador.ev-on { border-color: var(--ev-rec); }

.ev-gravrepouso { text-align: center; }
.ev-gravrepouso b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ev-txt); }
.ev-gravrepouso span { display: block; font-size: 11px; color: var(--ev-dim); margin-top: 3px; line-height: 1.4; }

.ev-gravonda { width: 100%; height: 88px; display: block; }
.ev-gravbarracx {
	width: 100%; height: 5px; border-radius: 3px;
	background: var(--ev-s1); overflow: hidden;
}
.ev-gravbarracx i {
	display: block; height: 100%; width: 0; border-radius: 3px;
	background: var(--ev-rec); transition: width .05s linear;
}
.ev-gravtempo {
	font-family: var(--ev-mono); font-size: 28px; font-weight: 500;
	color: var(--ev-txt); line-height: 1.1; letter-spacing: .02em;
}
/* O aviso de nível ocupa lugar mesmo vazio.

   Com `display:none` ele nascia e morria a cada avaliação, e o botão
   vermelho subia e descia junto — no meio de uma gravação, com o dedo
   indo parar. Um controle que se mexe sozinho na hora em que se precisa
   dele acertar é pior que um aviso não aparecer.

   Duas linhas de altura: "Som muito baixo. Fale mais perto do aparelho."
   quebra em duas na largura do cartão no celular, e reservar só uma
   devolveria o pulo justamente no aviso mais comum. */
.ev-gravaviso {
	visibility: hidden; font-size: 11.5px; line-height: 1.45; text-align: center;
	max-width: 320px; min-height: 2.9em; display: flex;
	align-items: center; justify-content: center;
}
.ev-gravaviso.ev-on { visibility: visible; }
.ev-gravaviso.ev-nivel-mudo, .ev-gravaviso.ev-nivel-estourado { color: var(--ev-rec); }
.ev-gravaviso.ev-nivel-baixo { color: var(--ev-alerta); }
.ev-gravdica { font-size: 10.5px; color: var(--ev-dim); }

/* Botão de gravar: círculo vermelho que vira quadrado ao gravar — o mesmo
   sinal do aplicativo do telefone, reconhecível sem legenda. */
.ev-recbt {
	width: 62px; height: 62px; border-radius: 50%; flex: none;
	background: transparent; border: 3px solid var(--ev-linha);
	display: grid; place-items: center; cursor: pointer; padding: 0;
}
.ev-recbt i {
	display: block; width: 46px; height: 46px; border-radius: 50%;
	background: var(--ev-rec); transition: border-radius .18s, width .18s, height .18s;
}
.ev-recbt.ev-parar i { width: 24px; height: 24px; border-radius: 5px; }
.ev-recbt:hover { border-color: var(--ev-rec); }

/* Ficha logo depois de gravar */
.ev-fichadur { font-family: var(--ev-mono); font-size: 11px; color: var(--ev-dim); }
.ev-fichaonda {
	position: relative; border: 1px solid var(--ev-linha); border-radius: 6px;
	background: var(--ev-campo); overflow: hidden; margin-bottom: 8px;
}
.ev-fichaonda canvas { display: block; width: 100%; height: 72px; }
.ev-fichatransp { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }

@media (max-width: 780px) {
	.ev-gravador { padding: 16px 10px; gap: 10px; }
	.ev-gravonda { height: 96px; }
	.ev-gravtempo { font-size: 34px; }
	.ev-recbt { width: 74px; height: 74px; }
	.ev-recbt i { width: 56px; height: 56px; }
	.ev-recbt.ev-parar i { width: 28px; height: 28px; }
	.ev-fichatransp .ev-tbt { width: 46px; height: 46px; }
	.ev-fichaonda canvas { height: 84px; }
}

/* ============================================================
   v1.17.0 — gravador empilhado e transparência
   ============================================================ */

/* A ficha de gravação punha transporte e tempo na mesma linha, e o tempo
   era cortado em tela estreita. Empilhar custa altura e devolve leitura. */
.ev-fichatransp { flex-wrap: wrap; justify-content: center; }
.ev-fichatransp .ev-tempo {
	flex-basis: 100%; text-align: center; margin: 4px 0 0;
	font-size: 12px; white-space: nowrap;
}

/* O botão de guardar ficava dourado com texto escuro por cima do dourado
   do tema: o rótulo sumia. Ouro sólido com grafite é a única combinação que
   se lê nos dois temas. */
.srpev .ev-fichario .ev-btn.ev-ouro {
	background: var(--ev-ouro); border-color: var(--ev-ouro);
	color: #12100a; font-weight: 600;
}
.srpev .ev-fichario .ev-btn.ev-perigo { color: var(--ev-rec); border-color: var(--ev-rec); }

@media (max-width: 780px) {
	/* Tudo do gravador empilhado numa coluna: em 375px de largura, três
	   botões e o tempo lado a lado não cabem sem cortar alguma coisa. */
	.ev-fichario.ev-on { padding: 12px 11px; }
	.ev-fichacab { flex-wrap: wrap; gap: 4px 8px; }
	.ev-fichacab b { flex-basis: 100%; font-size: 13px; line-height: 1.35; }
	.ev-fichadur { font-size: 12px; }
	.ev-fichatransp { gap: 10px; margin-bottom: 12px; }
	.ev-fichatransp .ev-tbt { width: 52px; height: 52px; }
	.ev-fichatransp .ev-tempo { font-size: 14px; margin-top: 6px; }

	.ev-fichario .ev-pills { gap: 5px; margin: 10px 0; }
	.ev-fichario .ev-pill { min-height: 38px; padding: 0 13px; font-size: 12px; }

	/* Os três botões finais em coluna, na ordem da decisão: guardar é o que
	   quase sempre se quer, descartar fica por último e longe do polegar. */
	.ev-fichario .ev-linha.ev-mini { flex-direction: column; align-items: stretch; gap: 7px; }
	.srpev .ev-fichario .ev-btn { width: 100%; min-height: 46px; font-size: 12.5px; padding: 0 14px; }

	.srpev .ev-fichario textarea { min-height: 74px; font-size: 14px; }
}

/* ============================================================
   v1.17.2 — o transporte sobre o palco
   ============================================================ */

/* No computador o transporte tem cartão próprio, com fundo de interface, e
   herda a cor de texto normalmente. No celular ele perde o cartão e passa a
   repousar direto sobre o palco — que é escuro nos dois temas. Aí a cor tem
   de vir do token do palco, senão o tema claro pinta grafite sobre grafite
   e os botões somem sem deixar rastro. */
@media (max-width: 780px) {
	.ev-transporte { color: var(--ev-sobrepalco); }
	.ev-transporte button { color: var(--ev-sobrepalco); }
	.ev-transporte button svg { stroke: currentColor; }
	.ev-transporte button:active { color: var(--ev-ouro-cl, #e0c476); }
	.ev-transporte .ev-tc b { color: var(--ev-sobrepalco); }
	.ev-transporte .ev-tc i, .ev-transporte .ev-tc.ev-dim { color: var(--ev-sobrepalco-dim); }

	/* Alvo de toque com área visível: um ícone de 20px sem moldura é fácil
	   de errar com o polegar, e errar aqui é tocar no palco e mover camada. */
	.ev-transporte button {
		border: 1px solid var(--ev-sobrepalco-borda); border-radius: 9px;
		background: var(--ev-sobrepalco-bt);
	}
}

/* ============================================================
   v1.18.0 — ordem das mídias, acervo empilhado e arraste no toque
   ============================================================ */

/* Diálogo de ordem: lista numerada, arrastável, com miniatura. Grade de
   cartões obrigaria a ler a ordem pela posição na malha; a lista deixa a
   sequência explícita. */
.ev-ordem { list-style: none; margin: 10px 0 14px; padding: 0; max-height: 46vh; overflow: auto; }
.ev-ordemit {
	display: flex; align-items: center; gap: 9px;
	background: var(--ev-s1); border: 1px solid var(--ev-linha);
	border-radius: 6px; padding: 6px 8px; margin-bottom: 5px;
	cursor: grab; user-select: none; -webkit-user-select: none;
}
.ev-ordemit.ev-arrastando { opacity: .45; border-color: var(--ev-ouro); }
.ev-ordemn {
	flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--ev-ouro); color: #12100a;
	font-family: var(--ev-mono); font-size: 11px; font-weight: 600;
	display: grid; place-items: center;
}
.ev-ordemmini {
	flex: none; width: 40px; height: 54px; border-radius: 4px;
	object-fit: cover; background: var(--ev-campo);
	border: 1px solid var(--ev-linha);
}
.ev-ordemsem { display: grid; place-items: center; color: var(--ev-dim); font-size: 17px; }
.ev-ordemnome {
	flex: 1; min-width: 0; font-size: 12px; color: var(--ev-txt);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-ordemdur { font-family: var(--ev-mono); font-size: 10.5px; color: var(--ev-dim); flex: none; }

/* O acervo passa a empilhar em vez de enfileirar: nome, duração e
   miniatura na mesma linha se leem de relance, e a lista rola numa direção
   só — no celular, rolagem horizontal dentro de painel que já rola na
   vertical é o gesto mais fácil de errar. */
.ev-grade.ev-pilha { display: flex; flex-direction: column; gap: 5px; }
.ev-grade.ev-pilha .ev-item {
	display: flex; align-items: center; gap: 9px; width: 100%;
	aspect-ratio: auto; padding: 6px 8px; text-align: left;
}
.ev-grade.ev-pilha .ev-item img, .ev-grade.ev-pilha .ev-item .ev-semimg {
	width: 44px; height: 58px; flex: none; border-radius: 4px; object-fit: cover;
}
.ev-grade.ev-pilha .ev-item .ev-nome {
	flex: 1; min-width: 0; position: static; background: none; padding: 0;
	font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- arraste no toque ----

   O iOS entende toque-e-segurar como início de seleção de texto e mostra a
   lupa. Isso rouba o gesto de arrastar o clipe e é o que se percebe como
   "travamento". `touch-action: none` já estava no clipe; faltava a
   supressão da seleção e do menu de contexto nos ancestrais, porque o
   gesto começa no clipe mas o navegador consulta a árvore acima. */
.ev-tl, .ev-faixa, .ev-clipe, .ev-clipe * {
	-webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none;
}
.ev-faixa { touch-action: pan-y; }
.ev-clipe.ev-arrastando { cursor: grabbing; }
.ev-clipe { cursor: grab; }
.ev-alca { cursor: ew-resize; }

@media (max-width: 780px) {
	.ev-ordemit { padding: 8px; gap: 8px; }
	.ev-ordemit .ev-minib { min-width: 38px; min-height: 38px; }
	.ev-ordemmini { width: 34px; height: 46px; }
	/* No celular a lista de ordem é o modal inteiro. */
	.ev-ordem { max-height: 52vh; }
}

/* ============================================================
   v1.19.0 — andamento sem tapar a prévia
   ============================================================ */

/* Faixa fina no rodapé do palco. Ocupa o mínimo e deixa a peça visível
   durante a gravação — que é a única chance de auditar o vídeo inteiro sem
   esforço, e ela acontece de qualquer forma. */
.ev-fxrender {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 8;
	display: flex; align-items: center; gap: 11px;
	background: var(--ev-sobre); border: 1px solid var(--ev-ouro);
	border-radius: 8px; padding: 8px 12px;
	backdrop-filter: blur(6px);
}
.ev-fxpct {
	font-family: var(--ev-mono); font-size: 21px; font-weight: 500;
	color: var(--ev-sobrepalco); flex: none; min-width: 54px;
}
.ev-fxmeio { flex: 1; min-width: 0; }
.ev-fxbarra { height: 5px; border-radius: 3px; background: var(--ev-alca-fundo); overflow: hidden; }
.ev-fxbarra i {
	display: block; height: 100%; width: 0; border-radius: 3px;
	background: var(--ev-ouro); transition: width .2s;
}
.ev-fxdet {
	display: block; margin-top: 4px; font-family: var(--ev-mono);
	font-size: 10.5px; color: var(--ev-sobrepalco-dim);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srpev .ev-fxrender .ev-btn {
	flex: none; color: var(--ev-sobrepalco); border-color: var(--ev-sobrepalco-borda);
	background: var(--ev-sobrepalco-bt); font-size: 10px; padding: 6px 10px;
}
.srpev .ev-fxrender .ev-btn.ev-perigo { color: var(--ev-rec-txt); border-color: var(--ev-sobrepalco-borda); }

@media (max-width: 780px) {
	/* No celular a faixa vira duas linhas: quatro elementos numa linha só
	   em 375px espremeria a barra até ela não significar nada. */
	.ev-fxrender { flex-wrap: wrap; left: 6px; right: 6px; bottom: 6px; gap: 8px; }
	.ev-fxmeio { flex-basis: 100%; order: 3; }
	.ev-fxpct { font-size: 24px; }
	.srpev .ev-fxrender .ev-btn { min-height: 36px; }
}

/* ============================================================
   v1.20.0 — recorte por cor, e a faixa fora do caminho
   ============================================================ */

.ev-croma-amostra {
	width: 34px; height: 30px; flex: none; border-radius: 5px;
	border: 1px solid var(--ev-linha); display: block;
}

/* A faixa de andamento estava colada no rodapé do palco e cobria parte do
   transporte. Agora ela se apoia acima dele: o palco reserva a linha, e a
   faixa fica no espaço entre a prévia e os botões. */
.ev-fxrender { bottom: auto; top: 10px; }
@media (max-width: 780px) {
	.ev-fxrender { top: 6px; bottom: auto; }
}

/* Lixeira nos clipes de áudio: remover um recorte era selecionar e caçar o
   botão na barra. Com a lixeira no próprio clipe, o alvo é o que se quer
   apagar. */
.ev-clipe .ev-lixo {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px; padding: 0; z-index: 3;
	display: grid; place-items: center; border-radius: 4px;
	background: var(--ev-alca-fundo); border: 0; cursor: pointer;
	color: var(--ev-cat); opacity: 0; transition: opacity .12s;
}
.ev-clipe:hover .ev-lixo, .ev-clipe[aria-selected=true] .ev-lixo { opacity: 1; }
.ev-clipe .ev-lixo:hover { background: var(--ev-rec); color: #fff; }
.ev-clipe .ev-lixo svg { width: 13px; height: 13px; fill: currentColor; display: block; }

@media (max-width: 780px) {
	/* No toque não há hover: a lixeira aparece no clipe selecionado. */
	.ev-clipe .ev-lixo { width: 30px; height: 30px; right: 5px; }
	.ev-clipe .ev-lixo svg { width: 15px; height: 15px; }
}

/* Subtítulo dentro de um grupo do inspetor, para separar "a máscara" de
   "o que ela faz". */
.ev-sub {
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ev-dim); margin: 10px 0 4px; padding-top: 8px;
	border-top: 1px solid var(--ev-linha);
}

/* ============================================================
   v2.0.0 — pistas de vídeo empilhadas

   A trilha de vídeo era uma faixa só; agora são até seis, e o
   olho precisa saber num relance qual está por cima. A pista
   mais alta fica no topo, com um filete dourado à esquerda, e
   a de baixo — a da montagem — mantém o aspecto de sempre.
   ============================================================ */
.ev-pista.ev-pistasvid .ev-faixa { height: 34px; }
.ev-faixa.ev-faixavid { position: relative; }
.ev-faixa.ev-pistaalta::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
	background: var(--ev-ouro); opacity: .55; z-index: 1; pointer-events: none;
}
.ev-faixa.ev-faixacapa { height: 26px; }
.ev-pistavazia {
	position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
	font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ev-linha); pointer-events: none; white-space: nowrap;
}
/* Alvo de solta: durante o arraste a faixa vazia se acende. */
.ev-tl.ev-arrastando .ev-faixa.ev-faixavid { background: var(--ev-s1); }

@media (max-width: 780px) {
	.ev-pista.ev-pistasvid .ev-faixa { height: 38px; }
}

/* ============================================================
   v2.0.0 — hierarquia tipográfica e capa

   Os cartões de texto viraram lista agrupada por degrau. O
   cabeçalho do grupo é discreto de propósito: quem já sabe o
   que quer passa direto por ele.
   ============================================================ */
.ev-degrau { padding: 10px 2px 4px; display: flex; flex-direction: column; gap: 1px; }
.ev-degrau:first-child { padding-top: 2px; }
.ev-degrau b {
	font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 500; color: var(--ev-ouro);
}
.ev-degrau i { font-style: normal; font-size: 10px; color: var(--ev-dim); }
.ev-cardtxt { position: relative; padding-right: 62px; }
.ev-cardtxt .ev-amostra {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	font-style: normal; font-size: 17px; line-height: 1;
	color: var(--ev-dim); pointer-events: none;
}

/* Caixa de digitação: com quebra manual, ela precisa de altura. */
.ev-taTexto { min-height: 74px; line-height: 1.45; resize: vertical; }

/* Cor de fundo da capa: seletor nativo ao lado do campo hexadecimal. */
.ev-colorpick {
	width: 34px; height: 28px; padding: 0; flex: none; cursor: pointer;
	border: 1px solid var(--ev-linha); border-radius: 4px; background: transparent;
}
.ev-hex { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* ============================================================
   v2.2.0 — dicas recolhidas

   Eram quarenta e dois blocos de texto explicativo somando mais
   altura que os controles que explicavam. Agora cada um ocupa
   uma linha; o texto inteiro abre num balão que se fecha.
   ============================================================ */
.ev-dica { margin-top: 7px; }
.ev-dicabt {
	display: flex; align-items: flex-start; gap: 6px; width: 100%; min-width: 0;
	background: transparent; border: 0; padding: 3px 0; cursor: pointer;
	text-align: left; font-family: inherit; color: var(--ev-dim);
	font-size: 10px; line-height: 1.4;
}
.ev-dicabt:hover { color: var(--ev-ouro); }
.ev-dicaicone {
	flex: none; margin-top: 1px; width: 14px; height: 14px; border-radius: 50%;
	border: 1px solid currentColor; display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 9px; font-style: italic; line-height: 1;
}
/* Duas linhas em vez de uma com reticências. Uma linha cortada no meio
   de uma palavra lê-se como texto quebrado, não como resumo — era o
   relato. Duas linhas cabem sem empurrar os controles e quase sempre
   entregam a frase inteira. */
.ev-dicarot {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; overflow-wrap: break-word; word-break: break-word;
	min-width: 0; white-space: normal;
}
.ev-dica.ev-aberta .ev-dicarot { display: block; overflow: visible; }

.ev-dicabalao { display: none; }
.ev-dica.ev-aberta .ev-dicabalao {
	display: block; margin-top: 5px; padding: 9px 10px;
	background: var(--ev-s1); border: 1px solid var(--ev-linha);
	border-left: 2px solid var(--ev-ouro); border-radius: 4px;
}
.ev-dicabalao p {
	margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--ev-dim);
	/* Sem isto, uma palavra longa (um nome de arquivo, uma medida)
	   estoura o balão para fora do inspetor e o resto do texto some. */
	overflow-wrap: break-word; word-break: break-word; white-space: normal;
	max-width: 100%;
}
.ev-dicabalao { min-width: 0; max-width: 100%; }
.ev-dicabalao b { color: var(--ev-ouro-cl); font-weight: 400; }
.ev-dicape { display: flex; gap: 6px; margin-top: 8px; }
.ev-dicape button {
	font-size: 9.5px; padding: 3px 8px; cursor: pointer;
	background: transparent; color: var(--ev-dim);
	border: 1px solid var(--ev-linha); border-radius: 3px; font-family: inherit;
}
.ev-dicape button:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }

/* Erro não é dica: nasce aberto e usa o tom de alerta. */
.ev-dicaerro .ev-dicabt { color: var(--ev-alerta-txt); }
.ev-dicaerro .ev-dicaicone { font-style: normal; font-weight: 700; }
.ev-dica.ev-dicaerro.ev-aberta .ev-dicabalao { border-left-color: var(--ev-alerta); }
.ev-dicaerro .ev-dicabalao p { color: var(--ev-alerta-txt); }

@media (max-width: 780px) {
	.ev-dicabt { font-size: 11px; padding: 6px 0; }
	.ev-dicape button { padding: 6px 10px; font-size: 10.5px; }
}

/* Excluir mídia do acervo: alvo sobre a própria miniatura, para não
   confundir com o clique que insere na linha do tempo. */
.ev-ativo { position: relative; }
.ev-ativo .ev-excluir {
	position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 4px; cursor: pointer; padding: 0;
	background: var(--ev-alca-fundo); color: var(--ev-cat);
	opacity: 0; transition: opacity .12s ease;
}
.ev-ativo:hover .ev-excluir, .ev-ativo:focus-within .ev-excluir { opacity: 1; }
.ev-ativo .ev-excluir:hover { background: var(--ev-rec); color: var(--ev-rec-txt); }
.ev-ativo .ev-excluir svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.ev-espaco {
	margin: 8px 2px 0; font-size: 9.5px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ev-linha);
}
@media (pointer: coarse) {
	/* Sem hover no toque: o alvo fica sempre visível e maior. */
	.ev-ativo .ev-excluir { opacity: 1; width: 30px; height: 30px; }
	.ev-ativo .ev-excluir svg { width: 15px; height: 15px; }
}

/* ============================================================
   v2.4.0 — movimento das máscaras
   ============================================================ */
.ev-submov { margin: 10px 0 4px; padding-top: 8px; border-top: 1px dashed var(--ev-linha); }
.ev-submov h4 {
	margin: 0 0 7px; font-size: 9.5px; letter-spacing: .14em;
	text-transform: uppercase; font-weight: 500; color: var(--ev-ouro);
}
.ev-submov .ev-marcado { border-color: var(--ev-ouro); color: var(--ev-ouro); }

/* Régua das marcações: onde elas caem dentro do clipe. */
.ev-marcacoes {
	position: relative; height: 22px; margin: 4px 0 6px;
	background: var(--ev-s1); border: 1px solid var(--ev-linha); border-radius: 3px;
}
.ev-marcacao {
	position: absolute; top: 50%; width: 11px; height: 11px; padding: 0;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--ev-ouro); border: 1px solid var(--ev-s1);
	border-radius: 2px; cursor: pointer;
}
.ev-marcacao:hover { background: var(--ev-ouro-cl); }
.ev-marcacao.ev-marcaqui { box-shadow: 0 0 0 2px var(--ev-ouro-cl); }
.ev-marcagulha {
	position: absolute; top: 0; bottom: 0; width: 1px;
	background: var(--ev-creme); opacity: .7; pointer-events: none;
}
@media (pointer: coarse) {
	.ev-marcacoes { height: 30px; }
	.ev-marcacao { width: 15px; height: 15px; }
}

/* ============================================================
   v2.6.0 — a linha do deslizante

   Duas correções e um acabamento.

   1. O campo digitável da 2.4.0 nascia com `width: 100%`, herdado de
      `.srpev input` — que tem especificidade maior que uma classe
      sozinha. Resultado: o campo tomava a linha inteira e o deslizante
      virava um caroço de dois pixels. O seletor carrega o tipo do
      elemento junto (`input.ev-valn`), que é o mesmo padrão já usado
      pelo seletor de cor, e ganha da regra base sem !important.

   2. O preenchimento ia de 0 a 100% da largura do trilho, enquanto a
      bolinha percorre a largura *menos o próprio diâmetro* — a bolinha
      não pode ficar metade para fora nas pontas. Nos extremos o dourado
      chegava ao fim com a bolinha ainda a sete pixels de distância, e
      no meio os dois se cruzavam. Agora `--ev-a`, `--ev-b` e `--ev-org`
      chegam como número puro e o `calc()` desconta o diâmetro, de modo
      que preenchimento e bolinha andem juntos em toda a escala.

   3. Nas escalas de dois lados o centro ganha um risco, que é o que
      permite ver que o valor voltou exatamente ao zero sem ler o campo.
   ============================================================ */
.ev-desliza { gap: 7px; }
.srpev .ev-desliza > label {
	flex: 0 0 74px; font-size: 11px; line-height: 1.25;
	overflow-wrap: break-word; hyphens: auto;
	transition: color .12s;
}
/* Enquanto a mão está no controle, a linha inteira acende: é o retorno
   que diz qual dos sete deslizantes empilhados está respondendo. */
.srpev .ev-desliza.ev-mexendo > label { color: var(--ev-ouro); }

/* --- trilho --- */
.srpev input.ev-trilho {
	/* Diâmetro da bolinha, num lugar só: o `calc` do preenchimento
	   precisa do mesmo número que o seletor da bolinha usa, e dois
	   números iguais escritos em dois lugares viram dois números
	   diferentes no primeiro ajuste. */
	--ev-bola: 15px;
	flex: 1 1 auto; min-width: 40px; width: auto;
	-webkit-appearance: none; appearance: none;
	height: 24px; padding: 0; border: 0; background: transparent;
	accent-color: auto; cursor: pointer;
	/* O toque no trilho é do trilho: sem isto, arrastar na horizontal
	   dentro de um painel que rola na vertical entrega o gesto ao painel
	   na metade das vezes. */
	touch-action: none;
}

/* O trilho é montado em camadas: o preenchimento dourado por cima, o
   risco do centro no meio e a cor de fundo por baixo. O risco não pode
   ficar no `background` do próprio `input` — o fundo do pseudoelemento
   do trilho é opaco e o cobriria por inteiro. Por isso ele entra aqui,
   e quem decide se aparece é `--ev-tick`: transparente nas escalas de
   um lado só, cinza nas de dois.

   As posições saem de `calc()` porque a bolinha percorre a largura menos
   o próprio diâmetro — ela não pode ficar metade para fora nas pontas —
   e é esse trecho menor que o preenchimento precisa acompanhar. */
.srpev input.ev-trilho::-webkit-slider-runnable-track {
	height: 6px; border-radius: 3px;
	background:
		linear-gradient(90deg,
			transparent 0 calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-a, 0) / 100),
			var(--ev-ouro) calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-a, 0) / 100)
				calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-b, 0) / 100),
			transparent calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-b, 0) / 100) 100%),
		linear-gradient(var(--ev-tick, transparent), var(--ev-tick, transparent))
			no-repeat
			calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-org, 0) / 100 - 0.5px)
			center / 1px 6px,
		var(--ev-linha);
	box-shadow: inset 0 1px 2px var(--ev-sombra);
}
.srpev input.ev-trilho::-moz-range-track {
	height: 6px; border-radius: 3px;
	background:
		linear-gradient(90deg,
			transparent 0 calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-a, 0) / 100),
			var(--ev-ouro) calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-a, 0) / 100)
				calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-b, 0) / 100),
			transparent calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-b, 0) / 100) 100%),
		linear-gradient(var(--ev-tick, transparent), var(--ev-tick, transparent))
			no-repeat
			calc(var(--ev-bola) / 2 + (100% - var(--ev-bola)) * var(--ev-org, 0) / 100 - 0.5px)
			center / 1px 6px,
		var(--ev-linha);
	box-shadow: inset 0 1px 2px var(--ev-sombra);
}

/* Risco do centro, só nas escalas que passam por zero: é o que permite
   ver que o valor voltou exatamente ao zero sem ler o campo. */
.srpev .ev-desliza.ev-bipolar input.ev-trilho { --ev-tick: var(--ev-dim); }

.srpev input.ev-trilho::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: var(--ev-bola); height: var(--ev-bola); margin-top: -4.5px;
	border-radius: 50%;
	background: var(--ev-ouro); border: 2px solid var(--ev-s2);
	box-shadow: 0 1px 3px var(--ev-sombra); cursor: grab;
	transition: box-shadow .12s, background .12s;
}
.srpev input.ev-trilho::-moz-range-thumb {
	width: var(--ev-bola); height: var(--ev-bola); border-radius: 50%;
	background: var(--ev-ouro); border: 2px solid var(--ev-s2);
	box-shadow: 0 1px 3px var(--ev-sombra); cursor: grab;
	transition: box-shadow .12s, background .12s;
}
.srpev input.ev-trilho:hover::-webkit-slider-thumb { background: var(--ev-ouro-cl); }
.srpev input.ev-trilho:hover::-moz-range-thumb { background: var(--ev-ouro-cl); }
/* Halo enquanto a mão está no controle — o mesmo desenho do foco, para
   não haver dois vocabulários de "estou aqui". */
.srpev input.ev-trilho:active::-webkit-slider-thumb {
	cursor: grabbing; background: var(--ev-ouro-cl);
	box-shadow: 0 1px 3px var(--ev-sombra), 0 0 0 5px var(--ev-ouro-medio);
}
.srpev input.ev-trilho:active::-moz-range-thumb {
	cursor: grabbing; background: var(--ev-ouro-cl);
	box-shadow: 0 1px 3px var(--ev-sombra), 0 0 0 5px var(--ev-ouro-medio);
}
.srpev input.ev-trilho:focus-visible { outline: none; }
.srpev input.ev-trilho:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--ev-ouro-medio), 0 0 0 4px var(--ev-ouro);
}
.srpev input.ev-trilho:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px var(--ev-ouro-medio), 0 0 0 4px var(--ev-ouro);
}

/* --- leitura digitável --- */
.srpev input.ev-valn {
	flex: 0 0 58px; width: 58px; min-width: 58px; max-width: 58px;
	padding: 4px 6px; text-align: right; font-family: var(--ev-mono);
	font-size: 11px; background: var(--ev-campo); color: var(--ev-campo-txt);
	border: 1px solid var(--ev-linha); border-radius: 3px;
	-moz-appearance: textfield;
	transition: border-color .12s, box-shadow .12s;
}
.srpev input.ev-valn:hover { border-color: var(--ev-dim); }
.srpev input.ev-valn:focus {
	border-color: var(--ev-ouro); box-shadow: 0 0 0 2px var(--ev-ouro-medio);
	outline: none;
}
.srpev input.ev-valn::-webkit-outer-spin-button,
.srpev input.ev-valn::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}

@media (pointer: coarse) {
	/* Alvo de dedo: o polegar precisa de mais que quinze pixels. */
	.srpev input.ev-trilho { --ev-bola: 22px; height: 36px; }
	.srpev input.ev-trilho::-webkit-slider-thumb { margin-top: -8px; }
	.srpev input.ev-valn { flex-basis: 66px; width: 66px; min-width: 66px; max-width: 66px; }
	.srpev .ev-desliza > label { flex-basis: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	.srpev input.ev-trilho::-webkit-slider-thumb,
	.srpev input.ev-trilho::-moz-range-thumb,
	.srpev input.ev-valn,
	.srpev .ev-desliza > label { transition: none; }
}

/* ============================================================
   v2.6.0 — estabilização quadro a quadro

   O grupo tem três blocos com pesos diferentes de atenção: a grade de
   quadros é referência e fica discreta; o passo e a cruzeta são o que a
   mão usa a cada quadro e precisam de alvo grande; a limpeza é de fim de
   trabalho e volta ao tamanho dos outros botões do inspetor.
   ============================================================ */

/* Número do quadro corrente, ao lado do seletor de qps. */
.srpev .ev-quadronum {
	font-family: var(--ev-mono); font-size: 11px; color: var(--ev-ouro);
	flex: 0 0 auto; margin-left: auto; padding-left: 6px;
}

/* Passo de quadro. Quatro botões iguais dividindo a linha: as setas são
   apertadas dezenas de vezes seguidas e não podem exigir mira. */
.srpev .ev-linha.ev-mini.ev-passoq { gap: 4px; }
.srpev .ev-linha.ev-mini.ev-passoq button {
	flex: 1 1 0; min-height: 30px; padding: 3px 0; font-size: 11px;
	font-family: var(--ev-mono); letter-spacing: 0;
}

/* Cruzeta de empurrão. Grade de três por três com os cantos vazios: é o
   desenho que todo teclado direcional tem, e o vazio no canto é o que
   impede a diagonal de parecer disponível quando não é. */
.ev-empurra {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 4px; margin: 2px 0 8px; max-width: 156px;
}
.srpev .ev-empurra button {
	min-height: 32px; padding: 0; font-size: 13px; line-height: 1;
	border: 1px solid var(--ev-linha); border-radius: 4px;
	background: var(--ev-s1); color: var(--ev-txt); cursor: pointer;
	transition: border-color .12s, color .12s, background .12s;
}
.srpev .ev-empurra button:hover {
	border-color: var(--ev-ouro); color: var(--ev-ouro); background: var(--ev-ouro-fraco);
}
.srpev .ev-empurra button:active { background: var(--ev-ouro-medio); }
.srpev .ev-empurra .ev-empcentro { color: var(--ev-dim); font-size: 16px; }

/* Régua das marcações de enquadramento: mesma linguagem da régua das
   máscaras, com o losango em verde para não confundir as duas trilhas
   quando as duas estiverem abertas no mesmo inspetor. */
.ev-marcacoes.ev-marcaenq .ev-marcacao {
	background: var(--ev-cv1); width: 9px; height: 9px;
}
.ev-marcacoes.ev-marcaenq .ev-marcacao:hover { background: var(--ev-ouro); }
.ev-marcacoes.ev-marcaenq .ev-marcacao.ev-marcaqui {
	background: var(--ev-ouro); box-shadow: 0 0 0 2px var(--ev-ouro-cl);
}
@media (pointer: coarse) {
	.ev-marcacoes.ev-marcaenq .ev-marcacao { width: 13px; height: 13px; }
}

/* Botão que pede atenção sem gritar: "Cobrir sobras" quando o
   deslocamento já descobriu a borda. */
.srpev .ev-linha.ev-mini button.ev-destaque {
	border-color: var(--ev-ouro); color: var(--ev-ouro); background: var(--ev-ouro-fraco);
}

/* ------------------------------------------------------------
   Marcações no próprio clipe da linha do tempo.

   Ficam numa faixa de seis pixels rente à base do retângulo: em cima
   está o nome do arquivo, e um losango por cima do nome esconderia
   justamente o que identifica o clipe.
   ------------------------------------------------------------ */
.ev-enqtrilho {
	position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
	background: var(--ev-vedar); pointer-events: none; z-index: 3;
}
.srpev .ev-enqmarca {
	position: absolute; top: 50%; left: 0;
	width: 6px; height: 6px; padding: 0; margin: 0;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--ev-ouro); border: 0; border-radius: 1px;
	cursor: pointer; pointer-events: auto;
}
.srpev .ev-enqmarca:hover { background: var(--ev-creme); transform: translate(-50%, -50%) rotate(45deg) scale(1.4); }
/* Trecho denso: a faixa diz "aqui é contínuo" pelo custo de um nó só. */
.ev-enqtrilho.ev-enqdenso .ev-enqfaixa {
	position: absolute; top: 2px; height: 3px; border-radius: 2px;
	background: var(--ev-ouro);
}

/* Lista de arquivos originais, na tela de outras formas de salvar. */
.ev-listaorig { list-style: none; margin: 8px 0 0; padding: 0; }
.ev-listaorig li {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 7px 0; border-top: 1px solid var(--ev-divisor); font-size: 12px;
}
.ev-listaorig li b { font-weight: 500; word-break: break-word; }
.ev-listaorig li button { margin-left: auto; }

/* ============================================================
   v2.8.0 — mira de referência e legibilidade da correção de imagem
   ============================================================ */

/* ------------------------------------------------------------
   Formas da mira.

   Grade de quatro, como o catálogo de predefinições: a escolha é
   visual — cruz some sobre cerca, círculo some sobre estrada de terra —
   e comparar quatro nomes lado a lado é mais rápido que ler um select.
   ------------------------------------------------------------ */
.ev-miraformas {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 5px; margin: 2px 0 10px;
}
.srpev .ev-miraforma {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	min-height: 52px; padding: 7px 2px 5px;
	border: 1px solid var(--ev-linha); border-radius: 5px;
	background: var(--ev-s1); color: var(--ev-dim); cursor: pointer;
	transition: border-color .12s, color .12s, background .12s;
}
.srpev .ev-miraforma:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.srpev .ev-miraforma[aria-pressed=true] {
	border-color: var(--ev-ouro); color: var(--ev-ouro);
	background: var(--ev-ouro-fraco); box-shadow: inset 0 0 0 1px var(--ev-ouro);
}
.srpev .ev-miraforma i {
	font-style: normal; font-size: 10.5px; letter-spacing: .04em; line-height: 1;
}
/* O desenho de cada forma sai de CSS puro, não de ícone: são quatro
   figuras geométricas, e um sprite só para elas seria peso sem retorno. */
.srpev .ev-miraforma::before {
	content: ''; display: block; width: 16px; height: 16px;
	border: 1.5px solid currentColor; border-radius: 50%;
}
.srpev .ev-mira-mira::before {
	box-shadow: 0 0 0 1px transparent; position: relative;
	background:
		linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat,
		linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat;
}
.srpev .ev-mira-cruz::before {
	border: 0; border-radius: 0;
	background:
		linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat,
		linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat;
}
.srpev .ev-mira-quadrado::before { border-radius: 2px; }

/* Botão de apontar: estado armado é perigoso de esquecer ligado, então
   ele se anuncia com a mesma cor do anel que aparece na prévia. */
.srpev .ev-linha.ev-mini button.ev-apontar[aria-pressed=true] {
	border-color: var(--ev-mira-armada); color: var(--ev-mira-armada);
	background: var(--ev-ouro-fraco);
}

/* ------------------------------------------------------------
   Legibilidade da correção de imagem e da graduação de cor.

   Os nomes das predefinições vinham a 8,5 px — tamanho que serve para
   uma legenda que ninguém precisa ler, e não para o rótulo que É a
   escolha. Como "Tabapuã", "Girolando" e "Canchim" não se adivinham
   pela miniatura, ilegível ali significa inutilizável.

   O aumento vale só nestes dois grupos, por classe: subir a fonte do
   inspetor inteiro estouraria as linhas de rótulo fixo de 72 px do
   resto do painel.
   ------------------------------------------------------------ */
.ev-grupo.ev-grlegivel h3 { font-size: 11.5px; letter-spacing: .15em; }
.ev-grupo.ev-grlegivel .ev-look i {
	font-size: 11.5px; letter-spacing: .02em; line-height: 1.25; color: var(--ev-txt);
}
.ev-grupo.ev-grlegivel .ev-look[aria-pressed=true] i { color: var(--ev-ouro); font-weight: 500; }
.ev-grupo.ev-grlegivel .ev-looks { gap: 7px; margin-bottom: 12px; }
.ev-grupo.ev-grlegivel .ev-linha label { font-size: 12.5px; width: 88px; }
.ev-grupo.ev-grlegivel .ev-val { font-size: 12px; }
.ev-grupo.ev-grlegivel .ev-rodacx i { font-size: 11px; letter-spacing: .05em; margin-top: 5px; }
.ev-grupo.ev-grlegivel .ev-linha.ev-mini button { font-size: 11.5px; }

/* Mesma régua para a mira, que mora no grupo de estabilizar e tem o
   mesmo problema de rótulo curto e importante. */
.srpev .ev-linha.ev-mini button.ev-apontar { font-size: 11.5px; }

@media (max-width: 780px) {
	/* No celular o painel é mais largo em proporção e o dedo é o
	   ponteiro: cabe mais fonte e ela é mais necessária. */
	.ev-grupo.ev-grlegivel .ev-look i { font-size: 12.5px; }
	.ev-grupo.ev-grlegivel .ev-linha label { font-size: 13px; width: 100%; }
	.ev-grupo.ev-grlegivel .ev-rodacx i { font-size: 12px; }
	.ev-miraformas { gap: 6px; }
	.srpev .ev-miraforma { min-height: 60px; }
	.srpev .ev-miraforma i { font-size: 11.5px; }
}

/* ============================================================
   v2.9.0 — girar e recortar
   ============================================================ */

/* Giro em quartos de volta: quatro botões iguais dividindo a linha,
   como o passo de quadro. São ações de um toque e não pedem mira. */
.srpev .ev-linha.ev-mini.ev-giro90 { gap: 4px; }
.srpev .ev-linha.ev-mini.ev-giro90 button {
	flex: 1 1 0; min-height: 32px; padding: 3px 0; font-size: 11.5px; letter-spacing: 0;
}

/* Proporções de recorte. Seis numa grade de três: em duas linhas os
   nomes cabem por extenso, e "16:9" ao lado de "9:16" numa linha só
   ficaria estreito demais para acertar com o dedo. */
.ev-props {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 5px; margin: 2px 0 10px;
}
.srpev .ev-prop {
	min-height: 34px; padding: 6px 2px; font-size: 12px;
	font-family: var(--ev-mono); letter-spacing: 0;
	border: 1px solid var(--ev-linha); border-radius: 5px;
	background: var(--ev-s1); color: var(--ev-txt); cursor: pointer;
	transition: border-color .12s, color .12s, background .12s;
}
.srpev .ev-prop:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.srpev .ev-prop[aria-pressed=true] {
	border-color: var(--ev-ouro); color: var(--ev-ouro);
	background: var(--ev-ouro-fraco); box-shadow: inset 0 0 0 1px var(--ev-ouro);
}

/* Modo de recorte armado: mesma linguagem do "apontar" da mira, porque
   os dois são o mesmo tipo de estado — a prévia muda de significado
   enquanto ele dura, e esquecer ligado é o erro que se quer evitar. */
.srpev .ev-linha.ev-mini button.ev-recortar[aria-pressed=true] {
	border-color: var(--ev-mira-armada); color: var(--ev-mira-armada);
	background: var(--ev-ouro-fraco);
}

@media (max-width: 780px) {
	.ev-props { gap: 6px; }
	.srpev .ev-prop { min-height: 42px; font-size: 13px; }
	.srpev .ev-linha.ev-mini.ev-giro90 button { min-height: 40px; font-size: 12.5px; }
}

/* ============================================================
   v2.10.0 — movimento por quadro nas camadas
   ============================================================ */

/* Passo de quadro da camada: quatro botões iguais dividindo a linha,
   igual ao do clipe. São a mesma ação em dois lugares, e parecer a mesma
   coisa é o que dispensa aprender duas vezes. */
.srpev .ev-linha.ev-mini.ev-movpasso { gap: 4px; }
.srpev .ev-linha.ev-mini.ev-movpasso button {
	flex: 1 1 0; min-height: 32px; padding: 3px 0; font-size: 12px; letter-spacing: 0;
}

/* Seguir com a mira: mesmo verde do "apontar" e do "recortar". Os três
   são o mesmo tipo de estado — a prévia muda de significado enquanto ele
   dura — e mudar de cor a cada um faria parecerem coisas diferentes. */
.srpev .ev-linha.ev-mini button.ev-seguir[aria-pressed=true] {
	border-color: var(--ev-mira-armada); color: var(--ev-mira-armada);
	background: var(--ev-ouro-fraco);
}

@media (max-width: 780px) {
	.srpev .ev-linha.ev-mini.ev-movpasso button { min-height: 40px; font-size: 13px; }
}

/* ============================================================
   v2.11.0 — refinamento: transporte, ação principal, leitura em quadros
   ============================================================ */

/* Barra de transporte de quadro. O número no meio das setas em vez de
   solto numa linha acima: é ele que diz onde a próxima marcação vai
   cair, e separado ninguém ligava um ao outro. */
.ev-transq {
	display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr;
	align-items: center; gap: 4px; margin: 2px 0 10px;
}
.srpev .ev-transq button {
	min-height: 34px; padding: 0; font-size: 12px; letter-spacing: 0;
	border: 1px solid var(--ev-linha); border-radius: 5px;
	background: var(--ev-s1); color: var(--ev-txt); cursor: pointer;
}
.srpev .ev-transq button:hover { border-color: var(--ev-ouro); color: var(--ev-ouro); }
.ev-transqnum {
	font-family: var(--ev-mono); font-size: 13px; font-weight: 500;
	min-width: 54px; text-align: center; color: var(--ev-dim);
	padding: 0 6px; letter-spacing: .02em;
}
/* Dourado com sublinhado quando o quadro já tem marcação: o estado se lê
   sem procurar, que é o que permite andar rápido pela sequência. */
.ev-transqnum.ev-marcado {
	color: var(--ev-ouro); border-bottom: 2px solid var(--ev-ouro);
}

/* Ação principal: a que se repete dezenas de vezes ganha a linha
   inteira. Espremida entre botões de exceção, acertar o alvo virava
   parte do trabalho. */
.srpev button.ev-acaoprinc {
	display: block; width: 100%; min-height: 40px; margin: 0 0 8px;
	font-size: 12.5px; letter-spacing: .04em;
	border: 1px solid var(--ev-ouro); border-radius: 6px;
	background: var(--ev-ouro-fraco); color: var(--ev-ouro); cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
.srpev button.ev-acaoprinc:hover { background: var(--ev-ouro-medio); }
.srpev button.ev-acaoprinc.ev-armado {
	border-color: var(--ev-mira-armada); color: var(--ev-mira-armada);
	box-shadow: inset 0 0 0 1px var(--ev-mira-armada);
}

/* Relógio clicável: precisa parecer clicável sem virar botão chamativo,
   porque ele é sobretudo uma leitura. */
.srpev button.ev-tcbotao {
	border: 0; background: transparent; padding: 2px 6px; cursor: pointer;
	border-radius: 4px; color: inherit; font: inherit;
}
.srpev button.ev-tcbotao:hover { background: var(--ev-ouro-fraco); color: var(--ev-ouro); }
.srpev button.ev-zoomtl {
	border: 0; background: transparent; padding: 2px 6px; cursor: pointer;
	border-radius: 4px; min-width: 52px; text-align: center;
}
.srpev button.ev-zoomtl:hover { background: var(--ev-ouro-fraco); color: var(--ev-ouro); }

@media (max-width: 780px) {
	.srpev .ev-transq button { min-height: 42px; font-size: 13px; }
	.ev-transqnum { font-size: 14px; min-width: 60px; }
	.srpev button.ev-acaoprinc { min-height: 46px; font-size: 13px; }
}

/* Abas do pop-up do banco de voz. Três tarefas, três abas: gravar,
   procurar o que já existe, abrir uma ferramenta. Empilhadas na coluna
   lateral eram mais de uma tela de rolagem. */
.ev-abas {
	display: flex; gap: 2px; border-bottom: 1px solid var(--ev-linha);
	margin: 0 0 14px;
}
.srpev .ev-aba {
	flex: 1 1 0; min-height: 40px; padding: 0 10px;
	border: 0; border-bottom: 2px solid transparent; border-radius: 0;
	background: transparent; color: var(--ev-dim); cursor: pointer;
	font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
	transition: color .12s, border-color .12s;
}
.srpev .ev-aba:hover { color: var(--ev-txt); }
.srpev .ev-aba[aria-selected=true] {
	color: var(--ev-ouro); border-bottom-color: var(--ev-ouro); font-weight: 500;
}
.ev-abacorpo { min-height: 260px; }

@media (max-width: 780px) {
	/* No celular a aba é alvo de dedo: 44 px é o mínimo confortável, e
	   três abas ainda cabem lado a lado na largura da janela. */
	.srpev .ev-aba { min-height: 46px; font-size: 12px; padding: 0 4px; }
}

/* ============================================================
   v2.12.0 — seis proporções, incluindo as deitadas
   ============================================================ */

/* Com quatro botões a barra folgava; com seis ela disputa espaço com o
   nome do projeto e com Exportar em tela de 1366, que é o notebook do
   escritório. Apertar o vão e deixar o grupo encolher antes dos demais
   resolve sem esconder nenhum formato num menu. */
.ev-fmt { flex: 0 1 auto; min-width: 0; }
.ev-fmt button { padding: 5px 8px; letter-spacing: .05em; white-space: nowrap; }

/* Sete proporções de recorte não fecham a grade de três. Quatro colunas
   deixam duas linhas cheias menos uma, que é o desenho menos irregular
   possível para sete itens. */
.ev-grupo .ev-props { grid-template-columns: repeat(4, 1fr); }
.srpev .ev-prop { padding: 6px 1px; font-size: 11.5px; }

@media (max-width: 1180px) {
	/* Antes de espremer os rótulos, o grupo inteiro sai da barra: no
	   estreito o menu móvel já oferece a troca de proporção. */
	.ev-fmt button { padding: 5px 6px; font-size: 10.5px; }
}
@media (max-width: 780px) {
	.ev-grupo .ev-props { grid-template-columns: repeat(3, 1fr); }
	.srpev .ev-prop { font-size: 12.5px; }
}

/* ============================================================
   v2.13.0 — som unificado, captação e oficina em grade
   ============================================================ */

/* ---- abas do painel lateral de som ----

   As mesmas abas do pop-up, numa coluna de trezentos pixels. O que muda é
   a densidade: três palavras curtas cabem lado a lado se o tamanho cair
   dois pontos e a caixa alta segurar a leitura. */
.ev-abaslado { margin: 0 0 10px; }
.srpev .ev-abaslado .ev-aba { min-height: 32px; font-size: 10.5px; letter-spacing: .09em; padding: 0 4px; }
.ev-sompainel { display: block; }
.ev-sompainel.ev-oculto { display: none; }

/* ---- escolha da fonte de captação ----

   Grade de dois por dois, e não uma fila: os quatro nomes têm comprimento
   parecido e a grade os alinha sem depender da largura disponível, que no
   cartão do gravador e na coluna lateral é diferente. */
.ev-modos {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
	width: 100%; margin-bottom: 8px;
}
.srpev .ev-modo {
	display: flex; flex-direction: column; gap: 2px; text-align: left;
	border: 1px solid var(--ev-linha); border-radius: 6px;
	background: var(--ev-s1); padding: 7px 9px; cursor: pointer;
	min-height: 44px; transition: border-color .12s, background .12s;
}
.srpev .ev-modo b { font-size: 11.5px; font-weight: 500; color: var(--ev-txt); letter-spacing: .02em; }
.srpev .ev-modo span { font-size: 9.5px; color: var(--ev-dim); line-height: 1.3; }
.srpev .ev-modo:hover { border-color: var(--ev-ouro); }
.srpev .ev-modo[aria-pressed=true] {
	border-color: var(--ev-ouro); background: var(--ev-s3);
	box-shadow: inset 3px 0 0 var(--ev-ouro);
}
.srpev .ev-modo[aria-pressed=true] b { color: var(--ev-ouro); }
/* Indisponível continua visível e clicável: o toque abre a explicação de
   por que não dá neste aparelho. Sumir com o botão faria a interface mudar
   de tamanho entre o computador e o telefone da mesma pessoa. */
.srpev .ev-modo.ev-modoseco { opacity: .45; }
.srpev .ev-modo.ev-modoseco:hover { border-color: var(--ev-alerta); }
.ev-mododica { margin-top: 0; margin-bottom: 9px; }
.ev-gravfonte {
	font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
	color: var(--ev-ouro);
}

/* ---- oficina em grade ----

   `auto-fit` com mínimo de 290 px: no computador largo saem três colunas,
   no notebook duas, no celular uma — sem nenhuma consulta de mídia, porque
   o que decide é a largura real da caixa e não a do aparelho. */
.ev-modal.ev-larga .ev-cx { max-width: 1120px; }
.ev-ofgrade {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 9px; align-items: start; margin-bottom: 4px;
}
.ev-ofgrade .ev-ofgrupo { margin-bottom: 0; }
/* O grupo de isolamento carrega texto explicativo por controle e não cabe
   numa coluna estreita sem virar uma torre. Ele toma a grade inteira. */
.ev-ofgrupo.ev-oflargo { grid-column: 1 / -1; }
.ev-ofgrupo.ev-oflargo .ev-alvo + .ev-alvo { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--ev-linha); }
.ev-alvodesc { font-size: 10px; color: var(--ev-dim); line-height: 1.5; margin: 2px 0 0; padding-left: 136px; }
.ev-sugest { margin-bottom: 10px; }
.ev-ofsilencio .ev-pills { margin-bottom: 6px; }
.ev-ofsilencio .ev-alvodesc { padding-left: 0; }

/* No largo, o isolamento também aproveita duas colunas de controles. */
@media (min-width: 1000px) {
	.ev-ofgrupo.ev-oflargo .ev-alvo {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 4px 16px; align-items: center;
	}
	.ev-ofgrupo.ev-oflargo .ev-alvodesc { padding-left: 0; margin: 0; }
}

/* Rodapé grudado: ouvir e guardar ficam alcançáveis com a grade rolada. */
.ev-ofrodape {
	position: sticky; bottom: 0; z-index: 2;
	background: var(--ev-s2); border-top: 1px solid var(--ev-linha);
	margin: 6px -18px -15px; padding: 9px 18px 13px;
}
.ev-ofrodape .ev-nota { margin-top: 6px; }

@media (max-width: 780px) {
	.ev-modal.ev-larga .ev-cx { max-width: 100%; }
	.ev-ofgrade { grid-template-columns: 1fr; }
	.ev-alvodesc { padding-left: 0; }
	.srpev .ev-modo { min-height: 52px; }
	.srpev .ev-modo b { font-size: 12.5px; }
	.srpev .ev-abaslado .ev-aba { min-height: 44px; font-size: 11.5px; }
	.ev-ofrodape { margin: 6px -11px -12px; padding: 9px 11px 12px; }
}

/* ----------------------------------------------------------
   Quadro-chave (v2.15): o losango ao lado de cada linha do
   Transformar. Vazio sem marcação no quadro corrente, cheio com. O
   toque de 32px é o mínimo confortável no celular sem engordar a
   linha do inspetor.
   ---------------------------------------------------------- */
.ev-linhachave { display: flex; align-items: center; gap: 6px; }
.ev-linhachave > .ev-par,
.ev-linhachave > .ev-linha { flex: 1; min-width: 0; }
.ev-losango {
	appearance: none; -webkit-appearance: none;
	width: 32px; height: 32px; flex: 0 0 32px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: 8px;
	color: var(--ev-dim); cursor: pointer; padding: 0;
}
.ev-losango svg { width: 15px; height: 15px; fill: currentColor; }
.ev-losango:hover { background: var(--ev-s2); color: var(--ev-txt); }
.ev-losango.ev-losangon { color: var(--ev-ouro); }
.ev-losango.ev-losangon:hover { color: var(--ev-ouro); background: var(--ev-s2); }


/* ----------------------------------------------------------
   Barra da linha do tempo (v2.15): ícones à esquerda, play e tempo no
   centro, zoom e tela cheia à direita — a gramática do exemplo.
   ---------------------------------------------------------- */
.ev-tlbar { justify-content: space-between; }
.ev-tlgrupo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ev-tlicones { flex: 1; }
.ev-tlzoom { flex: 1; justify-content: flex-end; }
.ev-tlcentro { flex: 0 0 auto; gap: 10px; }
.ev-tlbar .ev-icone {
	width: 32px; height: 30px; padding: 0; border: 0; border-radius: 7px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; color: var(--ev-txt);
}
.ev-tlbar .ev-icone svg { width: 17px; height: 17px; }
.ev-tlbar .ev-icone:hover { background: var(--ev-s2); border: 0; color: var(--ev-ouro); }
.ev-tlplay {
	width: 34px; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 50%;
	background: var(--ev-tinta, #17211b) !important; color: var(--ev-s1, #fff) !important;
	display: inline-flex; align-items: center; justify-content: center;
}
.ev-tlplay svg { width: 16px; height: 16px; fill: currentColor; }
.ev-tlbar .ev-tcbotao { border: 0; background: transparent; }
.ev-tlbar .ev-tcbotao b { font-weight: 600; color: var(--ev-txt); }
.ev-tlbar .ev-tcbotao i { font-style: normal; color: var(--ev-dim); }
.ev-tcsep { margin: 0 6px; opacity: .5; }
.ev-zoomtrilho {
	width: 110px; max-width: 26vw; accent-color: var(--ev-ouro);
	appearance: auto; -webkit-appearance: auto; background: transparent; border: 0; padding: 0;
}
@media (max-width: 760px) {
	.ev-tlicones .ev-dica { display: none; }
	.ev-zoomtrilho { width: 70px; }
}