/* ============================================================
   DMW Tracker — IMMERSIVE concept
   Light & friendly · top nav · gradient header band · floating cards
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#EEF1F7;
  --surface:#FFFFFF;
  --surface-2:#F7F9FC;
  --ink:#161A23;
  --muted:#5A6373;
  --faint:#8A93A4;
  --hair:#E6E9F0;
  --hair-2:#EEF1F7;

  --azul:#2F5096;
  --azul-deep:#21396C;
  --navy:#14213D;
  --azul-soft:#5C7BC0;
  --gold:#C9A85C;
  --gold-bright:#DBC07A;
  --gold-glow:rgba(214,184,110,.52);

  --green:#1FA971;
  --red:#D45B5B;

  --band:linear-gradient(125deg,#14213D 0%,#21386A 46%,#2F5096 100%);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;

  --sh-1:0 1px 2px rgba(22,26,35,.05), 0 2px 6px rgba(22,26,35,.04);
  --sh-2:0 6px 16px rgba(22,26,35,.07), 0 2px 6px rgba(22,26,35,.05);
  --sh-3:0 18px 40px -12px rgba(33,57,108,.28), 0 6px 16px rgba(22,26,35,.08);
  --sh-float:0 24px 50px -18px rgba(33,57,108,.34), 0 8px 20px rgba(22,26,35,.08);

  --ff-display:'Outfit',sans-serif;
  --ff-body:'Hanken Grotesk',sans-serif;
  --ff-mono:'JetBrains Mono',monospace;

  --maxw:1240px;
  --nav-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
canvas{display:block}
::selection{background:rgba(47,80,150,.18)}

/* ---------- top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.topnav__in{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);
  padding:0 22px;display:flex;align-items:center;gap:26px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand__tile{
  width:38px;height:38px;border-radius:11px;
  background:var(--band);
  display:grid;place-items:center;color:#fff;
  font-family:var(--ff-display);font-weight:700;font-size:17px;
  box-shadow:0 6px 14px -4px rgba(33,57,108,.5);
  position:relative;overflow:hidden;
}
.brand__tile::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 85% 15%,var(--gold-glow),transparent 60%);
}
.brand__tile span{position:relative;z-index:1}
.brand__wm{font-family:var(--ff-display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand__wm b{color:var(--azul)}
.brand__wm small{display:block;font-family:var(--ff-body);font-weight:500;font-size:10.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-top:-1px}

.nav{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav a{
  position:relative;padding:8px 13px;border-radius:10px;
  font-weight:500;font-size:13.5px;color:var(--muted);
  transition:color .16s,background .16s;
}
.nav a:hover{color:var(--ink);background:rgba(47,80,150,.06)}
.nav a.active{color:var(--azul-deep);font-weight:600;background:rgba(47,80,150,.09)}
.nav a.active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--azul),var(--gold-bright));
}

.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--hair);
  background:var(--surface);color:var(--muted);
  display:grid;place-items:center;position:relative;
  transition:.16s;
}
.icon-btn:hover{color:var(--azul);border-color:#D6DCEA;box-shadow:var(--sh-1)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--gold);border:1.5px solid var(--surface)}
.acct{
  display:flex;align-items:center;gap:9px;padding:5px 6px 5px 12px;
  border:1px solid var(--hair);border-radius:40px;background:var(--surface);
  transition:.16s;
}
.acct:hover{border-color:#D6DCEA;box-shadow:var(--sh-1)}
.acct__txt{line-height:1.15}
.acct__txt b{display:block;font-size:12.5px;font-weight:600}
.acct__txt small{font-size:11px;color:var(--faint)}
.avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--azul-soft),var(--azul-deep));
  color:#fff;display:grid;place-items:center;font-family:var(--ff-display);font-weight:600;font-size:12px;
}

/* ---------- page shell ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:0 22px 70px}

/* ---------- immersive band ---------- */
.band{
  position:relative;
  margin:18px 0 0;
  border-radius:var(--r-xl);
  background:var(--band);
  color:#fff;
  padding:28px 32px 96px;
  overflow:hidden;
  box-shadow:0 22px 50px -22px rgba(33,57,108,.6);
}
.band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(46% 90% at 92% 8%,var(--gold-glow),transparent 58%),
    radial-gradient(40% 70% at 8% 110%,rgba(92,123,192,.6),transparent 60%);
  pointer-events:none;
}
.band::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 100% at 80% 0%,#000,transparent 70%);
  mask-image:radial-gradient(70% 100% at 80% 0%,#000,transparent 70%);
  pointer-events:none;
}
.band>*{position:relative;z-index:1}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:14px;
}
.eyebrow svg{width:14px;height:14px;color:var(--gold-bright)}
.eyebrow .sep{opacity:.4}

.band__top{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.band__hello h1{
  font-family:var(--ff-display);font-weight:600;font-size:30px;letter-spacing:-.02em;
  margin:0 0 5px;
}
.band__hello p{margin:0;color:rgba(255,255,255,.74);font-size:14px;max-width:46ch}

/* period switcher */
.seg{
  margin-left:auto;display:inline-flex;gap:3px;padding:4px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);
  border-radius:40px;backdrop-filter:blur(6px);
}
.seg button{
  border:0;background:transparent;color:rgba(255,255,255,.8);
  padding:7px 15px;border-radius:30px;font-size:13px;font-weight:500;
  transition:.15s;
}
.seg button:hover{color:#fff}
.seg button.active{background:#fff;color:var(--azul-deep);font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,.15)}

/* glass KPI chips */
.kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;
}
.chip-kpi{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-md);padding:15px 17px;
  position:relative;overflow:hidden;
}
.chip-kpi::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.chip-kpi .k-lbl{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.78);font-weight:500}
.chip-kpi .k-lbl svg{width:15px;height:15px;color:var(--gold-bright)}
.chip-kpi .k-val{font-family:var(--ff-display);font-weight:600;font-size:25px;letter-spacing:-.02em;margin:7px 0 4px}
.chip-kpi.gold .k-val{color:var(--gold-bright)}
.chip-kpi .k-delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;font-family:var(--ff-mono)}
.chip-kpi .k-delta.up{color:#8DE3B4}
.chip-kpi .k-delta.down{color:#F4A6A6}
.chip-kpi .k-delta svg{width:13px;height:13px}

/* ---------- floating grid (overlaps band) ---------- */
.float{
  position:relative;z-index:5;
  margin-top:-64px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
}
.float>*{min-width:0}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  border:1px solid var(--hair);
  box-shadow:var(--sh-float);
  padding:20px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card.hoverable:hover{transform:translateY(-3px);box-shadow:0 30px 60px -20px rgba(33,57,108,.4),0 10px 24px rgba(22,26,35,.1)}
.card.flat{box-shadow:var(--sh-2)}

.span-7{grid-column:span 7}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
.span-3{grid-column:span 3}
.span-12{grid-column:span 12}

.card__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card__title{font-family:var(--ff-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.card__title .ic{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(47,80,150,.1);color:var(--azul);
}
.card__title .ic svg{width:17px;height:17px}
.card__sub{font-size:12px;color:var(--faint);font-weight:500}

.link{font-size:12.5px;font-weight:600;color:var(--azul);display:inline-flex;align-items:center;gap:4px}
.link svg{width:14px;height:14px}
.link:hover{color:var(--azul-deep)}

/* chart card */
.chart-wrap{height:188px;position:relative}
.chart-wrap canvas{width:100%;height:100%}
.chart-foot{display:flex;gap:20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair-2)}
.chart-foot .it{font-size:12px;color:var(--muted)}
.chart-foot .it b{display:block;font-family:var(--ff-display);font-weight:600;font-size:17px;color:var(--ink)}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:500}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* small stat card */
.stat .s-lbl{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:8px}
.stat .s-lbl .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(201,168,92,.16);color:#A8863F}
.stat .s-lbl .ic svg{width:16px;height:16px}
.stat .s-val{font-family:var(--ff-display);font-weight:700;font-size:30px;letter-spacing:-.02em;margin:14px 0 6px;line-height:1}
.stat .s-delta{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;font-family:var(--ff-mono)}
.stat .s-delta.up{color:var(--green)}
.stat .s-delta.down{color:var(--red)}
.stat .s-delta svg{width:14px;height:14px}
.stat .s-bar{height:5px;border-radius:5px;background:var(--hair-2);margin-top:16px;overflow:hidden}
.stat .s-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-bright))}

/* ---------- funnel ---------- */
.funnel{display:flex;flex-direction:column;gap:14px}
.fn{}
.fn__top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.fn__name{font-size:13px;font-weight:600}
.fn__name small{font-weight:500;color:var(--faint);margin-left:6px;font-size:11.5px}
.fn__val{font-family:var(--ff-display);font-weight:600;font-size:15px}
.fn__val span{font-family:var(--ff-mono);font-size:12px;color:var(--muted);font-weight:500;margin-left:7px}
.fn__bar{height:11px;border-radius:11px;background:var(--hair-2);overflow:hidden}
.fn__bar i{
  display:block;height:100%;border-radius:11px;
  background:linear-gradient(90deg,var(--azul-deep),var(--azul));
  position:relative;
}
.fn:nth-child(1) .fn__bar i{background:linear-gradient(90deg,#21396C,#2F5096)}
.fn:nth-child(2) .fn__bar i{background:linear-gradient(90deg,#2F5096,#4B6EB0)}
.fn:nth-child(3) .fn__bar i{background:linear-gradient(90deg,#4B6EB0,#6E8AC4)}
.fn:nth-child(4) .fn__bar i{background:linear-gradient(90deg,#A8863F,#C9A85C)}
.fn:nth-child(5) .fn__bar i{background:linear-gradient(90deg,#C9A85C,#DBC07A)}

/* ---------- activity list ---------- */
.activity{display:flex;flex-direction:column}
.act-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--hair-2)}
.act-row:last-child{border-bottom:0;padding-bottom:0}
.act-row:first-child{padding-top:0}
.act-av{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;font-family:var(--ff-display);font-weight:600;font-size:13px;
}
.act-av.a1{background:linear-gradient(135deg,#2F5096,#5C7BC0)}
.act-av.a2{background:linear-gradient(135deg,#C9A85C,#DBC07A)}
.act-av.a3{background:linear-gradient(135deg,#2FA36A,#5CCB95)}
.act-av.a4{background:linear-gradient(135deg,#21396C,#2F5096)}
.act-av.a5{background:linear-gradient(135deg,#9B5BC0,#C28ADA)}
.act-body{flex:1;min-width:0}
.act-body b{font-size:13.5px;font-weight:600}
.act-body p{margin:1px 0 0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-meta{text-align:right;flex-shrink:0}
.act-time{font-size:11.5px;color:var(--faint);font-family:var(--ff-mono)}
.tag{
  display:inline-block;margin-top:3px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:30px;
  background:rgba(47,80,150,.1);color:var(--azul);
}
.tag.win{background:rgba(47,163,106,.13);color:var(--green)}
.tag.gold{background:rgba(201,168,92,.18);color:#9A7B2E}

/* ---------- buttons / inputs ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid transparent;
  font-family:var(--ff-body);font-weight:600;font-size:13.5px;
  transition:.16s;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--azul);color:#fff;box-shadow:0 8px 18px -6px rgba(47,80,150,.6)}
.btn-primary:hover{background:var(--azul-deep);box-shadow:0 10px 22px -6px rgba(33,57,108,.7);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border-color:var(--hair);color:var(--ink)}
.btn-ghost:hover{border-color:#D6DCEA;box-shadow:var(--sh-1)}
.btn-block{width:100%}
/* Faltava por completo — o "Desconectar" da seção Conexões (settings-
   connections.js) renderiza com esta classe, mas sem a regra ele cai no
   .btn-ghost cinza padrão em vez do contorno vermelho do mockup aprovado
   (docs/superpowers/specs/2026-07-29-configuracoes-cliente-conexoes-mockup.html).
   Achado pela verificação visual headless (Task 9, 2026-07-30). */
.btn-danger-o{background:#fff;border:1px solid rgba(212,91,91,.4);color:var(--red)}
.btn-danger-o:hover{background:var(--red);border-color:var(--red);color:#fff}
/* Sem isto, um <button disabled> renderiza IDÊNTICO a um habilitado (mesma cor
   cheia, cursor:pointer) — o único sinal de "não posso clicar" vira o title
   no hover, invisível em touch. Achado pela verificação visual headless do
   viewer read-only de Configurações → Conexões (Task 9, 2026-07-30).
   NÃO adicionar pointer-events:none aqui: o atributo nativo disabled já
   bloqueia click/submit, então pointer-events:none não compra nada — e
   BLOQUEIA o hover que dispara o title="..." (única explicação que um
   viewer read-only tem para o botão desabilitado). Regressão encontrada e
   revertida na revisão da Task 9 (Fix round 1, 2026-07-30). */
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.input{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--hair);background:var(--surface-2);
  font-family:var(--ff-body);font-size:14px;color:var(--ink);
  transition:.15s;
}
.input:focus{outline:none;border-color:var(--azul-soft);background:#fff;box-shadow:0 0 0 4px rgba(47,80,150,.12)}
.input::placeholder{color:var(--faint)}
.input:disabled{opacity:.6;cursor:not-allowed;background:var(--hair-2)}

/* Piso de toque: nenhum campo abaixo de 16px (Fase 19, bloco 3, D1).
   O Safari do iPhone amplia a PÁGINA inteira quando o campo que recebe o foco
   tem fonte menor que 16px, e nada desfaz a escala depois. Em vez de corrigir
   tela por tela, uma regra só, para todo campo de tela de toque (login, convite,
   redefinir senha e o resto do /app aberto no celular ou no tablet).
   Vence as regras dos componentes pela ESPECIFICIDADE ([0,9,2], contra [0,2,1]
   da maior regra de campo por classe), e NÃO por !important: o !important
   também encolheria os campos que são maiores de propósito (o código do 2FA,
   32px). Ficam de fora os tipos sem texto para digitar (o iOS não amplia ao
   focar um): caixa, radio, controle deslizante, cor, arquivo e os botões
   (submit, button, reset e image), cuja fonte é o desenho do botão.
   ⚠️ Regra de componente nova que alcance essa especificidade (um #id, nove
   classes) desliga o piso em silêncio. Há teste cobrando
   (campos-16px-celular.test.ts). A MESMA redação mora no m.css. */
@media (pointer: coarse) {
  html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea) {
    font-size: 16px;
  }
}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg)}
/* S1 (avisos de numero fora do ar, select-account.eta): só nesta tela a
   coluna de contas fica mais larga que o painel ilustrado, e só no desktop
   (onde as duas colunas existem de fato). Guardado atrás de min-width:1181px
   (o mesmo ponto de corte de @media(max-width:1180px) abaixo) de proposito
   (N3, revisão final): `.login--contas` tem a MESMA especificidade de
   `.login` (uma classe cada), então sem o guard quem decidiria era a ORDEM
   no arquivo (a regra de 1 coluna, mais abaixo, venceria por vir depois);
   o guard tira essa dependência de ordem, resistindo a uma reorganização
   futura do arquivo. E se um dia alguém "simplificar" para
   `.login.login--contas` (duas classes, fora da media query) achando que é
   a mesma coisa, essa versão TEM especificidade maior e passaria a vencer a
   regra de 1 coluna de verdade no celular/tablet; o guard também evita
   isso. */
@media (min-width:1181px){
  .login--contas{grid-template-columns:.8fr 1.2fr}
}
.login__art{
  position:relative;margin:18px;border-radius:var(--r-xl);
  background:var(--band);color:#fff;overflow:hidden;
  padding:46px;display:flex;flex-direction:column;
  box-shadow:0 30px 60px -24px rgba(33,57,108,.7);
}
.login__art::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(48% 70% at 88% 12%,var(--gold-glow),transparent 56%),
    radial-gradient(50% 60% at 6% 100%,rgba(92,123,192,.5),transparent 60%);
}
.login__art::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(80% 70% at 80% 10%,#000,transparent 72%);
  mask-image:radial-gradient(80% 70% at 80% 10%,#000,transparent 72%);
}
.login__art>*{position:relative;z-index:1}
.login__art .brand__wm{color:#fff}
.login__art .brand__wm b{color:var(--gold-bright)}
.login__art .brand__wm small{color:rgba(255,255,255,.6)}
.la-hero{margin-top:auto}
.la-hero h2{font-family:var(--ff-display);font-weight:600;font-size:34px;line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;max-width:14ch}
.la-hero h2 em{font-style:normal;color:var(--gold-bright)}
.la-hero p{color:rgba(255,255,255,.78);font-size:15px;max-width:40ch;margin:0}
.la-stats{display:flex;gap:14px;margin-top:30px}
.la-stat{
  flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-md);padding:13px 15px;backdrop-filter:blur(8px);
}
.la-stat b{display:block;font-family:var(--ff-display);font-weight:600;font-size:22px}
.la-stat b.g{color:var(--gold-bright)}
.la-stat span{font-size:11.5px;color:rgba(255,255,255,.72)}

.login__form{display:grid;place-items:center;padding:40px}
.login__card{width:100%;max-width:380px}
/* S1: só na tela select-account (.login--contas), o cartão fica mais largo
   pra caber o selo + a seta + a linha de aviso sem apertar o nome da conta;
   as outras telas que usam .login__card (login, 2FA, convite, senha) ficam
   no max-width de sempre. */
.login--contas .login__card{max-width:560px}
.login__card h1{font-family:var(--ff-display);font-weight:600;font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.login__card .lead{color:var(--muted);font-size:14px;margin:0 0 28px}
.row-between{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 20px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.check input{width:16px;height:16px;accent-color:var(--azul)}
.login__card .alt{font-size:13px;color:var(--muted);text-align:center;margin-top:22px}
.login__card .alt a{color:var(--azul);font-weight:600}
.login__card .link-mini{font-size:13px;color:var(--azul);font-weight:600}
/* Convite, redefinição e esqueci-a-senha: o botão vem logo depois do último
   .field, e pages.css (.field:last-of-type{margin-bottom:0}, feita para os
   cartões .pcard__body) zera a margem dele, colando o botão no campo. A
   adjacência (+ .btn) NÃO casa no login (a linha "Esqueci a senha" fica no
   meio) nem no 2FA (o .code-hint fica no meio), que seguem como estavam. */
.login__card .field:last-of-type + .btn{margin-top:16px}

/* ---------- index hub ---------- */
.hub{max-width:980px;margin:0 auto;padding:48px 22px 80px}
.hub__head{text-align:center;margin-bottom:34px}
.hub__head .eyebrow{color:var(--azul);justify-content:center;display:flex}
.hub__head .eyebrow svg{color:var(--gold)}
.hub__head h1{font-family:var(--ff-display);font-weight:700;font-size:38px;letter-spacing:-.025em;margin:6px 0 10px}
.hub__head h1 em{font-style:normal;color:var(--azul-deep)}
.hub__head p{color:var(--muted);font-size:15px;max-width:54ch;margin:0 auto}

.preview-band{
  position:relative;border-radius:var(--r-xl);background:var(--band);color:#fff;
  padding:30px;overflow:hidden;margin-bottom:24px;box-shadow:var(--sh-3);
}
.preview-band::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 80% at 90% 10%,var(--gold-glow),transparent 56%)}
.preview-band>*{position:relative;z-index:1}
.preview-band .pb-lbl{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:16px}
.pb-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.swatches{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.sw{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--sh-1)}
.sw i{width:30px;height:30px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sw b{font-size:13px;font-weight:600}
.sw small{display:block;font-family:var(--ff-mono);font-size:11px;color:var(--faint)}

.type-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.type-card{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-2)}
.type-card .tc-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.type-card .tc-d{font-family:var(--ff-display);font-weight:600;font-size:24px;letter-spacing:-.01em}
.type-card .tc-b{font-family:var(--ff-body);font-size:15px}
.type-card .tc-m{font-family:var(--ff-mono);font-size:15px}
.type-card span{display:block;font-size:11.5px;color:var(--faint);margin-top:6px}

.hub-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hub-link{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--sh-2);transition:.18s;position:relative;
}
.hub-link:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#D6DCEA}
.hub-link .hl-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--band)}
.hub-link .hl-ic svg{width:21px;height:21px}
.hub-link h3{font-family:var(--ff-display);font-weight:600;font-size:16px;margin:0}
.hub-link p{font-size:12.5px;color:var(--muted);margin:0}
.hub-link.soon{opacity:.7}
.hub-link.soon .hl-ic{background:var(--hair);color:var(--faint)}
.badge-soon{position:absolute;top:16px;right:16px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:rgba(194,153,47,.13);padding:3px 9px;border-radius:30px}

/* ---------- reveal ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{animation:rise .55s cubic-bezier(.22,.7,.3,1) both}
.reveal.d1{animation-delay:.06s}
.reveal.d2{animation-delay:.13s}
.reveal.d3{animation-delay:.2s}
.reveal.d4{animation-delay:.27s}
.reveal.d5{animation-delay:.34s}
.reveal.d6{animation-delay:.41s}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .float{grid-template-columns:repeat(6,1fr)}
  .span-7,.span-5,.span-6{grid-column:span 6}
  .span-4{grid-column:span 3}
  .span-3{grid-column:span 3}
  .nav{display:none}
  .login{grid-template-columns:1fr}
  .login__art{display:none}
  .hub-links{grid-template-columns:1fr}
}
@media (max-width:720px){
  .page{padding:0 14px 50px}
  .band{padding:22px 20px 90px;border-radius:var(--r-lg)}
  .band__hello h1{font-size:24px}
  .seg{margin-left:0;margin-top:14px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .float{grid-template-columns:repeat(3,1fr);margin-top:-58px}
  .span-7,.span-5,.span-6,.span-4,.span-3{grid-column:span 3}
  .acct__txt,.brand__wm small{display:none}
  .topnav__in{gap:12px}
  /* Abre espaço pro sino de notificações (novo) — sem isto, "Sair" saía
     da viewport em ~390px (medido via CDP: nav-r não cabia bell+acct+Sair
     nessa largura mesmo com .acct__txt já escondido). Versão é a info de
     menor valor no header; continua visível no desktop. */
  .app-version{display:none}
}

/* ---------- flash / mensagens (C3) ---------- */
.flash{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;margin-bottom:16px;border:1px solid transparent}
.flash svg{width:18px;height:18px;flex:none}
.flash-ok{background:#E5F6EE;color:#0E7A4E;border-color:rgba(31,169,113,.25)}
.flash-error{background:#FBE9E9;color:#B5302E;border-color:rgba(212,91,91,.25)}
.flash-info{background:rgba(47,80,150,.08);color:var(--azul-deep);border-color:rgba(47,80,150,.2)}

/* ---------- empty state ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:46px 24px;color:var(--muted)}
.empty-state .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--faint);border:1px solid var(--hair)}
.empty-state .ic svg{width:24px;height:24px}
.empty-state h4{font-family:var(--ff-display);font-size:16px;color:var(--ink);margin:0;font-weight:600}
.empty-state p{font-size:13px;margin:0;max-width:42ch}

/* ---------- modal de confirmação genérico (DMW.confirm / C2) ---------- */
/* Rodada de validação real da H5 (achado do dono, item 2): o "Ocultar"
   chamado de dentro da modal do post (`.eng-postmodal`, z-index 3000, em
   engagement.css) abria ATRÁS dela: o z-index 400 original bastava para
   ficar acima do chat/Kanban (até 410), mas nunca foi pensado contra uma
   modal de 3000. `DMW.confirm` é chamado de QUALQUER tela (é o mesmo
   defeito que `#fu-modal`/`#tags-modal`/`#lm-modal` já pagaram, documentado
   ali perto), então o valor certo não é "acima de mais um caso específico",
   é acima de TUDO que hoje existe no app; 3000 é o maior z-index em uso
   (`.ck-lfmodal`/`.eng-postmodal`), e a confirmação precisa vencer mesmo
   esses. Teste estrutural compara os dois números de verdade. */
.dmw-cfm-ov{position:fixed;inset:0;z-index:3100;display:grid;place-items:center;padding:20px;background:rgba(18,24,42,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.2s}
.dmw-cfm-ov.open{opacity:1;visibility:visible}
.dmw-cfm{width:100%;max-width:400px;background:#fff;border-radius:var(--r-lg);box-shadow:0 40px 90px -28px rgba(20,33,61,.5);padding:26px 24px 20px;text-align:center;transform:translateY(12px) scale(.98);transition:.24s}
.dmw-cfm-ov.open .dmw-cfm{transform:none}
.dmw-cfm__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px;background:rgba(47,80,150,.1);color:var(--azul)}
.dmw-cfm__ic svg{width:26px;height:26px}
.dmw-cfm.danger .dmw-cfm__ic{background:#FBE9E9;color:#D45B5B}
.dmw-cfm h3{font-family:var(--ff-display);font-size:18px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.dmw-cfm p{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.dmw-cfm__ft{display:flex;gap:10px}
.dmw-btn{flex:1;padding:11px 16px;border-radius:11px;border:1px solid transparent;font-family:var(--ff-body);font-weight:600;font-size:13.5px;cursor:pointer;transition:.14s}
.dmw-btn.ghost{background:#fff;border-color:var(--hair);color:var(--ink)}
.dmw-btn.ghost:hover{border-color:#D6DCEA}
.dmw-btn.primary{background:var(--azul);color:#fff}
.dmw-btn.primary:hover{background:var(--azul-deep)}
.dmw-btn.danger{background:#D45B5B;color:#fff}
.dmw-btn.danger:hover{background:#B5302E}

/* ---------- badges de status (conta) ---------- */
.st-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:30px;font-size:11.5px;font-weight:700;white-space:nowrap}
.st-badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.st-ativo{background:#E5F6EE;color:#0E7A4E}
/* #9A6A14 mede 4.21:1 contra #FBF1DD, abaixo do AA 4.5:1 (pacote de proteção,
   D4b). #8F6212 é o mesmo ajuste do .st-wait/.fu-status.pending (4.77:1). */
.st-trial{background:#FBF1DD;color:#8F6212}
.st-suspenso{background:#FBE9E9;color:#B5302E}
.st-cancelado{background:#EEF1F5;color:#5A6373}

/* ---------- badge de não-lidas na nav (C4) ---------- */
.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:30px;background:#D45B5B;color:#fff;font-size:11px;font-weight:700;margin-left:6px;line-height:1}

/* ---------- pill modo gestor / preview (C6) ---------- */
/* Fundo translúcido sobre o topnav (também translúcido, com blur): medido o
   composto real, #9A6A14 mede 4.11:1, ainda pior que o par sólido irmão.
   #8F6212 mede 4.66:1 aqui (pacote de proteção, D4b). */
.preview-pill{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 7px 0 13px;border-radius:30px;background:rgba(224,163,61,.16);color:#8F6212;font-size:12.5px;font-weight:600;border:1px solid rgba(224,163,61,.3)}
.preview-pill svg{width:14px;height:14px}
.preview-pill .out{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:30px;background:#fff;color:var(--azul);font-size:11px;font-weight:700;border:1px solid var(--hair);text-decoration:none}
.preview-pill .out:hover{border-color:var(--azul-soft)}

/* ---------- versão do app ---------- */
.app-version{font-family:var(--ff-mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em}

/* ---------- notificações in-app (header, fecha o ciclo write-only da
   tabela `notifications` — v3.77.1 corrigiu a escrita, v3.7x lê) ----------
   Reusa a mecânica de popover do projeto (.ck-pop/chat-kit.css: aberto/
   fechado por classe .open, NUNCA style.display — 1ª armadilha documentada
   de popovers-reskin). #D45B5B (mesmo vermelho de .nav-badge) falha 4.5:1
   com texto branco em 11px — troca por #B5302E (já usado como
   .flash-error/--cinza-800 no projeto), que passa (~6:1 medido). */
.notif-wrap{position:relative}
.notif-count{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;
  border-radius:30px;background:#B5302E;color:#fff;font-size:10.5px;font-weight:700;
  display:inline-grid;place-items:center;line-height:1;border:1.5px solid var(--surface);
}
.notif-pop{right:0;top:calc(100% + 10px);width:344px;max-width:calc(100vw - 24px);padding:0}
.notif-pop__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 8px}
.notif-pop__hd>span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* --faint (#8A93A4) mede 3.09:1 sobre branco em 11px — abaixo do piso de
   4.5:1 pra texto normal (só passaria em >=14px bold/18px regular, "texto
   grande" da WCAG). --muted (#5A6373) mede 6.06:1 (medido via
   getComputedStyle + fórmula de luminância relativa, contrast.js). */
.notif-markall{border:none;background:none;color:var(--azul);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px;border-radius:6px}
.notif-markall:hover{text-decoration:underline}
.notif-list{max-height:380px;overflow-y:auto;padding:4px}
.notif-item{
  display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:10px 10px;border-radius:9px;font-family:var(--ff-body);
}
.notif-item:hover{background:rgba(47,80,150,.07)}
.notif-item.unread{background:rgba(47,80,150,.05)}
.notif-item .ni-title{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.notif-item.unread .ni-title::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--azul)}
.notif-item .ni-body{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.42;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-item .ni-time{font-size:11px;color:var(--muted);margin-top:5px;font-family:var(--ff-mono)}
.notif-empty{padding:30px 14px;text-align:center;color:var(--muted);font-size:13px}
/* <=680px: o sino não fica mais colado na borda direita da viewport (o
   avatar+"Sair" continuam visíveis — só .acct__txt esconde a esse breakpoint,
   ver .acct__txt,.brand__wm small{display:none} acima). `right:0` relativo a
   .notif-wrap então NÃO alinha com a borda da tela, e um painel de 344px
   estourava a ESQUERDA da viewport (medido via CDP: popLeft chegava a
   -82px em 390px de largura — sem scrollbar horizontal, então nem aparece
   como "overflow" óbvio, só o conteúdo cortado). Fix: sai do fluxo relativo
   ao botão e ancora na PRÓPRIA viewport (position:fixed + left/right). */
@media (max-width:680px){
  /* Seletor por #id (não .classe) pra garantir precedência sobre
     .ck-pop{position:absolute} (chat-kit.css) independente da ORDEM dos
     <link> no layout — empate de especificidade entre duas classes é
     decidido pela ordem de carregamento, e essa ordem é um detalhe frágil
     de manter certo pra sempre; o id remove a ambiguidade. */
  #notifPop{position:fixed;left:12px;right:12px;top:calc(var(--nav-h) + 8px);width:auto;max-width:none}
}

/* ---------- banner global de conexão (v3.65.0) ---------- */
.connbar{background:linear-gradient(180deg,#FDF3F3,#FCEEEE);border-bottom:1px solid rgba(212,91,91,.28);animation:slideDown .4s cubic-bezier(.22,.7,.3,1) both}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.connbar__in{max-width:var(--maxw);margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* dot: reusa a animação st-pulse-red já definida em pages.css (mesmo tom
   vermelho) — NÃO usar o nome "pulse": já existe (verde, .kard__newmsg). */
.connbar__dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0;box-shadow:0 0 0 0 rgba(212,91,91,.5);animation:st-pulse-red 1.6s ease-out infinite}
.connbar__txt{font-size:13.5px;color:#7C2D2B;flex:1;min-width:220px}
.connbar__txt b{color:#B5302E}
.connbar__num{font-family:var(--ff-mono);font-size:12.5px;background:#fff;border:1px solid rgba(212,91,91,.3);border-radius:8px;padding:1px 8px;color:#B5302E;white-space:nowrap}
.connbar__cta{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:11px;border:none;background:#B5302E;color:#fff;font-weight:600;font-size:13px;box-shadow:0 8px 18px -8px rgba(181,48,46,.7);transition:.15s;text-decoration:none}
.connbar__cta:hover{background:#9C2523;transform:translateY(-1px)}
.connbar__hint{font-size:12.5px;color:#7C2D2B;font-weight:600}
@media (prefers-reduced-motion:reduce){.connbar,.connbar__dot{animation:none!important}}