/* =====================================================================
   app.css — painel real do Roy (V0)
   Base: prototipo/tokens.css + prototipo/painel-fonte/painel.src.html.
   Sem CSS inline em lugar nenhum (o servidor manda CSP).
   ===================================================================== */

/* =====================================================================
   tokens.css — Superpowers · protótipo (plataforma.html + painel.html)
   Empresa de demonstração · dados ilustrativos
   ---------------------------------------------------------------------
   COMO USAR: copie TODO este arquivo para o início do <style> de cada HTML
   (os HTML são autossuficientes). Depois disso, nenhuma cor, tamanho,
   raio, sombra ou duração escrita à mão: só var(--...).

   Fontes — no <head>, é a ÚNICA coisa externa permitida:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@500;600&family=Lora:ital,wght@1,500;1,600&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ===================================================================== */

:root{
  /* ---------- 1. Marca (superpowers.solutions — não mexer) ---------- */
  --ink:#0F1B2D;          /* texto principal, placar, achado grande */
  --ink-2:#152338;
  --ink-3:#1E2F49;        /* avatares de pessoa, «precisa da Ana» */
  --paper:#F7F5F0;        /* fundo do painel e da plataforma */
  --card:#FBFAF7;         /* cartões */
  --white:#FFFFFF;        /* balão do Roy, campos */
  --line:#DCD6C8;         /* bordas */
  --line-2:#ECE8DF;       /* divisórias internas */
  --muted:#5E6878;        /* texto secundário (5,1:1 no papel) */
  --acc:#FF5B2E;          /* gravata, botão principal (texto em --ink: 5,6:1) */
  --acc-2:#FF8A5F;        /* anel do Roy, projeção «depois» */
  --acc-text:#B8360F;     /* texto laranja no papel (5,4:1) */
  --acc-wash:#FFF1EA;     /* fundo de alerta suave, linha acesa no sistema */
  --acc-wash-2:#FFE3D6;
  --ok:#1F8A5B;           /* SÓ marcas e ícones (não passa AA como texto) */
  --ok-text:#17704A;      /* texto verde (5,6:1 no papel; branco sobre ele 6,1:1) */
  --ok-wash:#EAF5EF;
  --ok-glow:#4FC48A;

  /* ---------- 2. Sobre a tinta (placar da meta, achado grande) ---------- */
  --on-ink:#F4F1EA;       /* texto principal sobre --ink */
  --on-ink-2:#BAC4D6;     /* texto secundário sobre --ink */
  --on-ink-3:#93A3BB;     /* rótulos sobre --ink (6,7:1) */
  --ink-line:#273A5B;     /* divisórias sobre --ink */
  --ok-on-ink:#7FD6A8;    /* verde sobre --ink */
  --acc-on-ink:#FF8A5F;   /* laranja sobre --ink */
  --track-on-ink:#22385A; /* trilho vazio da meta */

  /* ---------- 3. O Roy ---------- */
  --studio:#BDBBC2;       /* cinza de estúdio das fotos */
  --studio-hi:#CCCAD0;
  --studio-lo:#B6B4BB;
  --wall:#2F3251;         /* azul do muro da foto «espiando» (faixa do achado grande) */
  --gold:#FFC24B;         /* brilhos de comemoração */
  --halo-neutro:rgba(255,138,95,.18);
  --halo-atencao:rgba(255,91,46,.34);
  --halo-feliz:rgba(255,194,75,.32);
  --halo-triste:rgba(94,104,120,.24);

  /* ---------- 4. Ritmo da meta (cor + rótulo + ícone, nunca só cor) ---------- */
  --ritmo-adiantado:var(--ok-text);   --ritmo-adiantado-bg:var(--ok-wash);
  --ritmo-no-ritmo:var(--ink);        --ritmo-no-ritmo-bg:#E9ECF1;
  --ritmo-atrasado:var(--acc-text);   --ritmo-atrasado-bg:var(--acc-wash);
  --ritmo-muito:var(--white);         --ritmo-muito-bg:var(--acc-text);
  --ritmo-batida:var(--white);        --ritmo-batida-bg:var(--ok-text);
  /* mesmas leituras sobre a tinta (trilho e chip dentro do placar) */
  --ritmo-adiantado-ink:var(--ok-on-ink);
  --ritmo-no-ritmo-ink:var(--on-ink);
  --ritmo-atrasado-ink:var(--acc-on-ink);
  --ritmo-muito-ink:var(--acc);

  /* ---------- 5. Dados (Resultados, relógio do dia) — validados no verificador de paleta ---------- */
  --viz-ganho:#1F8A5B;    /* 1.º — ganho */
  --viz-economia:#3B6FB6; /* 2.º — economizado */
  --viz-risco:#E8562A;    /* 3.º — em risco (sempre com rótulo direto) */
  --viz-grid:#E6E1D6;
  --viz-axis:#5E6878;
  --viz-achado:var(--ink);    /* nó «achado» (contorno) */
  --viz-aprovado:var(--acc);  /* nó «aprovado» */
  --viz-feito:var(--ok);      /* nó «feito» */

  /* ---------- 6. «Sistema do cliente» (frio e neutro de propósito) ---------- */
  --sys-bg:#EEF1F5;
  --sys-side:#E3E8EE;
  --sys-card:#FFFFFF;
  --sys-line:#DDE3E9;
  --sys-head:#F6F8FA;
  --sys-text:#26313F;
  --sys-muted:#66727F;
  --sys-acc:#3D6A8E;
  --sys-row-hl:#FFF3EC;   /* linha que o Roy achou (com barra --acc de 4 px) */
  --sys-row-ok:#EEF7F2;   /* linha resolvida (com barra --ok de 4 px) */
  --sys-badge:#E8EDF2;

  /* ---------- 7. Tipos ---------- */
  --f-ui:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;          /* texto, botões, logo */
  --f-disp:'Bricolage Grotesque','Poppins',system-ui,sans-serif;            /* dinheiro, números, títulos */
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;                 /* horas, códigos, rótulos, carimbos */
  --f-voice:'Lora',Georgia,serif;                                           /* a voz do Roy (itálico) */
  --f-sys:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;       /* só o sistema do cliente */

  /* ---------- 8. Escala tipográfica (px; clamp pela largura da tela) ----------
     1920 / 1440 / 390 → valor efetivo */
  --fs-hero:clamp(40px,3.2vw,64px);   /* 61 / 46 / 40  dinheiro do achado grande, número da meta */
  --fs-num:clamp(30px,2.1vw,42px);    /* 40 / 30 / 30  valor de cartão, números do placar das metas */
  --fs-h1:clamp(28px,2vw,40px);       /* 38 / 29 / 28  título de visão na plataforma */
  --fs-h2:clamp(18px,1.15vw,22px);    /* 22 / 18 / 18  frase do cartão, título de seção */
  --fs-fala:clamp(17px,1.05vw,20px);  /* 20 / 17 / 17  balão do Roy */
  --fs-body:clamp(15px,.9vw,17px);    /* 17 / 15 / 15  texto corrido (mínimo do brief: 15) */
  --fs-voz:clamp(15px,.9vw,17px);     /* Lora itálico: humor e bordão */
  --fs-btn:clamp(16px,.9vw,17px);     /* texto de botão (mínimo 16, bold) */
  --fs-detail:14px;                   /* uma linha de detalhe (cidade · produto). Nunca frase. */
  --fs-label:13px;                    /* rótulos mono, horas, carimbos */
  --fs-micro:12px;                    /* piso absoluto. Nada abaixo disto. */
  --fs-logo:25px;                     /* SUPERPOWERS. ≈ 198 px de largura (mín. 190) */
  --fs-logo-m:21px;                   /* ≈ 166 px no celular (mín. 150) */
  --lh-num:1.02;
  --lh-tight:1.2;
  --lh-body:1.45;
  --ls-label:.06em;                   /* espaçamento dos rótulos mono em CAIXA ALTA */

  /* ---------- 9. Espaço (grade de 4) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px; --s-9:64px;
  --gutter:24px;          /* lateral do painel e da plataforma */
  --gutter-m:16px;        /* lateral no celular */

  /* ---------- 10. Raios ---------- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --r-roy:32%;            /* «squircle» da moldura do Roy */

  /* ---------- 11. Sombras ---------- */
  --sh-card:0 1px 0 rgba(15,27,45,.04),0 12px 26px -18px rgba(15,27,45,.30);
  --sh-lift:0 2px 0 rgba(15,27,45,.05),0 22px 40px -22px rgba(15,27,45,.45);
  --sh-panel:-34px 0 80px -34px rgba(15,27,45,.50);
  --sh-roy:0 0 0 4px var(--white),0 0 0 5px var(--line),0 22px 34px -18px rgba(15,27,45,.55);
  --sh-btn:0 3px 0 #C8401A;   /* «degrau» do botão laranja */
  --sh-focus:0 0 0 3px var(--paper),0 0 0 6px var(--acc-text);

  /* ---------- 12. Alturas e medidas fixas ---------- */
  --h-btn:52px;           /* botão principal (mín. 48) */
  --h-btn-2:48px;         /* secundário */
  --h-tap:44px;           /* qualquer alvo de toque, inclusive «Agora não» e chips clicáveis */
  --h-chip:30px;          /* chip só de leitura */
  --h-tab:60px;
  --h-head:72px;          /* cabeçalho do painel e barra superior da plataforma */
  --h-head-m:60px;
  --h-foot:48px;          /* rodapé do painel (selo + Pergunte ao Roy) */
  --h-track:10px;         /* trilho da meta (mín. 6) */
  --h-undo:6px;           /* barra do desfazer */
  --w-btn-main:240px;     /* largura mínima do «Segure para…» */

  /* ---------- 13. Layout ---------- */
  --panel-w:max(440px,33.3333vw);   /* 640 em 1920 · 480 em 1440 · 100vw abaixo de 600 */
  --nav-w:232px;                    /* menu lateral da plataforma */
  --content-max:1400px;
  --roy:clamp(96px,7.7vw,148px);    /* Roy do palco: 148 / 111 */
  --roy-compact:88px;               /* palco compacto (altura < 960) */
  --roy-m:80px;                     /* celular */
  --face-xs:24px; --face-sm:28px; --face-md:40px; --face-lg:56px;   /* rostinhos */

  /* ---------- 14. A gravata torta (elemento-assinatura) ---------- */
  --tie-h:.2em;           /* espessura relativa à fonte do número */
  --tie-angle:-3deg;
  --tie-drop:.06em;       /* quanto desce abaixo da linha de base */
  --tie-over:.12em;       /* quanto passa das bordas do texto */
  --tie-color:var(--acc);
  --tie-done:var(--ok);   /* depois de aprovado/feito */
  --tie-muted:var(--line);/* desfeito / recusado */

  /* ---------- 15. Movimento ---------- */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-roll:cubic-bezier(.14,.78,.2,1);      /* odômetro */
  --d-1:160ms;            /* hover, foco */
  --d-2:280ms;            /* troca de estado, chip */
  --d-3:420ms;            /* entrada de cartão, troca de aba */
  --d-4:650ms;            /* painel abre/fecha, linha do sistema muda de cor */
  --d-5:900ms;            /* moedas, trilho que anda */
  --d-face:380ms;         /* troca de rosto do Roy (crossfade + mola) */
  --d-shake:420ms;        /* tremida do «uau» */
  --d-hop:520ms;          /* pulinho */
  --d-hold:800ms;         /* «Segure para executar» */
  --d-step:350ms;         /* intervalo entre passos da execução ao vivo */
  --d-count:1100ms;       /* contagem 0 → valor */
  --d-coin:980ms;         /* voo de cada moeda (+ 85 ms de escalonamento) */
  --d-stamp:260ms;        /* carimbo que bate */
  --d-breathe:4.8s;       /* respiração do Roy */
  --d-undo:30s;           /* desfazer — é regra de produto, não enfeite: NÃO zera com movimento reduzido */
  --d-type:32ms;          /* por letra na digitação */
  --d-type-pause:240ms;   /* pausa extra em . ! ? */

  /* ---------- 16. Camadas ---------- */
  --z-sys:0; --z-panel:20; --z-sheet:30; --z-fx:40; --z-modal:50; --z-demo:60; --z-help:70;
}

/* Movimento reduzido: tudo aparece pronto. O desfazer de 30 s continua (vira contagem em texto). */
@media (prefers-reduced-motion: reduce){
  :root{
    --d-1:0ms; --d-2:0ms; --d-3:0ms; --d-4:0ms; --d-5:0ms;
    --d-face:0ms; --d-shake:0ms; --d-hop:0ms; --d-hold:0ms; --d-step:0ms;
    --d-count:0ms; --d-coin:0ms; --d-stamp:0ms; --d-type:0ms; --d-type-pause:0ms;
    --d-breathe:0s;
  }
}

:root{
  --glow:rgba(255,91,46,.55);
  --glass:rgba(255,255,255,.64);
  --glass-hi:rgba(255,255,255,.86);
  --glass-line:rgba(255,255,255,.78);
  --glass-edge:rgba(15,27,45,.07);
  --panel-glass:rgba(247,245,240,.82);
  --aurora-a:rgba(255,138,95,.34);
  --aurora-b:rgba(59,111,182,.22);
  --aurora-c:rgba(255,194,75,.24);
  --roy-w:240px;               /* Roy segurando (largura da imagem) */
  --stage-h:178px;             /* palco acima da faixa da meta */
  --aba-h:18px;                /* a «aba» da faixa onde ele segura */
  --plate-h:34px;
  --roy-x:calc(var(--gutter) + 14px - var(--roy-w) * .08);
  --bub-x:calc(var(--roy-x) + var(--roy-w) * .76 + 6px);
  --list-pad:var(--gutter);
  --fs-small:15px;             /* texto pequeno de frase (rastro, condição, efeito): piso de texto corrido */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f-ui);color:var(--ink);background:var(--paper);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{display:block}
:focus-visible{outline:none;box-shadow:var(--sh-focus);border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- gravata torta ---------- */
.tie{position:relative;display:inline-block;isolation:isolate;white-space:nowrap}
.tie::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(-1*var(--tie-over));right:calc(-1*var(--tie-over));bottom:calc(-1*var(--tie-drop));height:var(--tie-h);border-radius:2px;background:var(--tie-color);transform:rotate(var(--tie-angle));transform-origin:0 50%;transition:background-color var(--d-4)}
.tie.is-done::after{background:var(--tie-done)}
.tie.is-off::after{background:var(--tie-muted)}
.tie.is-drawing::after{animation:tie-draw var(--d-3) var(--ease-out) both}
.tie.is-hidden::after{transform:rotate(var(--tie-angle)) scaleX(0)}
@keyframes tie-draw{from{transform:rotate(var(--tie-angle)) scaleX(0)}}
.money{color:var(--acc-text);font-weight:700;white-space:nowrap}

/* =================== PAINEL DO ROY =================== */
.sp{position:fixed;top:0;right:0;bottom:0;width:var(--panel-w);z-index:var(--z-panel);display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel-glass);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border-left:1px solid var(--glass-line);box-shadow:var(--sh-panel),inset 1px 0 0 rgba(255,255,255,.65);
  transition:transform var(--d-4) var(--ease-out),opacity 280ms var(--ease-out)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sp{background:var(--paper)} }
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(30px)}
.aurora i:nth-child(1){width:80%;height:38%;left:-22%;top:0;background:radial-gradient(closest-side,var(--aurora-a),transparent);animation:drift1 24s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:70%;height:42%;right:-26%;top:24%;background:radial-gradient(closest-side,var(--aurora-b),transparent);animation:drift2 28s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:90%;height:40%;left:6%;bottom:-14%;background:radial-gradient(closest-side,var(--aurora-c),transparent);animation:drift3 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18%,8%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16%,10%) scale(.9)}}
@keyframes drift3{to{transform:translate(-10%,-8%) scale(1.1)}}

/* cabeçalho */
.sp-head{flex:none;height:var(--h-head);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-4) 0 var(--gutter);position:relative;z-index:6}
.logo{font:800 var(--fs-logo)/1 var(--f-ui);letter-spacing:.01em;color:var(--ink);white-space:nowrap}
.logo span{color:var(--acc)}
.who{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);min-width:0}
.who-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink-3);color:var(--paper);display:grid;place-items:center;font:700 14px/1 var(--f-ui);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--acc-2)}
.who-t{min-width:0;margin-right:var(--s-1)}
.who-t b{display:block;font:600 15px/1.2 var(--f-ui);white-space:nowrap}
.who-t small{display:block;font:500 12px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-ic{flex:none;width:var(--h-tap);height:var(--h-tap);display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.55);text-decoration:none;color:var(--ink);transition:background-color var(--d-1),transform var(--d-1)}
.btn-ic:hover{background:var(--white)}
.btn-ic:active{transform:scale(.96)}
.btn-ic svg{width:18px;height:18px}

/* palco do Roy — NÃO cria contexto de empilhamento: o Roy passa por trás da faixa e os dedos por cima */
.stage{flex:none;position:relative;height:var(--stage-h)}
.halo{position:absolute;z-index:0;pointer-events:none;width:calc(var(--roy-w) * 1.5);height:calc(var(--roy-w) * 1.15);left:calc(var(--roy-x) + var(--roy-w) * .508 - var(--roy-w) * .75);bottom:-20px;border-radius:50%;
  background:radial-gradient(closest-side,var(--halo,var(--halo-neutro)),transparent 72%);transition:background var(--d-4);animation:halo 4.8s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.07);opacity:.85}}
.stage[data-humor="neutro"]{--halo:rgba(255,138,95,.30)}
.stage[data-humor="atencao"]{--halo:rgba(255,166,43,.50)}
.stage[data-humor="feliz"]{--halo:rgba(255,122,61,.42)}
.stage[data-humor="triste"]{--halo:var(--halo-triste)}
.roy{position:absolute;left:var(--roy-x);bottom:0;width:var(--roy-w);height:var(--stage-h);pointer-events:none}
.roy-clip{position:absolute;left:0;width:var(--roy-w);overflow:hidden}
.roy-clip.bust{z-index:1;top:0;bottom:-140px}
.roy-clip.hold{z-index:3;top:0;bottom:calc(var(--aba-h) - var(--roy-w) * .0459)}
.roy-tilt{position:absolute;inset:0;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:50% 100%;transition:transform 420ms var(--ease-out)}
.roy-breathe{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe var(--d-breathe) ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-2px) scale(1.012)}}
.hold-img{position:absolute;left:0;bottom:0;width:var(--roy-w);height:auto;transform:translateY(110%);filter:drop-shadow(0 10px 10px rgba(15,27,45,.30))}
.bust-img{position:absolute;left:calc(var(--roy-w) * .078);width:calc(var(--roy-w) * .86);height:auto;opacity:0;transform:translateY(115%);
  bottom:calc(140px + var(--aba-h) - (1 - var(--rise)) * var(--roy-w) * .86 * var(--ar));filter:drop-shadow(0 14px 16px rgba(15,27,45,.32))}
.roy.sway .bust-img.on{animation:sway 2.6s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.roy.shake .roy-tilt{animation:shake var(--d-shake) ease-in-out}
@keyframes shake{0%,100%{translate:0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}}
.roy.hop .roy-tilt{animation:hop var(--d-hop) var(--ease-spring)}
@keyframes hop{40%{translate:0 -10px}}
.burst{position:absolute;z-index:4;pointer-events:none;left:calc(var(--roy-x) + var(--roy-w) * .508 - 60px);bottom:calc(var(--aba-h) + var(--roy-w) * .2 - 60px);width:120px;height:120px;border-radius:50%;border:3px solid var(--acc);opacity:0}
.burst.go{animation:burst 600ms ease-out}
@keyframes burst{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.spark{position:absolute;z-index:4;pointer-events:none;width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0}
.spark.go{animation:spark 700ms var(--ease-out) forwards}
@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.15) rotate(30deg)}100%{opacity:0;transform:translateY(-20px) scale(.5) rotate(90deg)}}

.bubble{position:absolute;z-index:3;left:var(--bub-x);right:var(--gutter);bottom:28px;min-height:58px;
  background:var(--glass-hi);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-line);box-shadow:0 0 0 1px var(--glass-edge),0 18px 34px -22px rgba(15,27,45,.5),inset 0 1px 0 #fff;
  border-radius:var(--r-lg);padding:14px 18px;font:600 var(--fs-fala)/1.36 var(--f-ui);color:var(--ink)}
.bubble::before{content:"";position:absolute;left:-8px;bottom:22px;width:15px;height:15px;background:rgba(255,255,255,.93);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);border-radius:0 0 0 4px}
/* o balão só entra junto com os três pontinhos (nada de balão branco vazio na abertura) */
.bubble{transform-origin:0 100%;transition:opacity 240ms var(--ease-out),transform 300ms var(--ease-spring)}
.bubble.is-empty{opacity:0;transform:scale(.96);transition-duration:120ms}
.bubble .money{white-space:nowrap}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--acc);margin-left:2px;vertical-align:-.16em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dots{display:inline-flex;gap:6px;padding:.45em 0}
.dots i{width:8px;height:8px;border-radius:50%;background:#A3AAB5;animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:1}0%,100%{opacity:.5}}
.measure{position:absolute;visibility:hidden;pointer-events:none;left:-9999px;top:0}
.plate{position:absolute;z-index:3;top:12px;left:var(--bub-x);right:var(--gutter);display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden}
.plate b{font:600 13px/1 var(--f-mono);letter-spacing:.12em}
.plate .bar{flex:none;width:26px;height:6px;border-radius:2px;background:var(--acc);transform:rotate(var(--tie-angle))}
.plate i{font:italic 500 15px/1.3 var(--f-voice);color:var(--muted);overflow:hidden;text-overflow:ellipsis}

/* faixa da meta (tinta) — o Roy segura a «aba» */
.meta{flex:none;position:relative;z-index:2;margin:0 var(--gutter);background:linear-gradient(180deg,#13223A 0%,var(--ink) 38%);color:var(--on-ink);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5) var(--s-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 26px 40px -26px rgba(15,27,45,.7);transition:box-shadow var(--d-4)}
.meta.glow{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 3px rgba(79,196,138,.45),0 0 44px -6px rgba(79,196,138,.55)}
.aba{position:absolute;left:14px;top:calc(-1 * var(--aba-h) + 1px);width:calc(var(--roy-w) * .84);height:var(--aba-h);fill:#13223A;overflow:visible}
.aba .shine{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
.mt-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;min-height:30px}
.mt-lab{font:600 var(--fs-label)/1.25 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-ink-3)}
.mt-num{display:flex;align-items:baseline;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin-top:var(--s-2)}
.mt-num .big{font:800 var(--fs-hero)/1 var(--f-disp);font-variant-numeric:tabular-nums;letter-spacing:-.02em;filter:drop-shadow(0 0 16px rgba(255,91,46,.30));white-space:nowrap}
.mt-num .big.prev{color:var(--acc-2)}
.mt-num .of{font:700 22px/1 var(--f-disp);color:var(--on-ink-2);white-space:nowrap}
.mt-num .should{margin-left:auto;font:500 15px/1.3 var(--f-ui);color:var(--on-ink-2);text-align:right}
.mt-num .should b{color:var(--on-ink);font-weight:700;white-space:nowrap}
.trk-wrap{display:flex;align-items:center;gap:var(--s-3);margin:22px 0 24px}
.trk{position:relative;flex:1;height:var(--h-track);border-radius:var(--r-pill);background:var(--track-on-ink)}
.trk .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);background:var(--rc,var(--on-ink));transition:width var(--d-5) var(--ease-out),background-color var(--d-4);box-shadow:0 0 14px -2px var(--rc,transparent)}
.trk .proj{position:absolute;top:0;bottom:0;border-radius:var(--r-pill);background:repeating-linear-gradient(-45deg,var(--acc-2) 0 6px,rgba(255,138,95,.25) 6px 11px);transition:left var(--d-5),width var(--d-5),opacity var(--d-3)}
.trk .proj.is-prev{background:transparent;border:2px dashed var(--acc-2)}
.trk .proj.hot{animation:projhot 900ms ease-in-out infinite}
@keyframes projhot{50%{filter:brightness(1.35)}}
.trk .proj-l{position:absolute;top:calc(100% + 6px);transform:translateX(-50%);font:600 12px/1 var(--f-mono);color:var(--acc-on-ink);white-space:nowrap}
.trk .tick{position:absolute;top:-6px;width:2px;height:22px;background:var(--on-ink);border-radius:1px;transform:translateX(-1px);transition:left var(--d-5)}
.trk .now{position:absolute;bottom:calc(100% + 9px);transform:translateX(-50%);font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);color:var(--on-ink);white-space:nowrap;transition:left var(--d-5)}
.trk .now::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-6px;height:4px;background:var(--acc);transform:rotate(var(--tie-angle));border-radius:2px}
.trk .dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid var(--ink);background:var(--rc,var(--on-ink));box-shadow:0 0 0 2px var(--rc,var(--on-ink)),0 0 16px var(--rc,transparent);transition:left var(--d-5)}
.trk .up{position:absolute;bottom:calc(100% + 9px);transform:translateX(-50%);font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);color:var(--acc-on-ink);white-space:nowrap}
.trk .goal{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--on-ink-2);transform:translateX(-1px)}
.trk .lab{position:absolute;top:calc(100% + 6px);font:600 12px/1 var(--f-mono);color:var(--on-ink-3);white-space:nowrap}
.trk .lab.c{transform:translateX(-50%);color:var(--on-ink-2)}
.trk-flag{flex:none;font:600 13px/1 var(--f-mono);color:var(--on-ink-2);white-space:nowrap}
.razao{font:500 15px/1.4 var(--f-ui);color:var(--on-ink-2);min-height:1.4em}
/* «Ver a ação →»: botão terciário no fim da razão (mesmo componente da plataforma) */
.ver-acao{display:inline-flex;align-items:center;gap:6px;height:var(--h-tap);margin:-12px 0 -12px 2px;padding:0 var(--s-2);border:0;border-radius:var(--r-sm);background:transparent;color:var(--acc-on-ink);font:700 15px/1 var(--f-ui);white-space:nowrap;vertical-align:middle;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;transition:background-color var(--d-1),transform var(--d-1)}
.ver-acao:hover{background:rgba(255,255,255,.10)}
.ver-acao:active{transform:scale(.97)}
.mt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);border-top:1px solid var(--ink-line);margin-top:var(--s-3);padding-top:var(--s-2)}
.money-line{display:flex;flex-wrap:wrap;gap:2px var(--s-5);align-items:baseline;flex:1;min-width:0}
.money-line div{display:flex;align-items:baseline;gap:var(--s-2);white-space:nowrap}
.money-line div > span{font:500 14px/1.3 var(--f-ui);color:var(--on-ink-2)}
.money-line b{font:700 22px/1 var(--f-disp);color:var(--on-ink);font-variant-numeric:tabular-nums;display:inline-block;transition:transform 180ms var(--ease-spring)}
.money-line b.bump{transform:scale(1.08);color:var(--ok-on-ink)}
.sec-ind{display:flex;flex-wrap:wrap;gap:var(--s-2);flex-basis:100%}
.sec-more{display:none;height:var(--h-tap);min-height:var(--h-tap);min-width:var(--h-tap);align-items:center;justify-content:center;align-self:flex-end;background:none;border:0;padding:0;margin:-7px 0 -7px auto}
.mt-top #mtChip{flex:none}
/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--h-chip);padding:0 var(--s-3);border-radius:var(--r-pill);font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.chip .ci{font-family:var(--f-ui);font-size:12px;line-height:1}
.c-adiantado{color:var(--ritmo-adiantado);background:var(--ritmo-adiantado-bg)}
.c-no-ritmo{color:var(--ritmo-no-ritmo);background:var(--ritmo-no-ritmo-bg)}
.c-atrasado{color:var(--ritmo-atrasado);background:var(--ritmo-atrasado-bg)}
.c-muito-atrasado{color:var(--ritmo-muito);background:var(--ritmo-muito-bg)}
.c-meta-batida{color:var(--ritmo-batida);background:var(--ritmo-batida-bg)}
.c-novo{color:var(--ink);background:var(--acc)}
.c-esperando{color:var(--acc-text);background:var(--acc-wash)}
.c-esfriando{color:var(--acc-text);border:1.5px dashed var(--acc-2);background:rgba(255,255,255,.4)}
.c-ana{color:var(--paper);background:var(--ink-3)}
.c-exec{color:var(--on-ink);background:var(--ink)}
.c-feito{color:var(--ok-text);background:var(--ok-wash)}
.c-previsto{color:var(--muted);border:1.5px dashed var(--line)}
.c-desfeito{color:var(--muted);background:var(--line-2)}
.c-perdido{color:var(--muted);background:var(--line-2)}
.c-vendido{color:var(--white);background:var(--ok-text)}
.on-ink .chip{background:transparent;border:1px solid currentColor}
.on-ink .c-adiantado{color:var(--ritmo-adiantado-ink)} .on-ink .c-no-ritmo{color:var(--ritmo-no-ritmo-ink)}
.on-ink .c-atrasado{color:var(--ritmo-atrasado-ink)} .on-ink .c-muito-atrasado{color:var(--ritmo-muito-ink)}
.on-ink .c-meta-batida{color:var(--ink);background:var(--ok-on-ink);border-color:var(--ok-on-ink)}
.on-ink .c-previsto{color:var(--acc-on-ink);border:1px dashed var(--acc-on-ink)}

/* abas */
.tabs-wrap{flex:none;position:relative;z-index:5}
.strip{display:none}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s-3);border-bottom:1px solid var(--line)}
.tab{height:var(--h-tab);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 var(--s-3);text-align:left;background:transparent;border:0;color:var(--muted);min-width:0;border-radius:var(--r-sm) var(--r-sm) 0 0;transition:color var(--d-1),background-color var(--d-1)}
.tab:first-child{padding-left:var(--gutter)}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.35)}
.tab .tn{display:flex;align-items:center;gap:var(--s-2);font:600 17px/1 var(--f-ui);white-space:nowrap}
.tab .tn em{font-style:normal;font:600 13px/1 var(--f-mono);background:var(--line-2);color:var(--ink);border-radius:var(--r-pill);padding:4px 8px;transition:transform var(--d-2) var(--ease-spring)}
.tab .tn em.old{background:var(--acc-wash);color:var(--acc-text)}
.tab .tn em.bump{transform:scale(1.3)}
.tab .tm{font:500 13px/1 var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab.on{color:var(--ink)}
.tab .tn span{position:relative;isolation:isolate}
.tab.on .tn span::after{content:"";position:absolute;z-index:-1;left:-4px;right:-4px;bottom:-6px;height:5px;border-radius:2px;background:var(--acc);transform:rotate(var(--tie-angle))}

/* lista */
.list{flex:1;min-height:0;position:relative;overflow-y:auto;overflow-x:hidden;padding:var(--s-4) var(--list-pad) var(--s-7);overscroll-behavior:contain;scroll-behavior:auto}
/* colunas minmax(0,1fr): nenhum cartão fica mais largo que a lista (a borda em foco não é cortada à direita) */
.list-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
.item{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;min-width:0;transition:grid-template-rows var(--d-4) var(--ease-out),opacity var(--d-3)}
.item > .item-in{min-height:0;min-width:0}
.item.leaving{grid-template-rows:0fr;opacity:0}
.item.leaving > .item-in{overflow:hidden}
.item.arrive{animation:arrive var(--d-3) var(--ease-out) both}
@keyframes arrive{from{opacity:0;transform:translateY(16px)}}
.kick{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);min-height:30px;flex-wrap:wrap}
.kick .k{font:500 13px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.kick .code{margin-left:auto;font:600 12px/1 var(--f-mono);background:var(--line-2);border-radius:var(--r-xs);padding:6px 8px;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.face{flex:none;display:inline-block;border-radius:50%;background-color:#E9E4DA;background-repeat:no-repeat;background-image:radial-gradient(circle at 50% 35%,#fff,#E4DED2);box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--line)}
.face-in{display:block;width:100%;height:100%;border-radius:50%;background-repeat:no-repeat}
.card{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--glass-edge),var(--sh-card),inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow var(--d-3),border-color var(--d-3),background-color var(--d-4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .card{background:var(--card)} }
.card .in{padding:var(--s-5) var(--s-6)}
.item.is-focus .card{box-shadow:0 0 0 2px var(--acc),var(--sh-lift),0 0 34px -10px var(--glow)}
.card.shine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;animation:shine 1.3s var(--ease-out) .25s both}
@keyframes shine{to{background-position:-60% 0}}
.c-title{font:600 var(--fs-h2)/1.3 var(--f-ui)}
.c-val{display:flex;align-items:baseline;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin:var(--s-3) 0 var(--s-2);min-height:calc(var(--fs-num) + 8px);position:relative;padding-right:0}
.c-val .v{font:800 var(--fs-num)/1.02 var(--f-disp);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.c-val small{font:500 15px/1.3 var(--f-ui);color:var(--muted)}
.slot{margin-left:auto;align-self:center}
.bigstamp{display:inline-grid;place-items:center;gap:3px;padding:7px 12px;border:3px double var(--acc-text);border-radius:8px;color:var(--acc-text);transform:rotate(-6deg);font:600 14px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.72);white-space:nowrap}
.bigstamp small{font-size:12px;letter-spacing:.08em}
.bigstamp.ana{border-color:var(--ink-3);color:var(--ink-3)}
.bigstamp.hit{animation:stamp var(--d-stamp) var(--ease-spring) both}
@keyframes stamp{from{opacity:0;transform:rotate(-6deg) scale(1.6)}}
.card.thud{animation:thud 220ms ease-out}
@keyframes thud{30%{translate:0 2px}60%{translate:0 -1px}}
.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--d-4) var(--ease-out),opacity var(--d-3)}
.fold-in{min-height:0;overflow:hidden}
.c-list{list-style:none;border-top:1px solid var(--line-2);margin:var(--s-3) 0}
.c-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);padding:var(--s-2) 0;border-bottom:1px dashed var(--line);transition:background-color var(--d-4)}
.c-list b{font:500 15px/1.3 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-list small{grid-column:1;font:400 var(--fs-detail)/1.3 var(--f-ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-list em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;font:700 16px/1 var(--f-disp);font-variant-numeric:tabular-nums}
.c-list li.lit{background:linear-gradient(90deg,rgba(255,91,46,.12),transparent)}
.c-list .more b{color:var(--muted)}
.rows{display:grid;gap:var(--s-2);margin:var(--s-3) 0}
.rows > div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:var(--s-3);align-items:baseline}
.rows dt{font:600 13px/1.4 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.rows dd{font:400 var(--fs-body)/var(--lh-body) var(--f-ui)}
.rows dd b{font-weight:700}
.rows .ef{display:block}
.rows .ef small{display:block;font:400 var(--fs-small)/1.4 var(--f-ui);color:var(--muted)}
.rows .adj{display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ok-text);background:var(--ok-wash);border-radius:var(--r-pill);padding:5px 9px}
.alc{display:flex;align-items:center;gap:var(--s-2);font:500 15px/1.35 var(--f-ui);color:var(--ink-3);margin:var(--s-2) 0}
.voz{font:italic 500 var(--fs-voz)/1.45 var(--f-voice);color:var(--muted);margin:var(--s-2) 0 var(--s-3)}
.sub{list-style:none;display:grid;gap:4px;margin:var(--s-3) 0}
.chk{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-tap);padding:6px var(--s-2);border-radius:var(--r-md);cursor:pointer;transition:background-color var(--d-1)}
.chk:hover{background:rgba(255,255,255,.6)}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--ink);display:grid;place-items:center;background:var(--white);transition:background-color var(--d-1)}
.chk .box::after{content:"";width:12px;height:7px;border-left:3px solid var(--white);border-bottom:3px solid var(--white);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.chk input:checked + .box{background:var(--ink)}
.chk input:checked + .box::after{opacity:1}
.chk input:focus-visible + .box{box-shadow:var(--sh-focus)}
.chk .t{flex:1;font:400 15px/1.35 var(--f-ui)}
.chk em{display:inline-flex;width:100%;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:2px;font-style:normal;font:700 15px/1.25 var(--f-disp)}
.chk em small{font:400 var(--fs-small)/1.3 var(--f-ui);color:var(--muted)}
.chk.off em{opacity:.5}
.chk.off .t{color:var(--muted);text-decoration:line-through}
.choices{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-2) 0 var(--s-3)}
.choices p{width:100%;font:600 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.cb{min-height:var(--h-tap);padding:0 var(--s-4);border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--white);font:600 15px/1.2 var(--f-ui);transition:background-color var(--d-1),color var(--d-1),transform var(--d-1)}
.cb:hover{background:var(--acc-wash)}
.cb:active,.cb.press{transform:scale(.96)}
.cb.sel{background:var(--ink);color:var(--on-ink)}
.preview{list-style:none;margin:var(--s-2) 0 var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:rgba(255,255,255,.6);border:1px dashed var(--line);display:grid;gap:4px}
.preview li{font:400 15px/1.35 var(--f-ui)}
.preview li::before{content:"→ ";color:var(--acc-text);font-weight:700}
/* ações */
.acts{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.acts-2{display:flex;gap:var(--s-2)}
.acts-2 > *{flex:1}
.wide .acts{grid-template-columns:auto 1fr;align-items:center}
.wide .acts-2{justify-content:flex-start}
.wide .acts-2 > *{flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);border-radius:var(--r-md);font:700 var(--fs-btn)/1.1 var(--f-ui);white-space:nowrap;border:0;text-decoration:none;transition:transform var(--d-1) var(--ease-out),box-shadow var(--d-1),background-color var(--d-2),color var(--d-2)}
.btn-main{position:relative;height:var(--h-btn);min-width:var(--w-btn-main);padding:0 var(--s-6) 0 var(--s-4);background:var(--acc);color:var(--ink);box-shadow:var(--sh-btn),0 10px 22px -12px var(--glow);user-select:none;-webkit-user-select:none;touch-action:none;width:100%}
.btn-main:hover{background:#FF6A41}
.btn-main.is-pressing{transform:translateY(2px);box-shadow:0 0 0 4px rgba(255,91,46,.25),0 0 30px -4px var(--glow)}
.btn-main.is-running{background:var(--ink);color:var(--on-ink);box-shadow:none}
.btn-main.is-done{background:var(--ok-text);color:var(--white);box-shadow:none}
.btn-main.pulse{animation:pulse 1.1s ease-in-out 2}
@keyframes pulse{50%{box-shadow:var(--sh-btn),0 0 0 8px rgba(255,91,46,.18),0 0 34px -2px var(--glow)}}
.ring{width:26px;height:26px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .r-bg{stroke:rgba(15,27,45,.28)}
.ring .r-fg{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:62.83;stroke-dashoffset:62.83}
.btn-main.is-pressing .ring{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
.btn-main.is-running .ring .r-bg,.btn-main.is-done .ring .r-bg{stroke:rgba(255,255,255,.3)}
.btn-main.is-running .ring .r-fg,.btn-main.is-done .ring .r-fg{stroke:var(--white);stroke-dashoffset:0}
.btn-2{height:var(--h-btn-2);padding:0 var(--s-5);background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}
.btn-2:hover{background:var(--acc-wash)}
.btn-3{height:var(--h-tap);padding:0 var(--s-3);background:transparent;color:var(--muted);font-weight:600;font-size:16px}
.btn-3:hover{color:var(--ink);text-decoration:underline}
.btn-2:active,.btn-3:active{transform:scale(.97)}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font:600 16px/1.3 var(--f-ui)}
.confirm .btn{height:48px;padding:0 var(--s-4)}
.confirm .yes{background:var(--acc);color:var(--ink)}
.hint{font:500 var(--fs-small)/1.35 var(--f-ui);color:var(--acc-text)}
/* execução ao vivo e rastro */
.exec{list-style:none;margin-top:var(--s-3);display:grid;gap:6px}
.exec li{display:flex;gap:var(--s-3);align-items:baseline;font:400 15px/1.35 var(--f-ui)}
.exec.live li{animation:rise var(--d-3) var(--ease-out) both}   /* só na execução ao vivo: redesenhar o recibo não pisca */
.exec li time{flex:none;font:600 13px/1 var(--f-mono);color:var(--muted)}
.exec li::before{content:"✓";color:var(--ok-text);font-weight:700}
.exec li.ready{color:var(--ok-text);font-weight:700}
.exec li.wait::before{content:"↑";color:var(--ink-3)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.stamps{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s-2);margin-top:var(--s-3)}
.stamp{font:600 13px/1 var(--f-mono);letter-spacing:.03em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:var(--r-xs);padding:5px 8px;white-space:nowrap}
.stamp.a{color:var(--ink)} .stamp.p{color:var(--acc-text)} .stamp.f{color:var(--ok-text);background:var(--white)} .stamp.w{color:var(--ink-3);border-style:dashed}
.gap{font:500 13px/1 var(--f-mono);color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.gap::before,.gap::after{content:"";width:8px;height:1px;background:var(--muted)}
.rastro{font:400 var(--fs-small)/1.4 var(--f-ui);color:var(--muted);margin-top:var(--s-3)}
.undo{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2)}
.undo .ub{flex:1;height:var(--h-undo);border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.undo .ub i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;animation:undo 30s linear both}
@keyframes undo{to{transform:scaleX(0)}}
/* um filho só: o sublinhado corre inteiro («Desfazer · 23 s») */
.undo .btn-3{gap:0;padding:0 var(--s-2);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.undo .btn-3 b{font-weight:700;font-variant-numeric:tabular-nums}
.logged{font:600 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ok-text);margin-top:var(--s-2)}
.card.recibo{background:rgba(234,245,239,.82);box-shadow:0 0 0 2px var(--ok),var(--sh-card)}
.item.is-focus .card.recibo{box-shadow:0 0 0 2px var(--ok),var(--sh-lift)}
.card.recibo .c-val .v.tie::after{background:var(--tie-done)}
.card.done-mode .fold{grid-template-rows:0fr;opacity:0}
.card.done-mode .acts{display:none}
.memo-line{font:italic 500 var(--fs-voz)/1.45 var(--f-voice);color:var(--ok-text);margin-top:var(--s-3)}
/* variantes */
.card.big{background:linear-gradient(180deg,#13223A,var(--ink) 30%);color:var(--on-ink);border:0;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 26px 44px -24px rgba(15,27,45,.8);overflow:hidden}
.item.is-focus .card.big{box-shadow:0 0 0 2px var(--acc),0 26px 44px -22px rgba(15,27,45,.8),0 0 40px -8px var(--glow)}
.card.big .wall{display:block;height:10px;background:var(--wall)}
.card.big .c-val .v{font-size:var(--fs-hero);text-shadow:0 0 30px rgba(255,91,46,.35)}
.card.big .c-val small,.card.big .c-list small,.card.big .rows dt,.card.big .rows .ef small{color:var(--on-ink-3)}
.card.big .c-list{border-color:var(--ink-line)}
.card.big .c-list li{border-color:var(--ink-line)}
.card.big .c-list .more b{color:var(--on-ink-2)}
.card.big .c-list li.lit{background:linear-gradient(90deg,rgba(255,91,46,.22),transparent)}
.card.big .voz{color:var(--on-ink-2)}
.card.big .btn-2{background:transparent;color:var(--on-ink);border-color:var(--on-ink-2)}
.card.big .btn-2:hover{background:rgba(255,255,255,.08)}
.card.big .btn-3{color:var(--on-ink-2)}
.card.big .cb{background:transparent;color:var(--on-ink);border-color:var(--on-ink-2)}
.card.big .cb.sel{background:var(--on-ink);color:var(--ink)}
.card.big .preview{background:rgba(255,255,255,.06);border-color:var(--ink-line)}
.card.big .exec li time,.card.big .rastro{color:var(--on-ink-3)}
.card.big .exec li::before,.card.big .exec li.ready{color:var(--ok-on-ink)}
.card.big .money{color:var(--acc-on-ink)}
.card.big .chk .box{border-color:var(--on-ink);background:transparent}
.card.big .head-k{display:flex;align-items:center;gap:var(--s-2);font:600 13px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-ink-3);margin-bottom:var(--s-2)}
.card.big.recibo{background:rgba(234,245,239,.9);color:var(--ink);box-shadow:0 0 0 2px var(--ok),var(--sh-card)}
.card.big.recibo .wall{background:var(--ok)}
.item.is-focus .card.big.recibo{box-shadow:0 0 0 2px var(--ok),var(--sh-lift)}
.card.big.recibo .head-k,.card.big.recibo .c-val small,.card.big.recibo .exec li time,.card.big.recibo .rastro{color:var(--muted)}
.card.big.recibo .exec li::before,.card.big.recibo .exec li.ready{color:var(--ok-text)}
.card.big.recibo .c-val .v{text-shadow:none}
/* recibo sobre o verde-claro: nada das cores feitas para a tinta */
.card.big.recibo .btn-3,.card.recibo .undo .btn-3{color:var(--ink)}
.card.big.recibo .money{color:var(--acc-text)}
.card.big.recibo .memo-line{color:var(--ok-text)}
/* carimbo ao lado do valor, sem linha própria (o valor e o rótulo quebram à esquerda dele) */
.card.recibo .c-val{min-height:0;padding-right:150px}
.card.recibo .slot{position:absolute;z-index:2;right:4px;top:50%;margin:0;translate:0 -50%}
.card.pend{border-left:3px dashed var(--acc-2)}
.card.perda .c-val .v.tie::after{background:var(--tie-muted)}
.card.perda .c-val .v{color:var(--muted)}
.refused{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px dashed var(--line);font:500 15px/1.35 var(--f-ui);color:var(--muted);background:rgba(255,255,255,.5)}
.refused b{color:var(--ink);font-weight:600}
.refused .btn-3{margin-left:auto;color:var(--ink);text-decoration:underline}
/* bilhete de pendências */
.bilhete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(255,241,234,.9),rgba(255,255,255,.7));border:1.5px dashed var(--acc-2);box-shadow:var(--sh-card)}
.bilhete.is-focus{box-shadow:0 0 0 2px var(--acc),var(--sh-lift),0 0 34px -10px var(--glow);border-color:transparent}
.bilhete p{font:600 var(--fs-fala)/1.35 var(--f-ui)}
.bilhete small{display:block;font:500 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--acc-text);margin-top:4px}
.bilhete .acts,.bilhete .b-exec{grid-column:1 / -1}
.bilhete .acts{margin-top:0}
.pendline{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--h-tap);padding:6px var(--s-3) 6px 6px;border-radius:var(--r-pill);border:1.5px dashed var(--acc-2);background:rgba(255,241,234,.75);text-align:left;font:600 15px/1.3 var(--f-ui);color:var(--ink);transition:background-color var(--d-1)}
.pendline:hover{background:var(--acc-wash-2)}
.pendline .pt{flex:1;min-width:0}
.pendline em{font-style:normal;font:600 13px/1 var(--f-mono);color:var(--acc-text);white-space:nowrap}
/* resumo do dia */
.resumo{padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(234,245,239,.85));border:1px solid var(--glass-line);box-shadow:0 0 0 2px var(--ok),var(--sh-lift)}
.resumo h3{display:flex;align-items:center;gap:var(--s-3);font:600 13px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ok-text)}
.resumo ul{list-style:none;display:grid;gap:8px;margin-top:var(--s-3)}
.resumo li{display:flex;gap:var(--s-3);font:600 17px/1.35 var(--f-ui)}
.resumo li::before{content:"✓";color:var(--ok-text)}
/* feito */
.feito{list-style:none;display:grid;gap:var(--s-3)}
.frow{padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 0 0 1px var(--glass-edge),var(--sh-card)}
.frow.new{animation:flashok 2.4s ease-out}
@keyframes flashok{0%,30%{background:#DDF0E5}}
.frow .stamps{margin-top:0}
.frow p{font:600 16px/1.35 var(--f-ui);margin-top:var(--s-3)}
.frow .fv{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin-top:var(--s-2)}
.frow .fv b{font:800 24px/1.1 var(--f-disp);font-variant-numeric:tabular-nums}
.frow .fv small{font:500 var(--fs-small)/1.35 var(--f-ui);color:var(--muted)}
.frow .fr{display:block;font:500 var(--fs-small)/1.4 var(--f-ui);color:var(--ok-text);margin-top:4px}
.secttl{font:600 13px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin:var(--s-2) 0 calc(-1 * var(--s-2))}
/* vazio */
.vazio{display:grid;justify-items:center;text-align:center;gap:var(--s-3);padding:var(--s-6) var(--s-4)}
.vazio img{width:120px;height:auto;filter:drop-shadow(0 14px 14px rgba(15,27,45,.25))}
.vazio p{font:600 var(--fs-fala)/1.35 var(--f-ui);max-width:30ch}
.vazio small{font:500 15px/1.35 var(--f-ui);color:var(--muted)}
.roy-over{display:none}   /* só no celular (ver @media abaixo) */

/* rodapé */
.p-foot{flex:none;position:relative;z-index:8;height:var(--h-foot);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-3) 0 var(--gutter);border-top:1px solid var(--line);background:rgba(247,245,240,.92)}
.selo{display:inline-flex;align-items:center;gap:var(--s-2);font:500 13px/1.25 var(--f-ui);color:var(--muted);min-width:0}
.selo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}
.memo{font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-left:auto;position:relative}
.memo .plus{position:absolute;right:0;top:-18px;color:var(--ok-text);font-weight:700;opacity:0}
.memo .plus.go{animation:plus 1.4s var(--ease-out)}
@keyframes plus{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.ask{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-tap);padding:0 var(--s-4) 0 var(--s-2);border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--white);font:600 15px/1 var(--f-ui);white-space:nowrap;transition:background-color var(--d-1),transform var(--d-1)}
.memo + .ask{margin-left:0}
.ask:hover{background:var(--acc-wash)}
.ask:active{transform:scale(.97)}
.ask .l-short{display:none}

/* aviso da Memória */
.toast{position:absolute;z-index:9;left:var(--gutter);right:var(--gutter);bottom:calc(var(--h-foot) + 12px);background:var(--ink);color:var(--on-ink);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);display:grid;gap:4px;
  box-shadow:0 22px 40px -18px rgba(15,27,45,.8);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform var(--d-3) var(--ease-out),opacity var(--d-3)}
.toast.on{transform:none;opacity:1}
.toast b{font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--acc-on-ink)}
.toast b span{color:var(--ok-on-ink);margin-left:8px}
.toast p{font:500 15px/1.4 var(--f-ui)}

/* Pergunte ao Roy (folha) */
/* a folha termina acima do rodapé: o selo continua à vista com ela aberta */
.sheet{position:absolute;z-index:var(--z-sheet);left:0;right:0;bottom:var(--h-foot);height:calc(62% - var(--h-foot));display:flex;flex-direction:column;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:rgba(251,250,247,.9);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border-top:1px solid var(--glass-line);box-shadow:0 -24px 60px -24px rgba(15,27,45,.55),inset 0 1px 0 #fff;
  transform:translateY(105%);transition:transform var(--d-4) var(--ease-out);visibility:hidden}
.sheet.on{transform:none;visibility:visible}
.sh-head{flex:none;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-2) var(--gutter)}
.sh-head b{font:700 18px/1.2 var(--f-ui)}
.sh-head .btn-ic{margin-left:auto}
.sh-grab{position:absolute;left:50%;top:8px;width:44px;height:5px;border-radius:3px;background:var(--line);transform:translateX(-50%)}
.sh-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-2) var(--gutter) var(--s-4);display:grid;align-content:start;gap:var(--s-3)}
.msg{display:flex;gap:var(--s-2);align-items:flex-end;animation:rise var(--d-3) var(--ease-out) both}
.msg.me{justify-content:flex-end}
.msg .bb{max-width:86%;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);font:500 16px/1.42 var(--f-ui)}
.msg.me .bb{background:var(--ink);color:var(--on-ink);border-bottom-right-radius:6px}
.msg.msg-roy .bb{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:var(--sh-card)}
.sim,.prop{border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);animation:rise var(--d-3) var(--ease-out) both}
.sim{background:var(--ink);color:var(--on-ink)}
.sim .k,.prop .k{font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-ink-3)}
.sim .ba{display:flex;align-items:baseline;gap:var(--s-3);margin-top:var(--s-2);font:800 28px/1 var(--f-disp);font-variant-numeric:tabular-nums}
.sim .ba i{font-style:normal;color:var(--on-ink-3);font-size:22px}
.sim .ba .to{color:var(--acc-on-ink)}
.sim .trk{margin:14px 0 10px}
.sim p{font:500 var(--fs-small)/1.4 var(--f-ui);color:var(--on-ink-2)}
.prop{background:var(--glass-hi);border:1px solid var(--line);box-shadow:var(--sh-card)}
.prop .k{color:var(--muted)}
.prop p{font:600 17px/1.4 var(--f-ui);margin-top:var(--s-2)}
.prop small{display:block;font:500 15px/1.35 var(--f-ui);color:var(--muted);margin-top:4px}
.prop .acts{margin-top:var(--s-3)}
.prop .rastro{font:400 var(--fs-small)/1.4 var(--f-ui);color:var(--muted);margin-top:var(--s-2)}
.prop .exec{margin-top:var(--s-3)}
.sh-chips{flex:none;display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-2) var(--gutter);scrollbar-width:none;scroll-padding:0 var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.sh-chips::-webkit-scrollbar{display:none}
.sh-chips.at-end{-webkit-mask-image:none;mask-image:none}
/* antes da 1.ª pergunta os chips são o convite: todos à vista, em linhas */
.sh-chips.wrap{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.sh-chips .cb{flex:none}
.sh-form{flex:none;display:flex;gap:var(--s-2);padding:var(--s-2) var(--gutter) var(--s-4)}
.sh-form input{flex:1;min-width:0;height:48px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--white);padding:0 var(--s-5);font:500 16px/1 var(--f-ui)}
.sh-form input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,27,45,.14)}
.sh-form button{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--acc);color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh-btn)}
.sh-form button svg{width:20px;height:20px}
/* efeitos soltos */
.coin{position:fixed;z-index:var(--z-fx);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#FFF1C9 0 16%,var(--gold) 52%,#E09A1F 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 4px 10px -4px rgba(184,110,15,.9);font:700 8px/1 var(--f-mono);color:var(--ink)}
.confetti{position:fixed;z-index:var(--z-fx);pointer-events:none;border-radius:1px}

/* =================== V0 REAL: casca, coluna de 1/3, telas =================== */
body{background:var(--paper)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-main[disabled]{box-shadow:none}

/* luz do fundo (atrás do painel e do lado) */
.fundo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--paper)}
.fundo i{position:absolute;border-radius:50%;filter:blur(40px)}
.fundo i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(closest-side,rgba(255,138,95,.20),transparent);animation:drift1 30s ease-in-out infinite alternate}
.fundo i:nth-child(2){width:40vw;height:40vw;left:30vw;bottom:-18vw;background:radial-gradient(closest-side,rgba(59,111,182,.14),transparent);animation:drift2 34s ease-in-out infinite alternate}
.fundo i:nth-child(3){width:34vw;height:34vw;right:-6vw;top:20vh;background:radial-gradient(closest-side,rgba(255,194,75,.16),transparent);animation:drift3 38s ease-in-out infinite alternate}

/* o lado: discreto, só um lembrete de como usar */
.lado{position:fixed;top:0;bottom:0;left:0;right:var(--panel-w);z-index:1;display:grid;place-items:center;padding:var(--s-8)}
.lado-in{max-width:540px;display:grid;justify-items:center;text-align:center;gap:var(--s-4)}
.tela{width:min(400px,100%);aspect-ratio:16/9.6;border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.5);display:grid;grid-template-columns:2fr 1fr;overflow:hidden;box-shadow:var(--sh-card);margin-bottom:var(--s-2)}
.tela-sis{border-right:1.5px dashed var(--line);padding:16px;display:grid;align-content:start;gap:9px;text-align:left}
.tela-sis b{font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tela-sis i{display:block;height:9px;border-radius:5px;background:var(--line-2)}
.tela-sis i:nth-of-type(2){width:72%}.tela-sis i:nth-of-type(3){width:86%}.tela-sis i:nth-of-type(4){width:58%}
.tela-roy{position:relative;display:grid;align-content:start;gap:9px;padding:52px 12px 12px;background:linear-gradient(180deg,rgba(255,138,95,.10),rgba(15,27,45,.06))}
.tela-roy i{display:block;height:9px;border-radius:5px;background:var(--acc-2);opacity:.55}
.tela-roy i:nth-of-type(2){width:70%;opacity:.35}
.tela-roy i:nth-of-type(3){height:22px;border-radius:7px;background:var(--acc);opacity:.85}
.tela-face{position:absolute;top:10px;left:50%;width:36px;height:36px;margin-left:-18px;border-radius:50%;box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--line);
  background:url(/img/roy-sorriso-recorte.png) 46% 9%/205% auto no-repeat,radial-gradient(circle at 50% 35%,#fff,#E4DED2)}
.lado-t{font:700 26px/1.2 var(--f-disp);color:var(--ink-3);text-wrap:balance}
.lado-s{font:500 16px/1.5 var(--f-ui);color:var(--muted);max-width:44ch;text-wrap:pretty}
.lado-n{font:500 14px/1.4 var(--f-ui);color:var(--muted)}
.lado .btn-2{gap:var(--s-2);background:rgba(255,255,255,.7)}
.lado [hidden]{display:none}

/* telas do painel (uma de cada vez) */
.sp{z-index:var(--z-panel)}
.sp:not([data-view="painel"]) .vp,
.sp:not([data-view="entrar"]) .ve,
.sp:not([data-view="erro"]) .vx,
.sp:not([data-view="carregando"]) .vc{display:none!important}

/* faixa do ensaio */
.ensaio{flex:none;position:relative;z-index:6;display:flex;gap:var(--s-2);align-items:flex-start;margin:0 var(--gutter) var(--s-1);padding:6px var(--s-3);border-radius:var(--r-sm);border:1px dashed var(--line);background:rgba(255,255,255,.55);font:500 13px/1.35 var(--f-ui);color:var(--muted)}
.ensaio::before{content:"";flex:none;width:9px;height:9px;margin-top:4px;border-radius:50%;border:2px solid var(--muted)}
.ensaio b{font-weight:600;color:var(--ink-3)}

/* cabeçalho: moeda e pessoa */
.who{gap:var(--s-2)}
.moeda-btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:var(--h-tap);padding:0 10px 0 12px;gap:4px;font:700 15px/1 var(--f-ui);font-variant-numeric:tabular-nums}
.moeda-btn .ic{width:14px;height:14px;transition:transform var(--d-2) var(--ease-out)}
.moeda-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.who-btn{display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-tap);min-width:var(--h-tap);padding:2px;border:0;background:transparent;border-radius:var(--r-pill);text-align:right;transition:background-color var(--d-1)}
.who-btn:hover{background:rgba(255,255,255,.65)}
.who-btn .who-t{margin:0 var(--s-1) 0 var(--s-3)}
.who-btn[aria-expanded="true"] .who-av{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--acc)}

/* menus que abrem do cabeçalho */
.pop{position:absolute;z-index:var(--z-modal);top:calc(100% - 4px);right:var(--s-3);width:min(330px,calc(100vw - 24px));padding:var(--s-2);border-radius:var(--r-lg);
  background:rgba(251,250,247,.97);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--glass-line);
  box-shadow:0 0 0 1px var(--glass-edge),0 30px 60px -24px rgba(15,27,45,.55);display:grid;gap:2px;animation:rise var(--d-2) var(--ease-out)}
.pop[hidden]{display:none}
.pop-k{font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);padding:10px 10px 6px}
.pop-op{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-tap);padding:0 var(--s-3);border:0;border-radius:var(--r-md);background:transparent;font:500 16px/1.2 var(--f-ui);text-align:left;transition:background-color var(--d-1)}
.pop-op:hover{background:var(--acc-wash)}
.pop-op b{min-width:40px;font:800 18px/1 var(--f-disp)}
.pop-op[aria-checked="true"]{background:var(--ink);color:var(--on-ink)}
.pop-op[aria-checked="true"]::after{content:"✓";margin-left:auto;font-weight:700;color:var(--ok-on-ink)}
.pop-n{font:500 13px/1.4 var(--f-ui);color:var(--muted);padding:8px 10px 6px}
.pop-eu{display:grid;gap:6px;padding:10px 10px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.pop-eu b{font:700 18px/1.2 var(--f-ui)}
.pop-eu small{font:600 12px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.pop-eu p{font:500 15px/1.45 var(--f-ui);color:var(--ink)}
.pop-eu .pop-alc{font:500 15px/1.45 var(--f-ui);color:var(--muted)}
.pop-eu .pop-alc b{font:inherit;font-weight:700;color:var(--ink-3)}
.pop .sair{width:100%;justify-content:flex-start;gap:var(--s-3);padding:0 var(--s-3);border:0;background:transparent;height:var(--h-tap);border-radius:var(--r-md);font:600 16px/1 var(--f-ui);color:var(--ink)}
.pop .sair:hover{background:var(--acc-wash)}

/* ---------- entrada ---------- */
.boas{flex:none}
.boas-t{font:800 clamp(28px,2.3vw,42px)/1.08 var(--f-disp);letter-spacing:-.02em;color:var(--on-ink);text-wrap:balance;margin-top:var(--s-1)}
.boas-t.sm{font-size:clamp(24px,1.8vw,32px)}
.boas-t .tie{--tie-h:.16em}
.boas-s{margin-top:var(--s-3);font:italic 600 var(--fs-fala)/1.35 var(--f-voice);color:var(--on-ink-2)}
.boas .boas-s:last-child{margin-bottom:var(--s-2)}
.entrar-box{flex:1;min-height:0;overflow-y:auto;padding:var(--s-6) var(--gutter) var(--s-7);display:grid;align-content:start;gap:var(--s-4)}
.entrar-f{display:grid;gap:var(--s-2)}
.entrar-f label{font:600 16px/1.3 var(--f-ui)}
.campo{width:100%;height:52px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--white);padding:0 var(--s-4);font:500 17px/1 var(--f-ui);color:var(--ink);transition:border-color var(--d-1),box-shadow var(--d-1)}
.campo::placeholder{color:#8C93A0}
.campo:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,27,45,.14)}
.campo[aria-invalid="true"]{border-color:var(--acc-text)}
.campo-erro{font:500 15px/1.4 var(--f-ui);color:var(--acc-text)}
.btn-entrar{margin-top:var(--s-2);min-width:0;width:100%;padding:0 var(--s-5);gap:var(--s-2)}
.btn-entrar .ic{width:20px;height:20px}
.entrar-n{font:500 15px/1.45 var(--f-ui);color:var(--muted)}
.aviso{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--acc-wash);color:var(--acc-text);font:500 15px/1.45 var(--f-ui)}
.aviso .ic{margin-top:2px}
.aviso[hidden],.enviado[hidden],.campo-erro[hidden],.entrar-f[hidden]{display:none}
.enviado{display:grid;justify-items:start;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);background:rgba(234,245,239,.9);border:1.5px solid rgba(23,112,74,.28);box-shadow:var(--sh-card);animation:rise var(--d-3) var(--ease-out) both}
.env-ic{width:48px;height:48px;border-radius:50%;background:var(--ok-text);color:var(--white);display:grid;place-items:center}
.env-ic .ic{width:22px;height:22px}
.enviado p{font:600 var(--fs-fala)/1.4 var(--f-ui);color:var(--ink)}
.enviado small{font:500 15px/1.45 var(--f-ui);color:var(--muted)}
.enviado small b{color:var(--ink);font-weight:600;word-break:break-all}
.enviado .btn-2{margin-top:var(--s-1)}

/* ---------- erro ao abrir ---------- */
.erro-band .btn-main{margin-top:var(--s-4);width:auto;min-width:0;padding:0 var(--s-6);gap:var(--s-2)}
.erro-band .btn-main .ic{width:20px;height:20px}

/* ---------- carregando (esqueleto: nunca tela branca) ---------- */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.07) 0,rgba(255,255,255,.17) 40%,rgba(255,255,255,.07) 80%);background-size:300% 100%;animation:sk 1.4s ease-in-out infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.sk-meta{flex:none}
.sk-l{width:46%;height:13px}
.sk-big{width:40%;height:44px;margin-top:14px}
.sk-trk{height:10px;margin:26px 0 22px;border-radius:999px}
.sk-l2{width:72%;height:15px;margin-bottom:6px}
.sk-rest{flex:1;min-height:0;overflow:hidden;padding:0 var(--gutter)}
.sk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);padding:var(--s-5) 0 var(--s-4);border-bottom:1px solid var(--line)}
.sk-tabs i,.sk-card i{display:block;height:16px;border-radius:8px;background:linear-gradient(90deg,var(--line-2) 0,#FBF9F4 40%,var(--line-2) 80%);background-size:300% 100%;animation:sk 1.4s ease-in-out infinite}
.sk-card{margin-top:var(--s-4);padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--sh-card);display:grid;gap:12px}
.sk-card i:nth-child(1){width:84%;height:20px}
.sk-card i:nth-child(2){width:42%;height:34px}
.sk-card i:nth-child(3){width:100%;height:52px;border-radius:14px}
.sp[data-view="carregando"] .hold-img{transform:translateY(20%)}
.sp[data-view="carregando"] .bubble{opacity:1}

/* ---------- cartão: o que mudou na V0 ---------- */
.acts-2 .btn-3{padding:0 var(--s-2)}
.c-erro{display:flex;gap:var(--s-2);align-items:flex-start;margin-top:var(--s-3);padding:10px var(--s-3);border-radius:var(--r-md);background:var(--acc-wash);color:var(--acc-text);font:500 15px/1.4 var(--f-ui);animation:rise var(--d-2) var(--ease-out) both}
.c-erro .ic{margin-top:2px}
.card.big .c-erro{background:rgba(255,138,95,.14);color:var(--acc-on-ink)}
.c-list li.more{display:block;padding:0}
.mais{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);width:100%;min-height:var(--h-tap);padding:var(--s-2) 0;border:0;background:transparent;text-align:left;color:inherit;border-radius:var(--r-sm)}
.mais:hover b{text-decoration:underline}
.mais b{font:600 15px/1.3 var(--f-ui);color:var(--ink-3)}
.mais small{grid-column:1;font:400 var(--fs-detail)/1.3 var(--f-ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mais em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;font:700 16px/1 var(--f-disp);font-variant-numeric:tabular-nums}
.card.big .mais b{color:var(--on-ink)}
.card.big .mais small{color:var(--on-ink-3)}
.c-list li.menos{display:block;padding:0;border-bottom:0}
.c-list li.menos .mais{grid-template-columns:1fr}
.outro{display:flex;gap:var(--s-2);width:100%;margin-top:var(--s-1)}
.outro .campo{height:48px;font-size:16px}
.outro .btn{height:48px;flex:none;padding:0 var(--s-4)}
.card.big .outro .campo{background:rgba(255,255,255,.95)}
.exec li .tag{margin-left:auto;flex:none;align-self:center;font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-pill);padding:4px 8px}
.exec li > span{min-width:0}
.card.big .exec li .tag{color:var(--on-ink-3);border-color:var(--ink-line)}
.card.big.recibo .exec li .tag{color:var(--muted);border-color:var(--line)}
.exec li.ready.reg{color:var(--ink-3)}
.card.big .exec li.ready.reg{color:var(--on-ink-2)}
.card.big.recibo .exec li.ready.reg{color:var(--ink-3)}
.stamp.r{color:var(--ink-3);border-style:dashed;background:var(--white)}
.stamps .dia{font:600 13px/1 var(--f-mono);color:var(--muted);margin-right:2px}
.refused .ic{flex:none;color:var(--muted)}
.refused > span{min-width:0}
.c-sem{font:500 15px/1.4 var(--f-ui);color:var(--muted)}
.chip.c-prov{color:var(--muted);border:1.5px dashed var(--line);background:transparent}
.on-ink .chip.c-prov{color:var(--acc-on-ink);border:1px dashed var(--acc-on-ink)}
.chip.c-sem-dados{color:var(--muted);background:var(--line-2)}
.on-ink .chip.c-sem-dados{color:var(--on-ink-2)}
.chip.c-neutro{color:var(--ink-3);background:var(--line-2)}
.on-ink .chip.c-neutro{color:var(--on-ink-2)}
.mt-top .chips{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.trk .vazio-l{position:absolute;left:0;top:calc(100% + 6px);font:600 12px/1 var(--f-mono);color:var(--on-ink-3);white-space:nowrap}
.tabs .tab[aria-selected="true"]{color:var(--ink)}
.list-in > .arrive{animation:arrive var(--d-3) var(--ease-out) both}
.vazio .btn-2{margin-top:var(--s-1)}

/* aviso discreto quando a atualização automática falha (sem tirar nada da tela) */
.rede{display:none;align-items:center;gap:6px;font:600 12px/1.25 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--acc-text);white-space:nowrap}
.rede::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--acc-text)}
.sp.offline .rede{display:inline-flex}
.sp.offline .memo{display:none}

/* ---------- Pergunte ao Roy: estados ---------- */
.msg.aviso .bb{background:var(--acc-wash);border-color:rgba(184,54,15,.25)}
.msg .bb .retry{display:flex;margin-top:var(--s-3);height:44px}
.msg .bb .retry .ic{width:16px;height:16px}
.sh-form[aria-busy="true"] button{opacity:.55}
.sh-chips[aria-disabled="true"] .cb{opacity:.55;pointer-events:none}
.prop .p-ok{font:600 15px/1.4 var(--f-ui);color:var(--ok-text);margin-top:var(--s-2)}
.prop .exec li .tag{color:var(--muted)}
.prop .ver{margin-top:var(--s-2);height:44px}
.prop .c-erro{margin-top:var(--s-3)}


/* =================== LARGURAS E ALTURAS =================== */
@media (max-width:1679px) and (min-width:600px){
  .who-t{display:none}
  .ask .l-long{display:none} .ask .l-short{display:inline}
  .memo{display:none}
}
@media (min-width:1680px){
  /* botão laranja e «Mudar / Adiar / Recusar» lado a lado; se o rótulo for longo, a segunda fila desce */
  .acts{display:flex;flex-wrap:wrap;align-items:center}
  .acts-main{flex:0 1 auto;min-width:0;max-width:100%}
  .acts-main .btn-main{width:auto;max-width:100%}
  .acts-2{flex:0 0 auto;justify-content:flex-start}
  .acts-2 > *{flex:0 0 auto}
}
/* janela estreita (instalado num terço da tela, ou tablet): o painel ocupa a janela inteira */
@media (max-width:899px){
  :root{--panel-w:100vw}
  .lado{display:none}
  .sp{border-left:0;box-shadow:none}
}
@media (max-height:959px) and (min-width:600px){
  :root{--h-head:58px;--roy-w:176px;--stage-h:138px;--h-tab:54px;--plate-h:0px}
  .list-in > .pendline{display:none}   /* a aba Pendentes já mostra o número em laranja; a lista ganha espaço */
  .sheet{height:calc(70% - var(--h-foot))}

  .bubble{padding:11px 16px;bottom:24px}
  .bubble::before{bottom:18px}
  .tabs{margin-top:var(--s-1)}
  .money-line div > span{font-size:13px}
  .money-line{gap:2px var(--s-4)}
  .mt-num{margin-top:var(--s-1)}
  .plate{display:none}
  .meta{padding:var(--s-3) var(--s-5) var(--s-2)}
  .trk-wrap{margin:20px 0 20px}
  .trk .now{display:none}
  .money-line b{font-size:20px}
  .sec-ind{display:none}
  .meta.show-sec .sec-ind{display:flex;width:100%}
  .sec-more{display:inline-flex}
  .card.big:not(.recibo) .voz{display:none}
  .card .rows .nada{display:none}
  .list-in{gap:var(--s-4)}
  .vazio{padding:var(--s-3) var(--s-4)}
  .vazio img{width:84px}
  .boas-t{font-size:clamp(26px,2.1vw,36px)}
  .entrar-box{padding-top:var(--s-5)}
  .lado-t{font-size:24px}
}
@media (max-width:599px){
  :root{--gutter:var(--gutter-m);--h-head:var(--h-head-m);--roy-w:168px;--stage-h:auto;--h-tab:56px;--plate-h:0px;--list-pad:var(--gutter-m)}
  body{overflow:hidden}
  .fundo{display:none}
  .sp{width:100%;display:block;overflow-y:auto;overflow-x:hidden;border-left:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
  .aurora{position:fixed}
  .sp-head{position:sticky;top:0;z-index:12;background:rgba(247,245,240,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:0 var(--s-2) 0 var(--gutter)}
  .logo{font-size:var(--fs-logo-m)}
  .who-t{display:none}
  .plate{display:none}
  .ensaio{margin:var(--s-1) var(--gutter) 0}
  .stage{height:auto;min-height:150px;padding:14px var(--gutter) 30px calc(var(--roy-x) + var(--roy-w) * .76 + 6px)}
  .stage .roy{bottom:0;top:0;height:auto}
  .bubble{position:relative;left:auto;right:auto;bottom:auto;z-index:3;padding:12px 15px}
  .meta{padding:var(--s-3) 14px var(--s-2)}
  .boas{padding:var(--s-4) var(--s-4) var(--s-3)}
  .mt-num .should{margin-left:0;width:100%;text-align:left}
  .trk-wrap{margin:22px 0 18px}
  .tabs-wrap{position:sticky;top:var(--h-head-m);z-index:11;background:rgba(247,245,240,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .strip{display:flex;align-items:center;gap:var(--s-3);height:0;overflow:hidden;padding:0 var(--gutter);border-bottom:1px solid transparent;transition:height var(--d-2) var(--ease-out)}
  .strip.on{height:48px;border-bottom-color:var(--line)}
  .strip b{font:800 20px/1 var(--f-disp);font-variant-numeric:tabular-nums}
  .strip small{font:500 14px/1.2 var(--f-ui);color:var(--muted)}
  .strip .chip{margin-left:auto}
  .tabs{margin-top:0}
  .tab{padding:0 var(--s-2)}
  .tab .tn{font-size:16px}
  .list{overflow:visible;padding:var(--s-4) var(--gutter) 120px}
  .card .in,.card.big .in{padding:var(--s-4)}
  .rows > div{grid-template-columns:1fr;gap:2px}
  .gap{display:none}
  .c-val{min-height:0}
  .card.big:not(.recibo) .voz{display:none}
  .card .rows .nada{display:none}
  .p-foot{position:fixed;left:0;right:0;bottom:0;height:56px;padding:0 var(--s-2) 0 var(--gutter);background:rgba(247,245,240,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .p-foot .selo{line-height:1.25;font-size:13px}
  .memo{display:none}
  .ask .l-long{display:none} .ask .l-short{display:inline}
  .ask{padding:0 var(--s-3) 0 6px}
  .sec-ind{display:none}
  .meta.show-sec .sec-ind{display:flex;width:100%}
  .sec-more{display:inline-flex}
  .trk .now{display:none}
  .sheet{position:fixed;bottom:56px;height:calc(78% - 56px);height:calc(78dvh - 56px)}
  .card.recibo .c-val{padding-right:128px}
  .entrar-box{overflow:visible;padding:var(--s-5) var(--gutter) var(--s-7)}
  .sk-rest{overflow:visible}
  .pop{position:fixed;top:calc(var(--h-head-m) - 2px);right:var(--s-2)}
  .acts-2 .btn-2{padding:0 var(--s-3)}
  /* achado grande no celular: o Roy espia por cima do cartão (o palco já rolou para fora) */
  .item.has-over .kick{padding-right:120px;min-height:80px;align-content:flex-end}
  .item.has-over .kick > .face{display:none}
  .item.has-over .card{z-index:1}
  .roy-over{display:block;position:relative;z-index:0;height:0;pointer-events:none}
  .roy-over img{position:absolute;right:10px;bottom:-22px;width:110px;height:auto;filter:drop-shadow(0 10px 12px rgba(15,27,45,.35));transform-origin:50% 100%;transition:transform 300ms cubic-bezier(.5,0,.75,0),opacity 300ms}
  .roy-over .ro-ring{position:absolute;right:16px;bottom:-20px;width:98px;height:98px;border-radius:50%;border:3px solid var(--acc);opacity:0}
  .roy-over.in img{animation:roy-over-in 520ms var(--ease-spring) both,shake var(--d-shake) ease-in-out 520ms}
  .roy-over.in .ro-ring{animation:burst 640ms ease-out 480ms}
  .roy-over.out img{transform:translateY(96px);opacity:0}
}
@keyframes roy-over-in{from{transform:translateY(96px)}}
@media (min-height:1000px) and (min-width:600px){
  .sheet{height:calc(72% - var(--h-foot))}

}
@media (prefers-reduced-motion:reduce){
  .aurora i,.fundo i,.halo,.roy-breathe,.trk .proj.hot,.roy.sway .bust-img.on,.roy-over img,.roy-over .ro-ring,.sk,.sk-tabs i,.sk-card i,.dots i{animation:none!important}
  .trk .proj.hot{filter:brightness(1.2)}
  .card.shine::after{display:none}
  *{scroll-behavior:auto!important}
}

/* odômetro */
.od{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1}.ods{display:block}.ods i{display:block;height:1em;line-height:1;font-style:normal}.oc{display:inline-block;height:1em;line-height:1;vertical-align:top}

/* rótulo da coluna de valores da lista e dica do «segure» */
.c-list .cap{display:flex;justify-content:flex-end;padding:var(--s-2) 0 2px;border-bottom:1px dashed var(--line);font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.card.big .c-list .cap{color:var(--on-ink-3);border-color:var(--ink-line)}
.acts-main .hint{margin-top:var(--s-2);animation:rise var(--d-2) var(--ease-out) both}
.card.big .hint{color:var(--acc-on-ink)}
.confirm{margin-top:var(--s-2)}
.card.big .confirm{color:var(--on-ink)}
.choices-k{width:100%;font:600 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:inherit;opacity:.8}
.big-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ensaio[hidden]{display:none}
.on-ink .sec-more .chip.on-sec{color:var(--on-ink-2);border:1px dashed var(--on-ink-3);background:transparent}
.pop:focus{outline:none}

/* doca: o botão do cartão em foco, quando ele está fora da vista */
.dock{position:absolute;z-index:7;left:0;right:0;bottom:var(--h-foot);padding:var(--s-2) var(--gutter) var(--s-3);display:grid;gap:6px;
  background:rgba(247,245,240,.95);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-top:1px solid var(--glass-line);box-shadow:0 -14px 30px -20px rgba(15,27,45,.45);
  transform:translateY(12px);opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--d-2) var(--ease-out),opacity var(--d-2),visibility 0s linear var(--d-2)}
.dock.on{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--d-2) var(--ease-out),opacity var(--d-2)}
/* a doca é navegação: botão escuro «Ver a ação: …», que leva até o cartão (segurar só existe no próprio cartão) */
.btn-go{width:100%;height:var(--h-btn);padding:0 var(--s-5);gap:var(--s-3);justify-content:center;background:var(--ink);color:var(--on-ink);box-shadow:0 10px 22px -14px rgba(15,27,45,.8)}
.btn-go:hover{background:var(--ink-3)}
.btn-go:active{transform:scale(.98)}
.btn-go .ic{width:18px;height:18px;transition:transform var(--d-2)}
.dock[data-dir="down"] .btn-go .ic{transform:rotate(180deg)}
.dock .btn-main{width:100%}
.dock .hint,.dock .confirm{margin-top:0}
.sp.sheet-on .dock{display:none}
@media (max-width:599px){ .dock{position:fixed;bottom:56px;z-index:13} }

.nb{white-space:nowrap}

/* o cabeçalho (com os menus) fica acima da faixa do ensaio, do palco e da faixa da meta */
.sp-head{z-index:20}
/* «Ajustado»: frase normal, não rótulo em caixa alta */
.rows .adj{display:inline-block;margin-bottom:4px;padding:3px 10px;border-radius:10px;font:600 14px/1.45 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--ok-text);background:var(--ok-wash)}
.card.big .rows .adj{background:rgba(127,214,168,.14);color:var(--ok-on-ink)}

/* janela baixa no computador (notebook, aba do navegador): o painel inteiro rola, como no celular.
   Cabeçalho e abas grudam no topo; rodapé, doca, aviso e folha ficam presos na coluna do painel. */
@media (max-height:799px) and (min-width:600px){
  /* sem vidro no painel: o backdrop-filter faria o rodapé e a doca rolarem junto com o conteúdo */
  .sp{display:block;overflow-y:auto;overflow-x:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(247,245,240,.97)}
  .sp-head{position:sticky;top:0;background:rgba(247,245,240,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .tabs-wrap{position:sticky;top:var(--h-head);z-index:11;background:rgba(247,245,240,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .strip{display:flex;align-items:center;gap:var(--s-3);height:0;overflow:hidden;padding:0 var(--gutter);border-bottom:1px solid transparent;transition:height var(--d-2) var(--ease-out)}
  .strip.on{height:48px;border-bottom-color:var(--line)}
  .strip b{font:800 20px/1 var(--f-disp);font-variant-numeric:tabular-nums}
  .strip small{font:500 14px/1.2 var(--f-ui);color:var(--muted)}
  .strip .chip{margin-left:auto}
  .list{overflow:visible;padding-bottom:120px}
  .entrar-box,.sk-rest{overflow:visible}
  .p-foot{position:fixed;left:auto;right:0;bottom:0;width:var(--panel-w);background:rgba(247,245,240,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .dock{position:fixed;left:auto;right:0;width:var(--panel-w);bottom:var(--h-foot);z-index:13}
  .toast{position:fixed;left:auto;right:var(--gutter);width:calc(var(--panel-w) - 2 * var(--gutter))}
  .sheet{position:fixed;left:auto;right:0;width:var(--panel-w);bottom:var(--h-foot);height:calc(76vh - var(--h-foot))}
  .aurora{position:fixed;left:auto;right:0;width:var(--panel-w)}
}


/* =====================================================================
   Revisão 31/10 — correções de UX (achados da revisão)
   ===================================================================== */

/* dinheiro sobre tinta: laranja claro (7,4:1), nunca o --acc-text (2,9:1) */
.meta .money,.toast .money,.dock .money,.on-ink .money,.sim .money{color:var(--acc-on-ink)}

/* texto comprido sem espaço vindo da API não empurra nada para o lado */
@media (min-width:600px) and (min-height:800px){ .sp{overflow:clip} }   /* overflow:hidden ainda deixa o foco rolar o painel para o lado */
.btn .bl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.money-line div{white-space:normal;flex-wrap:wrap}
.c-title,.rows dd,.bb,.prop p,.prop-item,.pop-eu,.pop-t,.razao,.bubble,.refused,.frow p,.lote-l li,.previa p,.cb,.mt-lab,.money-line div > span,.vazio p,.exec li > span,.alc,.voz,.memo-line,.rastro{overflow-wrap:anywhere}
.chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sec-ind .chip{white-space:normal;height:auto;min-height:var(--h-chip);padding-top:5px;padding-bottom:5px;line-height:1.25;overflow-wrap:anywhere}
.who-t b{overflow:hidden;text-overflow:ellipsis}

/* ensaio: chip ao lado do logo (sai do fluxo; o texto abre num menu) */
.ensaio-chip{flex:none;display:inline-flex;align-items:center;height:var(--h-tap);min-width:var(--h-tap);padding:0 2px;margin-left:var(--s-1);border:0;background:none;border-radius:var(--r-pill)}
.ensaio-chip[hidden]{display:none}
.ensaio-chip span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);border:1.5px dashed var(--muted);background:rgba(255,255,255,.65);font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);transition:background-color var(--d-1),border-color var(--d-1)}
.ensaio-chip span::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:2px solid var(--muted)}
.ensaio-chip:hover span,.ensaio-chip[aria-expanded="true"] span{background:var(--white);border-color:var(--ink-3)}
.pop-ensaio{left:var(--gutter);right:auto}
.pop-t{font:500 15px/1.45 var(--f-ui);color:var(--ink);padding:2px 10px 10px}

/* faixa da meta mais curta: secundários sempre recolhidos em «+2 metas», prévia na linha do número */
.sec-ind{display:none}
.meta.show-sec .sec-ind{display:flex;width:100%}
.sec-more{display:inline-flex}
.mt-num .of{font:600 17px/1.2 var(--f-ui);color:var(--on-ink-2)}
.mt-num .should:empty{display:none}
.mt-num .sec-more{margin:-8px 0 -8px auto;align-self:center}
/* a prévia «→ R$ 29 previsto» é o coração da aprovação: 15 px, Poppins 600 */
.trk .up,.trk .proj-l{font:600 15px/1 var(--f-ui);letter-spacing:0;color:var(--acc-on-ink)}
.trk .proj-l{top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
.trk-wrap{margin:30px 0 26px}
.trk .alvo{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:2px dashed var(--acc-2);background:var(--ink)}
.razao{max-width:62ch}
.mt-foot{margin-top:var(--s-2)}

/* achado grande no computador: título, valor e botão à vista; o resto em «Ver …» */
.card.resumo .c-list,.card.resumo .alc,.card.resumo .r-ef,.card.resumo .r-risco,.card.resumo .voz{display:none}
.card.resumo.cpt .rows{display:none}
.card.resumo .rows{margin-bottom:var(--s-1)}
.btn-3.det{height:var(--h-tap);padding:0;margin:var(--s-1) 0 0;justify-content:flex-start;gap:0;color:var(--ink-3);text-decoration:underline;text-underline-offset:4px;font-size:15px}
.card.big .btn-3.det{color:var(--on-ink-2)}
.card.resumo .acts{margin-top:var(--s-2)}
@media (max-height:959px) and (min-width:600px){
  .card.big .head-k{display:none}
  .card.big .c-val{margin-top:var(--s-2)}
  .trk-wrap{margin:28px 0 22px}
  .mt-num .of{font-size:15px}
  :root{--stage-h:128px}
  .card .in{padding-top:var(--s-4)}
}

/* lote: as sub-ações à vista */
.lote{margin:var(--s-3) 0 var(--s-2)}
.lote-k{font:600 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lote-l{list-style:none;counter-reset:l;display:grid;gap:6px}
.lote-l li{counter-increment:l;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-2);align-items:baseline;font:500 15px/1.4 var(--f-ui)}
.lote-l li::before{content:counter(l);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:700 13px/1 var(--f-ui);transform:translateY(-1px)}

/* «Mudar» com texto só: a sugestão original riscada, o efeito diz que muda */
.rows s.riscado{color:var(--muted);text-decoration-thickness:1.5px}
.card.big .rows s.riscado{color:var(--on-ink-3)}

/* «Ver o texto novo»: o texto que vai sair */
.previa{margin:var(--s-2) 0 var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--white);border:1.5px solid var(--line);display:grid;gap:6px}
.previa p{font:500 16px/1.45 var(--f-ui);color:var(--ink)}
.card.big .previa{background:rgba(255,255,255,.06);border-color:var(--ink-line)}
.card.big .previa p{color:var(--on-ink)}

/* erro acima dos botões */
.c-erro{margin:var(--s-3) 0 0}

/* verba a mais (gasto): em tinta, sem gravata */
.c-val .v.gasto{color:var(--ink)}
.card.big .c-val .v.gasto{color:var(--on-ink)}
.frow .fv b.gasto{color:var(--ink)}
.frow .fv .prev{font-style:normal;font:600 12px/1 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);border:1.5px dashed var(--line);border-radius:var(--r-pill);padding:4px 8px}
.frow .adj{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:10px;font:600 14px/1.45 var(--f-ui);color:var(--ok-text);background:var(--ok-wash)}

/* ensaio: o registro é neutro (nada foi executado) — sem verde de «feito», passos com ○ */
.card.recibo.reg,.card.big.recibo.reg{background:rgba(251,250,247,.94);color:var(--ink);box-shadow:0 0 0 1.5px var(--line),var(--sh-card)}
.item.is-focus .card.recibo.reg,.item.is-focus .card.big.recibo.reg{box-shadow:0 0 0 2px var(--ink-3),var(--sh-lift)}
.card.big.recibo.reg .wall{background:var(--line)}
.card.recibo.reg .c-val .v.tie::after{background:var(--tie-muted)}
.bigstamp.reg{border-color:var(--ink-3);color:var(--ink-3)}
.card.recibo.reg .memo-line{color:var(--ink-3)}
.exec-k{display:block;margin-top:var(--s-3);font:600 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.exec-k + .exec{margin-top:6px}
.exec.plan li::before{content:"○";color:var(--muted);font-weight:700}
.exec.plan li.ready::before{content:"✓";color:var(--ink-3)}
.card.big:not(.recibo) .exec.plan li::before,.card.big:not(.recibo) .exec-k{color:var(--on-ink-3)}
.adj-line{margin:var(--s-3) 0 0}
.memo-line small{display:block;margin-top:4px;font:600 12px/1.3 var(--f-mono);font-style:normal;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.frow.reg{background:rgba(251,250,247,.8)}

/* recusar e mandar para o gestor: 5 s para desfazer, na própria linha */
.refused.envio{border-style:solid;border-color:var(--line);background:rgba(255,255,255,.75);animation:rise var(--d-2) var(--ease-out) both}
.refused.envio .btn-3{margin-left:auto;color:var(--ink);text-decoration:underline;text-underline-offset:3px;gap:0}
.refused.envio .btn-3 b{font-weight:700;font-variant-numeric:tabular-nums}
.refused.sobe{color:var(--ink-3)}
.refused .ci-up{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink-3);color:var(--paper);font:700 14px/1 var(--f-ui)}
.refused small{font:500 14px/1.4 var(--f-ui);color:var(--muted)}
.btn-main.btn-click{touch-action:manipulation;gap:var(--s-2)}
.btn-main.btn-click .ic{width:20px;height:20px}

/* Pergunte ao Roy: a proposta mostra o item de verdade */
.prop .prop-roy{font:500 16px/1.45 var(--f-ui);color:var(--muted);margin-top:var(--s-2)}
.prop-item{margin-top:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--white);border:1.5px solid var(--ink);display:grid;gap:6px}
.prop-item b{font:600 16px/1.35 var(--f-ui)}
.prop-item p{font:500 15px/1.45 var(--f-ui);margin:0}
.prop-item .adj{justify-self:start;padding:3px 10px;border-radius:10px;font:600 14px/1.45 var(--f-ui);color:var(--ok-text);background:var(--ok-wash)}
/* chips da folha: quebram em até 2 linhas, sem rolagem lateral */
.sh-chips{flex-wrap:wrap;overflow:hidden;max-height:calc(2 * var(--h-tap) + var(--s-2) + var(--s-4));-webkit-mask-image:none;mask-image:none}
.sh-chips .cb{max-width:100%}

/* aviso flutuante: no alto (sobre o palco), nunca sobre a lista nem a doca */
.toast{top:calc(var(--h-head) + 10px);bottom:auto;transform:translateY(-12px)}
.toast.on{transform:none}
@media (max-width:599px){ .toast{position:fixed;top:calc(var(--h-head-m) + 8px);bottom:auto;z-index:14} }

/* momento da aprovação no computador: a faixa da meta vira a faixa-resumo por uns segundos */
.strip b{font:800 20px/1 var(--f-disp);font-variant-numeric:tabular-nums}
.strip small{font:500 14px/1.2 var(--f-ui);color:var(--muted)}
.strip .chip{margin-left:auto}
@media (min-width:600px) and (min-height:800px){
  .sp.momento .meta{display:none}
  .sp.momento .strip{display:flex;align-items:center;gap:var(--s-3);height:48px;padding:0 var(--gutter);margin-top:var(--s-2);border-bottom:1px solid var(--line);animation:rise var(--d-2) var(--ease-out) both}
  .sp.momento .tabs{margin-top:0}
}
/* celular sem nada a fazer: a faixa vira a faixa-resumo e o estado vazio sobe */
@media (max-width:599px){
  .mt-num .of{font-size:15px}
  .mt-num{gap:var(--s-1) var(--s-2)}
  .card.big .head-k{display:none}
  .item.has-over .kick .code{display:none}
  .item.has-over .kick{min-height:64px}
  .roy-over img{bottom:-18px;width:96px}
  .roy-over .ro-ring{width:86px;height:86px;bottom:-16px}
  .sp.calmo .meta{display:none}
  .sp.calmo .strip{height:48px;border-bottom-color:var(--line)}
  .vazio img{width:140px}
  .ensaio-chip{margin-left:0}
  .ensaio-chip span{padding:0 8px}
  .ensaio-chip span::before{display:none}
  .sp-head{gap:var(--s-2)}
}

/* entrada com confirmação (o link só vale com o toque no botão) */
.confirmar{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);background:rgba(255,255,255,.8);border:1.5px solid var(--line);box-shadow:var(--sh-card);animation:rise var(--d-3) var(--ease-out) both}
.confirmar[hidden]{display:none}
.confirmar p:first-child{font:600 var(--fs-fala)/1.4 var(--f-ui)}

/* o lado: três passos de verdade (nada de barras que parecem tela carregando) */
.lado .tela-face{position:static;display:block;width:64px;height:64px;margin:0}
.passos{list-style:none;counter-reset:p;display:grid;gap:var(--s-3);width:min(460px,100%);text-align:left;margin-top:var(--s-2)}
.passos li{counter-increment:p;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px var(--s-3);align-items:start;padding:var(--s-4);border-radius:var(--r-lg);background:rgba(255,255,255,.62);border:1px solid var(--glass-line);box-shadow:0 0 0 1px var(--glass-edge),var(--sh-card)}
.passos li::before{content:counter(p);grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:var(--ink);font:800 17px/1 var(--f-disp)}
.passos b{font:700 17px/1.3 var(--f-ui);color:var(--ink)}
.passos span{font:500 15px/1.45 var(--f-ui);color:var(--muted)}
.lado-n b{color:var(--ink);font-weight:700}

/* contagem 0 → valor: o valor final reserva a largura (nada pula de linha quando o número cresce) */
.c-val .v.conta{display:inline-grid}
.c-val .v.conta > span{grid-area:1 / 1}
.c-val .v.conta .v-g{visibility:hidden}

/* momento: o busto do Roy fica no palco (não desce sobre a faixa-resumo) */
@media (min-width:600px) and (min-height:800px){
  .sp.momento .roy-clip.bust{bottom:0}
  .sp.momento .bust-img{bottom:calc(var(--aba-h) - (1 - var(--rise)) * var(--roy-w) * .86 * var(--ar))}
  .sp.momento .strip{background:rgba(247,245,240,.97);position:relative;z-index:2}
}
.refused.envio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.refused.envio .btn-3{margin-left:0}
.refused{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
.frow.reg.new{animation:flashreg 2.4s ease-out}
@keyframes flashreg{0%,30%{background:#ECE8DF}}
.sh-chips.todos{max-height:none}
.cb.mais-q{border-style:dashed;color:var(--ink-3)}
.cb[hidden]{display:none}
.prop .exec-k{font:600 13px/1.3 var(--f-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-top:var(--s-3)}
/* botões com rótulo comprido nunca alargam o cartão (a coluna é minmax(0,1fr) e o rótulo corta com reticências) */
.acts{grid-template-columns:minmax(0,1fr)}
.acts-main,.acts-2{min-width:0}
.acts-main .btn-main{min-width:0;max-width:100%}
.kick{min-width:0}
/* antes da 1.ª pergunta (e em «Mais perguntas»): todos os chips, com rolagem vertical se passar de 240 px — nunca por cima do campo */
.sh-chips.wrap,.sh-chips.todos{max-height:min(45%,240px);overflow-x:hidden;overflow-y:auto}