/* ============================================================================
   wa-devices.css: /client/devices e /client/devices/connect/{id} (W1, 01/10/2026).
   Mesmo padrão de /client/telegram (telegram.css): cabeçalho com meta viva,
   3 números, cards com anel de status, estado vazio em 3 passos e a tela de
   conectar em duas áreas (passo atual + palco do QR). O ui-kit faz os
   componentes; aqui só o que é da página, namespace wd-*. devices.css continua
   com os modais (dv-*, sp-*, mi-*...).
   Só tokens --ui-* (a cor do WhatsApp é a única local, --wd-wa). Sem sombra,
   sem faixa de destaque, sem !important. Movimento: transform/opacity,
   120 a 350 ms, desliga com prefers-reduced-motion. Cabe em 360 px.
   ============================================================================ */

:root {
    --wd-pad: var(--ui-space-5);
    --wd-wa: #25D366;
    --wd-wa-rgb: 37, 211, 102;
    --wd-wa-ink: #0F7A3E;
}
:root[data-theme="dark"] { --wd-wa-ink: #4ADE80; }

.wd-page { min-width: 0; }

@keyframes wdRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wdPing { 0% { transform: scale(.6); opacity: .6; } 80%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes wdPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.wd-rise { animation: wdRise var(--ui-dur-4) var(--ui-ease-out) backwards; }
.wd-d1 { animation-delay: 40ms; }
.wd-d2 { animation-delay: 80ms; }

/* ── Cabeçalho (ui-page-head) ────────────────────────────────────────────── */
.wd-top .dsh-breadcrumb { margin: 0 0 var(--ui-space-4); }
.wd-head { align-items: center; }
.wd-head-txt { min-width: 0; }
.wd-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-3); min-width: 0; }
.wd-mark { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--ui-r-lg); color: var(--wd-wa-ink); background: rgba(var(--wd-wa-rgb), .14); }
.wd-mark svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); }
.wd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }
.wd-quota { font-weight: var(--ui-fw-semibold); color: var(--ui-ink-2); }
.wd-meta .sep { margin: 0 var(--ui-space-2); color: var(--ui-muted-2); }
.wd-health { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--ui-fw-medium); }
.wd-health.is-ok { color: var(--ui-ok-ink); }
.wd-health.is-warn { color: var(--ui-warn-ink); }
.wd-dot { position: relative; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wd-dot.is-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: wdPing 2s var(--ui-ease-out) infinite; }
.wd-head-actions { flex-wrap: nowrap; }

/* ── Avisos (ui-callout) ─────────────────────────────────────────────────── */
.wd-block, .wd-page .dev-alert { margin-bottom: var(--ui-space-6); border-radius: var(--ui-r-xl); }

/* ── 3 números (KPI) ─────────────────────────────────────────────────────── */
.wd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-4); margin-bottom: var(--ui-space-6); }
.wd-kpi { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; padding: var(--wd-pad); background: var(--ui-bg-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-xl); }
.wd-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.wd-kpi-lbl { font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); color: var(--ui-muted); }
.wd-kpi-val { font-size: var(--ui-fs-display); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-page); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.wd-kpi-val small { margin-left: 2px; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-medium); letter-spacing: 0; color: var(--ui-muted-2); }
.wd-kpi-viz { display: flex; align-items: flex-end; min-height: 6px; margin-top: auto; }
.wd-kpi-bar { width: 100%; height: 6px; background: var(--ui-fill-2); }
.wd-kpi-ctx { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); min-height: 24px; min-width: 0; font-size: var(--ui-fs-help); color: var(--ui-muted); }
.wd-kpi-top-dev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-kpi-top-dev strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink-2); }

/* ── Estado vazio ────────────────────────────────────────────────────────── */
.wd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--ui-space-12) var(--ui-space-6) 40px; background: var(--ui-bg-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-2xl); }
.wd-art { position: relative; width: 168px; height: 128px; margin-bottom: var(--ui-space-5); }
.wd-art > span { position: absolute; display: grid; place-items: center; animation: wdPop var(--ui-dur-4) var(--ui-ease-out) backwards; }
.wd-art-phone { left: 50%; top: 6px; width: 80px; height: 112px; margin-left: -40px; border-radius: var(--ui-r-2xl); color: var(--ui-muted-2); background: var(--ui-fill-1); border: 1px solid var(--ui-line); }
.wd-art-phone svg { width: 36px; height: 36px; stroke-width: 1.5; }
.wd-art-qr { right: 10px; top: 0; width: 48px; height: 48px; border-radius: 50%; color: #FFFFFF; background: var(--wd-wa); animation-delay: 80ms; }
.wd-art-qr svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); stroke-width: 2.2; }
.wd-art-bubble { width: 38px; height: 38px; border-radius: var(--ui-r-lg); background: var(--ui-bg-card); border: 1px solid var(--ui-line); animation-delay: 160ms; }
.wd-art-bubble svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.wd-art-bubble.is-a { left: 4px; top: 30px; color: var(--ui-accent-ink); }
.wd-art-bubble.is-b { right: 22px; bottom: 0; color: var(--ui-ok-ink); animation-delay: 220ms; }
.wd-empty-title { margin: 0; font-size: var(--ui-fs-h2); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.wd-empty-sub { max-width: 460px; margin: var(--ui-space-2) 0 0; font-size: var(--ui-fs-body-lg); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.wd-empty-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-3); width: 100%; max-width: 640px; margin: var(--ui-space-6) 0; padding: 0; }
.wd-empty-steps li { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-4) var(--ui-space-3); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); }
.wd-empty-steps .n { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-semibold); font-variant-numeric: tabular-nums; color: var(--ui-accent-ink); background: rgba(var(--ui-accent-rgb), .11); }
.wd-empty-actions { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); width: 100%; max-width: 320px; }
.wd-empty-actions .ui-btn-lg { width: 100%; }
.wd-empty-hint { margin: 0; font-size: var(--ui-fs-help); color: var(--ui-muted); }

/* ── Cards de dispositivo ────────────────────────────────────────────────── */
.wd-page .wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--ui-space-4); }
.wd-page .wd-card { position: relative; display: flex; flex-direction: column; gap: var(--ui-space-4); min-width: 0; padding: var(--wd-pad); background: var(--ui-bg-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-xl); overflow: visible; transition: border-color var(--ui-dur-2) var(--ui-ease); animation: wdRise var(--ui-dur-4) var(--ui-ease-out) backwards; }
.wd-grid > .wd-card:nth-child(2) { animation-delay: 40ms; }
.wd-grid > .wd-card:nth-child(3) { animation-delay: 80ms; }
.wd-grid > .wd-card:nth-child(n+4) { animation-delay: 120ms; }
.wd-page .wd-card:hover { border-color: var(--ui-line-strong); }
.wd-page .wd-card.is-focus { border-color: var(--ui-accent); }
.wd-card:has(.ui-dropdown.open) { z-index: 5; }
.wd-card-head { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; }
/* Avatar com anel de status: foto do perfil ou o ícone; o ponto diz o estado. */
.wd-av { --ui-av-size: 44px; position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; color: var(--wd-wa-ink); background: rgba(var(--wd-wa-rgb), .14); }
.wd-av > svg { width: var(--ui-ic-lg); height: var(--ui-ic-lg); }
.wd-av.is-off { color: var(--ui-muted); background: var(--ui-fill-2); }
.wd-av-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ui-line-2); }
.wd-av.is-off .wd-av-img { opacity: .72; }
.wd-card-idt { flex: 1 1 auto; min-width: 0; }
.wd-card-name { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.wd-card-name .dev-card-title-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-card-name .ui-verified { flex: 0 0 auto; }
.wd-card-user { display: flex; align-items: center; gap: 0; min-width: 0; margin-top: 2px; overflow: hidden; white-space: nowrap; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wd-card-user > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wd-card-user > span:not(.d-none) ~ span:not(.d-none)::before { content: "·"; margin: 0 6px; color: var(--ui-muted-2); }
.wd-card-phone { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.wd-card-menu { flex: 0 0 auto; align-self: flex-start; }
.wd-card-menu .ui-menu { min-width: 240px; }
.wd-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--ui-space-2); margin-top: -4px; }
.wd-chip { font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); }
/* Motivo do estado: tom suave do problema, sem borda pesada. */
.wd-card-why { display: flex; align-items: flex-start; gap: var(--ui-space-2); padding: 10px 12px; border-radius: var(--ui-r-lg); background: rgba(var(--ui-warn-rgb), .09); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); overflow-wrap: anywhere; }
.wd-card-why.d-none { display: none; }
.wd-card-why svg { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 2px; color: var(--ui-warn-ink); }
.wd-why-when { color: var(--ui-muted); }
.wd-card-nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }
.wd-num { min-width: 0; padding: var(--ui-space-3) 14px; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.wd-num .val { display: block; font-size: var(--ui-fs-h2); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.wd-card.is-off .wd-num .val { color: var(--ui-muted); }
.wd-num .lbl { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-help); color: var(--ui-muted); }
/* O divisor antigo fica no HTML (contrato dos testes); o ritmo vem do gap. */
.wd-card .dev-card-hr { display: none; }
.wd-card .dev-tier, .wd-card .dev-budget { margin: 0; padding: var(--ui-space-3) 14px; border: 0; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.wd-card .dev-tier-top .val, .wd-card .dev-budget-row .val { font-weight: var(--ui-fw-semibold); }
.wd-card .dev-tier-top .lbl, .wd-card .dev-budget-row .lbl, .wd-card .dev-budget-none { font-weight: var(--ui-fw-medium); }
.wd-card-fix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); align-items: stretch; gap: var(--ui-space-2); min-width: 0; margin-top: auto; padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-line-2); }
.wd-card-fix > .ui-btn { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--ui-target-touch, 44px); margin: 0; padding: 10px var(--ui-space-2); white-space: normal; text-align: center; overflow-wrap: anywhere; }
.wd-card-fix:not(:has(> .ui-btn:not(.d-none))) { display: none; }
.wd-page .ui-menu-item.is-disabled .ui-menu-hint { font-size: var(--ui-fs-caption); }

/* ══ Modais (W1B): a família do "Criar dispositivo" do Telegram ═════════════
   Passo atual à esquerda (passos em pílula, título, 1 frase, 1 ação) e palco
   à direita em --ui-fill-1. Ícones em ui-tile neutro; a marca só no escolhido.
   Uma cor de acento; valores em tinta normal; avisos em tom suave sem borda. */
.wd-mx-body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: var(--ui-space-6); align-items: stretch; padding-top: var(--ui-space-3); }
.wd-mx-main { min-width: 0; }
.wd-mx-main > section[hidden], .wd-stage-card[hidden], .wd-mx [hidden] { display: none; }
.wd-mx-main > section:not([hidden]) { animation: wdRise var(--ui-dur-3) var(--ui-ease-out) backwards; }
.wd-mx .ui-mfoot { flex-wrap: wrap; }
.wd-mx .ui-field { margin-bottom: var(--ui-space-4); }
.wd-step-t { margin: 0 0 6px; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.wd-step-d { margin: 0 0 var(--ui-space-5); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-muted); }
/* Passos em pílula: 1 Tipo, 2 Nome/Conectar */
.wd-stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--ui-space-5); padding: 0; list-style: none; counter-reset: wdmx; }
.wd-stepper li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--ui-r-pill); background: var(--ui-fill-1); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); counter-increment: wdmx; transition: background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease); }
.wd-stepper li::before { content: counter(wdmx); display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); color: var(--ui-muted); background: var(--ui-bg-card); border: 1px solid var(--ui-line); }
.wd-stepper li.is-current { color: var(--ui-ink); background: rgba(var(--ui-accent-rgb), .11); }
.wd-stepper li.is-current::before { color: var(--ui-on-primary, #FFFFFF); background: var(--ui-accent); border-color: var(--ui-accent); }
.wd-stepper li.is-done { color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .1); }
.wd-stepper li.is-done::before { content: ""; border-color: var(--ui-ok); background: var(--ui-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Escolha do tipo: 2 ui-choice iguais, ícone em ui-tile, rádio à direita */
.wd-kind { align-items: center; gap: 14px; padding: 14px 16px; }
.wd-kind .ui-choice-body { flex: 1 1 auto; }
.wd-kind .ui-radio { flex: 0 0 auto; margin: 0; }
.wd-kind .ui-tile { transition: background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease); }
.wd-kind:has(input:checked) .ui-tile { background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); }
/* Comparação: duas colunas neutras, sem cor de fornecedor */
.wd-compare { margin-top: var(--ui-space-3); }
.wd-compare .dev-compare-col { padding: var(--ui-space-3) 14px; border: 0; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.wd-compare .dev-compare-col-title { margin-bottom: var(--ui-space-2); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.wd-compare .dev-compare-list li { font-size: var(--ui-fs-help); color: var(--ui-ink-2); }
.wd-compare .dev-compare-list li svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); color: var(--ui-muted); }
/* Link terciário dentro do texto ("Importar", "Gerar link para ele") */
.wd-import { margin: var(--ui-space-1, 4px) 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }
#meta-sub-signup .wd-import { margin-top: var(--ui-space-5); }
.ui-btn.wd-inline-link { min-height: 0; height: auto; padding: 0 2px; font-size: inherit; font-weight: var(--ui-fw-semibold); vertical-align: baseline; }
.wd-import-field { margin-top: var(--ui-space-2); }
.wd-adv-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--ui-space-3); }
.wd-adv-link svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.wd-mx-tabs { margin-bottom: var(--ui-space-4); }
.wd-manual-actions { display: flex; justify-content: flex-end; margin-top: var(--ui-space-4); }
.wd-err-line { margin-top: var(--ui-space-3); color: var(--ui-danger-ink); }
.wd-wait-line { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-2); margin-top: var(--ui-space-3); font-size: var(--ui-fs-help); color: var(--ui-muted); }
/* Aviso curto (mesmo do Telegram): fundo suave, sem borda */
.wd-note { display: flex; align-items: flex-start; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); padding: 10px 12px; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.wd-note svg { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 2px; color: var(--ui-muted); }
.wd-note strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.wd-note.is-warn { background: rgba(var(--ui-warn-rgb), .09); }
.wd-note.is-warn svg { color: var(--ui-warn-ink); }
.wd-note.is-danger { background: rgba(var(--ui-danger-rgb), .08); }
.wd-note.is-danger svg { color: var(--ui-danger-ink); }
/* Palco */
.wd-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); min-width: 0; min-height: 300px; padding: var(--ui-space-6) var(--ui-space-5); border-radius: var(--ui-r-xl); background: var(--ui-fill-1); }
.wd-stage-card { width: 100%; max-width: 236px; padding: var(--ui-space-4); border: 1px solid var(--ui-line); border-radius: var(--ui-r-xl); background: var(--ui-bg-card); animation: wdRise var(--ui-dur-3) var(--ui-ease-out) backwards; }
.wd-pv { text-align: center; }
.wd-pv-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: var(--ui-space-3); text-align: left; }
.wd-pv-av { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: var(--wd-wa-ink); background: rgba(var(--wd-wa-rgb), .14); }
.wd-pv-av svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.wd-pv-txt { min-width: 0; }
.wd-pv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.wd-pv-sub { font-size: var(--ui-fs-help); color: var(--ui-muted); }
.wd-pv-qr { display: grid; place-items: center; width: 148px; height: 148px; margin: 0 auto; border: 1px dashed var(--ui-ctl-line); border-radius: var(--ui-r-lg); color: var(--ui-muted-2); background: var(--ui-fill-1); }
.wd-pv-qr svg { width: 44px; height: 44px; stroke-width: 1.4; }
.wd-pv-cap { margin: var(--ui-space-3) 0 0; font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.wd-pv-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: wdpv; text-align: left; }
.wd-pv-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); color: var(--ui-ink-2); counter-increment: wdpv; }
.wd-pv-steps li::before { content: counter(wdpv); display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); color: var(--ui-muted); background: var(--ui-bg-card); border: 1px solid var(--ui-line); }


/* Demais modais da página: o que era style= inline */
.wd-gap-top { margin-top: var(--ui-space-4); }
.wd-opt-hint { font-weight: var(--ui-fw-regular, 400); color: var(--ui-muted-2); }
.wd-err-msg { margin-top: 2px; }
.wd-load-msg { margin-top: var(--ui-space-3); }
.dev-help-gap { margin-top: var(--ui-space-2); }

/* ══ Tela de conectar (connect.php) ═════════════════════════════════════════ */
.wd-cx { max-width: 880px; margin: 0 auto; min-width: 0; }
.wd-cx-back { margin-bottom: var(--ui-space-4); }
.wd-cx-card { min-width: 0; padding: var(--ui-space-6); background: var(--ui-bg-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-2xl); }
.wd-cx-head { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; margin-bottom: var(--ui-space-5); }
.wd-cx-head .wd-av { --ui-av-size: 40px; width: 40px; height: 40px; }
.wd-cx-idt { flex: 1 1 auto; min-width: 0; }
.wd-cx-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-modal); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.wd-cx-sub { margin: 2px 0 0; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wd-cx-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ui-space-6); align-items: stretch; }
.wd-cx-main { min-width: 0; }
.wd-cx-step-t { margin: 0 0 6px; font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); color: var(--ui-ink); }
.wd-cx-step-d { margin: 0 0 var(--ui-space-5); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-muted); }
/* Passo a passo: o atual destacado, os feitos com check. */
.wd-steps { display: flex; flex-direction: column; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-5); padding: 0; list-style: none; counter-reset: wdst; }
.wd-steps li { display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: 10px 12px; border-radius: var(--ui-r-lg); font-size: var(--ui-fs-body); line-height: var(--ui-lh-snug); color: var(--ui-muted); counter-increment: wdst; transition: background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease); }
.wd-steps li::before { content: counter(wdst); display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-semibold); color: var(--ui-muted); background: var(--ui-bg-card); border: 1px solid var(--ui-line); transition: background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease), border-color var(--ui-dur-2) var(--ui-ease); }
.wd-steps li strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink-2); }
.wd-steps li.is-current { color: var(--ui-ink); background: rgba(var(--ui-accent-rgb), .09); }
.wd-steps li.is-current::before { color: var(--ui-on-primary, #FFFFFF); background: var(--ui-accent); border-color: var(--ui-accent); }
.wd-steps li.is-done { color: var(--ui-ok-ink); }
.wd-steps li.is-done::before { content: ""; border-color: var(--ui-ok); background: var(--ui-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wd-cx-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); min-width: 0; min-height: 340px; padding: var(--ui-space-6) var(--ui-space-5); border-radius: var(--ui-r-xl); background: var(--ui-fill-1); text-align: center; }
.wd-cx-stage #qrContainer { display: flex; flex-direction: column; align-items: center; width: 100%; }
.wd-cx-stage .dev-qr-img { width: 228px; max-width: 100%; margin: 0 auto; padding: 10px; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-lg); background: #FFFFFF; image-rendering: pixelated; animation: wdFade var(--ui-dur-3) var(--ui-ease-out); }
.wd-cx-stage .dev-qr-countdown { margin: var(--ui-space-3) 0 0; font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.wd-cx-stage .dev-infobox { width: 100%; margin: 0; text-align: left; border: 0; border-radius: var(--ui-r-lg); }
.wd-cx-stage .dev-pairing { width: 100%; margin-top: var(--ui-space-3); border: 0; border-radius: var(--ui-r-lg); }
.wd-cx-stage .dev-pairing code { color: var(--ui-accent-ink); background: none; }
.wd-qr-skel { width: 228px; max-width: 100%; aspect-ratio: 1; border-radius: var(--ui-r-lg); }
.wd-qr-wait { margin: var(--ui-space-3) 0 0; }
.wd-cx-wait { margin: 0; font-size: var(--ui-fs-help); color: var(--ui-muted); }
.wd-cx-stage #connectBtn { margin-top: var(--ui-space-3); }
.wd-cx-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--ui-space-6) 0 var(--ui-space-2); }
.wd-cx-done-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--ui-space-4); border-radius: 50%; color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .12); animation: wdPop var(--ui-dur-4) var(--ui-ease-out) backwards; }
.wd-cx-done-ico svg { width: 32px; height: 32px; }
.wd-cx-done-t { margin: 0; font-size: var(--ui-fs-h2); font-weight: var(--ui-fw-semibold); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); }
.wd-cx-done-d { margin: var(--ui-space-2) 0 0; font-size: var(--ui-fs-body); color: var(--ui-muted); }
.wd-cx-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); margin-top: var(--ui-space-5); }
/* Região: linha compacta no topo do passo a passo. */
.wd-cx .dev-region { margin: 0 0 var(--ui-space-5); border-radius: var(--ui-r-lg); }
.wd-cx .dev-region-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .wd-cx-body { grid-template-columns: 1fr; }
    .wd-cx-stage { order: -1; min-height: 0; }
}
@media (max-width: 760px) {
    .wd-mx-body { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
    .wd-stage { display: none; }
    .wd-compare .dev-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .wd-kpis { grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); margin-bottom: var(--ui-space-5); }
    .wd-kpis > .wd-kpi:first-child { grid-column: 1 / -1; }
    .wd-kpi { padding: var(--ui-space-4); }
    .wd-kpi-val { font-size: var(--ui-fs-h2); }
    .wd-page .wd-grid { grid-template-columns: 1fr; gap: var(--ui-space-3); }
    .wd-page .wd-card { padding: var(--ui-space-4); }
    .wd-empty { padding: var(--ui-space-8) var(--ui-space-4); }
    .wd-empty-steps { grid-template-columns: 1fr; max-width: 360px; }
    .wd-empty-steps li { flex-direction: row; text-align: left; }
    .wd-hide-sm { display: none; }
    .wd-cx-card { padding: var(--ui-space-4); }
    .wd-cx .dev-region-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .wd-head { flex-wrap: wrap; gap: var(--ui-space-3); }
    .wd-head-actions { width: 100%; }
    .wd-head-actions .wd-primary { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .wd-rise, .wd-page .wd-card, .wd-art > span, .wd-cx-done-ico, .wd-cx-stage .dev-qr-img, .wd-mx-main > section, .wd-stage-card { animation: none; }
    .wd-stepper li, .wd-kind .ui-tile { transition: none; }
    .wd-dot.is-live::after { animation: none; }
    .wd-steps li, .wd-steps li::before { transition: none; }
}
.wd-steps li > span { padding-top: 2px; }

/* Avisos antigos (dev-infobox) dentro dos modais: tom suave, sem borda (W1B) */
.ui-modal .dev-infobox { gap: var(--ui-space-2); margin-bottom: var(--ui-space-4); padding: 10px 12px; border: 0; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.ui-modal .dev-infobox svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 2px; color: var(--ui-muted); }
.ui-modal .dev-infobox.ok { background: rgba(var(--ui-ok-rgb), .08); }
.ui-modal .dev-infobox.ok svg { color: var(--ui-ok-ink); }
.ui-modal .dev-infobox.warn { background: rgba(var(--ui-warn-rgb), .09); }
.ui-modal .dev-infobox.warn svg { color: var(--ui-warn-ink); }
.ui-modal .dev-infobox.err { background: rgba(var(--ui-danger-rgb), .08); }
.ui-modal .dev-infobox.err svg { color: var(--ui-danger-ink); }
.ui-modal .dev-infobox.d-none { display: none; }