:root {
  --fundo: #0b1020;
  --fundo-2: #10172c;
  --fundo-3: #161d35;
  --vidro: rgba(255, 255, 255, 0.035);
  --vidro-forte: rgba(255, 255, 255, 0.06);
  --linha: rgba(255, 255, 255, 0.08);
  --linha-forte: rgba(255, 255, 255, 0.16);
  --texto: #e6eaf3;
  --suave: #8b94ae;
  --apagado: #5c6683;
  --lima: #c8ff2e;
  --lima-escura: #9ccc12;
  --laranja: #ff5a1f;
  --azul: #3d7bff;
  --raio: 20px;
  --titulo: "Unbounded", system-ui, sans-serif;
  --corpo: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 var(--corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
::selection { background: var(--lima); color: var(--fundo); }

/* ── fundo vivo ── */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; opacity: 0.55; will-change: transform; animation: deriva 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 620px; height: 620px; background: radial-gradient(circle, rgba(200, 255, 46, 0.2), rgba(200, 255, 46, 0.06) 40%, transparent 70%); top: -220px; left: -120px; }
.aurora i:nth-child(2) { width: 760px; height: 760px; background: radial-gradient(circle, rgba(61, 123, 255, 0.22), rgba(61, 123, 255, 0.07) 40%, transparent 70%); top: -180px; right: -260px; animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { width: 540px; height: 540px; background: radial-gradient(circle, rgba(255, 90, 31, 0.1), rgba(255, 90, 31, 0.03) 40%, transparent 70%); top: 60vh; left: 35vw; animation-duration: 38s; animation-delay: -14s; }
@keyframes deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, 60px) scale(1.1); } 100% { transform: translate(-60px, 120px) scale(0.95); } }
.grade {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.5;
}

/* ── topo ── */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  padding: 14px clamp(18px, 4vw, 48px);
  background: rgba(11, 16, 32, 0.94);
  border-bottom: 1px solid var(--linha);
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); }
.logo-marca {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--texto); color: var(--fundo); font: 900 20px/1 var(--titulo);
}
.logo-marca em { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px var(--fundo), 0 0 18px var(--lima); }
.logo-nome { font: 800 17px/1 var(--titulo); letter-spacing: 0.02em; }
.logo-nome b { margin-left: 4px; padding: 3px 7px; border-radius: 99px; background: var(--lima); color: var(--fundo); font-size: 12px; vertical-align: 2px; }
.abas-topo { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--vidro); border: 1px solid var(--linha); }
.abas-topo a { padding: 7px 16px; border-radius: 99px; color: var(--suave); text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.2s; }
.abas-topo a:hover { color: var(--texto); }
.abas-topo a.ativo { background: var(--vidro-forte); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.status { margin-left: auto; display: flex; align-items: center; gap: 9px; font: 500 12.5px var(--mono); color: var(--suave); padding: 7px 14px; border-radius: 99px; border: 1px solid var(--linha); background: var(--vidro); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); }
.status.ok .ponto { background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.status.ocupado .ponto { background: var(--azul); box-shadow: 0 0 12px var(--azul); animation: pulso 1.2s infinite; }
.status.erro .ponto { background: var(--laranja); }
@keyframes pulso { 50% { opacity: 0.35; } }

main { max-width: 1320px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px) 120px; }

/* ── hero ── */
.hero { padding: clamp(48px, 9vh, 96px) 0 40px; max-width: 920px; margin: 0 auto; text-align: center; }
.sobrelinha { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 10px; border-radius: 99px; border: 1px solid var(--linha); background: var(--vidro); font: 700 11.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave); }
.tag-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); }
h1 { margin: 0 0 64px; font: 800 clamp(36px, 6vw, 68px)/1.04 var(--titulo); letter-spacing: -0.035em; text-wrap: balance; }
.marca-texto { position: relative; color: var(--fundo); padding: 0 0.2em; margin: 0 0.1em; white-space: nowrap; }
.marca-texto::before { content: ""; position: absolute; inset: 0.06em -0.02em 0.02em; z-index: -1; background: var(--lima); border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0 0 60px rgba(200, 255, 46, 0.35); }
.sub { max-width: 620px; margin: 22px auto 40px; color: var(--suave); font-size: 16.5px; text-wrap: balance; }

.compositor { position: relative; text-align: left; border-radius: 26px; background: linear-gradient(180deg, rgba(22, 29, 53, 0.92), rgba(16, 23, 44, 0.92)); padding: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--linha); transition: box-shadow 0.3s; }
.compositor-borda { position: absolute; inset: -1px; border-radius: 27px; padding: 1px; overflow: hidden; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.compositor-borda::before { content: ""; position: absolute; top: 50%; left: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; background: conic-gradient(transparent 0deg, rgba(200, 255, 46, 0.8) 60deg, transparent 120deg, transparent 200deg, rgba(61, 123, 255, 0.8) 260deg, transparent 320deg); animation: gira 5s linear infinite paused; }
.compositor:focus-within .compositor-borda { opacity: 1; }
.compositor:focus-within .compositor-borda::before { animation-play-state: running; }
.compositor:focus-within { box-shadow: 0 30px 90px -20px rgba(200, 255, 46, 0.18), 0 0 0 1px transparent; }
@keyframes gira { to { transform: rotate(360deg); } }
.compositor textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: 18px 20px 8px; font-size: 18px; line-height: 1.5; min-height: 96px; }
.compositor textarea::placeholder { color: var(--apagado); }
.sugestoes { display: flex; gap: 8px; padding: 6px 16px 12px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.sugestoes button { flex: none; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--linha); background: var(--vidro); color: var(--suave); font-size: 13px; transition: 0.2s; }
.sugestoes button:hover { color: var(--lima); border-color: rgba(200, 255, 46, 0.4); background: rgba(200, 255, 46, 0.06); }
.compositor-barra { display: flex; align-items: center; gap: 14px; padding: 10px 10px 4px 16px; border-top: 1px solid var(--linha); }
.seletor { display: flex; align-items: center; gap: 6px; color: var(--suave); padding: 6px 10px; border-radius: 12px; background: var(--vidro); border: 1px solid var(--linha); }
.seletor svg { width: 15px; height: 15px; color: var(--lima); }
.seletor select { border: 0; outline: 0; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
.seletor option { background: var(--fundo-2); }
.dica { margin-left: auto; color: var(--apagado); font-size: 12px; }
kbd { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--linha-forte); border-bottom-width: 2px; margin: 0 2px; color: var(--suave); }

.botao-principal { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 0; border-radius: 16px; background: var(--lima); color: var(--fundo); font: 800 14px var(--titulo); letter-spacing: 0.01em; box-shadow: 0 10px 30px -8px rgba(200, 255, 46, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.12); transition: transform 0.15s, box-shadow 0.2s, filter 0.2s; }
.botao-principal:hover { transform: translateY(-1px); box-shadow: 0 14px 40px -8px rgba(200, 255, 46, 0.7), inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.botao-principal:active { transform: translateY(1px); }
.botao-principal:disabled { filter: grayscale(0.8) brightness(0.7); cursor: wait; }
.botao-principal svg { stroke-width: 2.6; transition: transform 0.2s; }
.botao-principal:hover svg { transform: translateX(3px); }
.botao-principal.pequeno { padding: 9px 16px; font-size: 12.5px; border-radius: 12px; }
.botao-fantasma { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 13px; border: 1px solid var(--linha-forte); background: var(--vidro); font-weight: 600; font-size: 13.5px; text-decoration: none; transition: 0.2s; }
.botao-fantasma:hover { background: var(--vidro-forte); border-color: rgba(255, 255, 255, 0.28); }
.botao-fantasma.pequeno { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; color: var(--suave); }
.botao-fantasma.perigo:hover { color: var(--laranja); border-color: rgba(255, 90, 31, 0.5); }
.botao-fantasma svg { width: 16px; height: 16px; }

/* ── blocos ── */
.bloco { margin-top: 56px; scroll-margin-top: 90px; }
.bloco-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
h2 { margin: 0; font: 700 22px var(--titulo); letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.contador { font: 700 12px var(--mono); padding: 3px 9px; border-radius: 99px; background: var(--vidro-forte); color: var(--suave); }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.busca { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-radius: 12px; border: 1px solid var(--linha); background: var(--vidro); color: var(--apagado); }
.busca:focus-within { border-color: var(--linha-forte); color: var(--suave); }
.busca input { border: 0; outline: 0; background: transparent; width: 180px; font-size: 14px; }
.pilulas { display: flex; gap: 4px; padding: 4px; border-radius: 13px; border: 1px solid var(--linha); background: var(--vidro); }
.pilulas button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; color: var(--suave); font-size: 13px; font-weight: 600; transition: 0.2s; }
.pilulas button:hover { color: var(--texto); }
.pilulas button.ativo { background: var(--texto); color: var(--fundo); }

/* ── jobs ── */
.jobs { display: grid; gap: 16px; }
.job { position: relative; border-radius: var(--raio); border: 1px solid var(--linha); background: linear-gradient(180deg, rgba(22, 29, 53, 0.92), rgba(16, 23, 44, 0.88)); overflow: hidden; animation: entra 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.job.rodando { border-color: rgba(61, 123, 255, 0.35); box-shadow: 0 0 0 1px rgba(61, 123, 255, 0.1), 0 20px 60px -30px rgba(61, 123, 255, 0.5); }
.job.rodando::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, var(--azul), var(--lima), transparent); animation: varre 2.2s ease-in-out infinite; }
.job.pergunta { border-color: rgba(200, 255, 46, 0.45); }
.job.erro { border-color: rgba(255, 90, 31, 0.35); }
@keyframes varre { to { left: 100%; } }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(0.99); } }
.job-cabeca { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px 0; }
.job-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--vidro-forte); border: 1px solid var(--linha); flex: none; }
.job.rodando .job-icone { color: var(--azul); }
.job.concluido .job-icone { color: var(--lima); background: rgba(200, 255, 46, 0.08); border-color: rgba(200, 255, 46, 0.25); }
.job.erro .job-icone { color: var(--laranja); }
.job.pergunta .job-icone { color: var(--lima); }
.job-titulo { flex: 1; min-width: 0; }
.job-titulo strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.job-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; color: var(--apagado); font: 500 12px var(--mono); }
.job-meta .tipo { color: var(--suave); text-transform: uppercase; letter-spacing: 0.08em; }
.selo { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; font: 700 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--linha); background: var(--vidro); color: var(--suave); }
.selo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.rodando { color: #8fb3ff; border-color: rgba(61, 123, 255, 0.35); background: rgba(61, 123, 255, 0.1); }
.selo.rodando i { animation: pulso 1s infinite; }
.selo.concluido, .selo.revisado, .selo.pronto { color: var(--lima); border-color: rgba(200, 255, 46, 0.3); background: rgba(200, 255, 46, 0.08); }
.selo.erro, .selo.pendente { color: #ff8a5c; border-color: rgba(255, 90, 31, 0.35); background: rgba(255, 90, 31, 0.1); }
.selo.pergunta { color: var(--fundo); background: var(--lima); border-color: var(--lima); }
.selo.desatualizado { color: #ffd166; border-color: rgba(255, 209, 102, 0.3); background: rgba(255, 209, 102, 0.08); }

.etapas { display: flex; align-items: center; padding: 22px 22px 6px; overflow-x: auto; scrollbar-width: none; }
.etapa { display: flex; align-items: center; gap: 9px; flex: none; color: var(--apagado); font-size: 12.5px; font-weight: 600; }
.etapa .bola { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--fundo); }
.etapa .bola svg { width: 13px; height: 13px; stroke-width: 3; }
.etapa.feita { color: var(--texto); }
.etapa.feita .bola { background: var(--lima); border-color: var(--lima); color: var(--fundo); }
.etapa.agora { color: var(--texto); }
.etapa.agora .bola { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(61, 123, 255, 0.18), 0 0 18px rgba(61, 123, 255, 0.6); }
.etapa.agora .bola::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); animation: pulso 1s infinite; }
.trilho { flex: 1; min-width: 24px; height: 2px; margin: 0 10px; background: var(--linha-forte); border-radius: 2px; }
.trilho.feito { background: linear-gradient(90deg, var(--lima), var(--lima-escura)); }

.render { margin: 16px 22px 4px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--linha); }
.render-topo { display: flex; justify-content: space-between; font: 600 12.5px var(--mono); color: var(--suave); margin-bottom: 10px; }
.render-topo b { color: var(--texto); }
.barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--lima)); box-shadow: 0 0 20px rgba(200, 255, 46, 0.5); transition: width 0.4s ease; position: relative; overflow: hidden; }
.barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: brilho 1.4s infinite; transform: translateX(-100%); }
@keyframes brilho { to { transform: translateX(100%); } }

.feed { list-style: none; margin: 14px 22px 0; padding: 0; display: grid; gap: 2px; }
.feed li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; color: var(--suave); }
.feed li:first-child { animation: entra 0.3s ease-out; }
.feed li:first-child { color: var(--texto); background: var(--vidro); }
.feed li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--apagado); }
.feed li.pesquisa svg { color: var(--azul); }
.feed li.escrita svg, .feed li.ok svg { color: var(--lima); }
.feed li.voz svg { color: #c792ff; }
.feed li.quadro svg { color: #ffd166; }
.feed li.aviso svg, .feed li.erro svg { color: var(--laranja); }
.feed li.erro { color: #ffb08f; }
.feed li.texto { color: var(--texto); }
.feed li.texto span { border-left: 2px solid var(--lima); padding-left: 10px; white-space: pre-wrap; }
.feed li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.feed li time { font: 500 11px var(--mono); color: var(--apagado); margin-top: 3px; }
.feed li a { color: inherit; }
.feed .vezes { font: 700 10.5px var(--mono); margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: var(--vidro-forte); color: var(--suave); }
.mais { margin: 6px 22px 0; border: 0; background: none; color: var(--apagado); font: 600 12px var(--mono); padding: 4px 10px; }
.mais:hover { color: var(--texto); }

.quadros { display: flex; gap: 10px; margin: 14px 22px 0; overflow-x: auto; padding-bottom: 4px; }
.quadros img { height: 150px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1px solid var(--linha-forte); cursor: zoom-in; transition: transform 0.2s; }
.quadros img:hover { transform: translateY(-3px); }

.resumo { margin: 16px 22px 0; padding: 14px 16px; border-radius: 14px; background: rgba(200, 255, 46, 0.04); border: 1px solid rgba(200, 255, 46, 0.14); font-size: 14px; white-space: pre-wrap; color: var(--texto); }
.resumo b { display: block; font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lima); margin-bottom: 6px; }
.job-erro { margin: 16px 22px 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 90, 31, 0.08); border: 1px solid rgba(255, 90, 31, 0.25); color: #ffb08f; font-size: 13.5px; }

.pergunta-caixa { margin: 16px 22px 0; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(200, 255, 46, 0.1), rgba(200, 255, 46, 0.02)); border: 1px solid rgba(200, 255, 46, 0.3); }
.pergunta-caixa p { margin: 0 0 12px; font-size: 15px; font-weight: 600; white-space: pre-wrap; }
.pergunta-caixa p::before { content: "O Claude pergunta"; display: block; font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lima); margin-bottom: 6px; }
.resposta { display: flex; gap: 10px; }
.resposta textarea { flex: 1; resize: vertical; min-height: 46px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha-forte); background: rgba(0, 0, 0, 0.25); outline: 0; }
.resposta textarea:focus { border-color: rgba(200, 255, 46, 0.5); }
.resposta .botao-principal { padding: 0 18px; }

.job-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 16px 22px 18px; }

/* ── biblioteca ── */
.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; cursor: pointer; background: var(--fundo-3); border: 1px solid var(--linha); isolation: isolate; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s; animation: entra 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.card:hover { transform: translateY(-6px); border-color: rgba(200, 255, 46, 0.4); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9), 0 0 50px -20px rgba(200, 255, 46, 0.45); }
.card img, .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s, opacity 0.4s; }
.card video { opacity: 0; }
.card.tocando video { opacity: 1; }
.card:hover img { transform: scale(1.04); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 16, 32, 0.55) 0%, transparent 22%, transparent 45%, rgba(11, 16, 32, 0.96) 88%); transition: opacity 0.4s; }
.card.tocando::after { opacity: 0.25; }
.card-sem { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(61, 123, 255, 0.25), transparent 60%), radial-gradient(circle at 80% 80%, rgba(200, 255, 46, 0.15), transparent 55%), var(--fundo-2); color: var(--apagado); font: 600 12px var(--mono); text-align: center; padding: 30px; }
.card-topo { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 6px; }
.card-topo .selo, .card-topo .selo.revisado { background: rgba(11, 16, 32, 0.8); }
.duracao { font: 700 11px var(--mono); padding: 5px 9px; border-radius: 99px; background: rgba(11, 16, 32, 0.8); border: 1px solid var(--linha); }
.card-base { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; transition: opacity 0.35s, transform 0.35s; }
.card.tocando .card-base { opacity: 0; transform: translateY(14px); }
.card-serie { font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lima); }
.card-titulo { margin: 6px 0 0; font: 700 15.5px/1.25 var(--titulo); letter-spacing: -0.01em; text-wrap: balance; }
.card-data { margin-top: 8px; color: var(--suave); font: 500 11.5px var(--mono); }
.card-play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; display: grid; place-items: center; background: rgba(200, 255, 46, 0.95); color: var(--fundo); opacity: 0; transform: scale(0.7); transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 0 40px rgba(200, 255, 46, 0.6); }
.card-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.card:hover .card-play { opacity: 1; transform: scale(1); }
.card.tocando .card-play { opacity: 0; }
.card.produzindo { border-color: rgba(61, 123, 255, 0.5); }
.vazio { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--apagado); border: 1px dashed var(--linha-forte); border-radius: var(--raio); }

/* ── modal ── */
.modal { width: min(1160px, 96vw); height: min(880px, 94vh); max-height: 94vh; padding: 0; border: 1px solid var(--linha-forte); border-radius: 28px; background: linear-gradient(180deg, #121a33, #0d1328); color: var(--texto); box-shadow: 0 50px 120px -20px rgba(0, 0, 0, 0.8); overflow: hidden; }
.modal::backdrop { background: rgba(5, 8, 18, 0.86); }
.modal[open] { animation: abre 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes abre { from { opacity: 0; transform: translateY(20px) scale(0.98); } }
.modal-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
/* Com o modal aberto, a página de trás não rola, e a rolagem do modal não vaza para ela. */
html.modal-aberto, html.modal-aberto body { overflow: hidden; }
.modal, .det-conteudo, .palco, .modal-corpo { overscroll-behavior: contain; }
.fechar { position: absolute; top: 18px; right: 18px; z-index: 3; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--vidro-forte); color: var(--suave); transition: 0.2s; }
.fechar:hover { background: rgba(255, 255, 255, 0.12); color: var(--texto); transform: rotate(90deg); }
.fechar:focus:not(:focus-visible), .modal:focus { outline: none; }
.modal-menu { position: absolute; top: 18px; right: 66px; z-index: 4; }
.mais-opcoes { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--vidro-forte); color: var(--suave); transition: 0.2s; }
.mais-opcoes svg { fill: currentColor; stroke: none; }
.mais-opcoes:hover, .mais-opcoes.ativo { background: rgba(255, 255, 255, 0.12); color: var(--texto); }
.mais-opcoes.ativo { border-color: rgba(200, 255, 46, 0.4); color: var(--lima); }
.mais-opcoes:focus:not(:focus-visible) { outline: none; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; padding: 6px; border-radius: 16px; border: 1px solid var(--linha-forte); background: linear-gradient(180deg, #18213f, #111933); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8); animation: menu-abre 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: top right; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--texto); font-size: 14px; font-weight: 500; text-decoration: none; text-align: left; transition: background 0.15s, color 0.15s; }
.menu a:hover, .menu button:hover { background: var(--vidro-forte); }
.menu svg { width: 16px; height: 16px; color: var(--suave); }
.menu a:hover svg { color: var(--lima); }
.menu .perigo { color: #ff8a5c; }
.menu .perigo svg { color: #ff8a5c; }
.menu .perigo:hover { background: rgba(255, 90, 31, 0.12); color: #ff9e78; }
.menu > * + .perigo { margin-top: 4px; position: relative; }
.menu > * + .perigo::before { content: ""; position: absolute; top: -3px; left: 8px; right: 8px; height: 1px; background: var(--linha); }

/* palco: vídeo + capítulos */
.palco { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; overflow-y: auto; background: radial-gradient(circle at 50% 35%, rgba(61, 123, 255, 0.16), transparent 70%); border-right: 1px solid var(--linha); }
.celular { position: relative; height: min(72vh, 700px); aspect-ratio: 9 / 16; border-radius: 30px; padding: 8px; background: #05070f; box-shadow: 0 0 0 1px var(--linha-forte), 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 80px -30px rgba(200, 255, 46, 0.35); }
.celular video { width: 100%; height: 100%; border-radius: 23px; background: #000; object-fit: cover; display: block; }
.capitulos { width: calc(min(72vh, 700px) * 9 / 16 + 16px); }
.cap-atual { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cap-atual span { font: 700 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
.cap-atual b { flex: 1; min-width: 0; font: 700 13px var(--titulo); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lima); }
.cap-atual time { font: 500 11px var(--mono); color: var(--suave); }
.segmentos { display: flex; gap: 3px; height: 14px; align-items: center; }
.segmentos button { position: relative; height: 5px; min-width: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; transition: height 0.2s; }
.segmentos button:hover, .segmentos button.atual { height: 9px; }
.segmentos button i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--lima); border-radius: inherit; transition: width 0.25s linear; }
.segmentos button.atual i { box-shadow: 0 0 12px rgba(200, 255, 46, 0.7); }

/* detalhes */
.detalhes { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.det-cabeca { padding: 30px 34px 0; display: flex; flex-direction: column; }
.det-serie { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lima); }
.det-serie::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); }
.det-titulo { margin: 10px 104px 0 0; font: 800 clamp(22px, 2.3vw, 28px)/1.18 var(--titulo); letter-spacing: -0.02em; text-wrap: balance; }
.det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; color: var(--suave); font: 500 12.5px var(--corpo); }
.det-meta span { display: inline-flex; align-items: center; gap: 6px; }
.det-meta svg { width: 14px; height: 14px; color: var(--apagado); }
.det-avisos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aviso-mini { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.aviso-mini svg { width: 13px; height: 13px; }
.aviso-mini.amarelo { color: #ffd166; background: rgba(255, 209, 102, 0.1); }
.aviso-mini.laranja { color: #ff8a5c; background: rgba(255, 90, 31, 0.1); }
.det-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.det-acoes .botao-principal { padding: 11px 18px; font-size: 13px; text-decoration: none; }

.det-status { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px 14px 12px 12px; border-radius: 16px; border: 1px solid rgba(255, 90, 31, 0.28); background: linear-gradient(90deg, rgba(255, 90, 31, 0.1), rgba(255, 90, 31, 0.02)); }
.det-status.ok { border-color: rgba(200, 255, 46, 0.28); background: linear-gradient(90deg, rgba(200, 255, 46, 0.09), rgba(200, 255, 46, 0.02)); }
.det-status-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 90, 31, 0.14); color: var(--laranja); flex: none; }
.det-status.ok .det-status-icone { background: rgba(200, 255, 46, 0.12); color: var(--lima); }
.det-status > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.det-status b { font-size: 14px; font-weight: 600; }
.link { align-self: flex-start; border: 0; padding: 0; background: none; color: var(--suave); font-size: 12.5px; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.link:hover { color: var(--texto); }
.chave { flex: none; display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px var(--corpo); color: var(--suave); cursor: pointer; user-select: none; }
.chave input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--linha-forte); position: relative; cursor: pointer; transition: 0.25s; margin: 0; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.chave input:checked { background: var(--lima); box-shadow: 0 0 14px rgba(200, 255, 46, 0.4); }
.chave input:checked::after { left: 21px; background: var(--fundo); }

.abas { display: flex; gap: 6px; margin: 24px 34px 0; border-bottom: 1px solid var(--linha); }
.abas button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 11px 12px; color: var(--suave); font-weight: 600; font-size: 14px; position: relative; transition: color 0.2s; }
.abas button:hover { color: var(--texto); }
.abas button small { font: 700 10.5px var(--mono); padding: 1px 6px; border-radius: 99px; background: var(--vidro-forte); color: var(--suave); }
.abas button.ativo { color: var(--texto); }
.abas button.ativo small { background: var(--lima); color: var(--fundo); }
.abas button.ativo::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--lima); border-radius: 2px; box-shadow: 0 0 10px var(--lima); }
.det-conteudo { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 34px 34px; scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
.painel-aba { animation: entra 0.25s ease-out; }

/* aba Post: cara de post do Instagram */
.post { border-radius: 18px; border: 1px solid var(--linha); background: rgba(0, 0, 0, 0.2); overflow: hidden; }
.post-topo { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--linha); }
.post-topo > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.post-topo b { font-size: 14px; }
.post-topo small { color: var(--apagado); font-size: 12px; }
.post-avatar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--texto); color: var(--fundo); font: 900 15px/1 var(--titulo); box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px var(--lima); }
.post-avatar em { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 2px var(--fundo); }
.icone-botao { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linha); background: var(--vidro); color: var(--suave); transition: 0.2s; }
.icone-botao:hover { color: var(--lima); border-color: rgba(200, 255, 46, 0.4); }
.icone-botao svg { width: 15px; height: 15px; }
.post-texto { margin: 0; padding: 16px 18px 6px; white-space: pre-wrap; font-size: 14px; line-height: 1.65; }
.hashtags { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 18px 18px; }
.hashtags span { font: 600 13px var(--corpo); color: #8fb3ff; }

/* aba Roteiro: linha do tempo */
.cenas { list-style: none; margin: 0; padding: 0; position: relative; }
.cenas::before { content: ""; position: absolute; left: 61px; top: 14px; bottom: 14px; width: 1px; background: var(--linha-forte); }
.cenas li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 30px; padding: 12px 14px 12px 0; border-radius: 12px; cursor: pointer; transition: background 0.2s; }
.cenas li::before { content: ""; position: absolute; left: 57px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--fundo-2); border: 1.5px solid var(--linha-forte); transition: 0.2s; }
.cenas li:hover { background: var(--vidro); }
.cenas li.atual { background: rgba(200, 255, 46, 0.05); }
.cenas li.atual::before { background: var(--lima); border-color: var(--lima); box-shadow: 0 0 12px var(--lima); }
.cenas time { font: 600 12px var(--mono); color: var(--apagado); padding: 2px 0 0 4px; text-align: right; }
.cenas li.atual time { color: var(--lima); }
.cenas b { font: 700 10.5px var(--mono); letter-spacing: 0.12em; color: var(--suave); }
.cenas em { font-style: normal; font: 700 10.5px var(--mono); color: var(--fundo); background: var(--lima); padding: 1px 6px; border-radius: 5px; margin-left: 8px; }
.cenas p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }

/* aba Revisão */
.revisao-lista .nota { margin: 0 0 14px; }
.revisao-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.revisao-lista li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: var(--vidro); border: 1px solid var(--linha); font-size: 13.5px; line-height: 1.55; color: var(--suave); }
.revisao-lista li::before { content: ""; position: absolute; left: 15px; top: 16px; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid rgba(255, 90, 31, 0.6); }
.revisao-lista li b { color: var(--texto); font-weight: 600; }
.revisao-lista li { cursor: pointer; user-select: none; transition: 0.2s; }
.revisao-lista li:hover { border-color: var(--linha-forte); color: var(--texto); }
.revisao-lista li::after { content: ""; position: absolute; left: 19px; top: 18px; width: 4px; height: 7px; border: solid var(--fundo); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.revisao-lista li.conferido { color: var(--apagado); border-color: rgba(200, 255, 46, 0.2); background: rgba(200, 255, 46, 0.03); }
.revisao-lista li.conferido b { color: var(--suave); }
.revisao-lista li.conferido::before { background: var(--lima); border-color: var(--lima); box-shadow: 0 0 10px rgba(200, 255, 46, 0.5); }
.revisao-lista li.conferido::after { transform: rotate(45deg) scale(1); }

/* aba Ajustar */
.ajuste textarea { width: 100%; min-height: 120px; resize: vertical; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linha-forte); background: rgba(0, 0, 0, 0.25); outline: 0; font-size: 14.5px; }
.ajuste textarea:focus { border-color: rgba(200, 255, 46, 0.5); }
.ajuste .sugestoes { padding: 10px 0; mask-image: none; flex-wrap: wrap; }
.ajuste-barra { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.nota { font-size: 12.5px; color: var(--apagado); }

/* ── excluir e confirmação ── */
.card-apagar { position: absolute; right: 12px; top: 48px; z-index: 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--linha-forte); background: rgba(11, 16, 32, 0.85); color: var(--suave); opacity: 0; transform: translateY(-6px); transition: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card:hover .card-apagar, .card:focus-within .card-apagar { opacity: 1; transform: none; }
.card-apagar:hover { color: #fff; background: var(--laranja); border-color: var(--laranja); box-shadow: 0 0 24px rgba(255, 90, 31, 0.55); }
.card-apagar svg { width: 16px; height: 16px; }
.botao-perigo { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 14px; background: var(--laranja); color: #fff; font: 800 13.5px var(--titulo); box-shadow: 0 10px 30px -8px rgba(255, 90, 31, 0.6); transition: transform 0.15s, box-shadow 0.2s; }
.botao-perigo:hover { transform: translateY(-1px); box-shadow: 0 14px 40px -8px rgba(255, 90, 31, 0.75); }
.caixa { width: min(440px, 92vw); padding: 0; border: 1px solid var(--linha-forte); border-radius: 24px; background: linear-gradient(180deg, #141c36, #0e152b); color: var(--texto); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.85); }
.caixa::backdrop { background: rgba(5, 8, 18, 0.8); }
.caixa[open] { animation: abre 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.caixa-corpo { padding: 28px; display: flex; flex-direction: column; }
.caixa-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--vidro-forte); border: 1px solid var(--linha); color: var(--lima); }
.caixa-icone.perigo { color: var(--laranja); background: rgba(255, 90, 31, 0.1); border-color: rgba(255, 90, 31, 0.3); box-shadow: 0 0 30px -6px rgba(255, 90, 31, 0.5); }
.caixa h3 { margin: 18px 0 8px; font: 800 20px var(--titulo); letter-spacing: -0.02em; }
.caixa p { margin: 0; color: var(--suave); font-size: 14px; line-height: 1.6; }
.caixa p b { color: var(--texto); font-weight: 600; }
.caixa-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.toast-acao { margin-left: 6px; padding: 5px 12px; border-radius: 9px; border: 0; background: var(--lima); color: var(--fundo); font-weight: 700; font-size: 13px; }

/* ── toasts ── */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 14px; background: rgba(22, 29, 53, 0.95); border: 1px solid var(--linha-forte); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7); font-size: 14px; animation: entra 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); max-width: 380px; }
.toast svg { color: var(--lima); }
.toast.erro svg { color: var(--laranja); }
.toast.sai { opacity: 0; transform: translateY(8px); transition: 0.3s; }

.zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5, 8, 18, 0.92); cursor: zoom-out; animation: entra 0.2s; }
.zoom img { max-height: 90vh; max-width: 90vw; border-radius: 18px; border: 1px solid var(--linha-forte); }

@media (max-width: 900px) {
  .modal { height: 94vh; }
  .modal-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; height: auto; max-height: 94vh; }
  .palco { overflow: visible; }
  .palco { border-right: 0; border-bottom: 1px solid var(--linha); align-items: center; }
  .celular { height: 62vh; }
  .capitulos { width: calc(62vh * 9 / 16 + 16px); }
  .det-conteudo { overflow: visible; }
  .abas-topo, .dica { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── tela de login ── */
.pagina-login { display: grid; min-height: 100vh; place-items: center; }
.login { width: min(440px, 92vw); padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.login-logo .logo-marca { width: 46px; height: 46px; font-size: 24px; border-radius: 13px; }
.login-logo .logo-nome { font-size: 21px; }
.login-cartao { position: relative; width: 100%; padding: 34px 32px 28px; border-radius: 28px; background: linear-gradient(180deg, rgba(22, 29, 53, 0.94), rgba(16, 23, 44, 0.94)); box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--linha); display: flex; flex-direction: column; gap: 16px; animation: entra 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.login-cartao .compositor-borda { border-radius: 29px; }
.login-cartao:focus-within .compositor-borda { opacity: 1; }
.login-cartao:focus-within .compositor-borda::before { animation-play-state: running; }
.login-cartao.saindo { transition: 0.35s; opacity: 0; transform: translateY(-8px) scale(0.98); }
.login-cartao.tremer { animation: tremer 0.4s; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.login-titulo { margin: 0; font: 800 26px/1.15 var(--titulo); letter-spacing: -0.02em; word-spacing: 0.06em; }
.login-sub { margin: -6px 0 6px; color: var(--suave); font-size: 14.5px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span:not(.campo-icone) { font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
.campo input { width: 100%; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--linha-forte); background: rgba(0, 0, 0, 0.25); outline: 0; font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s; }
.campo input:focus { border-color: rgba(200, 255, 46, 0.6); box-shadow: 0 0 0 4px rgba(200, 255, 46, 0.08); }
.campo input::placeholder { color: var(--apagado); }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 50px; }
.ver-senha { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--apagado); display: grid; place-items: center; }
.ver-senha:hover, .ver-senha.ativo { color: var(--lima); background: var(--vidro); }
.login-erro { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 90, 31, 0.1); border: 1px solid rgba(255, 90, 31, 0.3); color: #ffa27e; font-size: 13.5px; }
.login-botao { justify-content: center; height: 52px; margin-top: 4px; font-size: 15px; }
.login-nota { margin: 2px 0 0; text-align: center; color: var(--apagado); font-size: 12.5px; }
.carregando { position: relative; color: transparent !important; }
.carregando::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(11, 16, 32, 0.25); border-top-color: var(--fundo); animation: girar 0.7s linear infinite; }
.carregando svg { opacity: 0; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── conta no topo ── */
.conta { position: relative; margin-left: auto; }
.conta-botao { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 99px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); transition: 0.2s; }
.conta-botao:hover, .conta-botao.ativo { background: var(--vidro-forte); border-color: var(--linha-forte); }
.conta-botao > svg { width: 15px; height: 15px; color: var(--apagado); transition: transform 0.2s; }
.conta-botao.ativo > svg { transform: rotate(180deg); }
.conta-nome { font-weight: 600; font-size: 14px; }
.avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--lima), #8fd400); color: var(--fundo); font: 800 14px var(--titulo); }
.avatar i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--fundo); }
.avatar i.ok { background: var(--lima); box-shadow: 0 0 0 2.5px var(--fundo), 0 0 10px var(--lima); }
.avatar i.pendente { background: var(--laranja); box-shadow: 0 0 0 2.5px var(--fundo), 0 0 10px var(--laranja); animation: pulso 1.6s infinite; }
.conta-menu { min-width: 270px; z-index: 30; }
.conta-info { display: flex; flex-direction: column; padding: 10px 12px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.conta-info b { font-size: 14.5px; }
.conta-info small { color: var(--apagado); font-size: 12.5px; }
.conta-claude { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 4px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.conta-claude i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: none; }
.conta-claude span { display: flex; flex-direction: column; }
.conta-claude small { color: var(--apagado); font-weight: 500; font-size: 12px; }
.conta-claude.ok { background: rgba(200, 255, 46, 0.06); }
.conta-claude.ok i { background: var(--lima); box-shadow: 0 0 10px var(--lima); }
.conta-claude.pendente { background: rgba(255, 90, 31, 0.08); color: #ffa27e; }
.conta-claude.pendente i { background: var(--laranja); box-shadow: 0 0 10px var(--laranja); }

/* ── botão "Conectar Claude" (laranja) ── */
.botao-principal.conectar { background: var(--laranja); color: #fff; box-shadow: 0 10px 30px -8px rgba(255, 90, 31, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
.botao-principal.conectar:hover { box-shadow: 0 14px 40px -8px rgba(255, 90, 31, 0.75), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
.botao-principal.conectar:hover svg { transform: none; }

/* ── janela de conexão ── */
.caixa:has(.conexao) { width: min(560px, 94vw); }
.opcoes-conexao { display: grid; gap: 8px; margin-top: 18px; }
.opcao { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linha); background: var(--vidro); cursor: pointer; transition: 0.2s; }
.opcao:hover { border-color: var(--linha-forte); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao.ativa { border-color: rgba(200, 255, 46, 0.5); background: rgba(200, 255, 46, 0.05); box-shadow: 0 0 0 3px rgba(200, 255, 46, 0.06); }
.opcao-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--vidro-forte); color: var(--suave); flex: none; transition: 0.2s; }
.opcao.ativa .opcao-icone { background: var(--lima); color: var(--fundo); box-shadow: 0 0 20px -4px var(--lima); }
.opcao-texto { display: flex; flex-direction: column; gap: 2px; }
.opcao-texto b { font-size: 14.5px; }
.opcao-texto small { color: var(--suave); font-size: 12.5px; line-height: 1.45; }
.passos { margin-top: 16px; }
.passos ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; color: var(--suave); font-size: 13.5px; line-height: 1.55; }
.passos li::marker { color: var(--lima); font-weight: 700; }
.passos p { margin: 0 0 12px; }
.passos a { color: var(--lima); }
.passos code, .login-nota code { font: 600 12px var(--mono); padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); color: var(--texto); }
.copiar-cmd { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; vertical-align: middle; border: 1px solid var(--linha); border-radius: 7px; background: var(--vidro); color: var(--suave); }
.copiar-cmd:hover { color: var(--lima); }
.copiar-cmd svg { width: 12px; height: 12px; }
.campo-chave { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linha-forte); background: rgba(0, 0, 0, 0.3); outline: 0; font: 500 13.5px var(--mono); }
.campo-chave:focus { border-color: rgba(200, 255, 46, 0.6); box-shadow: 0 0 0 4px rgba(200, 255, 46, 0.08); }
.nota-segura { display: flex; gap: 8px; align-items: center; margin: 14px 0 0 !important; font-size: 12.5px !important; color: var(--apagado) !important; }
.nota-segura svg { width: 15px; height: 15px; color: var(--lima); }
.conexao .login-erro { margin-top: 12px; }

/* ── assistente "Conectar o Claude" ── */
.caixa:has(.cx) { width: min(600px, 94vw); overflow: hidden; }
.cx { position: relative; display: flex; flex-direction: column; max-height: min(780px, 92vh); }
.cx.tremer { animation: tremer 0.4s; }
.cx-fechar { position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--vidro); color: var(--apagado); transition: 0.2s; }
.cx-fechar:hover { color: var(--texto); transform: rotate(90deg); }
.cx-fechar svg { width: 16px; height: 16px; }
.cx-topo { padding: 30px 32px 0; text-align: center; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(200, 255, 46, 0.1), transparent 70%); }
.cx-topo h3 { margin: 18px 0 6px; font: 800 22px var(--titulo); letter-spacing: -0.02em; word-spacing: 0.06em; }
.cx-topo p { margin: 0 auto; max-width: 440px; color: var(--suave); font-size: 14px; line-height: 1.55; min-height: 2.6em; }

/* ligação TRIBUTEI ↔ Claude */
.cx-ligacao { display: flex; align-items: center; justify-content: center; gap: 0; }
.cx-no { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font: 900 22px var(--titulo); flex: none; transition: 0.4s; }
.cx-no-painel { background: var(--texto); color: var(--fundo); }
.cx-no-painel em { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px #131b35, 0 0 14px var(--lima); }
.cx-no-claude { background: linear-gradient(135deg, #2a3358, #1b2343); border: 1px solid var(--linha-forte); color: var(--apagado); }
.cx-no-claude svg { width: 24px; height: 24px; }
.cx-linha { position: relative; width: 120px; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--linha-forte) 0 6px, transparent 6px 12px); overflow: visible; }
.cx-linha i { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); opacity: 0; }
.cx[data-passo="conferindo"] .cx-linha i { animation: viajar 1.4s ease-in-out infinite; }
.cx[data-passo="conferindo"] .cx-linha i:nth-child(2) { animation-delay: 0.45s; }
.cx[data-passo="conferindo"] .cx-linha i:nth-child(3) { animation-delay: 0.9s; }
@keyframes viajar { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
.cx[data-passo="conferindo"] .cx-no-claude { color: var(--azul); border-color: rgba(61, 123, 255, 0.5); box-shadow: 0 0 24px -4px rgba(61, 123, 255, 0.7); animation: pulso 1.4s infinite; }
.cx.conectado .cx-linha { background: linear-gradient(90deg, var(--lima), var(--lima-escura)); box-shadow: 0 0 12px rgba(200, 255, 46, 0.6); }
.cx.conectado .cx-no-claude { background: var(--lima); color: var(--fundo); border-color: var(--lima); box-shadow: 0 0 30px -4px var(--lima); }

/* progresso */
.cx-progresso { display: flex; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.cx-progresso i { width: 26px; height: 4px; border-radius: 99px; background: var(--linha-forte); transition: 0.35s; }
.cx-progresso i.feito { width: 40px; background: var(--lima); box-shadow: 0 0 10px rgba(200, 255, 46, 0.5); }

/* etapas */
.cx-palco { position: relative; padding: 18px 32px 4px; overflow-y: auto; }
.cx-passo { display: none; }
.cx-passo.ativo { display: block; animation: deslizar 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes deslizar { from { opacity: 0; transform: translateX(18px); } }

/* cartões de escolha */
.cx-formas { display: grid; gap: 10px; }
.cx-forma, .cx-console { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s, background 0.25s, box-shadow 0.25s; }
.cx-forma { animation: entra 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.cx-forma::before, .cx-console::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 20%) 50%, rgba(200, 255, 46, 0.12), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.cx-forma:hover, .cx-forma:focus-visible, .cx-console:hover { transform: translateY(-2px); border-color: rgba(200, 255, 46, 0.45); box-shadow: 0 16px 40px -20px rgba(200, 255, 46, 0.5); outline: none; }
.cx-forma:hover::before, .cx-forma:focus-visible::before, .cx-console:hover::before { opacity: 1; }
.cx-forma-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--vidro-forte); color: var(--suave); flex: none; transition: 0.3s; }
.cx-forma:hover .cx-forma-icone, .cx-forma:focus-visible .cx-forma-icone, .cx-console:hover .cx-forma-icone { background: var(--lima); color: var(--fundo); box-shadow: 0 0 24px -4px var(--lima); transform: rotate(-6deg) scale(1.05); }
.cx-forma-icone svg { width: 20px; height: 20px; }
.cx-forma-texto { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-forma-texto b { font-size: 15px; }
.cx-forma-texto small { color: var(--suave); font-size: 12.5px; line-height: 1.45; }
.cx-etiqueta { position: absolute; top: 12px; right: 44px; font: 700 9.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); }
.cx-seta { color: var(--apagado); transition: 0.25s; }
.cx-forma:hover .cx-seta, .cx-forma:focus-visible .cx-seta, .cx-console:hover .cx-seta { color: var(--lima); transform: translateX(4px); }

/* terminal ilustrado */
.terminal { border-radius: 16px; border: 1px solid var(--linha-forte); background: #070a15; overflow: hidden; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.9); }
.terminal-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--linha); background: rgba(255, 255, 255, 0.03); }
.terminal-barra i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.terminal-barra i:nth-child(2) { background: #febc2e; }
.terminal-barra i:nth-child(3) { background: #28c840; }
.terminal-barra span { margin-left: 8px; font: 500 11px var(--mono); color: var(--apagado); }
.terminal-corpo { display: flex; align-items: center; gap: 10px; padding: 16px; font: 600 15px var(--mono); }
.terminal-prompt { color: var(--lima); }
.terminal-cmd { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; color: var(--texto); }
.cx-passo.ativo .terminal-cmd { animation: digitar 1.1s steps(18) 0.3s forwards; }
@keyframes digitar { to { width: 18ch; } }
.terminal-cursor { width: 9px; height: 18px; margin-left: -6px; background: var(--lima); animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.terminal-copiar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--vidro); color: var(--suave); font: 600 12.5px var(--corpo); transition: 0.2s; }
.terminal-copiar svg { width: 14px; height: 14px; }
.terminal-copiar:hover { color: var(--lima); border-color: rgba(200, 255, 46, 0.4); }
.terminal-copiar.copiado { color: var(--fundo); background: var(--lima); border-color: var(--lima); }

/* roteiro de passos */
.cx-roteiro { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.cx-roteiro li { display: flex; gap: 12px; align-items: flex-start; animation: entra 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.cx-roteiro li:nth-child(2) { animation-delay: 0.08s; }
.cx-roteiro li:nth-child(3) { animation-delay: 0.16s; }
.cx-roteiro li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(200, 255, 46, 0.5); color: var(--lima); font: 800 12px var(--titulo); flex: none; }
.cx-roteiro b { display: block; font-size: 14px; }
.cx-roteiro small { color: var(--suave); font-size: 12.5px; line-height: 1.5; }
.cx-roteiro code { font: 600 11.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.35); color: var(--texto); }

/* campo do token/chave com validação ao vivo */
.cx-campo { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.cx-console + .cx-campo { margin-top: 16px; }
.cx-campo-rotulo { font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
.cx-campo-caixa { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 6px 0 14px; border-radius: 14px; border: 1px solid var(--linha-forte); background: rgba(0, 0, 0, 0.3); transition: border-color 0.2s, box-shadow 0.2s; }
.cx-campo-caixa:focus-within { border-color: rgba(200, 255, 46, 0.55); box-shadow: 0 0 0 4px rgba(200, 255, 46, 0.08); }
.cx-campo-caixa input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 13.5px var(--mono); }
.cx-campo-caixa input::placeholder { color: var(--apagado); }
.cx-campo-status { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linha-forte); color: transparent; flex: none; transition: 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
.cx-campo-status svg { width: 12px; height: 12px; stroke-width: 3.4; }
.cx-campo.valido .cx-campo-status { background: var(--lima); border-color: var(--lima); color: var(--fundo); transform: scale(1.1); box-shadow: 0 0 14px var(--lima); }
.cx-campo.valido .cx-campo-caixa { border-color: rgba(200, 255, 46, 0.6); }
.cx-campo.invalido .cx-campo-caixa { border-color: rgba(255, 90, 31, 0.55); }
.cx-campo.invalido .cx-campo-status { border-color: var(--laranja); }
.cx-mini { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--apagado); font: 600 12.5px var(--corpo); transition: 0.2s; }
.cx-mini svg { width: 15px; height: 15px; }
.cx-mini:hover, .cx-mini.ativo { color: var(--lima); background: var(--vidro); }
.cx-colar { background: var(--vidro-forte); color: var(--texto); }
.cx-dica { min-height: 1.3em; font-size: 12.5px; color: var(--apagado); }
.cx-campo.valido .cx-dica { color: var(--lima); }
.cx-campo.invalido .cx-dica { color: #ff9a75; }

/* este computador */
.cx-maquina { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; border: 1px dashed rgba(200, 255, 46, 0.35); background: rgba(200, 255, 46, 0.04); }
.cx-maquina-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lima); color: var(--fundo); flex: none; box-shadow: 0 0 30px -6px var(--lima); }
.cx-maquina-icone svg { width: 24px; height: 24px; }
.cx-maquina p { margin: 0; color: var(--suave); font-size: 14px; line-height: 1.55; }

/* conferindo */
.cx-conferindo, .cx-pronto { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 10px; text-align: center; }
.cx-radar { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 10px; color: var(--azul); }
.cx-radar svg { width: 30px; height: 30px; animation: girar 3s linear infinite; }
.cx-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(61, 123, 255, 0.6); animation: onda 1.8s ease-out infinite; }
.cx-radar i:nth-child(2) { animation-delay: 0.6s; }
.cx-radar i:nth-child(3) { animation-delay: 1.2s; }
@keyframes onda { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.cx-conferindo b, .cx-pronto b { font: 800 17px var(--titulo); letter-spacing: -0.01em; }
.cx-conferindo small, .cx-pronto small { color: var(--suave); font-size: 13px; }
#cx-msg.trocando { animation: entra 0.35s ease-out; }

/* pronto */
.cx-check { position: relative; width: 86px; height: 86px; margin-bottom: 8px; border-radius: 50%; box-shadow: 0 0 40px -6px rgba(200, 255, 46, 0.6); }
.cx-check svg { width: 100%; height: 100%; }
.cx-check circle { fill: rgba(200, 255, 46, 0.12); stroke: var(--lima); stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: tracar 0.6s ease-out forwards; }
.cx-check path { stroke: var(--lima); stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tracar 0.4s 0.5s ease-out forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
.cx-check i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--lima); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: estourar 0.8s calc(0.55s + var(--d)) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cx-check i:nth-child(3n) { background: var(--azul); }
.cx-check i:nth-child(4n) { background: var(--laranja); }
@keyframes estourar { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-62px) scale(0.4); } }

/* erro e rodapé */
.cx-erro { margin: 12px 32px 0; padding: 11px 14px; border-radius: 12px; background: rgba(255, 90, 31, 0.1); border: 1px solid rgba(255, 90, 31, 0.3); color: #ffa27e; font-size: 13.5px; }
.cx-rodape { display: flex; align-items: center; gap: 16px; padding: 18px 32px 24px; margin-top: 12px; border-top: 1px solid var(--linha); }
.cx-seguro { flex: 1; display: flex; gap: 8px; align-items: center; margin: 0; color: var(--apagado); font-size: 12px; }
.cx-seguro svg { width: 15px; height: 15px; color: var(--lima); }
.cx-botoes { display: flex; gap: 10px; }
.cx-botoes .botao-principal:disabled { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; box-shadow: none; transform: none; }
.cx [data-cx="voltar"], .cx [data-cx="conectar"], .cx [data-cx="criar"] { display: none; }
.cx[data-passo="token"] [data-cx="voltar"], .cx[data-passo="api"] [data-cx="voltar"], .cx[data-passo="maquina"] [data-cx="voltar"] { display: inline-flex; }
.cx[data-passo="token"] [data-cx="conectar"], .cx[data-passo="api"] [data-cx="conectar"], .cx[data-passo="maquina"] [data-cx="conectar"] { display: inline-flex; }
.cx[data-passo="pronto"] [data-cx="criar"] { display: inline-flex; }
.cx[data-passo="escolha"] .cx-rodape, .cx[data-passo="conferindo"] .cx-rodape { justify-content: center; }
.cx[data-passo="pronto"] .cx-seguro, .cx[data-passo="conferindo"] .cx-seguro { display: none; }
.cx[data-passo="pronto"] .cx-rodape { justify-content: center; }

/* ══════════ tela de login, versão animada ══════════ */
.pagina-login { display: block; overflow-x: hidden; }
.lg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr); min-height: 100vh; transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lg-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 40px; }
.lg-lado .login-cartao { width: min(430px, 100%); }
.lg-lado .login-logo { animation: entra 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* faíscas subindo no fundo */
.lg-faiscas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lg-faiscas i { position: absolute; bottom: -12px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); opacity: 0; animation: subir linear infinite; }
.lg-faiscas i:nth-child(3n) { background: var(--azul); box-shadow: 0 0 10px var(--azul); }
.lg-faiscas i:nth-child(5n) { background: var(--laranja); box-shadow: 0 0 10px var(--laranja); }
@keyframes subir { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.5; } 100% { transform: translateY(-105vh) translateX(40px); opacity: 0; } }

@keyframes surgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* título letra a letra */
.lg-titulo { position: relative; margin: 0; font: 800 32px/1.25 var(--titulo); letter-spacing: -0.02em; word-spacing: 0.1em; white-space: nowrap; }
.lg-palavra { display: inline-block; white-space: nowrap; position: relative; }
.lg-letra { display: inline-block; opacity: 0; transform: translateY(0.7em) rotate(10deg); filter: blur(6px); animation: letra 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.2) forwards; animation-delay: calc(0.25s + var(--n) * 35ms); }
@keyframes letra { to { opacity: 1; transform: none; filter: none; } }
.lg-destaque { color: var(--lima); text-shadow: 0 0 30px rgba(200, 255, 46, 0.35); }
.lg-titulo .lg-destaque:last-child::after { content: ""; position: absolute; left: -0.6em; right: 0; bottom: -0.12em; height: 0.12em; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--lima) 30%, var(--lima)); transform: scaleX(0); transform-origin: left; animation: traco 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(0.25s + var(--fim, 800ms)); box-shadow: 0 0 14px rgba(200, 255, 46, 0.7); }
@keyframes traco { to { transform: scaleX(1); } }
.lg-titulo::after { content: ""; position: absolute; inset: -10% -5%; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; mix-blend-mode: overlay; pointer-events: none; animation: reflexo 5.5s ease-in-out 2.2s infinite; }
@keyframes reflexo { 0%, 70% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

.lg-sub { margin: -4px 0 8px; color: var(--suave); font-size: 15px; opacity: 0; animation: surgir 0.6s 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.lg-giro { display: inline-block; color: var(--lima); font-weight: 600; transition: opacity 0.3s, transform 0.3s, filter 0.3s; }
.lg-giro.saindo { opacity: 0; transform: translateY(-8px); filter: blur(4px); }

.lg-entra { opacity: 0; animation: surgir 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(0.85s + var(--i) * 90ms); }

/* campos com ícone */
.campo-icone { position: relative; display: block; }
.campo-icone > svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--apagado); pointer-events: none; transition: color 0.2s, transform 0.2s; }
.campo-icone:focus-within > svg { color: var(--lima); transform: scale(1.1); }
.campo-icone input { padding-left: 46px; }
.lg-caps { color: #ffa27e; font-size: 12px; }

/* botão com reflexo e estado de sucesso */
.login-botao { position: relative; overflow: hidden; }
.login-botao::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: reflexo-botao 3.8s ease-in-out 2s infinite; }
@keyframes reflexo-botao { 0%, 75% { left: -60%; } 100% { left: 130%; } }
.login-botao.ok { transform: scale(1.02); box-shadow: 0 0 50px rgba(200, 255, 46, 0.8); }

/* cortina de entrada: uma onda verde que deixa a tela marinho */
.lg-cortina { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.lg-cortina::before, .lg-cortina::after { content: ""; position: absolute; inset: 0; clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%)); }
.lg-cortina::before { background: var(--lima); }
.lg-cortina::after { background: var(--fundo); }
.entrando .lg-cortina::before { animation: cortina 0.6s cubic-bezier(0.6, 0, 0.3, 1) forwards; }
.entrando .lg-cortina::after { animation: cortina 0.6s 0.09s cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes cortina { to { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); } }
.entrando .lg { opacity: 0.4; transform: scale(0.985); }

/* ── vitrine ── */
.lg-vitrine { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 44px; padding: 48px 32px; border-right: 1px solid var(--linha); background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(61, 123, 255, 0.12), transparent 70%); overflow: hidden; }
.lg-palco { position: relative; width: 520px; height: 440px; perspective: 1400px; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.lg-cel { position: absolute; width: 196px; aspect-ratio: 9 / 16; padding: 6px; border-radius: 28px; background: #05070f; box-shadow: 0 0 0 1px var(--linha-forte), 0 40px 80px -30px rgba(0, 0, 0, 0.95); translate: var(--px, 0) var(--py, 0); animation: flutuar 7s ease-in-out infinite, aparecer 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.lg-cel-1 { left: 10px; top: 54px; rotate: -9deg; animation-delay: -1s, 0.2s; }
.lg-cel-2 { left: 162px; top: 0; z-index: 2; width: 214px; box-shadow: 0 0 0 1px rgba(200, 255, 46, 0.35), 0 50px 90px -30px rgba(0, 0, 0, 0.95), 0 0 70px -24px rgba(200, 255, 46, 0.55); animation-delay: -3s, 0.35s; }
.lg-cel-3 { left: 320px; top: 64px; rotate: 8deg; animation-delay: -5s, 0.5s; }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(60px) scale(0.92); } }
.lg-tela { position: relative; height: 100%; border-radius: 22px; overflow: hidden; padding: 16px 12px; background: radial-gradient(circle at 50% 30%, #1a2342, #0b1020 70%); display: flex; flex-direction: column; gap: 8px; }
.lg-serie { font: 700 6.5px var(--mono); letter-spacing: 0.14em; color: var(--apagado); }
.lg-cap { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--linha-forte); font: 800 7px var(--titulo); letter-spacing: 0.06em; }
.lg-cap::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 6px var(--lima); }
.lg-cartao { margin-top: 6px; padding: 8px 6px 6px; border-radius: 8px; border: 1.5px solid var(--lima); background: rgba(11, 16, 32, 0.85); color: var(--lima); text-align: center; font: 900 27px/1 var(--titulo); letter-spacing: -0.03em; box-shadow: 0 0 24px -6px rgba(200, 255, 46, 0.6); animation: pulsar-cartao 3.2s ease-in-out infinite; }
.lg-cartao.c2 { font-size: 34px; }
.lg-cartao small { display: block; margin-top: 4px; font: 700 5.5px var(--mono); letter-spacing: 0.1em; color: var(--texto); }
@keyframes pulsar-cartao { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* maquete 3D em CSS */
.lg-cena { position: relative; flex: 1; margin: 4px -4px 0; }
.lg-cena i { position: absolute; display: block; }
.lg-predio { width: 40px; height: 34px; bottom: 34%; background: linear-gradient(90deg, #e6eaf3 0 62%, #b9c0d3 62%); border-radius: 2px; box-shadow: inset 0 6px 0 -2px #fff, 0 10px 14px -6px rgba(0, 0, 0, 0.7); }
.lg-predio::before { content: ""; position: absolute; left: -3px; right: -3px; top: -8px; height: 8px; background: #dfe4ef; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lg-predio.p1 { left: 12%; }
.lg-predio.p2 { right: 10%; bottom: 46%; transform: scale(0.8); }
.lg-predio.p3 { right: 12%; bottom: 40%; }
.lg-loja { left: 30%; bottom: 12%; width: 62px; height: 30px; background: linear-gradient(90deg, #e6eaf3 0 70%, #b9c0d3 70%); border-radius: 2px; box-shadow: 0 12px 16px -6px rgba(0, 0, 0, 0.7); }
.lg-loja::before { content: ""; position: absolute; left: -4px; right: -4px; top: -10px; height: 10px; background: repeating-linear-gradient(90deg, var(--lima) 0 8px, #fff 8px 16px); border-radius: 2px 2px 0 0; }
.lg-loja.l2 { left: 14%; }
.lg-moeda { width: 10px; height: 10px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 8px var(--lima); animation: moeda 2.4s ease-in infinite; }
.lg-moeda.m1 { left: 46%; top: 0; }
.lg-moeda.m2 { left: 62%; top: 0; animation-delay: 1.2s; }
@keyframes moeda { 0% { transform: translateY(-10px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.lg-torre { left: 50%; bottom: 14%; width: 34px; background: linear-gradient(90deg, var(--laranja) 0 64%, #c9430f 64%); border-radius: 2px; box-shadow: 0 0 20px -4px rgba(255, 90, 31, 0.7); animation: torre 3.2s ease-in-out infinite; }
@keyframes torre { 0%, 100% { height: 70px; } 50% { height: 28px; } }
.lg-pilar { bottom: 14%; width: 22px; background: linear-gradient(90deg, #e6eaf3 0 60%, #b9c0d3 60%); border-radius: 2px; animation: afunda 4s ease-in-out infinite; }
.lg-pilar.a { left: 8%; height: 56px; }
.lg-pilar.b { left: 28%; height: 46px; animation-delay: 0.4s; }
.lg-pilar.verde { background: linear-gradient(90deg, var(--lima) 0 60%, var(--lima-escura) 60%); box-shadow: 0 0 18px -4px rgba(200, 255, 46, 0.7); animation-name: cresce; }
.lg-pilar.c { left: 54%; height: 70px; }
.lg-pilar.d { left: 76%; height: 62px; animation-delay: 0.5s; }
@keyframes afunda { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
@keyframes cresce { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }
.lg-pilar { transform-origin: bottom; }

/* legenda acendendo palavra a palavra */
.lg-legenda { margin: 0; text-align: center; font: 800 12px var(--corpo); }
.lg-legenda span { color: rgba(255, 255, 255, 0.35); animation: palavra 3.6s infinite; }
.lg-legenda span:nth-child(2) { animation-delay: 0.45s; }
.lg-legenda span:nth-child(3) { animation-delay: 0.9s; }
.lg-legenda span:nth-child(4) { animation-delay: 1.35s; }
.lg-legenda .lg-forte { animation-name: palavra-forte; }
@keyframes palavra { 0%, 8% { color: rgba(255, 255, 255, 0.35); } 12%, 80% { color: #fff; } 100% { color: rgba(255, 255, 255, 0.35); } }
@keyframes palavra-forte { 0%, 8% { color: rgba(255, 255, 255, 0.35); } 12%, 80% { color: var(--lima); text-shadow: 0 0 10px rgba(200, 255, 46, 0.6); } 100% { color: rgba(255, 255, 255, 0.35); } }

/* texto da vitrine */
.lg-texto-vitrine { text-align: center; max-width: 460px; }
.lg-texto-vitrine h2 { display: block; margin: 0; font: 800 26px/1.22 var(--titulo); letter-spacing: -0.02em; word-spacing: 0.08em; opacity: 0; animation: surgir 0.7s 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.lg-texto-vitrine em { font-style: normal; color: var(--fundo); background: var(--lima); padding: 0 0.2em; border-radius: 0.2em; }

@media (max-width: 1080px) {
  .lg { grid-template-columns: minmax(0, 1fr); }
  .lg-vitrine { display: none; }
}
.lg-junto { white-space: nowrap; }

/* ── cadastro na tela de login ── */
.lg-trocar { margin: 2px 0 0; text-align: center; color: var(--suave); font-size: 14px; }
.lg-trocar button { margin-left: 4px; padding: 2px 0; border: 0; background: none; color: var(--lima); font-weight: 700; background-image: linear-gradient(var(--lima), var(--lima)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s; }
.lg-trocar button:hover, .lg-trocar button:focus-visible { background-size: 100% 1.5px; outline: none; }
.lg-sub b { color: var(--texto); font-weight: 600; }
.login-cartao.trocando .campo, .login-cartao.trocando .lg-sub { animation: troca 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.login-cartao.trocando .campo:nth-of-type(2) { animation-delay: 0.05s; }
.login-cartao.trocando .campo:nth-of-type(3) { animation-delay: 0.1s; }
@keyframes troca { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* o título não quebra linha: sem isso ele alargava a coluna além da tela no celular */
.lg { width: 100%; min-width: 0; }
.lg-lado, .login-cartao { min-width: 0; }
.lg-lado { width: 100%; max-width: none; margin: 0; }
.lg-titulo { max-width: 100%; }

/* ── responsividade ── */

/* telas de toque: campos com 16px para o iPhone não dar zoom ao focar */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
  .card:hover { transform: none; }
  .card-play { display: none; }
}

/* monitores grandes */
@media (min-width: 1760px) {
  main { max-width: 1560px; }
  .grade-videos { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
}

/* notebooks pequenos e tablets deitados */
@media (max-width: 1180px) {
  .hero { padding-top: clamp(36px, 7vh, 72px); }
}

/* tablets */
@media (max-width: 900px) {
  .bloco-cabeca { align-items: flex-start; }
  .filtros { width: 100%; }
  .busca { flex: 1 1 220px; }
  .busca input { width: 100%; }
}

/* celulares */
@media (max-width: 600px) {
  body { font-size: 14.5px; }
  .topo { padding: 10px 14px; gap: 12px; }
  .logo-marca { width: 34px; height: 34px; font-size: 18px; }
  .logo-nome { font-size: 15px; }
  main { padding: 0 14px 90px; }

  .hero { padding: 30px 0 18px; }
  h1 { margin-bottom: 30px; font-size: clamp(30px, 9.4vw, 40px); }
  .compositor { border-radius: 22px; padding: 6px; }
  .compositor-borda { border-radius: 23px; }
  .compositor textarea { padding: 14px 14px 6px; min-height: 104px; }
  .sugestoes { padding: 4px 10px 10px; }
  .compositor-barra { gap: 10px; padding: 8px 6px 2px 10px; }
  .seletor { padding: 6px 8px; }
  .seletor select { max-width: 118px; text-overflow: ellipsis; }
  .compositor-barra .botao-principal { padding: 12px 16px; white-space: nowrap; font-size: 13.5px; }

  .bloco { margin-top: 40px; }
  h2 { font-size: 20px; }
  .filtros { gap: 10px; }
  .busca { flex-basis: 100%; height: 44px; }
  .pilulas { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pilulas button { flex: 1 0 auto; padding: 8px 12px; }

  /* dois vídeos por linha */
  .grade-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { border-radius: 18px; }
  .card-topo { top: 8px; left: 8px; right: 8px; }
  .card-topo .selo { padding: 4px 8px; font-size: 9.5px; gap: 5px; }
  .duracao { padding: 4px 7px; font-size: 10px; }
  .card-base { padding: 12px; }
  .card-serie { font-size: 9px; letter-spacing: 0.1em; }
  .card-titulo { font-size: 13px; line-height: 1.22; }
  .card-data { margin-top: 6px; font-size: 10px; }

  /* no celular o botão principal ocupa a linha inteira, embaixo do seletor de modelo */
  .compositor-barra { flex-wrap: wrap; }
  .compositor-barra .botao-principal { flex: 1 1 100%; justify-content: center; margin-left: 0 !important; padding: 14px 16px; }

  /* modal em tela cheia */
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .modal-corpo { max-height: 100dvh; }
  .palco { padding: 62px 14px 18px; }
  .celular { height: min(64dvh, calc((100vw - 28px) * 16 / 9)); border-radius: 26px; padding: 6px; }
  .celular video { border-radius: 21px; }
  .capitulos { width: min(calc(64dvh * 9 / 16 + 12px), 100%); }
  .fechar { top: 12px; right: 12px; }
  .modal-menu { top: 12px; right: 58px; }
  .det-cabeca { padding: 22px 18px 0; }
  .det-titulo { margin-right: 0; }
  /* fechar e o menu ficam sempre à vista enquanto o modal rola */
  .fechar, .modal-menu { position: fixed; }
  .fechar, .mais-opcoes { background: rgba(11, 16, 32, 0.82); backdrop-filter: blur(8px); }
  .abas { margin: 20px 18px 0; overflow-x: auto; scrollbar-width: none; }
  .abas button { flex: none; padding: 11px 10px; }
  /* etiqueta da forma de conexão acima do título, sem sobrepor */
  .cx-forma { padding-top: 34px; align-items: flex-start; }
  .cx-etiqueta { top: 14px; left: 78px; right: auto; }
  .cx-seta { align-self: center; }

  .caixa { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; border-radius: 22px; }
  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  .conta-menu { min-width: min(270px, calc(100vw - 28px)); }

  /* login */
  .lg-lado { justify-content: flex-start; gap: 22px; padding: max(28px, 7vh) 14px 32px; }
  .login-cartao { padding: 26px 20px 22px; border-radius: 24px; gap: 14px; }
  .login-cartao .compositor-borda { border-radius: 25px; }
  .lg-sub { font-size: 14px; }
}

/* celulares pequenos (iPhone SE e afins) */
@media (max-width: 360px) {
  .grade-videos { gap: 10px; }
  .card-titulo { font-size: 12px; }
  .compositor-barra .botao-principal { padding: 11px 12px; }
  .seletor select { max-width: 92px; }
}

/* celular deitado: o vídeo do modal cabe na altura */
@media (max-height: 500px) and (orientation: landscape) {
  .celular { height: 82dvh; }
  .capitulos { width: calc(82dvh * 9 / 16 + 12px); }
  .lg-lado { justify-content: flex-start; padding-top: 20px; }
}

/* ── administrador ── */
.selo-admin { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(200, 255, 46, 0.12); border: 1px solid rgba(200, 255, 46, 0.35); color: var(--lima); font: 700 9.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; }
.cx-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 11px 13px; border-radius: 13px; border: 1px solid rgba(255, 176, 31, 0.3); background: rgba(255, 176, 31, 0.07); color: #ffd28a; font-size: 13px; line-height: 1.5; }
.cx-aviso svg { width: 16px; height: 16px; margin-top: 2px; color: #ffb01f; }