/* EMOS · Canvas — shell espacial do zero (protótipo v3 aprovado pelo Erico).
   Uma janela: o mapa é o canvas; trabalho abre como cards flutuantes.
   Nenhuma linha vem do shell clássico — linguagem, tokens e motor próprios. */


/* ===== Tipografia da v3, self-hosted (CSP default-src 'self'; OFL) ===== */
@font-face{font-family:"Archivo";src:url("archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("plex-sans.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#07111f; --deep:#05080f; --panel:#0d1b2b; --panel-2:#0a1626;
  --card-hi:#1c2940; --card-lo:#131f31;
  --ink:#f2f7ff; --muted:#91a4bf; --faint:#60738f;
  --line:rgba(142,174,215,.16); --line-strong:rgba(142,190,255,.32); --edge-w:rgba(255,255,255,.08);
  --accent:#2e8cff; --accent-soft:rgba(46,140,255,.16); --tube:#345CB0;
  --violet:#8b6cff; --cyan:#28d7d2; --pink:#f062b7; --lime:#9de35a;
  --warn:#f6b94e; --stop:#ff6e7a; --ok:#57d89b;
  --warn-soft:rgba(246,185,78,.14); --stop-soft:rgba(255,110,122,.14); --ok-soft:rgba(87,216,155,.14);
  --live-g:linear-gradient(135deg,#7367F7,#507FE8);
  --shadow:0 28px 80px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.32);
  --glow:0 0 0 1px rgba(83,216,255,.20),0 16px 48px rgba(46,140,255,.18);
  --r:18px; --r-sm:12px;
  --display:"Archivo","Segoe UI Variable Display",system-ui,sans-serif;
  --sans:"IBM Plex Sans","Segoe UI Variable",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Cascadia Code",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
     -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:rgba(46,140,255,.35)}

/* ===== Login (mesma linguagem do canvas) ===== */
#login{position:fixed;inset:0;z-index:400;background:var(--deep);display:grid;place-items:center}
#login[hidden]{display:none}
.login-card{width:min(420px,92vw);background:linear-gradient(180deg,var(--card-hi),var(--panel-2));
  border:1px solid var(--edge-w);border-radius:var(--r);box-shadow:var(--shadow);padding:28px 30px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login-brand .mark{width:34px;height:34px;border-radius:10px;flex:none;
  background:conic-gradient(from 210deg,#7367F7,#507FE8,#28d7d2,#7367F7);
  box-shadow:0 0 18px rgba(115,103,247,.55)}
.login-brand b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.05em}
.login-brand small{display:block;color:var(--faint);font-size:11.5px}
.login-card h1{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:6px}
.login-copy{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.login-card label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.login-card input{width:100%;background:rgba(7,17,31,.7);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--ink);font:inherit;font-size:13.5px;margin-bottom:12px}
.login-error{color:var(--stop);font-size:12px;margin-bottom:10px}
.login-submit{width:100%;border-radius:10px;padding:11px 16px;font-weight:600;font-size:13.5px;
  background:var(--live-g);color:#fff;box-shadow:0 4px 18px rgba(115,103,247,.4)}
.login-submit:hover{filter:brightness(1.12)}
.login-fine{display:block;margin-top:12px;font-size:10.5px;color:var(--faint);text-align:center}

/* ===== Viewport + mundo pan/zoom ===== */
#viewport{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none}
#viewport.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;width:3200px;height:2200px;transform-origin:0 0;
       background-image:radial-gradient(rgba(142,174,215,.10) 1px,transparent 1.4px);
       background-size:30px 30px}
.orbb{position:absolute;border-radius:50%;filter:blur(95px);opacity:.30;pointer-events:none}
#edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#edges path.tube{fill:none;stroke-width:4.5;stroke-linecap:round;opacity:0;transition:opacity .5s ease}
#edges path.tube.on{opacity:.55}
#edges path.tube.on.active{opacity:.95;stroke-width:5.5;filter:drop-shadow(0 0 7px rgba(46,140,255,.5))}
#edges path.ants{fill:none;stroke:#bfe0ff;stroke-width:1.3;stroke-dasharray:3 11;stroke-linecap:round;
                 opacity:0;transition:opacity .3s}
#edges path.ants.active{opacity:.9;animation:flow 1.1s linear infinite}
#edges path.tube.ghostly{stroke-width:3.5;stroke-dasharray:2 10;opacity:0}
#edges path.tube.ghostly.on{opacity:.8}
#plife circle{opacity:.85}
@keyframes flow{to{stroke-dashoffset:-14}}

/* ===== Nós do mapa ===== */
.node{position:absolute;display:flex;flex-direction:column;gap:3px;text-align:left;
      background:linear-gradient(180deg,var(--card-hi),var(--card-lo));
      border:1px solid var(--edge-w);border-radius:14px;padding:10px 14px 9px;
      box-shadow:0 12px 34px rgba(0,0,0,.4);
      transition:transform .25s cubic-bezier(.22,.9,.26,1),box-shadow .25s,border-color .25s,opacity .45s;
      opacity:0}
.node.on{opacity:1}
.node:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.node.active{border-color:var(--nc,var(--accent));box-shadow:var(--glow)}
.node .n-top{display:flex;align-items:center;gap:8px}
.node .n-dot{width:9px;height:9px;border-radius:50%;background:var(--nc,var(--accent));
             box-shadow:0 0 10px var(--nc,var(--accent));flex:none}
.node .n-label{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:.01em;
               white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.node .n-chip{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;
              max-width:280px;overflow:hidden;text-overflow:ellipsis}
.node .n-chip .warnc{color:var(--stop)}
.node.expandable .n-label::after{content:" ›";color:var(--faint)}
.node.expandable.open-branch .n-label::after{content:" ⌄"}
.node.opens-card .n-chip::before{content:"▤ ";color:var(--faint)}
.node.pulse{animation:pulse 1.6s ease-out 2}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,140,255,.55)}70%{box-shadow:0 0 0 22px rgba(46,140,255,0)}100%{box-shadow:0 0 0 0 rgba(46,140,255,0)}}
.node.invite{animation:invite 2.4s ease-in-out infinite}
@keyframes invite{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 1px rgba(83,216,255,.25),0 0 28px rgba(46,140,255,.35)}}

/* hub circular: a raiz do espaço */
.node.root{width:136px;height:136px;border-radius:50%;align-items:center;justify-content:center;gap:2px;
           background:radial-gradient(circle at 38% 32%,#1e3a63 0%,#0e1c33 58%,#0a1526 100%);
           border:1px solid rgba(142,190,255,.28);
           box-shadow:0 0 40px rgba(46,140,255,.28),0 12px 40px rgba(0,0,0,.5);padding:0;text-align:center}
.node.root .n-top{flex-direction:column;gap:2px}
.node.root .n-label{font-size:15px;font-weight:700;letter-spacing:.06em;max-width:120px}
.node.root .n-label::after{content:""}
.node.root .n-chip{font-size:11px;line-height:1.25;color:#c9c2ff;max-width:120px;
                    white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
.node.root::after{content:"";position:absolute;inset:-10px;border-radius:50%;
                  border:1px dashed rgba(142,190,255,.38);animation:spin 26s linear infinite}
.node.root::before{content:"";position:absolute;inset:-22px;border-radius:50%;
                   border:1px solid rgba(46,140,255,.10)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Barra superior ===== */
#topbar{position:fixed;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:16px;
        padding:0 14px;z-index:60;pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:26px;height:26px;border-radius:8px;flex:none;
             background:conic-gradient(from 210deg,#7367F7,#507FE8,#28d7d2,#7367F7);
             box-shadow:0 0 14px rgba(115,103,247,.55)}
.brand b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em}
.brand small{color:var(--faint);font-size:11px;margin-left:2px}
#crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
       background:rgba(10,22,38,.78);border:1px solid var(--edge-w);border-radius:999px;
       padding:6px 14px;max-width:44vw;overflow:hidden}
#crumb button{color:var(--muted);white-space:nowrap}
#crumb button:hover{color:var(--ink)}
#crumb .sep{color:var(--faint)}
#crumb .cur{color:var(--ink);font-weight:600}
#topbar .spacer{flex:1}
.tb-btn{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
        background:rgba(10,22,38,.78);border:1px solid var(--edge-w);border-radius:999px;
        padding:6px 12px;transition:border-color .2s,color .2s;white-space:nowrap}
.tb-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.tb-btn.exit:hover{color:var(--stop);border-color:var(--stop)}
#btn-fluxo,#btn-help{display:none}
kbd{font-family:var(--mono);font-size:10px;background:rgba(142,174,215,.14);border:1px solid var(--line);
    border-radius:5px;padding:1px 5px;color:var(--muted)}

/* ===== Cards de trabalho ===== */
.card{position:fixed;display:flex;flex-direction:column;width:480px;max-height:min(64vh,600px);
      background:linear-gradient(180deg,var(--card-hi),var(--panel-2));border:1px solid var(--edge-w);
      border-radius:var(--r);box-shadow:var(--shadow);z-index:130;overflow:hidden;
      transition:transform .32s cubic-bezier(.22,.9,.26,1),opacity .32s,width .25s ease,height .25s ease}
.card.dragging{transition:opacity .32s;box-shadow:0 40px 100px rgba(0,0,0,.6),var(--glow)}
.card-head{display:flex;align-items:center;gap:11px;padding:12px 12px 11px 16px;cursor:grab;user-select:none;
           border-bottom:1px solid var(--line);background:rgba(46,140,255,.04);touch-action:none}
.card.dragging .card-head{cursor:grabbing}
.card-head .dot{width:10px;height:10px;border-radius:50%;background:var(--cc,var(--accent));
                box-shadow:0 0 12px var(--cc,var(--accent));flex:none}
.card-head .t{flex:1;min-width:0}
.card-head .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;
                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-head h2{font-family:var(--display);font-weight:600;font-size:16px;white-space:nowrap;
              overflow:hidden;text-overflow:ellipsis}
.card-btns{display:flex;gap:4px}
.card-btns button{width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:15px;line-height:1;
                  display:grid;place-items:center;transition:background .15s,color .15s}
.card-btns button:hover{background:rgba(142,174,215,.12);color:var(--ink)}
.card-btns button.cls:hover{background:var(--stop-soft);color:var(--stop)}
.card-body{overflow:auto;padding:14px 16px;flex:1;scrollbar-width:thin;scrollbar-color:rgba(142,174,215,.3) transparent}
.card-foot{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);
           background:rgba(7,17,31,.6);flex-wrap:wrap}
.card-foot .meta{font-family:var(--mono);font-size:10.5px;color:var(--faint);flex:1;min-width:120px}
/* efeito e alçada À VISTA no rodapé: gesto sem campo aplica no primeiro
   clique, então o que ele faz tem de estar legível ANTES do clique */
.card-foot .gefeitos{flex-basis:100%;display:flex;flex-direction:column;gap:3px;margin-top:2px}
.card-foot .gefeito{font-size:11px;line-height:1.35;color:var(--faint);padding-left:11px;position:relative}
.card-foot .gefeito::before{content:"\21b3";position:absolute;left:0;color:var(--line)}
.card.snap-left,.card.snap-right{width:calc(50vw - 20px)!important;height:calc(100vh - 150px);max-height:none;top:62px!important}
.card.snap-left{left:12px!important}
.card.snap-right{left:calc(50vw + 8px)!important}
.card.focused{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
              width:min(1040px,90vw)!important;height:84vh;max-height:none;z-index:170!important;box-shadow:var(--shadow),var(--glow)}
#focus-backdrop{position:fixed;inset:0;background:rgba(4,10,19,.55);backdrop-filter:blur(7px);
                opacity:0;pointer-events:none;transition:opacity .3s;z-index:160}
#focus-backdrop.on{opacity:1;pointer-events:auto}
#snap-ghost{position:fixed;top:62px;height:calc(100vh - 150px);width:calc(50vw - 20px);border-radius:var(--r);
            border:1.5px dashed var(--line-strong);background:var(--accent-soft);z-index:35;opacity:0;
            transition:opacity .18s;pointer-events:none}
#snap-ghost.on{opacity:1}

/* conteúdo dos cards (renderer próprio) */
.stats{display:flex;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.stat{flex:1;min-width:110px;background:rgba(255,255,255,.05);border:1px solid var(--edge-w);border-radius:var(--r-sm);padding:9px 12px}
.stat b{font-family:var(--display);font-size:18px;font-weight:700;display:block;font-variant-numeric:tabular-nums;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:10.5px;color:var(--muted)}
.stat.bad b{color:var(--stop)}
.stat.good b{color:var(--ok)}
.bar{display:flex;align-items:center;gap:10px;margin-bottom:13px;font-size:11px;color:var(--muted)}
.bar .track{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar .track i{display:block;height:100%;border-radius:99px;background:var(--live-g)}
.bar .track i.amber{background:linear-gradient(90deg,#f6b94e,#f062b7)}
.bar b{font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:500}
.rowlist{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--line);
     border-radius:8px;text-align:left;width:100%}
.row[data-open]{cursor:pointer}
.row[data-open]:hover{background:rgba(46,140,255,.08)}
.row .r-main{flex:1;min-width:0}
.row .r-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r-sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r-side{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.row .r-open{color:var(--faint);font-size:12px}
.row[data-open]:hover .r-open{color:var(--accent)}
/* onde o objeto POUSOU depois do gesto: o efeito o move de raia, de fila e de posição, e a
   tela atualizada sozinha esconde para onde ele foi (martelo do dono, 10/09) */
.row.pousou{animation:pousou 2.2s ease-out 1}
@keyframes pousou{0%{background:rgba(46,140,255,.34)}60%{background:rgba(46,140,255,.16)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.row.pousou{animation:none;background:rgba(46,140,255,.16)}}
.chip{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.stop{background:var(--stop-soft);color:var(--stop)}
.chip.info{background:var(--accent-soft);color:#9fd0ff}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-bottom:14px}
.kv .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.kv .v{font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.kv .v.mono{font-family:var(--mono);font-size:12px}
.kv .wide{grid-column:1/-1}
.sec-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--faint);margin:16px 0 9px}
.refs{display:flex;flex-wrap:wrap;gap:8px}
.ref{font-size:12px;border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;color:var(--muted);
     transition:border-color .15s,color .15s,background .15s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref::before{content:"↗ ";color:var(--accent)}
.ref:hover{color:var(--ink);background:var(--accent-soft);border-color:var(--accent)}
.notice{display:flex;gap:9px;background:var(--accent-soft);border:1px solid rgba(46,140,255,.3);
        border-radius:var(--r-sm);padding:10px 12px;font-size:12px;color:var(--muted);margin-bottom:12px}
.notice[hidden]{display:none}
.notice::before{content:"◆";color:var(--accent);flex:none}
.notice.warn{background:var(--warn-soft);border-color:rgba(246,185,78,.35)}
.notice.warn::before{color:var(--warn)}
.notice.stop{background:var(--stop-soft);border-color:rgba(255,110,122,.35)}
.notice.stop::before{color:var(--stop)}
.canvas-update-banner{position:fixed;left:50%;top:62px;transform:translateX(-50%);z-index:190;
  width:min(680px,calc(100vw - 28px));display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 14px;border:1px solid rgba(246,185,78,.55);border-radius:12px;
  background:rgba(45,36,18,.97);color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.45);
  font-size:12.5px}
.canvas-update-banner[hidden]{display:none}
.canvas-update-banner button{flex:none;border-radius:9px;padding:8px 12px;background:var(--warn);color:#17120a;
  font-weight:700}
@media(max-width:600px){.canvas-update-banner{align-items:stretch;flex-direction:column}.canvas-update-banner button{width:100%}}
.gauge-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:13px}
.serie{margin-bottom:13px}
.serie .s-row{display:grid;grid-template-columns:minmax(90px,.9fr) minmax(80px,1.6fr) minmax(64px,.5fr);
              align-items:center;gap:10px;padding:4px 0;font-size:12px}
.serie .s-name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serie .s-track{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.serie .s-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--tube),var(--accent));
                  transform-origin:left;animation:grow .5s ease both}
.serie .s-val{font-family:var(--mono);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
@keyframes grow{from{transform:scaleX(0)}}
.btn{border-radius:10px;padding:9px 16px;font-weight:600;font-size:13px;transition:filter .15s,background .15s}
.btn.primary{background:var(--live-g);color:#fff;box-shadow:0 4px 18px rgba(115,103,247,.4)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{border:1px solid var(--line-strong);color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
/* O rótulo da ação NÃO encolhe (seria cortado), então é a MENSAGEM que cede — e cedia até
   desaparecer: medido em 17/09 num Chrome, numa janela de 320px a explicação ficava com 60px e
   o conteúdo transbordava o próprio botão. `flex-wrap` com base mínima na mensagem faz a ação
   descer para a sua linha quando o espaço acaba, sem media query: quem manda é o espaço que
   sobra, e não o tamanho do ECRÃ — a casca nova deixa encolher a janela sem mudar o ecrã. */
.rfq-gap{width:100%;text-align:left;align-items:center;color:var(--ink);cursor:pointer;
  flex-wrap:wrap;row-gap:6px}
/* A mensagem ocupa a LINHA INTEIRA e a ação desce para a sua. Sem isto o rótulo azul
   aterrava no MEIO da frase — medido na imagem a 480px: "...o cálculo precisa [Cadastrar
   tabela de materiais e voltar →] dela primeiro." A ordem de leitura partia-se ao meio, e
   isso já acontecia antes desta fatia, na largura de todos os dias. */
.rfq-gap>span:first-child{flex:1 1 100%;min-width:0}
/* Sem `margin-left:auto`: agora que a ação tem linha própria, empurrá-la para a direita
   abria um vazio de ~190px entre o fim da frase e o começo do rótulo, na largura de todos os
   dias. O rótulo alinha com a frase a que pertence. */
.rfq-gap-action{font-weight:600;color:var(--accent);flex-shrink:0}
.rfq-gap:hover,.rfq-gap:focus-visible{border-color:var(--accent);outline:2px solid var(--accent-soft)}
/* A media query que existia aqui ficou sem função: a ação já tem linha própria em qualquer
   largura, e ela reagia ao ECRÃ, que é o eixo errado para conteúdo dentro de um cartão. */
.gest-effect{font-size:11px;color:var(--faint);margin-top:4px}
.empty{color:var(--faint);font-size:12.5px;padding:14px 4px;text-align:center}
.miss{border:1.5px dashed rgba(246,185,78,.5);border-radius:var(--r-sm);padding:10px 12px;
      font-size:12px;color:var(--warn);margin-bottom:12px;background:var(--warn-soft)}
.contract-error{border:1.5px dashed rgba(255,110,122,.6);border-radius:var(--r-sm);padding:12px 14px;
      font-size:12.5px;color:var(--stop);background:var(--stop-soft)}

/* ===== Dock de cards minimizados ===== */
#dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:70;
      max-width:80vw;flex-wrap:wrap;justify-content:center}
.pill{display:flex;align-items:center;gap:8px;background:rgba(13,27,43,.92);border:1px solid var(--edge-w);
      border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;
      box-shadow:0 8px 30px rgba(0,0,0,.45);animation:pill-in .3s cubic-bezier(.22,.9,.26,1);max-width:280px}
.pill span.lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--cc,var(--accent));box-shadow:0 0 8px var(--cc,var(--accent));flex:none}
.pill:hover{border-color:var(--accent)}
@keyframes pill-in{from{transform:translateY(16px);opacity:0}}

/* ===== Tony ===== */
#tony-chip{position:fixed;right:18px;bottom:16px;z-index:70;display:flex;align-items:center;gap:9px;
           background:var(--live-g);color:#fff;border:0;border-radius:999px;padding:10px 20px;font-weight:600;font-size:13px;
           box-shadow:0 8px 30px rgba(115,103,247,.4);transition:transform .2s,box-shadow .2s}
#tony-chip:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(115,103,247,.55)}
#tony-chip .tdot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.6)}50%{opacity:.6;box-shadow:0 0 0 5px rgba(255,255,255,0)}}
.bubble{max-width:88%;border-radius:14px;padding:10px 13px;font-size:13px;margin-bottom:10px;line-height:1.55;overflow-wrap:anywhere}
.bubble.tony{background:rgba(115,103,247,.12);border:1px solid rgba(115,103,247,.32)}
.bubble.me{background:rgba(46,140,255,.14);border:1px solid rgba(46,140,255,.3);margin-left:auto}
.ctx-chip{display:inline-block;font-family:var(--mono);font-size:10.5px;color:#c9c2ff;
          background:rgba(115,103,247,.14);border:1px solid rgba(115,103,247,.4);border-radius:999px;
          padding:3px 11px;margin-bottom:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer{display:flex;gap:8px;flex:1}
.composer input{flex:1;background:rgba(7,17,31,.7);border:1px solid var(--line);border-radius:999px;
                padding:8px 14px;color:var(--ink);font:inherit;font-size:13px;min-width:0}
.composer button{width:34px;height:34px;border-radius:50%;background:var(--live-g);color:#fff;
                 font-size:15px;flex:none}

/* ===== toolbar de zoom ===== */
#ztools{position:fixed;right:18px;bottom:72px;z-index:70;display:flex;flex-direction:column;gap:2px;
        background:rgba(13,27,43,.92);border:1px solid var(--edge-w);border-radius:12px;padding:4px;
        box-shadow:0 8px 30px rgba(0,0,0,.4)}
#ztools button{width:32px;height:30px;border-radius:8px;color:var(--muted);font-size:15px;display:grid;place-items:center}
#ztools button:hover{background:rgba(142,174,215,.12);color:var(--ink)}

/* ===== Guia (primeira visita) ===== */
#hint{position:fixed;left:16px;bottom:16px;z-index:70;width:288px;background:rgba(13,27,43,.94);
      border:1px solid var(--edge-w);border-radius:var(--r);padding:15px 17px;box-shadow:var(--shadow)}
#hint h3{font-family:var(--display);font-size:13.5px;font-weight:700;margin-bottom:9px;display:flex;justify-content:space-between}
#hint h3 button{color:var(--faint);font-size:14px}
#hint ol{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
#hint li::before{content:"›";color:var(--accent);margin-right:7px;font-weight:700}

/* ===== Toast ===== */
#toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%) translateY(14px);z-index:220;
       background:rgba(13,27,43,.96);border:1px solid var(--line-strong);border-radius:999px;
       padding:9px 20px;font-size:12.5px;color:var(--ink);box-shadow:var(--shadow);opacity:0;
       transition:opacity .25s,transform .25s;pointer-events:none;max-width:80vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ===== Paleta de comando ⌘K ===== */
#palette{position:fixed;inset:0;z-index:210;background:rgba(4,10,19,.5);backdrop-filter:blur(6px);
         display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
#palette.on{display:flex}
#palette .box{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line-strong);
              border-radius:var(--r);box-shadow:var(--shadow),var(--glow);overflow:hidden;
              animation:pal-in .22s cubic-bezier(.22,.9,.26,1)}
@keyframes pal-in{from{transform:translateY(-14px) scale(.98);opacity:0}}
#palette input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
               padding:15px 20px;color:var(--ink);font:inherit;font-size:15px}
#palette ul{list-style:none;max-height:300px;overflow:auto;padding:7px}
#palette li{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:10px;cursor:pointer;font-size:13.5px}
#palette li .pdot{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--accent));flex:none}
#palette li .plabel{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
#palette li small{color:var(--faint);margin-left:auto;font-size:11px;flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#palette li.sel,#palette li:hover{background:var(--accent-soft)}

/* ===== abertura: a esfera É a empresa — ela vira o hub ===== */
#boot{position:fixed;inset:0;z-index:300;background:var(--deep);display:block;transition:opacity .4s ease;cursor:pointer}
#boot[hidden]{display:none}
#boot .orb{position:absolute;left:50%;top:46%;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;
      background:radial-gradient(circle at 38% 32%,#22406e 0%,#132845 34%,#0a1a30 62%,#060d1a 100%);
      box-shadow:0 0 90px rgba(46,140,255,.35),inset -26px -30px 60px rgba(0,0,0,.55),inset 8px 10px 40px rgba(83,160,255,.14);
      display:grid;place-items:center;text-align:center;
      transition:transform 1s cubic-bezier(.55,.05,.25,1),opacity .5s ease;transform-origin:center}
#boot .orb::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(142,190,255,.3);
      animation:spin 18s linear infinite}
#boot .orb b{font-family:var(--display);font-size:20px;letter-spacing:.18em;color:var(--ink)}
#boot .bl{position:absolute;left:50%;transform:translateX(-50%);bottom:12vh;font-family:var(--mono);font-size:11px;
          letter-spacing:.3em;color:var(--faint);text-transform:uppercase;animation:blink 1.6s ease-in-out infinite}

#mobile-note{position:fixed;inset:0;z-index:500;background:var(--bg);display:none;place-items:center;
             text-align:center;padding:30px}
@media (max-width:880px){#mobile-note{display:grid}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* ===== órbitas de fundo do mundo (CSP: sem style inline no HTML) ===== */
.orb-a{left:140px;top:520px;width:460px;height:460px;background:var(--accent)}
.orb-b{left:1150px;top:160px;width:400px;height:400px;background:#7367F7;opacity:.2}
.orb-c{left:1700px;top:1000px;width:440px;height:440px;background:var(--cyan);opacity:.15}
.mn-brand{justify-content:center;margin-bottom:14px}
.mn-copy{max-width:34ch;color:var(--muted)}
.mn-copy a{color:var(--accent)}
.mesa-btn{background:var(--live-g);color:#fff;border:0;font-weight:600;box-shadow:0 4px 16px rgba(115,103,247,.35)}

/* ===== marquee de seleção (Shift+arraste) ===== */
#marquee{position:fixed;border:1.5px solid #4fa0ff;background:rgba(46,140,255,.10);border-radius:8px;
         box-shadow:0 0 0 1px rgba(46,140,255,.25),0 0 24px rgba(46,140,255,.25);z-index:65;display:none;pointer-events:none}

/* ===== nó-sugestão (fantasma aceitar/rejeitar) ===== */
.node.ghost{border:1.5px dashed rgba(139,108,255,.65);
            background:linear-gradient(180deg,rgba(139,108,255,.16),rgba(13,27,43,.92));
            animation:ghostglow 2.2s ease-in-out infinite}
@keyframes ghostglow{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.4)}50%{box-shadow:0 0 26px rgba(139,108,255,.4)}}
.n-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--violet);text-transform:uppercase}
.gact{display:flex;gap:6px;margin-top:6px}
.gbtn{font-size:11.5px;font-weight:600;border-radius:999px;padding:4px 12px}
.gbtn.yes{background:var(--live-g);color:#fff;box-shadow:0 4px 14px rgba(115,103,247,.4)}
.gbtn.no{border:1px solid var(--line-strong);color:var(--muted)}
.gbtn.no:hover{color:var(--stop);border-color:var(--stop)}

/* ===== MESA — órbitas de decisão: o que precisa de você gravita ===== */
#mesa{position:fixed;inset:0;z-index:100;background:rgba(4,9,17,.82);backdrop-filter:blur(10px);
      display:none;opacity:0;transition:opacity .35s}
#mesa.on{display:block}
#mesa.vis{opacity:1}
#mesa .ring{position:absolute;border:1px dashed rgba(142,190,255,.22);border-radius:50%;
            transform:translate(-50%,-50%)}
#mesa .ring .rl{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-family:var(--mono);
                font-size:9.5px;letter-spacing:.22em;color:var(--faint);background:rgba(4,9,17,.9);
                padding:0 10px;text-transform:uppercase}
#mesa .ring.r0{border-color:rgba(126,193,247,.35)}
#mesa .center{position:absolute;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;
      display:grid;place-items:center;text-align:center;
      background:radial-gradient(circle at 38% 32%,#2a2560 0%,#141c3a 60%,#0a1226 100%);
      box-shadow:0 0 60px rgba(115,103,247,.4),inset -18px -20px 44px rgba(0,0,0,.5)}
#mesa .center::after{content:"";position:absolute;inset:-12px;border-radius:50%;
      border:1px dashed rgba(139,108,255,.45);animation:spin 20s linear infinite}
#mesa .center b{font-family:var(--display);font-size:15px;letter-spacing:.08em;display:block}
#mesa .center span{font-family:var(--mono);font-size:9px;color:#c9c2ff;letter-spacing:.14em;text-transform:uppercase}
.sat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:2px;
     background:linear-gradient(180deg,var(--card-hi),var(--card-lo));border:1px solid var(--edge-w);
     border-radius:12px;padding:8px 13px;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;
     transition:box-shadow .2s,border-color .2s;white-space:nowrap;max-width:300px;text-align:left}
.sat:hover{transform:translate(-50%,-50%) scale(1.06);border-color:var(--sc,var(--accent));
           box-shadow:0 0 0 1px var(--sc,var(--accent)),0 14px 40px rgba(0,0,0,.55);z-index:5}
.sat .s-top{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sat .s-top i{width:8px;height:8px;border-radius:50%;background:var(--sc,var(--accent));box-shadow:0 0 8px var(--sc,var(--accent));flex:none}
.sat small{font-family:var(--mono);font-size:9.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.sat.due small{color:var(--stop)}
#mesa .mesa-x{position:absolute;top:18px;right:22px;font-size:20px;color:var(--muted);z-index:6}
#mesa .mesa-x:hover{color:var(--ink)}
#mesa .mesa-note{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;
                 color:var(--muted);text-align:center;max-width:52ch}
#mesa .mesa-empty{position:absolute;left:50%;top:24%;transform:translateX(-50%);color:var(--faint);font-size:12.5px}

/* ===== célula numérica (estética de relatório da v3) ===== */
.cell-num{text-align:right;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
#hint li.done{color:var(--faint);text-decoration:line-through}
#hint li.done::before{content:"✓";color:var(--ok)}

/* ===== formulários (linguagem da v3; leitura nesta fatia) ===== */
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
             color:var(--faint);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;background:rgba(7,17,31,.7);border:1px solid var(--line);
      border-radius:10px;padding:9px 12px;color:var(--ink);font:inherit;font-size:13.5px}
.field textarea{resize:vertical;min-height:64px}
/* o que o Tony preencheu a partir da conversa: a pessoa vê de onde veio antes de enviar */
.field.pelo-tony input,.field.pelo-tony select,.field.pelo-tony textarea{border-color:var(--violet)}
.field.pelo-tony label::after{content:" · pelo Tony";color:var(--violet)}
.frow{display:flex;gap:10px}
.frow .field{flex:1}

/* ===== filtro das janelas com lista ===== */
.card-filter{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-filter input{flex:1;background:rgba(7,17,31,.7);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;color:var(--ink);font:inherit;font-size:13px;min-width:0}
.card-filter input:focus{border-color:var(--accent)}
.cf-count{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
/* Achados que NÃO estão na página aberta: o filtro passou a perguntar ao servidor em vez de
   esconder linhas, então precisa de lugar para mostrar o que veio de fora. */
.cf-amplo{margin:0 0 12px}
.cf-titulo{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 6px}
.cf-nada{font-size:12px;color:var(--faint);padding:6px 0}
/* Porta da continuação: sem ela, "a lista continua" seria promessa sem caminho. */
.cf-mais{margin-top:8px}
/* ============ motor de formulários planos ============ */
.hm-instr{font-family:var(--display);font-size:14.5px;font-weight:600;margin-bottom:10px}
.hm-correcao{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.hm-spec,.form-bloco{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.hm-spec legend,.form-bloco legend{font-family:var(--display);font-size:12px;font-weight:600;padding:0 6px}
/* O bloco do resíduo respira entre um campo e o outro: sem isso rótulo,
   leitura do agente, entrada e aviso ficam todos no mesmo nível e não se
   vê onde um campo termina (ordem do dono, 19/09/2026). */
.form-bloco{margin:0 0 14px}
.form-bloco>.sec-label:first-of-type{margin-top:2px}
.hm-forn{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0;cursor:pointer}
.hm-forn input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);flex:none}
.field .fnote{display:block;font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:4px}
.rfq-technical-evidence{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.rfq-technical-evidence[hidden]{display:none}
.rfq-technical-evidence::before{display:none}
.rfq-technical-evidence>div+div{margin-top:6px}
.field.check{flex-direction:row;align-items:center;gap:8px}
.field.check label{margin:0;flex:1}
.field.check input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex:none}
.field input[type=file]{font-size:11.5px;color:var(--muted)}
.recebimento-leitura{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;
  margin:4px 0 14px;background:rgba(7,17,31,.55)}
.recebimento-leitura>.btn{margin:8px 0}
.recebimento-leitura-status{margin:5px 0 9px}
.recebimento-leitura-resultado{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.recebimento-leitura-comparacao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.recebimento-leitura-coluna{min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 10px;
  background:rgba(13,27,43,.62)}
.recebimento-leitura-coluna>b{display:block;font-family:var(--display);font-size:12px;margin-bottom:6px}
.recebimento-leitura-linha{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6px;
  padding:4px 0;border-top:1px solid rgba(142,174,215,.08);font-size:11px;overflow-wrap:anywhere}
.recebimento-leitura-linha .k{color:var(--faint)}
.recebimento-leitura-linha .v{color:var(--ink);font-family:var(--mono)}
.recebimento-leitura-usar{align-self:flex-start}

/* ============ núcleo FLUXO: hub satélite + panorama ============ */
.node.hub-fluxo{width:136px;height:136px;border-radius:50%;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 38% 32%,#134e4c 0%,#0c2b33 58%,#0a1526 100%);
  border:1px solid rgba(40,215,210,.35);
  box-shadow:0 0 44px rgba(40,215,210,.3);padding:0;text-align:center;
  animation:fx-invite 2.4s ease-in-out infinite}
.node.hub-fluxo:hover{transform:scale(1.04);transition:transform .25s}
.node.hub-fluxo .n-top{flex-direction:column;gap:2px}
.node.hub-fluxo .n-label{font-size:15px;font-weight:700;letter-spacing:.06em;max-width:120px}
.node.hub-fluxo .n-label::after{content:""}
.node.hub-fluxo .n-chip{font-size:9px;letter-spacing:.08em;color:#7de8e4;max-width:120px;white-space:normal}
.node.hub-fluxo::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px dashed rgba(40,215,210,.4);animation:spin 20s linear infinite}
.node.hub-fluxo::before{content:"";position:absolute;left:50%;top:-70px;width:2px;height:70px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(46,140,255,.5),rgba(40,215,210,.5))}
@keyframes fx-invite{0%,100%{box-shadow:0 0 44px rgba(40,215,210,.3)}
  50%{box-shadow:0 0 0 2px rgba(40,215,210,.35),0 0 60px rgba(40,215,210,.5)}}

/* overlay */
#fluxo-view{position:fixed;inset:0;z-index:200;background:rgba(4,9,17,.88);backdrop-filter:blur(12px);
  display:none;opacity:0;transition:opacity .35s;overflow:hidden}
#fluxo-view.on{display:flex;flex-direction:column}
#fluxo-view.on:not(.vis){pointer-events:none}
#fluxo-view.vis{opacity:1}
.fx-head{display:flex;align-items:center;gap:14px;padding:16px 22px 10px;flex-wrap:wrap}
.fx-mark{width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 32%,#134e4c 0%,#0c2b33 70%);
  border:1px solid rgba(40,215,210,.4);box-shadow:0 0 16px rgba(40,215,210,.4)}
.fx-head h1{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.02em}
.fx-head .sub{color:var(--faint);font-size:11.5px}
.fx-head .sp{flex:1}
.fx-demo{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn);border:1px dashed rgba(246,185,78,.5);border-radius:999px;padding:3px 10px}
.fx-x{width:32px;height:32px;border-radius:9px;color:var(--muted);font-size:18px}
.fx-x:hover{background:var(--stop-soft);color:var(--stop)}
.fx-modes{display:flex;gap:6px;background:rgba(10,22,38,.8);border:1px solid var(--edge-w);
  border-radius:999px;padding:3px;flex-wrap:wrap}
.fx-mode{font-size:12px;font-weight:600;border-radius:999px;padding:5px 13px;color:var(--muted)}
.fx-mode.on{background:linear-gradient(135deg,#28d7d2,#2e8cff);color:#04222b}
.fx-filters{display:flex;gap:8px;padding:0 22px 14px;flex-wrap:wrap}
#fluxo-view .fchip{font-size:12px;font-weight:600;border:1px solid var(--edge-w);border-radius:999px;
  padding:5px 14px;color:var(--muted);transition:border-color .15s,color .15s,background .15s}
#fluxo-view .fchip:hover{color:var(--ink);border-color:var(--line-strong)}
#fluxo-view .fchip.on{background:linear-gradient(135deg,#28d7d2,#2e8cff);color:#04222b;border-color:transparent}
#fluxo-view .fchip .n{font-family:var(--mono);font-size:10px;opacity:.8;margin-left:5px}
.fx-body{flex:1;overflow-y:auto;padding:4px 22px 30px;scrollbar-width:thin;
  scrollbar-color:rgba(142,174,215,.3) transparent}
.fx-legend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 22px 16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.fx-legend b{color:var(--muted);font-weight:500}

/* faixa AGORA */
.beat{display:flex;align-items:center;gap:10px;margin:0 0 14px;border:1px solid var(--edge-w);
  border-radius:999px;background:rgba(10,22,38,.6);padding:7px 16px;overflow:hidden}
.beat[hidden]{display:none}
#fx-agents:empty{display:none}
.beat .bt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);flex:none}
.beat-track{flex:1;overflow:hidden;position:relative;height:20px}
#fx-beat{position:absolute;display:flex;gap:26px;white-space:nowrap;animation:fx-beat-slide 36s linear infinite}
#fx-beat span{font-size:11.5px;color:var(--muted)}
#fx-beat b{color:var(--cyan);font-weight:600}
@keyframes fx-beat-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* raia dos agentes */
#fx-agents{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.agent{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(115,103,247,.14),var(--card-lo));
  border:1px solid rgba(115,103,247,.3);border-radius:999px;padding:8px 16px;font-size:12.5px}
.agent .adot{width:9px;height:9px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px var(--violet);
  animation:fx-blink 1.8s ease-in-out infinite;flex:none}
.agent b{font-family:var(--display)}
.agent small{color:var(--muted)}
@keyframes fx-blink{0%,100%{opacity:1}50%{opacity:.5}}

/* ▦ estações */
#fx-est{display:flex;gap:12px;align-items:stretch;margin-bottom:16px;overflow-x:auto;padding-bottom:6px}
.st{flex:1;min-width:170px;background:linear-gradient(180deg,var(--card-hi),var(--card-lo));
  border:1px solid var(--edge-w);border-radius:var(--r);padding:12px 10px;transition:border-color .3s}
.st.hot{border-color:rgba(246,185,78,.5);box-shadow:0 0 24px rgba(246,185,78,.12)}
.st.crit{border-color:rgba(255,110,122,.55);box-shadow:0 0 24px rgba(255,110,122,.15)}
.st-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 4px}
.st-sym{font-size:13px}
.st-name{font-family:var(--display);font-weight:700;font-size:12px;flex:1}
.st-n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ficha{display:block;width:100%;text-align:left;background:rgba(7,17,31,.7);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;margin-bottom:8px;cursor:pointer;
  transition:transform .5s cubic-bezier(.22,.9,.26,1),opacity .4s,border-color .15s}
.ficha:hover{border-color:var(--cyan)}
.ficha .f-t{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha .f-s{font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha.warn-f .f-s{color:var(--warn)}
.ficha.stop-f .f-s{color:var(--stop)}
.ficha.voando{transform:scale(1.08);border-color:var(--cyan);box-shadow:0 0 18px rgba(40,215,210,.4)}
.st-empty{color:var(--faint);font-size:11px;text-align:center;padding:14px 4px}

/* ◉ radar */
#fx-radar{background:linear-gradient(180deg,var(--card-hi),var(--card-lo));border:1px solid var(--edge-w);
  border-radius:var(--r);padding:8px 6px 2px;margin-bottom:16px;overflow-x:auto}
#fx-radar svg{display:block;min-width:760px;width:100%}
#fx-radar:empty{display:none}
#fx-est:empty,#fx-pess:empty{display:none}
.rx-axis{font-family:var(--mono);font-size:9px;fill:#60738f}
.rx-water{stroke:rgba(246,185,78,.45);stroke-dasharray:5 6}
.rx-water-t{font-family:var(--mono);font-size:9px;fill:#f6b94e}
.rx-b{cursor:pointer}
.rx-b circle.core{transition:r .15s}
.rx-b:hover circle.core{stroke:#f2f7ff}
.rx-b .halo{animation:fx-pulse 2s ease-out infinite;transform-origin:center;transform-box:fill-box}
.rx-l{font-family:var(--sans);font-size:10px;fill:#91a4bf;pointer-events:none}

/* ☉ pessoas */
#fx-pess{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px}
.sol{position:relative;width:200px;height:190px;background:linear-gradient(180deg,var(--card-hi),var(--card-lo));
  border:1px solid var(--edge-w);border-radius:var(--r);overflow:hidden}
.sol.hot{border-color:rgba(246,185,78,.5)}
.sol.crit{border-color:rgba(255,110,122,.55)}
.sol-core{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:54px;height:54px;
  border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:13px;z-index:2;text-align:center}
.sol-core.you{background:var(--live-g);color:#fff;box-shadow:0 0 24px rgba(115,103,247,.5)}
.sol-core.int{background:var(--accent-soft);color:#9fd0ff;border:1px solid var(--line-strong)}
.sol-core.ext{background:rgba(139,108,255,.16);color:#c9c2ff;border:1px solid rgba(139,108,255,.45)}
.sol-core.agt{background:rgba(40,215,210,.14);color:#7de8e4;border:1px solid rgba(40,215,210,.45)}
.sol-ring{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  border:1px dashed rgba(142,190,255,.25);border-radius:50%}
.sat-p{position:absolute;left:50%;top:46%;width:0;height:0;z-index:3;animation:fx-orbita var(--dur) linear infinite}
@keyframes fx-orbita{from{transform:rotate(var(--a0))}to{transform:rotate(calc(var(--a0) + 360deg))}}
.sat-b{position:absolute;left:var(--r0);top:0;transform:translate(-50%,-50%);width:14px;height:14px;
  border-radius:50%;cursor:pointer;border:2px solid #07111f;animation:fx-contra var(--dur) linear infinite}
@keyframes fx-contra{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a0)))}
  to{transform:translate(-50%,-50%) rotate(calc(-360deg - var(--a0)))}}
.sol-name{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:11.5px;font-weight:600}
.sol-sub{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--mono);font-size:9px;color:var(--faint)}
.sol-n{position:absolute;right:10px;top:8px;font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ☰ trilhos */
#fx-lanes[hidden]{display:none}
.lane{background:linear-gradient(180deg,var(--card-hi),var(--card-lo));border:1px solid var(--edge-w);
  border-radius:var(--r);box-shadow:0 12px 34px rgba(0,0,0,.35);padding:14px 18px 16px;margin-bottom:14px;
  transition:border-color .2s}
.lane:hover{border-color:var(--line-strong)}
.lane.blocked{border-left:3px solid var(--warn)}
.lane.stuck{border-left:3px solid var(--stop)}
.lane.hl{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(40,215,210,.35),0 16px 44px rgba(0,0,0,.4)}
.lane-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.lane-kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.lane-title{font-family:var(--display);font-weight:600;font-size:15px}
.lane-age{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.lane-state{margin-left:auto;font-size:11px;font-weight:600;border-radius:999px;padding:2px 10px}
.lane-state.run{background:var(--ok-soft);color:var(--ok)}
.lane-state.wait{background:var(--warn-soft);color:var(--warn)}
.lane-state.stuck{background:var(--stop-soft);color:var(--stop)}
.track{position:relative;display:flex;align-items:flex-start;gap:0;margin:16px 4px 6px;overflow-x:auto;
  padding-bottom:6px;scrollbar-width:thin}
.step{position:relative;flex:1;min-width:120px;text-align:center;cursor:pointer}
.step .knot{width:14px;height:14px;border-radius:50%;margin:0 auto 7px;position:relative;z-index:2;
  background:var(--panel);border:2px solid var(--faint);transition:transform .15s}
.step:hover .knot{transform:scale(1.25)}
.step.done .knot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(46,140,255,.6)}
.step.now .knot{background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(40,215,210,.18),0 0 14px rgba(40,215,210,.7);animation:fx-pulse 1.6s ease-out infinite}
.step.wait .knot{background:var(--warn);border-color:var(--warn);
  box-shadow:0 0 0 4px rgba(246,185,78,.16),0 0 14px rgba(246,185,78,.6);animation:fx-pulse 2s ease-out infinite}
.step.stuck .knot{background:var(--stop);border-color:var(--stop);
  box-shadow:0 0 0 4px rgba(255,110,122,.16),0 0 14px rgba(255,110,122,.6);animation:fx-pulse 2s ease-out infinite}
@keyframes fx-pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.step .tube{position:absolute;top:6px;left:-50%;width:100%;height:3px;border-radius:99px;z-index:1;
  background:rgba(142,174,215,.18)}
.step:first-child .tube{display:none}
.step.done .tube,.step.now .tube,.step.wait .tube,.step.stuck .tube{
  background:linear-gradient(90deg,#345CB0,#2e8cff)}
.fx-p{position:absolute;top:4.5px;width:6px;height:6px;border-radius:50%;background:#9fd0ff;z-index:2;
  opacity:.9;box-shadow:0 0 6px rgba(159,208,255,.8);left:-50%;
  animation:fx-run var(--fxd,2s) linear var(--fxdel,0s) infinite}
.step.wait .fx-p,.step.stuck .fx-p{background:var(--warn);box-shadow:0 0 6px rgba(246,185,78,.9)}
@keyframes fx-run{from{left:-50%}to{left:50%}}
.s-label{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.step.done .s-label{color:var(--muted)}
.step.next .s-label{color:var(--faint)}
.s-sym{font-size:10px;margin-right:4px}
.s-note{font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:0 6px}
.step.now .s-note{color:var(--cyan)}
.step.wait .s-note{color:var(--warn)}
.step.stuck .s-note{color:var(--stop)}
.lane-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.who .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);
  font-size:10px;font-weight:700;background:var(--accent-soft);color:#9fd0ff;border:1px solid var(--line-strong);flex:none}
.who.ext .av{background:rgba(139,108,255,.16);color:#c9c2ff;border-color:rgba(139,108,255,.4)}
.who.agt .av{background:rgba(40,215,210,.14);color:#7de8e4;border-color:rgba(40,215,210,.45)}
.who.you .av{background:var(--live-g);color:#fff;border:0}
.lane-foot .sp{flex:1}
.lf-btn{font-size:12px;font-weight:600;border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;
  color:var(--muted);transition:all .15s}
.lf-btn:hover{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}
.lf-btn.go{background:linear-gradient(135deg,#28d7d2,#2e8cff);color:#04222b;border:0}
.lf-btn.go:hover{filter:brightness(1.1)}

/* popovers do fluxo */
.fx-pt{position:fixed;z-index:230;width:320px;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);box-shadow:var(--shadow),var(--glow);padding:14px 16px}
.fx-pt h4{font-family:var(--display);font-size:13.5px;margin-bottom:2px}
.fx-pt .pt-st{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.fx-pt .pt-st.done{color:var(--accent)}
.fx-pt .pt-st.now{color:var(--cyan)}
.fx-pt .pt-st.wait{color:var(--warn)}
.fx-pt .pt-st.stuck{color:var(--stop)}
.fx-pt .pt-st.next{color:var(--faint)}
.fx-pt dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;margin-bottom:10px}
.fx-pt dt{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);padding-top:2px}
.fx-pt dd{color:var(--ink)}
.fx-pt .pt-nota{color:var(--faint);font-size:10.5px;margin-bottom:10px}
.fx-pt .row{display:flex;justify-content:flex-end;gap:8px}
.fx-pt .open{background:linear-gradient(135deg,#28d7d2,#2e8cff);color:#04222b;border-radius:8px;
  padding:6px 13px;font-weight:600;font-size:12px}
.fx-pt .no{color:var(--faint);padding:6px 8px;font-size:12px}
.fx-att{position:fixed;z-index:230;width:300px;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);box-shadow:var(--shadow),var(--glow);padding:14px 16px;font-size:12.5px}
.fx-att h4{font-family:var(--display);font-size:13px;margin-bottom:7px}
.fx-att p{color:var(--muted);font-size:12px;margin-bottom:10px}
.fx-att .att-nota{color:var(--faint);font-size:10.5px}
.fx-att .row{display:flex;gap:8px;justify-content:flex-end}
.fx-att .ok{background:var(--live-g);color:#fff;border-radius:8px;padding:6px 13px;font-weight:600;font-size:12px}

/* ============ item-picker da solicitação de Compras ============ */
.req-picker{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;margin:10px 0;
  background:rgba(7,17,31,.55)}
.req-results{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.req-result{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font-size:12.5px;transition:border-color .15s}
.req-result:hover{border-color:var(--cyan)}
.req-result b{font-family:var(--mono);font-size:12px}
.req-usos{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.req-uso{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;cursor:pointer}
.req-uso input[type=radio]{margin-top:3px;accent-color:var(--accent)}
.req-uso small{display:block;color:var(--faint)}
.req-open{margin-top:6px}

/* ===== superfície MOBILE (fatia recebimento por foto) =====
   Com o modo mobile vivo (body.canvas-mobile, mobile.js) o aviso de
   desktop deixa de cobrir a tela: login e shell mobile assumem. Sem JS o
   note continua valendo (fallback honesto). */
body.canvas-mobile #mobile-note{display:none}
#mobile-shell{position:fixed;inset:0;z-index:350;background:var(--deep);display:flex;flex-direction:column}
.mob-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex:none}
.mob-mark{width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 32%,#22406e 0%,#132845 60%,#0a1a30 100%);
  box-shadow:0 0 12px rgba(46,140,255,.35)}
.mob-back{flex:none;min-width:44px;min-height:44px;border:1px solid var(--line-strong);border-radius:10px;
  color:var(--ink);font-size:18px;background:rgba(255,255,255,.04)}
.mob-title{flex:1;min-width:0}
.mob-title b{display:block;font-family:var(--display);font-size:16px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mob-crumb{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-sair{flex:none;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;
  color:var(--muted);font-size:12.5px;background:transparent}
#mob-corpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 40px}
/* alvos de toque e legibilidade: reaproveita as classes de forms/blocks */
#mobile-shell .row{min-height:52px;padding:12px 10px}
#mobile-shell .btn{min-height:48px;font-size:15px}
.mob-acoes{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.mob-acoes .btn{width:100%}
.mob-avisos-optin{width:100%;margin:6px 0 12px;border:1px solid var(--line-strong);
  border-radius:10px;color:var(--ink);background:var(--panel-2)}
.mob-avisos-optin:disabled{opacity:.6}
#mobile-shell .field input,#mobile-shell .field select,#mobile-shell .field textarea{
  font-size:16px;min-height:46px}
#mobile-shell .field textarea{min-height:88px}
#mobile-shell .frow{flex-direction:column;gap:0}
#mobile-shell .kv{grid-template-columns:1fr}
#mobile-shell .recebimento-leitura{padding:12px 10px}
#mobile-shell .recebimento-leitura>.btn{width:100%;min-height:48px}
#mobile-shell .recebimento-leitura-comparacao{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
#mobile-shell .recebimento-leitura-coluna{padding:8px 7px}
#mobile-shell .recebimento-leitura-linha{display:block;font-size:10.5px}
#mobile-shell .recebimento-leitura-linha .k,#mobile-shell .recebimento-leitura-linha .v{display:block}
.mob-exec{position:sticky;bottom:0;padding:12px 0 6px;margin-top:14px;
  background:linear-gradient(180deg,transparent,var(--deep) 38%)}
.mob-exec .btn{width:100%;min-height:52px;font-size:16px}
.f-nota-foto{font-size:11.5px;color:var(--faint);margin:2px 0 6px}

/* ===== Recebimento por fotos (05/09): a tela do /m embutida, em tela cheia ===== */
#recebimento-view{position:fixed;inset:0;z-index:200;background:rgba(4,9,17,.92);backdrop-filter:blur(12px);
  display:none;opacity:0;transition:opacity .35s;overflow:hidden}
#recebimento-view.on{display:flex;flex-direction:column}
#recebimento-view.on:not(.vis){pointer-events:none}
#recebimento-view.vis{opacity:1}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px 10px}
.rc-head h1{margin:0;font-size:20px}
.rc-head .sub{color:var(--muted);font-size:12px;margin-top:2px}
.rc-body{flex:1;min-height:0;padding:0 22px 18px}
.nx-recebimento{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.nx-recebimento-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.nx-recebimento-title{display:flex;align-items:baseline;gap:12px;min-width:0}
.nx-recebimento-title strong{font-size:16px}
.nx-recebimento-fatos{color:var(--muted);font-size:12px}
.nx-recebimento-link{color:var(--muted);font-size:12px;text-decoration:none;border:1px solid var(--line-strong);border-radius:8px;padding:4px 10px}
.nx-recebimento-link:hover{color:var(--ink)}
.nx-recebimento-frame{width:100%;height:100%;min-height:0;border:1px solid var(--line-strong);border-radius:14px;background:transparent}

/* ===== A FICHA LEGÍVEL =====================================================
   DONO-FALOU 16/09/2026: "quando mostrar as avaliações, as especificações do
   pedido e a cotação temos que mostrar um relatório mais bonito e organizado
   para entendermos melhor e não um monte de campos para digitar".
   Vive no canvas.css, e não no workspace.css, de propósito: o resumo é LEITURA
   e vale nas DUAS cascas — as duas usam o mesmo motor de formulários, e pôr o
   estilo só na casca nova faria a mesma ficha ficar feia numa delas. */
.resumo{margin:0 0 16px;padding:14px 16px;border:1px solid #1d3b5f;border-radius:14px;
  background:linear-gradient(180deg,rgba(18,38,66,.55),rgba(11,24,43,.55));
  /* A ficha responde à largura do CARTÃO, não à da janela. A casca nova deixa encolher o
     cartão até 320px sem mudar o viewport, e aí a regra por viewport nunca dispara: medido
     em 17/09 num Chrome — a coluna do rótulo ficava com 186px fixos e sobravam 79px para o
     VALOR, que é justamente o que a pessoa foi ler. */
  container-type:inline-size}
.resumo-titulo{margin:0 0 6px;font:600 11px/1.2 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:#8fb0d8}
/* O respiro mora ENTRE as seções, não no título: cada seção virou um bloco próprio (é ele
   que o editor ocupa quando a pessoa clica num valor), e `:first-child` passaria a valer
   para todos os títulos, colando as seções umas nas outras. */
.resumo>.resumo-secao+.resumo-secao,.resumo>.resumo-titulo{margin-top:14px}
.resumo-linhas{display:grid;grid-template-columns:minmax(186px,32%) 1fr;gap:5px 16px;margin:0}
.resumo-linhas dd.resumo-ausente{color:#6b839f;font-style:italic}
.resumo-linhas dt{color:#9cb2d0;font-size:12px;align-self:baseline}
.resumo-linhas dd{margin:0;color:#e8f1ff;font-size:13px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.resumo-linhas{grid-template-columns:1fr;gap:2px}
  .resumo-linhas dd{margin-bottom:6px}}
/* e o MESMO empilhamento quando é o cartão que é estreito, em qualquer janela */
@container (max-width:400px){.resumo-linhas{grid-template-columns:1fr;gap:2px}
  .resumo-linhas dd{margin-bottom:6px}}
/* O VALOR CLICÁVEL (DONO-FALOU 16/09 02:30): "nos campos que tem os valores
   porem ser clicaveis para poder editar". Ele continua PARECENDO o valor —
   mesma fonte, mesmo alinhamento de dígitos — com uma marca discreta de que
   aceita clique. Botão cheio no meio do relatório devolveria o "monte de
   campos" de que o dono reclamou; sem marca nenhuma, ninguém descobre o
   clique. Só a linha DECLARADA recebe a classe: o servidor decide isso.
   No celular o alvo cresce, porque é onde o dono testa. */
.resumo-edita{appearance:none;font:inherit;color:inherit;text-align:left;
  font-variant-numeric:tabular-nums;background:none;border:0;
  border-bottom:1px dashed #3f6ea6;border-radius:5px;cursor:pointer;
  position:relative;min-height:24px;padding:2px 20px 2px 5px;margin:-2px 0 -2px -5px}
.resumo-edita::after{content:"✎";position:absolute;right:4px;top:50%;line-height:1;
  transform:translateY(-50%);font-size:11px;color:#5f86b6}
.resumo-edita:hover,.resumo-edita:focus-visible{background:rgba(63,110,166,.2);
  border-bottom-color:#86b5ed;color:#fff;outline:none}
.resumo-edita:hover::after,.resumo-edita:focus-visible::after{color:#c4dcff}
.resumo-linhas dd.resumo-ausente .resumo-edita{color:#6b839f;font-style:italic}
/* O editor nasce NO LUGAR da lista, dentro da mesma ficha — nenhuma janela nova. */
.resumo-editor{margin:2px 0 8px;padding:12px 14px;border:1px solid #2d5a8c;
  border-radius:12px;background:rgba(8,18,34,.72)}
.resumo-editor .field{margin-bottom:8px}
.resumo-editor .gact{margin-top:10px}
@media (max-width:640px){.resumo-edita{min-height:32px;padding:6px 24px 6px 6px}
  /* Salvar/Cancelar do editor ficam com alvo de DEDO. O `.btn` da Mesa tem ~35px de altura,
     abaixo dos 44px de toque confortável — mudá-lo em toda a Mesa às cegas é largo demais,
     então cresce aqui, que é onde alguém digita três números no telemóvel e toca em salvar.
     A altura global do `.btn` no celular fica NOMEADA como dívida. */
  .resumo-editor .gact{gap:10px}
  .resumo-editor .gact .btn{min-height:44px;padding:11px 18px;flex:1}}

/* Fecho de ficha: pergunta apenas pelo que a pessoa alterou e ainda não confirmou. */
.rascunho-dialogo{width:min(440px,calc(100vw - 32px));max-width:none;margin:auto;padding:27px;
  border:1px solid #47719b;border-radius:18px;background:#14243a;color:#f2f7ff;
  box-shadow:0 28px 90px rgba(0,0,0,.55);z-index:500}
.rascunho-dialogo::backdrop{background:rgba(4,10,19,.78);backdrop-filter:blur(5px)}
.rascunho-dialogo h2{font:700 23px/1.2 var(--display);margin:0 0 12px}
.rascunho-dialogo p{font:400 14px/1.55 var(--sans);color:#b5c9df;margin:0 0 23px}
.rascunho-dialogo-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.rascunho-dialogo-acoes .btn{min-height:42px}
@media (max-width:640px){.rascunho-dialogo{padding:22px}
  .rascunho-dialogo-acoes .btn{flex:1;min-height:48px}}

/* A emissão pede uma escolha humana explícita; sugestão nunca nasce marcada. */
.purchase-origin-picker{min-width:0;margin:8px 0 16px;padding:14px;border:1px solid #42638a;
  border-radius:14px;background:rgba(10,25,43,.7)}
.purchase-origin-picker legend{padding:0 6px;font:700 13px var(--sans);color:#dfecff}
.purchase-origin-picker p{margin:0 0 10px;color:var(--muted);line-height:1.45}
.purchase-origin-choices{display:grid;gap:7px;margin:12px 0}
.purchase-origin-choice{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 9px;
  align-items:center;min-height:48px;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;overflow-wrap:anywhere}
.purchase-origin-choice:has(input:checked){border-color:#69a4e7;background:rgba(69,126,192,.17)}
.purchase-origin-choice input{grid-row:1 / span 2;width:18px;height:18px;accent-color:#73b1f5}
.purchase-origin-choice strong{font:600 13px/1.35 var(--sans);color:#edf5ff}
.purchase-origin-choice span{font:11px/1.35 var(--sans);color:var(--muted)}
.purchase-origin-search{display:flex;flex-wrap:wrap;gap:8px}
.purchase-origin-search input{min-width:180px;flex:1;background:rgba(7,17,31,.7);
  color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.purchase-origin-search .btn{min-height:44px}
@media (max-width:640px){.purchase-origin-search .btn{width:100%}}