/* ========================================================================== mirante — folha de estilo do painel Mobile-first 360px. Testado por reflow até 320px (WCAG 1.4.10). Nenhum webfont. Nenhuma animação decorativa (spec §7.1). ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--mds-font); font-size: var(--mds-fs-base); line-height: var(--mds-lh-base); color: var(--mds-fg); background: var(--mds-bg); /* faixa fixa no topo + nav fixa no rodapé */ padding-bottom: calc(var(--mds-tap) + env(safe-area-inset-bottom, 0px) + var(--mds-s2)); overflow-x: hidden; } /* ========================================================================== PORTÃO DE SESSÃO — a casca só existe depois da decisão. `index.html` nasce com `class="mds-boot"` no ``; `src/shell-state.js` troca para `mds-anon` ou `mds-ready` quando `GET /auth/me` responde. Estas regras são o que impede o flash: elas vêm de folha render-blocking, portanto valem ANTES do primeiro frame — esconder por JS depois JÁ SERIA o flash. O que está escondido nos dois estados sem sessão é a CASCA inteira: topbar, faixa de pendências, banner de proteções e nav das 4 abas. Um visitante sem direito ao painel não vê o desenho do painel. O sintoma que isto corrige foi reportado assim: "que página de acesso estranha é essa, não teve nenhuma autenticação" — a tela mostrava o produto e só depois pedia a senha. ========================================================================== */ .mds-boot .mds-topbar, .mds-boot .mds-nav, .mds-boot .mds-skip, .mds-boot #protecoes, .mds-boot #faixa, .mds-boot #conteudo, .mds-anon .mds-topbar, .mds-anon .mds-nav, .mds-anon .mds-skip, .mds-anon #protecoes, .mds-anon #faixa { display: none; } /* A nav fixa no rodapé some junto — o espaço reservado para ela também. */ .mds-boot, .mds-anon { padding-bottom: 0; } /* A marca durante a decisão. NÃO é esqueleto do painel: esqueleto prometeria um conteúdo que talvez não seja desta pessoa. */ .mds-splash { display: none; min-height: 100vh; min-height: 100dvh; flex-direction: column; align-items: center; justify-content: center; gap: var(--mds-s2); padding: var(--mds-s4); text-align: center; } .mds-boot .mds-splash { display: flex; } .mds-splash__mark { margin: 0; font-size: var(--mds-fs-xl); line-height: var(--mds-lh-xl); font-weight: 700; letter-spacing: -0.02em; } .mds-splash__hint { margin: 0; font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-muted); } /* Nada se move sem transição de estado real. Aqui só declaramos o respeito a prefers-reduced-motion; o movimento em si é aplicado pelo JS, uma vez. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --- foco: outline sem substituto é falha de build (spec §8.4) ------------ */ :focus-visible { outline: 2px solid var(--mds-fg); outline-offset: 2px; } a { color: inherit; } button { font: inherit; color: inherit; } /* --- utilitários --------------------------------------------------------- */ .mds-vh { /* visualmente oculto, mas presente para leitor de tela — clip, nunca display:none */ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .mds-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--mds-bg); padding: var(--mds-s2) var(--mds-s3); border: 2px solid var(--mds-fg); } .mds-skip:focus { left: var(--mds-s2); } .mds-muted { color: var(--mds-muted); } .mds-micro { font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); } .mds-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== [0] Banner de PANIC / kill-switch — não fecha, não pisca (spec §5.2) ========================================================================== */ .mds-panic-banner { background: var(--mds-alarm-bg); color: var(--mds-alarm-fg); padding: var(--mds-s3) var(--mds-s4); border-bottom: 3px solid var(--mds-alarm); } .mds-panic-banner__title { margin: 0 0 var(--mds-s1); font-size: var(--mds-fs-lg); line-height: var(--mds-lh-lg); font-weight: 700; letter-spacing: 0.02em; } .mds-panic-banner__meta { margin: 0 0 var(--mds-s2); font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); } .mds-panic-banner__note { font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); margin: 0 0 var(--mds-s2); } .mds-panic-banner .mds-tg-link { background: var(--mds-alarm-fg); color: var(--mds-alarm-bg); border-color: var(--mds-alarm-fg); } /* conteúdo esmaecido sob panic — legível, NUNCA bloqueado por overlay */ body.is-panic .mds-dim { opacity: 0.7; } /* ========================================================================== [1] Faixa "esperando você × esperando terceiro" — fixa em toda tela (AC6) ========================================================================== */ .mds-wait-band { display: flex; align-items: stretch; gap: 1px; width: 100%; min-height: var(--mds-tap); background: var(--mds-line); border-bottom: 1px solid var(--mds-line); } .mds-wait-band__col { flex: 1 1 0; display: flex; align-items: center; gap: var(--mds-s2); min-height: var(--mds-tap); padding: var(--mds-s2) var(--mds-s3); text-decoration: none; font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); } .mds-wait-band__col--you { background: var(--mds-wait-you-bg); color: var(--mds-wait-you); } .mds-wait-band__col--third { background: var(--mds-wait-third-bg); color: var(--mds-wait-third); } .mds-wait-band__count { font-weight: 700; font-variant-numeric: tabular-nums; } .mds-wait-band__label { flex: 1 1 auto; } /* ========================================================================== [2] Chip de liveness ========================================================================== */ .mds-live-dot { display: inline-flex; align-items: center; gap: var(--mds-s1); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); white-space: nowrap; } .mds-live-dot__mark { font-size: 14px; line-height: 1; } .mds-live-dot--live { color: var(--mds-live); } .mds-live-dot--reconnecting { color: var(--mds-reconnect); } .mds-live-dot--offline, .mds-live-dot--stale { color: var(--mds-stale); } /* ========================================================================== layout geral ========================================================================== */ .mds-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mds-s2); padding: var(--mds-s3) var(--mds-s4) var(--mds-s2); border-bottom: 1px solid var(--mds-line); flex-wrap: wrap; } .mds-topbar h1 { margin: 0; font-size: var(--mds-fs-lg); line-height: var(--mds-lh-lg); } .mds-topbar__tz { display: block; font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-muted); font-weight: 400; } main { display: block; } .mds-block { padding: var(--mds-s4); border-bottom: 1px solid var(--mds-line); } .mds-block > h2 { margin: 0 0 var(--mds-s3); font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mds-muted); font-weight: 700; } /* ========================================================================== dinheiro — o átomo mais protegido do produto ========================================================================== */ .mds-money-pair { display: flex; gap: var(--mds-s3); align-items: stretch; } .mds-money-pair > * { flex: 1 1 0; min-width: 0; } .mds-money { display: block; padding: var(--mds-s3); border-radius: var(--mds-radius); } .mds-money--provisional { border: 2px dashed var(--mds-money-provisional-line); color: var(--mds-money-provisional); } .mds-money--reconciled { border: 2px solid var(--mds-money-reconciled-line); color: var(--mds-money-reconciled); } .mds-money__stage { display: block; font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); letter-spacing: 0.06em; text-transform: uppercase; } .mds-money__value { display: block; font-size: var(--mds-fs-money); line-height: var(--mds-lh-money); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; word-break: keep-all; } .mds-money--reconciled .mds-money__value { font-weight: 700; } .mds-money__gloss { display: block; font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-muted); } .mds-money--pos .mds-money__value { color: var(--mds-pos); } .mds-money--neg .mds-money__value { color: var(--mds-neg); } .mds-money--stale { border-style: dashed; } .mds-delta { display: block; margin-top: var(--mds-s2); font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); color: var(--mds-muted); font-variant-numeric: tabular-nums; } /* linhas de decomposição (gasto / receita / ROI) */ .mds-kv { display: flex; align-items: baseline; gap: var(--mds-s2); padding: var(--mds-s1) 0; font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); } .mds-kv__k { flex: 0 0 auto; min-width: 5.5em; color: var(--mds-muted); } .mds-kv__v { flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; } .mds-kv__stage { flex: 0 0 auto; font-size: var(--mds-fs-micro); color: var(--mds-muted); min-width: 6.5em; text-align: right; } .mds-formula { color: var(--mds-muted); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); } /* ========================================================================== filtros de período ========================================================================== */ .mds-period { display: flex; gap: var(--mds-s2); overflow-x: auto; padding: var(--mds-s2) var(--mds-s4); border-bottom: 1px solid var(--mds-line); scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .mds-period__btn { flex: 0 0 auto; min-height: var(--mds-tap); padding: 0 var(--mds-s3); border: 1px solid var(--mds-line); border-radius: var(--mds-radius-pill); background: var(--mds-bg); cursor: pointer; white-space: nowrap; font-size: var(--mds-fs-body); } .mds-period__btn[aria-pressed="true"] { background: var(--mds-fg); color: var(--mds-bg); border-color: var(--mds-fg); font-weight: 700; } .mds-window { padding: 0 var(--mds-s4) var(--mds-s2); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-muted); } /* ========================================================================== ranking de ofertas ========================================================================== */ .mds-rank { list-style: none; margin: 0; padding: 0; } .mds-rank__item { display: block; padding: var(--mds-s3) 0; border-top: 1px solid var(--mds-line); } .mds-rank__item:first-child { border-top: 0; } .mds-rank__top { display: flex; align-items: baseline; gap: var(--mds-s2); } .mds-rank__pos { flex: 0 0 auto; color: var(--mds-muted); font-variant-numeric: tabular-nums; } .mds-rank__net { flex: 1 1 auto; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; } .mds-rank__roi { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .mds-rank__label { display: block; font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); text-decoration: none; word-break: break-word; } .mds-rank__meta { display: flex; flex-wrap: wrap; gap: var(--mds-s2); align-items: center; margin-top: var(--mds-s1); } .mds-pos { color: var(--mds-pos); } .mds-neg { color: var(--mds-neg); } .mds-state-chip { display: inline-block; padding: 2px var(--mds-s2); border: 1px solid var(--mds-line); border-radius: var(--mds-radius-pill); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); letter-spacing: 0.04em; white-space: nowrap; } .mds-sample { font-size: var(--mds-fs-micro); color: var(--mds-wait-third); background: var(--mds-wait-third-bg); border-radius: var(--mds-radius-pill); padding: 2px var(--mds-s2); white-space: nowrap; } .mds-unreconciled { margin-top: var(--mds-s4); padding-top: var(--mds-s3); border-top: 2px dashed var(--mds-money-provisional-line); } /* ========================================================================== trilha vertical do fluxo — É uma

). ========================================================================== */ .u-m0 { margin: 0; } .u-mb1 { margin: 0 0 var(--mds-s1); } .u-mb2 { margin: 0 0 var(--mds-s2); } .u-mb3 { margin: 0 0 var(--mds-s3); } .u-mt2-mb0 { margin: var(--mds-s2) 0 0; } .u-mt2-mb1 { margin: var(--mds-s2) 0 var(--mds-s1); } .u-mt4-mb1 { margin: var(--mds-s4) 0 var(--mds-s1); } .u-mt5-mb2 { margin: var(--mds-s5) 0 var(--mds-s2); } .u-mt3 { margin-top: var(--mds-s3); } .u-mt4 { margin-top: var(--mds-s4); } .u-mt5 { margin-top: var(--mds-s5); } .u-gap1 { margin-bottom: var(--mds-s1); } .u-gap3 { margin-bottom: var(--mds-s3); } .u-block { display: block; } .u-strong { font-weight: 700; } .u-flush { border-bottom: 0; padding-bottom: 0; } .u-band-note { margin: 0; padding: var(--mds-s1) var(--mds-s3); } .u-pad-foot { padding: 0 var(--mds-s4) var(--mds-s4); } .u-eyebrow { margin: 0 0 var(--mds-s2); text-transform: uppercase; letter-spacing: 0.08em; } .u-queue-head { margin: 0 0 var(--mds-s1); font-size: var(--mds-fs-body); letter-spacing: 0.08em; } /* botões que não ocupam a largura toda — o alvo de toque continua ≥44px porque `.mds-btn` já garante 48px de altura. */ .u-btn-inline { width: auto; padding: 0 var(--mds-s3); } .u-btn-inline-lg { width: auto; padding: 0 var(--mds-s4); } .u-btn-tap { width: auto; min-height: var(--mds-tap); padding: 0 var(--mds-s3); } /* Campo de formulário. Os 16px NÃO são estética: abaixo disso o iOS dá zoom no foco e o dono perde o enquadramento da tela no meio do login. */ .mds-input { width: 100%; min-height: var(--mds-tap); font-size: var(--mds-fs-base); padding: 0 var(--mds-s3); border: 1px solid var(--mds-line); border-radius: var(--mds-radius); background: var(--mds-bg); color: var(--mds-fg); } /* ========================================================================== TELA DE ENTRADA — a cara do produto. Duas decisões de produto estão codificadas aqui. 1. O painel é PRODUTO STANDALONE, não a janela web de um bot. O Telegram é o MEIO por onde o código chega, e aparece com o peso de um meio: linha de apoio em `micro`, nunca protagonista. Nenhum logo, nenhuma cor de terceiro, nenhum "fale com o bot". O que ocupa o topo é o nome do produto. 2. Hierarquia tipográfica REAL, quatro níveis com função: display (34px) wordmark — a única coisa que se lê de longe base (16px) a instrução acionável body (14px) os passos micro (12px) canal, validade do código, rodapé Sem isso a tela vira uma pilha de parágrafos do mesmo tamanho, que foi exatamente o diagnóstico do dono: "um campo pelado, sem desenho". Claro e escuro saem de graça: tudo aqui é token semântico, e `tokens.css` já troca a paleta inteira em `prefers-color-scheme: dark`. ========================================================================== */ .mds-entrada { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; /* `safe-area-inset` porque em `mds-anon` a nav do rodapé não existe para reservar espaço, e o notch/gesture bar do celular reserva por conta. */ padding: var(--mds-s5) var(--mds-s4) calc(var(--mds-s5) + env(safe-area-inset-bottom, 0px)); } .mds-entrada__card { width: 100%; max-width: 24rem; } .mds-entrada__mark { margin: 0; font-size: var(--mds-fs-display); line-height: var(--mds-lh-display); font-weight: 700; /* tracking negativo: em peso 700 a fonte de sistema abre demais no tamanho de display e o wordmark perde a unidade de palavra */ letter-spacing: -0.02em; } .mds-entrada__sub { margin: var(--mds-s1) 0 0; font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mds-muted); } /* Fio sob a marca: separa identidade de instrução sem gastar uma caixa. */ .mds-entrada__rule { height: 1px; margin: var(--mds-s5) 0; background: var(--mds-line); } .mds-entrada__lead { margin: 0 0 var(--mds-s4); font-size: var(--mds-fs-base); line-height: var(--mds-lh-base); } /* Passos numerados por contador de CSS: o número é decoração tipográfica e fica fora do texto acessível, que já é uma

— leitor de tela anuncia "item 1 de 2" sozinho e não ouve o número duas vezes. */ .mds-steps { margin: 0 0 var(--mds-s5); padding: 0; list-style: none; counter-reset: passo; } .mds-steps li { counter-increment: passo; position: relative; padding-left: var(--mds-s6); font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); } .mds-steps li + li { margin-top: var(--mds-s3); } .mds-steps li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: var(--mds-s5); height: var(--mds-s5); display: flex; align-items: center; justify-content: center; border: 1px solid var(--mds-line); border-radius: var(--mds-radius-pill); font-size: var(--mds-fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mds-muted); } /* Comando INLINE. `.mds-cli-hint code` é bloco com botão de copiar, certo para os comandos longos que o painel sugere nos estados vazios; `/painel` tem sete caracteres e não paga uma caixa própria na única tela que o dono vê antes de entrar. */ .mds-entrada__cmd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 0 var(--mds-s1); border: 1px solid var(--mds-line); border-radius: var(--mds-radius); background: var(--mds-surface); color: var(--mds-fg); } /* Onde o código vem de fora do produto. Peso de nota de rodapé, de propósito. */ .mds-steps__canal { display: block; margin-top: var(--mds-s1); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-muted); } .mds-entrada__campo { display: block; margin-bottom: var(--mds-s2); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mds-muted); font-weight: 700; } /* Código de uso único: monoespaçado e espaçado — o dono confere caractere a caractere quando digita à mão, e `l`/`1`/`I` em proporcional custam uma tentativa das poucas que o rate limit permite. */ .mds-entrada__codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; } /* Erro do login. Ele PRECISA saltar: quem errou o código tem 120 segundos e um rate limit de 5/min — não pode descobrir a falha relendo a tela. */ .mds-entrada__erro { margin: var(--mds-s4) 0 0; padding: var(--mds-s3); border: 1px solid var(--mds-alarm); border-radius: var(--mds-radius); color: var(--mds-alarm); font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); } .mds-entrada__erro-remedio { display: block; margin-top: var(--mds-s1); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-fg); } /* Estado neutro (validando…/entrando…) — mesmo lugar do erro, sem o alarme. */ .mds-entrada__status { margin: var(--mds-s4) 0 0; font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); color: var(--mds-muted); } .mds-entrada__rodape { margin: var(--mds-s5) 0 0; padding-top: var(--mds-s4); border-top: 1px solid var(--mds-line); font-size: var(--mds-fs-micro); line-height: var(--mds-lh-micro); color: var(--mds-muted); } /* Realce da fila apontada por ?fila= na tela de pendências. */ .mds-queue.is-focused { outline: 2px solid currentColor; outline-offset: -2px; } /* Skeletons: a altura é a FORMA do conteúdo que vai chegar, e por isso vive no CSS (reserva o espaço final → CLS < 0,1). Antes vinha por style inline, que a CSP descartaria — o bloco colapsaria para 0px e o layout saltaria. */ .mds-skel { margin-bottom: var(--mds-s3); } .mds-skel--money { height: 110px; } .mds-skel--card { height: 120px; } .mds-skel--detail { height: 90px; } .mds-skel--row { height: 72px; } .mds-skel--rank { height: 64px; } .mds-skel--node { height: 40px; } /* cabeçalho: liveness + sair, lado a lado, sem espremer o alvo de toque */ .mds-topbar__right { display: flex; align-items: center; gap: var(--mds-s3); flex-wrap: wrap; }