/* ============================================================
   Central alvops — base compartilhada (núcleo + telas extras)
   Tokens espelham site/css/variables.css e DESIGN.md. Nunca hex solto
   fora deste bloco.
   ============================================================ */
:root{
  --fundo:#09090b; --sup:#141418; --sup2:#1e1e24; --sup3:#2b2b32;
  --linha:#2b2b32; --linha-sutil:#1c1c22;
  --texto:#f4f4f5; --suave:#c9c6c0; --muted:#92929b;
  --ac:#ff6b2b; --ac2:#ff9a5c; --ac-rgb:255,107,43;
  --verde:#4fbf7f; --verm:#e1685b;
  --ease:cubic-bezier(.16,1,.3,1);
  --inter:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --r1:4px; --r2:8px; --r3:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--inter);background:var(--fundo);color:var(--texto);-webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden;-webkit-tap-highlight-color:transparent}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:100;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

/* ---------- faixa de rascunho ---------- */
.aviso{position:relative;z-index:30;background:#1a120c;color:var(--ac2);border-bottom:1px solid #3a2414;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.3rem 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.gravando .aviso{display:none}

/* ---------- barra de comando (topo de toda tela) ---------- */
.barra{position:relative;z-index:20;display:flex;align-items:center;gap:1rem;height:52px;padding:0 clamp(.9rem,2.4vw,1.6rem);border-bottom:1px solid var(--linha-sutil);background:rgba(9,9,11,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{font-weight:700;font-size:1.15rem;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.logo b{color:var(--ac);font-weight:700}
.barra .onde{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:1rem;border-left:1px solid var(--linha);white-space:nowrap}
.barra .dir{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.sinc{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.relogio{font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--texto);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- peças comuns ---------- */
.rot{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pulso{width:7px;height:7px;border-radius:50%;background:var(--verde);animation:pulso 2s infinite;flex:none;display:inline-block}
.pulso.ac{background:var(--ac);animation-name:pulsoAc}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(79,191,127,.45)}70%{box-shadow:0 0 0 7px rgba(79,191,127,0)}100%{box-shadow:0 0 0 0 rgba(79,191,127,0)}}
@keyframes pulsoAc{0%{box-shadow:0 0 0 0 rgba(255,107,43,.5)}70%{box-shadow:0 0 0 8px rgba(255,107,43,0)}100%{box-shadow:0 0 0 0 rgba(255,107,43,0)}}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.btn{display:inline-flex;align-items:center;gap:.5rem;height:34px;padding:0 .85rem;border:1px solid var(--linha);border-radius:var(--r1);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);transition:color .15s,border-color .15s,background .15s;white-space:nowrap}
.btn:hover{color:var(--texto);border-color:#3a3a43}
.btn.prim{background:var(--ac);border-color:var(--ac);color:#09090b;font-weight:600}
.btn.prim:hover{background:var(--ac2);border-color:var(--ac2)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.ico{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--linha);border-radius:var(--r1);color:var(--suave);transition:color .15s,border-color .15s}
.ico:hover{color:var(--ac2);border-color:#3a3a43}
.ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

/* cartão padrão (widget) */
.card{background:linear-gradient(180deg,rgba(30,30,36,.62),rgba(20,20,24,.72));border:1px solid var(--linha);border-radius:var(--r3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card-cab{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem .6rem}
.card-cab .rot{flex:1}

/* linha de evento: assinatura do Cérebro Operacional */
.ev{display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;gap:.7rem;padding:.55rem 0;border-top:1px solid var(--linha-sutil);font-size:.84rem}
.ev:first-child{border-top:0}
.ev .h{font-family:var(--mono);font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ev .s{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ac)}
.ev .t{color:var(--suave);min-width:0}
.pill{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .45rem;border-radius:999px;border:1px solid var(--linha);color:var(--muted);white-space:nowrap}
.pill.ok{color:var(--verde);border-color:rgba(79,191,127,.35)}
.pill.ac{color:var(--ac2);border-color:rgba(255,107,43,.4)}
.pill.erro{color:var(--verm);border-color:rgba(225,104,91,.4)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--sup3);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

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