:root {
  --fundo: #0E1013; --painel: #14161B; --conversa: #17191E; --elevado: #1E2128; --borda: #272A33;
  --texto: #E8EAEC; --suave: #9AA3AB; --apagado: #6B7280;
  --roxo: #8B7CF6; --roxo-claro: #B4A9FF; --roxo-fundo: #2A2650; --sobre-roxo: #140F2E;
  --verde: #4FB3A0; --verde-fundo: #16261F; --vermelho: #E5484D; --ambar: #E3A857;
  --raio: 10px;
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* ── entrada (login / troca de senha) ─────────────────────────────────────── */
.tela-entrada { position: fixed; inset: 0; display: grid; place-items: center; padding: 32px 16px; overflow-y: auto; }
.fundo { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, #3B1D6E 0%, transparent 55%),
              radial-gradient(90% 80% at 10% 100%, #2A1450 0%, transparent 60%),
              linear-gradient(125deg, #07061A 0%, #120D33 45%, #0A0820 70%, #1E1046 100%); }
.luz { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: .5; will-change: transform;
  background: radial-gradient(closest-side, var(--c), transparent 70%); }
.l1 { --c: rgba(124,92,255,.55); left: -20vmax; top: -24vmax; animation: flutua1 26s ease-in-out infinite alternate; }
.l2 { --c: rgba(217,70,239,.30); right: -24vmax; bottom: -28vmax; animation: flutua2 30s ease-in-out infinite alternate; }
.l3 { --c: rgba(251,146,120,.16); left: 30%; top: 62%; width: 42vmax; height: 42vmax; animation: flutua3 24s ease-in-out infinite alternate; }
.grade { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(180,169,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(180,169,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
@keyframes flutua1 { to { transform: translate(14vmax, 10vmax) scale(1.08); } }
@keyframes flutua2 { to { transform: translate(-12vmax, -8vmax) scale(.94); } }
@keyframes flutua3 { to { transform: translate(-16vmax, -14vmax); } }

.entrada-layout { position: relative; width: min(1180px, 100%); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px);
  align-items: center; gap: clamp(32px, 6vw, 96px); }
.vitrine { animation: entra .7s cubic-bezier(.2,.8,.2,1) both; }
.sobretitulo { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #A99BFF; }
.manchete { margin: 0; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; color: #F6F4FF; }
.manchete em { font-style: normal; background: linear-gradient(90deg, #8B7CF6 0%, #C084FC 45%, #F0A3C8 80%, #FDBA8C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.linha-fina { max-width: 34em; margin: 22px 0 30px; font-size: 18px; line-height: 1.55; color: #C9C3E6; }
/* mini tariff week: Yara's pointer closes Saturday, the card waits for approval (7 s loop, CSS only) */
.mini-grade { max-width: 520px; margin-bottom: 32px; padding: 14px 16px 12px; border-radius: 18px;
  background: rgba(20,14,44,.55); border: 1px solid rgba(190,160,255,.16); box-shadow: 0 24px 60px rgba(4,2,20,.35); }
.mini-topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 650; color: #A99BFF; }
.mini-yara { font-family: var(--mono); font-weight: 500; color: #C9C3E6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-dias { position: relative; }
.mini-dias ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mini-dias li { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 9px;
  border-radius: 10px; background: rgba(139,124,246,.08); border: 1px solid rgba(139,124,246,.16); }
.mini-dias small { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9A92C9; }
.mini-dias b { font-size: 18px; line-height: 1.2; color: #F6F4FF; }
.mini-dias span { font-size: 11px; font-weight: 600; color: #7FD8C4; white-space: nowrap; }
.mini-dias li.alvo { animation: mini-celula 7s ease-in-out infinite; }
/* "Fechado" takes the price's place (bottom strip of the cell) */
.mini-dias li.alvo::after { content: "Fechado"; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: grid; place-items: center;
  background: #4A1C2E; color: #FFC9CB; font-size: 11px; font-weight: 750; opacity: 0; animation: mini-fecha 7s ease-in-out infinite; }
.mini-trilha { position: absolute; inset: 0; pointer-events: none; animation: mini-anda 7s cubic-bezier(.45,.05,.25,1) infinite; }
.mini-ponteiro { position: absolute; left: 6%; top: 66%; filter: drop-shadow(0 4px 10px rgba(124,92,255,.7)); }
.mini-ponteiro svg { width: 22px; height: 22px; fill: #8B7CF6; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.mini-ponteiro em { position: absolute; left: 16px; top: 16px; padding: 0 6px; border-radius: 7px; background: #8B7CF6; color: #fff; font: 600 10px/16px var(--fonte); font-style: normal; }
.mini-ponteiro::before { content: ""; position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #B4A9FF; opacity: 0; animation: mini-clique 7s ease-out infinite; }
.mini-aprov { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12px; font-weight: 650; color: #E3C58F; opacity: 0;
  animation: mini-aprov 7s ease-in-out infinite; }
.mini-aprov i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 4px rgba(227,168,87,.18); }
@keyframes mini-anda { 0%, 8% { transform: translateX(0); } 30%, 40% { transform: translateX(29.7%); } 50%, 80% { transform: translateX(37%); } 94%, 100% { transform: translateX(0); } }
@keyframes mini-clique { 0%, 32% { opacity: 0; transform: scale(.3); } 34% { opacity: 1; } 42%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes mini-fecha { 0%, 35% { opacity: 0; } 39%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes mini-celula { 0%, 35%, 94%, 100% { border-color: rgba(139,124,246,.16); } 39%, 86% { border-color: rgba(255,120,124,.6); } }
@keyframes mini-aprov { 0%, 50% { opacity: 0; transform: translateY(4px); } 56%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.pontos { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 16px; font-weight: 600; color: #E4E0FF; }
.pontos li { display: flex; align-items: center; gap: 14px; }
.pontos li:nth-child(1) b { --c: #8B7CF6; }
.pontos li:nth-child(2) b { --c: #C084FC; }
.pontos li:nth-child(3) b { --c: #F0A3C8; }
.pontos b { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }

.cartao-entrada { position: relative; width: min(440px, 100%); margin: 0 auto; padding: 34px 36px 32px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(48,30,92,.72), rgba(20,14,44,.78));
  border: 1px solid rgba(190,160,255,.20);
  box-shadow: 0 40px 100px rgba(4,2,20,.6), 0 0 0 1px rgba(255,255,255,.02) inset, 0 1px 0 rgba(255,255,255,.08) inset;
  display: flex; flex-direction: column; gap: 16px; animation: entra .6s .08s cubic-bezier(.2,.8,.2,1) both; }
.cartao-entrada::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(167,139,250,.55), transparent 35%, transparent 65%, rgba(240,163,200,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.logo-marca { margin: -6px auto 0; width: min(250px, 72%); line-height: 0; }
.logo-marca img { width: 100%; height: auto; filter: drop-shadow(0 14px 36px rgba(124,92,255,.45)); }
.logo-icone-grande { align-self: center; width: 84px; height: auto; filter: drop-shadow(0 12px 28px rgba(124,92,255,.5)); }
.saudacao { margin: -4px 0 6px; text-align: center; color: #C9C3E6; font-size: 15px; }
.marca-pequena { margin: 4px 0 0; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.campo { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: #DCD6F5; }
.campo input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(190,160,255,.18);
  background: rgba(8,6,24,.55); font-size: 16px; transition: border-color .15s, box-shadow .15s, background .15s; }
.campo input:hover { border-color: rgba(190,160,255,.32); }
.campo input:focus { outline: none; border-color: #8B7CF6; background: rgba(8,6,24,.75); box-shadow: 0 0 0 4px rgba(139,124,246,.22); }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 52px; }
.olho { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: #A99BFF; display: grid; place-items: center; }
.olho:hover { background: rgba(139,124,246,.14); color: #E4E0FF; }
.olho[aria-pressed="true"] { color: #F0A3C8; }
.erro { min-height: 20px; margin: -4px 0 -6px; color: #FF9EA1; font-size: 13px; }
.botao-primario { position: relative; overflow: hidden; height: 46px; padding: 0 18px; border: 0; border-radius: var(--raio);
  background: linear-gradient(135deg, #9C8FFF, #6D5CE8); color: var(--sobre-roxo); font-weight: 700;
  box-shadow: 0 8px 22px rgba(109,92,232,.35); transition: transform .12s, box-shadow .2s, filter .2s; }
.botao-primario::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transition: transform .6s; }
.botao-primario:hover::after { transform: translateX(120%); }
.botao-primario:hover { filter: brightness(1.06); }
.botao-primario:active { transform: translateY(1px) scale(.99); }
.botao-primario[disabled] { filter: grayscale(.6) brightness(.8); cursor: progress; }
.cartao-entrada .botao-primario { height: 54px; margin-top: 6px; border-radius: 14px; font-size: 16px; color: #fff;
  background: linear-gradient(90deg, #6D5CE8 0%, #9B5CF0 50%, #D946EF 100%); box-shadow: 0 14px 34px rgba(160,70,240,.35); }
@media (max-width: 960px) {
  .entrada-layout { grid-template-columns: 1fr; }
  .vitrine { display: none; }
}
.tremer { animation: tremer .35s; }
@keyframes tremer { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* ── app ──────────────────────────────────────────────────────────────────── */
#app { display: flex; height: 100vh; animation: aparece .35s ease both; }
@keyframes aparece { from { opacity: 0; } }
.trilho { flex: 0 0 72px; background: #0A0B0E; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; }
.trilho-logo { border-radius: 14px; }
.trilho-sep { width: 28px; height: 2px; background: #22252D; border-radius: 1px; }
.trilho-item { width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--roxo-fundo); color: #E4E0FF; font-weight: 650; font-size: 13px; box-shadow: 0 0 0 2px var(--roxo); }

.lateral { flex: 0 0 240px; background: var(--painel); border-right: 1px solid #1F2229; display: flex; flex-direction: column; }
.lateral-topo { padding: 16px; border-bottom: 1px solid #1F2229; display: flex; flex-direction: column; }
.lateral-topo small { color: var(--suave); font-size: 12px; }
.lateral-bloco { padding: 12px 8px 4px; }
.lateral-bloco h2 { margin: 0; padding: 4px 8px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.lateral-bloco ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.canal { width: 100%; display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--suave); text-align: left; transition: background .12s, color .12s; }
.canal:hover { background: #1C1F26; color: var(--texto); }
.canal[aria-current="true"] { background: #24232F; color: #F2F4F5; font-weight: 550; }
.canal .bolinha { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--roxo); color: var(--sobre-roxo); font-size: 11px; font-weight: 700; text-align: center; }
.membro { display: flex; align-items: center; gap: 10px; padding: 5px 10px; font-size: 13px; }
.membro small { display: block; color: var(--suave); font-size: 11px; line-height: 1.2; }
.avatar { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #3A3F49; display: grid; place-items: center; font-size: 11px; font-weight: 650; }
.avatar.yara { background: var(--roxo); color: var(--sobre-roxo); }
.avatar.online::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); border: 2px solid var(--painel); }
.avatar.yara.online::after { background: var(--roxo-claro); }
.lateral-eu { margin-top: auto; padding: 10px 12px; background: #101215; display: flex; align-items: center; gap: 10px; }
.eu-nome { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.eu-nome small { color: var(--suave); font-size: 11px; }
.botao-icone { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--suave); display: grid; place-items: center; }
.botao-icone:hover { background: #1C1F26; color: var(--texto); }

.conversa { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; background: var(--conversa); }
.conversa-topo { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #22252D; }
.conversa-topo h1 { margin: 0; font-size: 16px; font-weight: 650; }
.hash { color: var(--apagado); font-size: 20px; }
.espaco { flex: 1; }
.botao-secundario { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #2E313B; background: var(--elevado); font-size: 13px; transition: border-color .15s, background .15s; }
.botao-secundario:hover { border-color: #3D4250; }
.botao-secundario[aria-pressed="true"] { border-color: var(--roxo); background: #221F3A; color: #E4E0FF; }

.mensagens { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.msg { display: flex; gap: 14px; animation: chega .25s ease both; }
@keyframes chega { from { opacity: 0; transform: translateY(6px); } }
.msg .avatar { width: 40px; height: 40px; font-size: 13px; }
.msg-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.msg-cabeca { display: flex; gap: 8px; align-items: baseline; }
.msg-cabeca strong { font-weight: 650; }
.msg.yara .msg-cabeca strong { color: #D3CCFF; }
.selo { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--roxo-fundo); color: #E4E0FF; }
.hora { font-size: 12px; color: var(--apagado); }
.msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-texto code { font-family: var(--mono); font-size: 13px; padding: 1px 5px; border-radius: 4px; background: #23262E; }
.msg-texto .mencao { color: var(--roxo-claro); background: rgba(139,124,246,.14); border-radius: 4px; padding: 0 3px; }
.msg-texto .cita { font-family: var(--mono); font-size: 12px; color: var(--roxo-claro); text-decoration: none; }
.cursor-texto::after { content: "▍"; color: var(--roxo-claro); animation: piscar 1s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: 12px; color: var(--suave); padding: 3px 8px; border-radius: 6px; background: var(--elevado); border: 1px solid var(--borda); }
.fontes { display: flex; flex-wrap: wrap; gap: 8px; }
.fonte { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #3D3866; background: #1C1A2E; color: #E4E0FF; font-size: 13px; text-decoration: none; }
.fonte b { font-family: var(--mono); font-size: 12px; color: var(--roxo-claro); font-weight: 500; }
.pensando { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: 13px; padding-left: 54px; }
.pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--roxo-claro); animation: pula 1s infinite ease-in-out; }
.pensando i:nth-child(2) { animation-delay: .15s; } .pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.aprovacao { max-width: 560px; padding: 14px 16px; border-radius: var(--raio); background: #1E1B36; border: 1px solid #5B4FC0; display: flex; flex-direction: column; gap: 10px; }
.aprovacao-titulo { display: flex; align-items: center; gap: 8px; font-weight: 650; color: #E4E0FF; }
.aprovacao-dados { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.aprovacao-dados dt { color: #B9B3D9; } .aprovacao-dados dd { margin: 0; }
.aprovacao-linhas { font-size: 13px; color: #C9C4E6; }
.aprovacao-linhas ul { margin: 6px 0 0; padding-left: 18px; max-height: 160px; overflow: auto; font-family: var(--mono); font-size: 12px; }
.aprovacao-print img { width: 100%; border-radius: 8px; border: 1px solid #3D3866; display: block; }
.aprovacao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.aprovacao-acoes .botao-primario { height: 40px; }
.aprovacao-status { margin: 0; font-size: 13px; color: #B9B3D9; }
.aprovacao.enviado { border-color: #2F6E5A; background: var(--verde-fundo); }
.aprovacao.cancelado, .aprovacao.expirado, .aprovacao.erro { border-color: #3A3F49; background: #1A1C22; opacity: .85; }

.aviso-ia { margin: -12px 20px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 650; letter-spacing: .04em; color: var(--ambar); text-align: center; }
.aviso-ia svg { width: 13px; height: 13px; flex: 0 0 auto; }
.compositor { margin: 0 20px 20px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: var(--raio); background: #22252D; border: 1px solid #2E313B; transition: border-color .15s; }
.compositor:focus-within { border-color: #4A4470; }
.compositor input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; outline: none; font-size: 15px; }
.compositor input::placeholder { color: var(--apagado); }
.botao-enviar { width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--roxo); color: var(--sobre-roxo); display: grid; place-items: center; transition: transform .1s; }
.botao-enviar:active { transform: scale(.94); }

.botao-ponte { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px dashed #4A4470; background: rgba(139,124,246,.07); color: #D3CCFF; font-weight: 600; font-size: 13px; transition: background .15s, border-color .15s; }
.botao-ponte:hover { background: rgba(139,124,246,.14); border-color: var(--roxo); }
.dialogo { width: min(460px, calc(100% - 32px)); padding: 0; border: 1px solid rgba(180,169,255,.2); border-radius: 18px; background: #15131F; color: var(--texto); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dialogo::backdrop { background: rgba(5,5,12,.65); }
.dialogo[open] { animation: entra .3s cubic-bezier(.2,.8,.2,1) both; }
.dialogo-corpo { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.dialogo-topo { display: flex; align-items: center; gap: 12px; } .dialogo-topo h2 { margin: 0; font-size: 20px; }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; color: #C9CED3; }
.passos small { display: block; color: var(--suave); font-size: 12px; margin-top: 4px; }
.passos-topo { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--texto); font-size: 13px; font-weight: 600; }
.passos-topo:hover { background: #1C1F26; }
.passos-topo b { font-size: 12px; color: var(--roxo-claro); }
.passos-barra { display: block; height: 4px; margin: 4px 8px 0; border-radius: 2px; background: #262935; overflow: hidden; }
.passos-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8B7CF6, #D946EF); transition: width .4s; }
.dialogo-largo { width: min(560px, calc(100% - 32px)); }
.dialogo-sub { color: var(--suave); font-size: 13px; }
.dialogo-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.dialogo-acoes .botao-primario { flex: 1 1 200px; }
.explica { display: grid; gap: 12px; }
.explica div { padding: 12px 14px; border-radius: 12px; background: #1B1830; border: 1px solid #2A2648; }
.explica b { color: #E4E0FF; font-size: 14px; }
.explica p { margin: 4px 0 0; color: #C9C3E6; font-size: 13px; line-height: 1.5; }
.explica code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: #2A2650; color: #E4E0FF; }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 6px; border-radius: 8px; }
.checklist li.clicavel { cursor: pointer; } .checklist li.clicavel:hover { background: #1C1A2C; }
.checklist .caixa { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 2px solid #4A4470; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.checklist .caixa svg { width: 14px; height: 14px; stroke-width: 3; color: #140F2E; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.checklist li.feito .caixa { background: var(--verde); border-color: var(--verde); }
.checklist li.feito .caixa svg { opacity: 1; transform: none; }
.checklist li.feito .texto-passo { color: var(--suave); text-decoration: line-through; text-decoration-color: rgba(154,163,171,.5); }
.texto-passo { font-size: 14px; color: var(--texto); }
.texto-passo small { display: block; text-decoration: none; color: var(--apagado); font-size: 12px; }
.botao-link { display: inline-flex; align-items: center; text-decoration: none; margin-top: 2px; }
.codigo-grande { margin-top: 8px; padding: 12px; border-radius: 12px; background: #0D0C16; border: 1px solid #2E2A4A; font: 700 30px var(--mono); letter-spacing: .4em; text-align: center; color: #E4E0FF; }

/* ── painel do navegador ─────────────────────────────────────────────────── */
.painel { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; background: #101216; border-left: 1px solid #22252D; animation: desliza .25s ease both; }
@keyframes desliza { from { opacity: 0; transform: translateX(12px); } }
.painel-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #22252D; }
.luz-status { width: 9px; height: 9px; border-radius: 50%; background: var(--apagado); flex: 0 0 auto; }
.luz-status.ok { background: var(--verde); box-shadow: 0 0 0 4px rgba(79,179,160,.15); }
.luz-status.login { background: var(--ambar); animation: piscar 1.2s steps(2) infinite; }
.nav-url { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border-radius: 16px; background: #1A1C22; color: var(--suave); font: 12px/32px var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aviso-controle { padding: 8px 14px; font-size: 13px; background: #2B2312; color: #F3E2C6; border-bottom: 1px solid #4A3A1E; }
.palco { position: relative; flex: 1; overflow: hidden; display: grid; place-items: start center; background: #0B0C0F; outline: none; }
.palco img { width: 100%; height: auto; display: block; user-select: none; }
.palco.controle img { cursor: crosshair; }
.palco-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--apagado); font-size: 14px; }
.ponteiro { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; align-items: flex-start; opacity: 0;
  transform: translate(-100px, -100px); transition: transform 85ms cubic-bezier(.3,.7,.2,1), opacity .2s; will-change: transform; z-index: 2; }
.ponteiro.visivel { opacity: 1; }
.ponteiro svg { width: 22px; height: 22px; fill: var(--roxo); stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.ponteiro span { margin: 16px 0 0 -2px; padding: 1px 8px; border-radius: 10px; background: var(--roxo); color: var(--sobre-roxo); font-size: 11px; font-weight: 700; }
.onda { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--roxo-claro); pointer-events: none; animation: onda .45s ease-out forwards; z-index: 1; }
@keyframes onda { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 900px) {
  #app { flex-wrap: wrap; height: auto; min-height: 100vh; }
  .trilho { display: none; }
  .lateral { flex: 1 1 100%; }
  .lateral-bloco:last-of-type { display: none; }
  .conversa { min-height: 80vh; }
  .painel { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}