body{margin:0 auto;max-width:720px;padding:22px 16px 60px;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1e293b;background:#f8fafc}
h1{font-size:22px;margin:0 0 4px;color:#0f1729}
.resumo{margin:0 0 14px;color:#475569}
.degrau{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin:10px 0}
.degrau.pior{border-color:#fca5a5;background:#fef2f2}
.degrau h2{font-size:16px;margin:0 0 10px;color:#0f1729;overflow-wrap:anywhere}
.degrau em{font-style:normal;font-size:12px;font-weight:700;color:#b91c1c;background:#fee2e2;border-radius:999px;padding:2px 8px;margin-left:4px;white-space:nowrap}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.num{border:1px solid #e2e8f0;border-radius:8px;padding:6px 8px;background:#f8fafc;min-width:0}
.num b{display:block;font-size:18px;color:#0f1729}
.num span{font-size:12px;color:#475569}
.nota{color:#475569;font-size:13px;margin-top:16px}

/* ---- fatia B: login, painel da agência, links ---- */
.topo{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 14px;font-size:14px;color:#475569}
.topo strong{color:#0f1729;font-size:16px}
.entrar{max-width:380px;margin:12vh auto 0}
label{display:block;font-size:13px;color:#475569;margin:0 0 10px}
input,textarea,select{display:block;width:100%;box-sizing:border-box;font:inherit;padding:11px 12px;margin:4px 0 0;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#0f1729}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.marca{display:flex;align-items:center;gap:8px;font-size:15px;color:#1e293b;margin:8px 0}
.marca input{width:auto;margin:0}
button{font:inherit;cursor:pointer;min-height:44px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#1e293b;padding:0 14px}
button.primario{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600;width:100%;margin-top:10px}
button.linha{display:block;width:100%;text-align:left;margin:6px 0}
button.voltar{border:0;background:none;color:#475569;padding:0;margin:0 0 8px}
button.chip{min-height:40px;font-size:13px}
button.chip.on{background:#eff6ff;border-color:#3b82f6;color:#2563eb;font-weight:600}
button:disabled{opacity:.6}
.acoes,.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.erro{color:#b91c1c}.ok{color:#166534}
.erro,.ok{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
.erro:empty,.ok:empty{display:none} /* a caixa da mensagem só existe quando há mensagem: vazia, aparecia como um retângulo branco no login (print do Vinícius, 19/09) */
.endereco{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;overflow-wrap:anywhere;color:#0f1729}
.apagado{opacity:.55}
a{color:#2563eb;overflow-wrap:anywhere}

/* ---- fatia C: conferência do Meta ---- */
.degrau h3{font-size:14px;margin:12px 0 6px;color:#0f1729}
.selo{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;margin:0 0 6px}
.selo-saudavel{background:#dcfce7;color:#166534}.selo-com_problema{background:#fee2e2;color:#b91c1c}.selo-sem_dados{background:#f1f5f9;color:#475569}
.problema{overflow-wrap:anywhere;border-left:3px solid #fca5a5;padding-left:8px}
details{margin-top:10px}summary{cursor:pointer;color:#2563eb;font-size:14px;min-height:36px}

/* ---- fatia D: desenho final do painel (cartões, funil visual, visão geral). Tudo pensado primeiro pra 390px. ---- */
body{background:#f4f6fb}
.topo{position:sticky;top:0;z-index:2;margin:-22px -16px 16px;padding:12px 16px;background:#0f1729;color:#cbd5e1}
.topo strong{color:#fff;letter-spacing:.2px}
.topo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;text-align:right}
.topo button{min-height:36px;background:transparent;border-color:#334155;color:#e2e8f0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.kpi{min-width:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 10px 9px;border-top:3px solid #94a3b8}
.kpi span{display:block;font-size:12px;color:#475569}
.kpi b{display:block;font-size:20px;line-height:1.25;color:#0f1729;overflow-wrap:break-word}
.kpi-texto b{font-size:15px;line-height:1.3;margin:3px 0 2px}
.kpi small{display:block;font-size:11px;line-height:1.3;color:#64748b;overflow-wrap:anywhere}
.kpi-bom{border-top-color:#16a34a}.kpi-ruim{border-top-color:#dc2626}.kpi-ruim b{color:#b91c1c}
.barra{height:14px;margin:0 0 10px;background:#eef2f7;border-radius:999px;overflow:hidden}
.trilho{display:flex;height:100%;min-width:4px;border-radius:999px;overflow:hidden}
.seg{display:block;height:100%}
.seg-avancou{background:#2563eb}.seg-outros{background:#cbd5e1}.seg-saiu{background:#ef4444}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 2px 0;font-size:12px;color:#475569}
.legenda span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.l-avancou::before{background:#2563eb}.l-outros::before{background:#cbd5e1}.l-saiu::before{background:#ef4444}
.comoler .nota{margin-top:8px}
.cliente{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px;margin:12px 0}
.cliente>h2{font-size:17px;margin:0 0 4px;color:#0f1729;overflow-wrap:anywhere}
button.form{display:block;width:100%;text-align:left;margin:8px 0 0;padding:11px 12px;height:auto;min-height:64px;background:#f8fafc}
button.form:hover,button.form:focus-visible{border-color:#3b82f6;background:#eff6ff}
.form-topo{display:flex;width:100%;gap:8px;align-items:baseline;justify-content:space-between}
.form-topo b{font-size:15px;color:#0f1729;min-width:0;overflow-wrap:anywhere}
.form-topo i{font-style:normal;font-size:18px;font-weight:700;color:#0f1729;white-space:nowrap}
.form-linha{display:block;font-size:12.5px;color:#475569;margin-top:2px;overflow-wrap:anywhere}
.mini{display:block;height:6px;margin-top:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.mini i{display:block;height:100%;background:#16a34a;border-radius:999px}
.alerta{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;color:#b91c1c;background:#fee2e2;border-radius:999px;padding:2px 8px}
.vazio{color:#475569;font-size:14px;margin:6px 0 0}
details.ferramentas{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:4px 14px 10px}
.nao-achei{max-width:420px;margin:16vh auto 0;text-align:center}
.nao-achei h1{font-size:20px}

/* ---- fatia E: contatos ---- */
.contato{border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin:8px 0;background:#f8fafc;overflow-wrap:anywhere}
.contato.parou{border-left:4px solid #ef4444}
.contato b{display:block;font-size:15px;color:#0f1729}
.contato .fone{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:#1e293b}
.contato button.chip{margin-top:8px}

.contato .email{font-family:inherit;font-size:13.5px}
.contato .respostas{color:#0f1729;margin-top:4px}