/* ================================================================
   Fieldo · fieldo.css  v1.0
   Design System — Paper/Ink · Editorial · Fraunces + DM Mono
   Projeto: jrsctnncoljdcvdofxsg · Netlify + Supabase
================================================================ */

/* ── IMPORTS ─────────────────────────────────────────────── */
/* v9.14b · @import REMOVIDO.
   As 20 páginas do app já trazem o mesmo <link rel="stylesheet"> das
   fontes no <head>, com preconnect. Este @import pedia a MESMA folha
   uma segunda vez — e pior, em série: o browser precisava baixar e
   ler fieldo.css inteiro antes de descobrir a URL da fonte. Duas
   requisições bloqueantes ao fonts.googleapis.com por página, numa
   base de usuários que abre isso no 4G da obra.
   Medido no Chromium: 4 pedidos de fonte por carga viraram 2. */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* ─ Paleta Paper/Ink ─ */
  --bg:        #f0ece3;
  --paper:     #f5f2ec;
  --paper2:    #ede9df;
  --paper3:    #e4dfd2;
  --paper4:    #d8d2c4;
  --paper5:    #cbc4b4;

  /* ─ Ink ─ */
  --ink:       #0e0e14;

  /* v10.13 · SUPERFÍCIE ESCURA — não confundir com --ink.
     --ink é a cor do TEXTO mais forte: quase preto no tema claro e
     quase branco no midnight, porque é assim que texto deve se
     comportar. Treze lugares do projeto usavam `background: var(--surface-ink)`
     com texto branco fixo por cima. No tema claro dava certo por
     acidente; no midnight o fundo virava creme com texto branco em
     cima — ilegível, e foi assim que o cabeçalho do meu-perfil apareceu
     no print do dono.
     Estes dois tokens significam "painel escuro", e continuam escuros
     nos dois temas. Se você precisa de fundo escuro, é aqui. */
  --surface-ink:  #0e0e14;
  --surface-ink2: #1e1e28;
  /* v10.13 · o PAR de --surface-ink: a cor do texto que fica em cima
     dele. Existe pelo motivo simétrico ao de cima — havia
     `color: var(--paper)` sobre painel escuro em 4 lugares, e --paper é
     um token de SUPERFÍCIE: no midnight ele vira #16161e, texto quase
     preto sobre painel quase preto. Este fica claro nos quatro temas. */
  --on-ink:    #f5f2ec;
  /* v10.13 · texto sobre preenchimento dourado. No claro, sage e ember o
     dourado é escuro o bastante para branco (5.54 / 5.87 / 4.84). No
     midnight ele clareia para #c49a30 e branco cai para 2.62:1 — cada
     botão primário do app. Lá este token vira quase preto. */
  --on-gold:   #ffffff;
  /* v10.13 · a barra do topo é escura nos QUATRO temas (--topbar-bg não
     é redefinido por nenhum). O acento dela vinha de --gold-l, que é
     afinado para se ler sobre PAPEL — no sage dava 4.29:1 sobre o preto
     da barra. Sendo o fundo sempre o mesmo, o acento também é. */
  --topbar-accent: #d4ab40;
  /* v10.13 · a barra fixa de ação e o botão de remover foto usavam
     rgba(245,242,236,.97) cravado — o --paper do tema CLARO escrito à
     mão. No midnight a barra continuava creme enquanto o texto dentro
     dela seguia o tema e clareava: a mesma classe do bug do cabeçalho,
     em outra tela. Translúcido não dá para escrever com var(), então o
     véu virou token próprio, um por tema. */
  --veu:       rgba(245,242,236,.97);
  --veu2:      rgba(245,242,236,.92);
  --ink2:      #1e1e28;
  --text:      #1a1a24;
  --text2:     #4a4855;
  --muted:     #625d57;   /* v9.14b: #7a7570 dava 3.87:1 no --bg — reprova AA em qualquer tamanho abaixo de 18.66px, e este token carrega quase todo o texto secundário do app */
  /* v10.0 · era #a09890 = 2,54:1. Um tom ABAIXO de --muted que ainda
     fosse legível não existe nesta paleta: o próximo valor que passa
     em AA (#726d68) é praticamente o próprio --muted. Um degrau que
     não se lê não é degrau — virou o mesmo tom.
     --ghost continua só pra coisa decorativa, nunca texto. */
  --subtle:    #625d57;
  --ghost:     #c4bdb0;

  /* ─ Bordas ─ */
  --border:    rgba(14,14,20,.09);
  --border2:   rgba(14,14,20,.16);
  --border3:   rgba(14,14,20,.26);

  /* ─ Gold — accent primário ─ */
  /* v9.14b · O dourado era #9a7218 e reprovava AA nas DUAS direções:
     branco sobre ele dava 4.38:1 (botão preenchido) e ele sobre o
     papel dava 3.72:1 (eyebrow, <em>, asterisco de campo obrigatório)
     — em 20 páginas. #856310 passa nas duas (4.70 / 4.96 / 5.54) e é
     o mesmo tom, 12% mais fundo. Uma linha, não vinte telas. */
  --gold:      #856310;
  --gold-l:    #b8880d;
  --gold-d:    #7a5a10;
  --gold-bg:   rgba(154,114,24,.07);
  --gold-bd:   rgba(154,114,24,.2);
  --gold-text: #6a4e0e;

  /* ─ Semânticas ─ */
  --green:     #1e5c38;
  --green-l:   #2d7a4f;
  --green-bg:  rgba(30,92,56,.07);
  --green-bd:  rgba(30,92,56,.18);

  --red:       #8b1a1a;
  --red-l:     #b02020;
  --red-bg:    rgba(139,26,26,.06);
  --red-bd:    rgba(139,26,26,.16);

  --amber:     #8a5e0a;
  --amber-bg:  rgba(138,94,10,.07);
  --amber-bd:  rgba(138,94,10,.18);

  /* ─ Topbar ─ */
  --topbar-bg:     #0e0e14;
  --topbar-border: rgba(255,255,255,.07);
  --topbar-h:      52px;

  /* ─ CTA bar ─ */
  --cta-h: 68px;

  /* ─ Tipografia ─ */
  --serif: 'Fraunces', 'Georgia', serif;
  --sans:  'DM Sans', 'system-ui', sans-serif;
  --mono:  'DM Mono', 'Courier New', monospace;

  /* ─ Layout ─ */
  --r:    8px;
  --r-l:  12px;
  --r-xl: 18px;

  /* ─ Animação ─ */
  --ez: cubic-bezier(0.16,1,0.3,1);
  --t:  0.2s var(--ez);

  /* ─ Legado (compatibilidade JS antigo) ─ */
  --accent:    var(--gold);
  --accent2:   var(--gold-l);
  --accent-bg: var(--gold-bg);
  --accent-bd: var(--gold-bd);
  --surface:   var(--paper);
  --surface2:  var(--paper2);
  --surface3:  var(--paper3);
  --card:      var(--paper);
  --card-h:    var(--paper2);
  --white:     var(--text);
  --gray-m:    var(--text2);
  --gray-s:    var(--muted);
  --gray-d:    var(--subtle);
  --fd:        var(--serif);
  --fb:        var(--sans);
  --gold-dim:  var(--gold-bg);
  --gold-l-old: var(--gold-l);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}
input, textarea, button, select { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; }
::selection { background: var(--gold); color: var(--on-gold); }

/* ── TEXTURA PAPER ───────────────────────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--paper4); border-radius: 2px; }

/* ════════════════════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
}
.topbar-inner {
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: .75rem;
  padding: 0 1.25rem; max-width: 1200px; margin: 0 auto;
}
/* v9.14b: min-height 44 — o logo é <a> e tinha 26px de alvo. A topbar
   já tem 52px, então isso não muda nada visualmente. */
.topbar-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none;
  min-height: 44px; }
/* v10.34 · identidade nova aprovada pelo Rikelme ("Modelo 2 — wordmark
   + símbolo, o lote aberto"), substitui de vez a fase v10.33 (estrela
   em círculo). Duas mudanças:
   1) o símbolo deixou de ser uma imagem dentro de um badge circular —
      agora é o próprio traço (quadrado de cantos arredondados com uma
      abertura no topo), do mesmo peso visual da tipografia, sem fundo
      próprio. Por isso .logo-icon não pinta mais um círculo: só
      dimensiona a caixa e define a cor via currentColor, pra herdar o
      branco (barra escura) ou a tinta (páginas com topbar clara, ex.
      explorar.html/index.html/revenda.html, que sobrescrevem a cor
      localmente do mesmo jeito que já faziam com .topbar-brand).
   2) o wordmark trocou o itálico (DM Sans 300) por Fraunces ereto 600 —
      "Field" no tom padrão do texto, só o "o" final em dourado. */
.logo-icon {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
}
/* svg em 100% (não px fixo) porque algumas páginas reduzem .logo-icon
   com style inline (ex.: menu-drawer-brand em 22px) — assim o símbolo
   acompanha o tamanho do container em vez de vazar dele. */
.logo-icon svg { width: 100%; height: 100%; }
.topbar-brand {
  font-family: var(--serif); font-size: .9rem; font-weight: 600;
  color: rgba(255,255,255,.92); letter-spacing: -.01em;
}
.topbar-brand em { color: var(--topbar-accent); font-style: normal; font-weight: 600; }
.topbar-badge {
  font-family: var(--mono); font-size: .52rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold-bg); border: 1px solid var(--gold-bd);
  color: var(--topbar-accent); border-radius: 3px; padding: .12rem .5rem;
}
.topbar-nav { display: none !important; }

/* ════════════════════════════════════════════════════════════
   HAMBURGER
════════════════════════════════════════════════════════════ */
.hbg-btn {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 4.5px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; cursor: pointer; padding: 0;
  flex-shrink: 0; transition: background var(--t); margin-left: auto;
}
.hbg-btn:hover { background: rgba(255,255,255,.13); }
.hbg-line {
  display: block; width: 16px; height: 1.5px;
  background: rgba(255,255,255,.65); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
  transform-origin: center;
}
.hbg-btn.is-open .hbg-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hbg-btn.is-open .hbg-line:nth-child(2) { opacity: 0; width: 0; }
.hbg-btn.is-open .hbg-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════
   DRAWER + OVERLAY
════════════════════════════════════════════════════════════ */
.menu-overlay {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(14,14,20,0); backdrop-filter: blur(0px);
  pointer-events: none; transition: background .3s, backdrop-filter .3s;
}
.menu-overlay.is-open {
  background: rgba(14,14,20,.5); backdrop-filter: blur(4px);
  pointer-events: all; cursor: pointer;
}

.menu-drawer {
  position: fixed; top: 0; right: -300px; width: 280px;
  max-width: 88vw; height: 100dvh; z-index: 999;
  background: var(--paper); border-left: 1px solid var(--border2);
  display: flex; flex-direction: column; overflow: hidden;
  transition: right .3s cubic-bezier(.32,.72,0,1);
  box-shadow: none;
}
.menu-drawer.is-open { right: 0; box-shadow: -8px 0 40px rgba(14,14,20,.18); }

.menu-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--topbar-bg); flex-shrink: 0;
}
.menu-drawer-brand {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.92);
}
.menu-drawer-brand em { color: var(--topbar-accent); font-style: normal; font-weight: 600; }
.menu-drawer-close {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; color: rgba(255,255,255,.55); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: var(--t);
}
.menu-drawer-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.menu-drawer-perfil {
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.menu-section-lbl {
  font-family: var(--mono); font-size: .55rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding: .85rem 1.1rem .35rem;
}
.menu-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 .6rem; overflow-y: auto; flex: 1;
}
.menu-nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem; border-radius: 10px;
  color: var(--text2); font-size: .875rem; font-weight: 400;
  text-decoration: none; background: transparent; border: none;
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--t), color var(--t); white-space: nowrap;
}
.menu-nav-item:hover { background: var(--paper3); color: var(--text); }
.menu-nav-item.active { background: var(--gold-bg); color: var(--gold-d); font-weight: 500; }
.menu-nav-item.active svg { color: var(--gold); }
.menu-nav-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--paper3); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: background var(--t);
}
.menu-nav-item.active .menu-nav-icon { background: var(--gold-bg); }
.menu-nav-item:hover .menu-nav-icon { background: var(--paper4); }
.menu-divider { height: 1px; background: var(--border); margin: .4rem .6rem; }
.menu-drawer-foot {
  padding: .85rem 1.1rem; border-top: 1px solid var(--border); flex-shrink: 0;
  font-family: var(--mono); font-size: .65rem;
  /* v9.14b: --ghost dava 1.67:1. É o número da versão — a única coisa
     que o dono lê pra saber se a atualização entrou. Ilegível ali não
     é discrição, é inútil. */
  color: var(--muted); text-align: center;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════════════════ */
.page {
  max-width: 1200px; margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
  position: relative; z-index: 1;
}
.page--narrow { max-width: 680px; }
.page--mid    { max-width: 860px; }

/* ════════════════════════════════════════════════════════════
   TIPOGRAFIA
════════════════════════════════════════════════════════════ */
.page-eyebrow {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  /* v10.13 · era var(--gold). --gold é o tom de PREENCHIMENTO; para
     texto pequeno existe --gold-text, um degrau mais fundo. No tema
     claro os dois passavam e a diferença não aparecia — no sage e no
     ember o de preenchimento reprova em AA como texto. */
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
}
.page-eyebrow::before {
  content: ''; display: inline-block;
  width: 18px; height: 1px; background: var(--gold);
}
.page-title {
  font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 300; line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
}
.page-title em { font-style: italic; color: var(--gold-text); }
.page-sub {
  font-size: .88rem; font-weight: 300; color: var(--muted);
  margin-top: .5rem; line-height: 1.75;
}

/* ════════════════════════════════════════════════════════════
   CARDS
════════════════════════════════════════════════════════════ */
.card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: 1.5rem;
}
.card-title {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .5rem;
}
.card-title::before {
  content: ''; display: inline-block;
  width: 10px; height: 1px; background: var(--gold);
}

/* ════════════════════════════════════════════════════════════
   CALLOUTS
════════════════════════════════════════════════════════════ */
.callout {
  background: var(--paper2); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1rem 1.25rem; margin: 1rem 0;
}
.callout.green { border-left-color: var(--green-l); background: var(--green-bg); }
.callout.red   { border-left-color: var(--red-l);   background: var(--red-bg); }
.callout.amber { border-left-color: var(--amber);   background: var(--amber-bg); }
.callout-label {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem;
}

/* ════════════════════════════════════════════════════════════
   BOTÕES
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 500; border: none; cursor: pointer;
  padding: .7rem 1.25rem; border-radius: var(--r);
  transition: var(--t); white-space: nowrap; letter-spacing: .01em;
  position: relative; overflow: hidden;
}
.btn--primary { background: var(--gold); color: var(--on-gold); }
.btn--primary:hover { background: var(--gold-d); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(154,114,24,.25); }
.btn--primary:active { transform: translateY(0); }

.btn--gold {
  background: var(--gold-bg); border: 1px solid var(--gold-bd); color: var(--gold-d);
}
.btn--gold:hover { background: rgba(154,114,24,.13); }

.btn--ghost {
  background: var(--paper2); border: 1px solid var(--border2); color: var(--text2);
}
.btn--ghost:hover { background: var(--paper3); border-color: var(--border3); color: var(--text); }

.btn--ink { background: var(--surface-ink); color: rgba(255,255,255,.92); }
.btn--ink:hover { background: var(--surface-ink2); transform: translateY(-1px); }

.btn--danger { background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red); }
.btn--danger:hover { background: rgba(139,26,26,.12); }

.btn--sm { font-size: .78rem; padding: .48rem .9rem; }
.btn--lg { font-size: .92rem; padding: .85rem 1.6rem; }
.btn--full { width: 100%; justify-content: center; }

.btn__spin {
  display: none; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
}
.btn__spin.on { display: inline-block; }

/* ════════════════════════════════════════════════════════════
   MÉTRICAS
════════════════════════════════════════════════════════════ */
.metrics-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.metrics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1px; background: var(--border2); border-radius: var(--r-l);
  overflow: hidden; min-width: 380px;
}
.metric {
  background: var(--paper2); padding: 1rem 1.1rem; transition: background var(--t);
}
.metric:hover { background: var(--paper3); }
.metric__label {
  font-family: var(--mono); font-size: .54rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.metric__value {
  font-family: var(--serif); font-size: 1.75rem; font-weight: 300;
  color: var(--ink); line-height: 1; margin-bottom: .18rem; letter-spacing: -.02em;
}
.metric__value em { font-style: italic; color: var(--gold); }
.metric__sub { font-family: var(--mono); font-size: .58rem; color: var(--muted); }
.metric--gold  .metric__value { color: var(--gold-d); }
.metric--green .metric__value { color: var(--green); }

/* ════════════════════════════════════════════════════════════
   CAMPOS DE FORMULÁRIO
════════════════════════════════════════════════════════════ */
.field-group { display: flex; flex-direction: column; gap: .35rem; }
.field-label {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.field-hint  { font-family: var(--mono); font-size: .62rem; color: var(--subtle); margin-top: .15rem; }
.required    { color: var(--gold-text); margin-left: .1rem; }

.field-input, .field-select, .field-textarea {
  background: var(--paper2); border: 1px solid var(--border2);
  border-radius: var(--r); padding: .72rem .95rem;
  color: var(--text); font-size: .9rem; font-weight: 400;
  outline: none; transition: border-color var(--t), background var(--t), box-shadow var(--t);
  width: 100%;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--gold-bd); background: var(--paper);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--ghost); }
.field-select { appearance: none; cursor: pointer; }
.field-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

.fields-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fields-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
@media(max-width:480px) {
  .fields-row-2, .fields-row-3 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   FORM STEPS
════════════════════════════════════════════════════════════ */
.form-steps { display: flex; flex-direction: column; gap: 1rem; }
.form-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 0 1rem;
  opacity: .5; transition: opacity var(--t);
}
.form-step.active, .form-step:focus-within { opacity: 1; }
.step-num {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  color: var(--ghost); padding-top: .25rem; letter-spacing: .05em;
}
.form-step.active .step-num { color: var(--gold); }
.step-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .75rem;
}
.step-title { font-size: .88rem; font-weight: 500; color: var(--text); }
.step-sub   { font-size: .68rem; color: var(--muted); margin-left: .5rem; }
.step-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .85rem;
}

/* ════════════════════════════════════════════════════════════
   PILLS
════════════════════════════════════════════════════════════ */
.pill-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 400; color: var(--muted);
  background: var(--paper2); border: 1px solid var(--border2);
  border-radius: 2rem; padding: .38rem .95rem;
  cursor: pointer; transition: var(--t);
}
.pill:hover { border-color: var(--border3); color: var(--text); }
.pill.active {
  background: var(--gold-bg); border-color: var(--gold-bd);
  color: var(--gold-d); font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   SERVIÇOS
════════════════════════════════════════════════════════════ */
.service-list  { display: flex; flex-direction: column; gap: .4rem; }
.service-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1rem; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--paper);
  cursor: pointer; transition: var(--t); text-decoration: none; color: inherit;
}
.service-card:hover { background: var(--paper2); border-color: var(--border2); }
.service-thumb {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  background: var(--paper3); flex-shrink: 0; border: 1px solid var(--border);
}
.service-thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-thumb-ph {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
}
.service-info { flex: 1; min-width: 0; }
.service-client {
  font-size: .86rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.service-meta   { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; flex-wrap: wrap; }
.service-niche  { font-family: var(--mono); font-size: .62rem; color: var(--muted); }
.service-dot    { width: 3px; height: 3px; border-radius: 50%; background: var(--ghost); flex-shrink: 0; }
.service-date   { font-family: var(--mono); font-size: .62rem; color: var(--subtle); }
.service-score  { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--gold-d); flex-shrink: 0; }
.service-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   ICON BUTTON
════════════════════════════════════════════════════════════ */
.icon-btn {
  width: 30px; height: 30px; border: 1px solid var(--border);
  border-radius: 7px; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: var(--t);
}
.icon-btn:hover { border-color: var(--border2); color: var(--text); background: var(--paper3); }
.icon-btn--del:hover { border-color: var(--red-bd); color: var(--red); background: var(--red-bg); }

/* ════════════════════════════════════════════════════════════
   FOTOS / CAPTURA
════════════════════════════════════════════════════════════ */
.capture-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.capture-btn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .4rem; padding: 1.25rem .75rem;
  border-radius: var(--r); border: 1.5px dashed var(--border3);
  background: var(--paper2); cursor: pointer; transition: var(--t); color: var(--muted);
}
.capture-btn:hover { border-color: var(--gold-bd); color: var(--gold-d); background: var(--gold-bg); }
.capture-label { font-size: .82rem; font-weight: 500; color: var(--text); }
.capture-sub   { font-size: .65rem; color: var(--muted); }

.photo-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .65rem; color: var(--muted);
}
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px;
}
.photo-thumb {
  aspect-ratio: 1; border-radius: 7px; overflow: hidden;
  position: relative; cursor: pointer;
  border: 2px solid transparent; transition: var(--t);
}
.photo-thumb.cover { border-color: var(--gold); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--veu2); color: var(--text);
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s; cursor: pointer; border: none;
}
.photo-thumb:hover .photo-remove { opacity: 1; }
.cover-badge {
  position: absolute; bottom: 3px; left: 3px;
  font-family: var(--mono); font-size: .5rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold); color: var(--on-gold);
  border-radius: 3px; padding: .1rem .38rem;
}

/* ════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(14,14,20,.55);
  backdrop-filter: blur(16px) saturate(160%);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; animation: fadeUp .2s ease;
}
.modal-box {
  background: var(--paper); border: 1px solid var(--border2);
  border-radius: var(--r-xl); width: 100%; max-width: 460px;
  position: relative; box-shadow: 0 40px 100px rgba(14,14,20,.2);
  max-height: 92dvh; overflow-y: auto;
}
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-l) 60%, transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal-header {
  padding: 2rem 2rem 1.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.modal-header-info { flex: 1; }
.modal-eyebrow {
  font-family: var(--mono); font-size: .56rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.modal-eyebrow::before { content: ''; display: inline-block; width: 12px; height: 1px; background: var(--gold); }
.modal-title {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 300;
  line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
}
.modal-title em { font-style: italic; color: var(--gold); }
.modal-close {
  width: 32px; height: 32px; border: 1px solid var(--border2);
  border-radius: 50%; background: transparent; color: var(--muted);
  cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t); flex-shrink: 0; margin-top: .15rem;
}
.modal-close:hover { color: var(--text); border-color: var(--border3); background: var(--paper3); }

.avatar-section { padding: 0 2rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; }
.avatar-wrap    { position: relative; flex-shrink: 0; }
.avatar-img {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--paper3); border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; transition: border-color var(--t);
}
.avatar-img:hover { border-color: var(--gold-bd); }
.avatar-img img   { width: 100%; height: 100%; object-fit: cover; }
.avatar-badge {
  position: absolute; bottom: 0; right: 0; width: 22px; height: 22px;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--paper);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.avatar-name { font-family: var(--serif); font-size: .95rem; font-style: italic; color: var(--ink); margin-bottom: .2rem; }
.avatar-hint { font-family: var(--mono); font-size: .62rem; color: var(--muted); line-height: 1.55; }

.modal-fields { padding: 0 2rem; display: flex; flex-direction: column; gap: .85rem; }
.modal-divider { height: 1px; background: var(--border); margin: .35rem 0; }
.modal-section-label {
  font-family: var(--mono); font-size: .56rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--subtle);
}
.modal-footer { padding: 1.5rem 2rem 2rem; display: flex; gap: .6rem; }
.modal-footer .btn { flex: 1; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   CTA BAR
════════════════════════════════════════════════════════════ */
.cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  height: var(--cta-h); background: var(--veu);
  backdrop-filter: blur(20px); border-top: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; gap: 1rem;
}
.cta-status { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   RESULTS OVERLAY
════════════════════════════════════════════════════════════ */
.results-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(14,14,20,.65); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.results-inner {
  background: var(--paper); border: 1px solid var(--border2);
  border-radius: var(--r-xl); padding: 2.5rem 2rem; width: 100%;
  max-width: 400px; text-align: center; position: relative;
}
.results-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-l) 60%, transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.results-close {
  position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px;
  border: 1px solid var(--border2); border-radius: 50%; background: transparent;
  color: var(--muted); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; transition: var(--t);
}
.results-close:hover { color: var(--text); border-color: var(--border3); }
.results-icon  { font-size: 2rem; margin-bottom: 1rem; }
.results-title {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 300;
  line-height: 1.15; margin-bottom: .4rem; color: var(--ink);
}
.results-title em { font-style: italic; color: var(--gold); }
.results-sub { font-size: .82rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.65; }
.results-actions { display: flex; flex-direction: column; gap: .5rem; }
.btn-action {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1rem; border-radius: var(--r); font-size: .86rem; font-weight: 500;
  cursor: pointer; border: none; transition: var(--t);
}
.btn-action--wa    { background: #25d366; color: #fff; }
.btn-action--wa:hover { background: #1fbb59; }
.btn-action--sec   { background: var(--paper3); border: 1px solid var(--border2); color: var(--text2); }
.btn-action--sec:hover { background: var(--paper4); color: var(--text); }
.btn-action--gold  { background: var(--gold-bg); border: 1px solid var(--gold-bd); color: var(--gold-d); }
.btn-action--gold:hover { background: rgba(154,114,24,.13); }
.btn-action--ink   { background: var(--surface-ink); color: rgba(255,255,255,.9); }
.btn-action--ink:hover { background: var(--surface-ink2); }

/* ════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════ */
#pack-toast, #fieldo-toast {
  position: fixed; bottom: calc(var(--cta-h) + .75rem); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface-ink); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9); font-family: var(--mono); font-size: .78rem;
  padding: .6rem 1.2rem; border-radius: 2rem;
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; white-space: nowrap; z-index: 9999;
}
#pack-toast.show, #fieldo-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 2.5rem 1.5rem;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-l);
}
.empty-state-glyph {
  font-family: var(--serif); font-size: 2.5rem; font-style: italic;
  color: var(--paper5); line-height: 1; margin-bottom: .75rem;
}
.empty-state h3 {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 300;
  color: var(--ink); margin-bottom: .4rem;
}
.empty-state h3 em { font-style: italic; color: var(--gold); }
.empty-state p { font-size: .82rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.65; }

/* ════════════════════════════════════════════════════════════
   HASH / PROVA
════════════════════════════════════════════════════════════ */
.hash-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: .4rem;
}
.hash-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--gold-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hash-val {
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hash-badge {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green); flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   ONBOARDING
════════════════════════════════════════════════════════════ */
.onboarding-wrap {
  min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem;
  position: relative; z-index: 1;
}
.onboarding-box { width: 100%; max-width: 440px; }
.onboarding-logo {
  width: 56px; height: 56px; border-radius: 15px; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 36px rgba(154,114,24,.28);
}
.onboarding-title {
  font-family: var(--serif); font-size: clamp(2rem, 7vw, 2.8rem);
  font-weight: 300; line-height: 1.05; margin-bottom: .6rem; color: var(--ink);
  text-align: center;
}
.onboarding-title em { color: var(--gold); font-style: italic; }
.onboarding-sub {
  font-size: .88rem; color: var(--muted); text-align: center;
  margin-bottom: 2rem; line-height: 1.7;
}
.onboarding-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: 1.1rem 1.25rem; cursor: pointer;
  display: flex; align-items: center; gap: 1rem;
  transition: border-color .2s, background .2s; margin-bottom: .5rem;
}
.onboarding-card:hover { border-color: var(--gold-bd); background: var(--paper2); }
.onboarding-card-emoji { font-size: 1.6rem; flex-shrink: 0; }
.onboarding-card-label { font-size: .9rem; font-weight: 500; color: var(--text); }
.onboarding-card-desc  { font-size: .75rem; color: var(--muted); margin-top: .15rem; }

/* ════════════════════════════════════════════════════════════
   TOGGLE
════════════════════════════════════════════════════════════ */
.toggle-wrap { display: flex; align-items: center; gap: .6rem; }
.toggle-label { font-family: var(--mono); font-size: .65rem; color: var(--muted); }
.toggle {
  position: relative; width: 38px; height: 22px;
  background: var(--paper4); border: 1px solid var(--border2);
  border-radius: 11px; cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; background: var(--muted);
  border-radius: 50%; transition: transform .2s, background .2s;
}
.toggle.active { background: var(--gold-bg); border-color: var(--gold-bd); }
.toggle.active::after { transform: translateX(16px); background: var(--gold); }

/* ════════════════════════════════════════════════════════════
   ANIMAÇÕES
════════════════════════════════════════════════════════════ */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse   { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.82); } }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Skeleton ── */
.skel {
  background: linear-gradient(90deg,
    var(--paper3) 25%, var(--paper4) 50%, var(--paper3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r);
}

/* ════════════════════════════════════════════════════════════
   PERFIL PILL
════════════════════════════════════════════════════════════ */
.perfil-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem .3rem .6rem; border: 1px solid;
  border-radius: 2rem; font-size: .72rem; font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   CHECKLIST
════════════════════════════════════════════════════════════ */
.checklist-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.checklist-progress { font-family: var(--mono); font-size: .62rem; color: var(--muted); white-space: nowrap; }
.checklist-bar { flex: 1; height: 2px; background: var(--paper4); border-radius: 2px; overflow: hidden; }
.checklist-bar-fill { height: 100%; background: var(--green-l); border-radius: 2px; transition: width .3s ease; }
.checklist-item {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .65rem .75rem; border-radius: 7px; border: 1px solid var(--border);
  margin-bottom: .35rem; cursor: pointer; background: var(--paper);
  transition: opacity .2s, background .2s;
}
.checklist-item:hover { background: var(--paper2); }
.checklist-item--done { opacity: .45; }
.checklist-cb { margin-top: 2px; width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--green-l); }
.checklist-text   { font-size: .8rem; color: var(--text); line-height: 1.45; }
.checklist-action { font-size: .7rem; color: var(--muted); margin-top: .25rem; }
.checklist-empty  { font-size: .75rem; color: var(--subtle); padding: .5rem 0; text-align: center; }

/* ════════════════════════════════════════════════════════════
   DIAGNÓSTICO
════════════════════════════════════════════════════════════ */
.diagnosis-preview { display: flex; flex-direction: column; gap: .4rem; padding: .85rem 1.1rem; }
.diagnosis-preview--empty {
  padding: 1.5rem; text-align: center;
  font-family: var(--mono); font-size: .78rem; color: var(--subtle);
}
.score-number { font-family: var(--serif); font-size: 1.8rem; font-weight: 300; line-height: 1; }
.score-label  {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .6rem; border-radius: 2rem;
}
.diag-item { border-radius: 7px; padding: .7rem .9rem; }
.diag-priority { font-family: var(--mono); font-size: .56rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2rem; }
.diag-text     { font-size: .84rem; color: var(--text); line-height: 1.45; }
.diag-rec      { font-size: .72rem; color: var(--muted); margin-top: .28rem; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   HISTORY
════════════════════════════════════════════════════════════ */
.history-item {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem;
  border-radius: 7px; border: 1px solid var(--border); margin-bottom: .35rem;
  cursor: pointer; background: var(--paper); transition: background .2s;
}
.history-item:hover { background: var(--paper2); }
.history-emoji { font-size: 1.1rem; flex-shrink: 0; }
.history-info  { flex: 1; min-width: 0; }
.history-client { font-size: .82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta   { font-family: var(--mono); font-size: .62rem; color: var(--muted); margin-top: .08rem; }
.history-score  { font-family: var(--mono); font-size: .8rem; font-weight: 500; flex-shrink: 0; color: var(--gold-d); }
.history-empty  { font-family: var(--mono); font-size: .72rem; color: var(--subtle); text-align: center; padding: .5rem 0; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  .page { padding: 1.5rem 1rem 5rem; }
  .modal-header, .modal-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .modal-fields { padding: 0 1.25rem; }
  .avatar-section { padding: 0 1.25rem 1.25rem; }
}
@media(max-width:400px) {
  .capture-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   QUOTA BANNER (servico.html — limite do plano)
   ═══════════════════════════════════════════════════════════════ */
.quota-banner {
  background: var(--gold-bg);
  border: 1px solid var(--gold-bd);
  border-radius: var(--r);
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
}
.quota-banner.is-blocked {
  background: rgba(192,57,43,.07);
  border-color: rgba(192,57,43,.22);
  color: #c0392b;
}
.quota-banner .quota-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.quota-banner .quota-label  { color: var(--gold-d); font-weight: 500; }
.quota-banner .quota-count  { color: var(--muted); }
.quota-banner.is-blocked .quota-label,
.quota-banner.is-blocked .quota-count { color: #c0392b; }
.quota-banner .quota-track {
  height: 4px; background: rgba(0,0,0,.06); border-radius: 2px;
  margin-top: .5rem; overflow: hidden;
}
.quota-banner .quota-fill {
  height: 100%; background: var(--gold); border-radius: 2px;
  transition: width .4s ease;
}
.quota-banner .quota-msg {
  font-size: .8rem; line-height: 1.5;
  margin: .55rem 0 0; color: #c0392b;
}

/* ═══════════════════════════════════════════════════════════════
   ACESSIBILIDADE — focus-visible, prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline-offset: 3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; /* já há border + box-shadow nos campos */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Toast com role aria-live (definido no JS) */
#fieldo-toast, #pack-toast, #r-toast {
  /* garante que screen readers anunciem as mensagens */
}

/* Skip link para teclado */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus, .sr-only:focus-visible {
  position: fixed;
  top: 1rem; left: 1rem;
  width: auto; height: auto;
  padding: .5rem 1rem; margin: 0;
  clip: auto; overflow: visible;
  background: var(--surface-ink); color: #fff;
  border-radius: 6px;
  z-index: 9999;
  font-family: var(--mono); font-size: .75rem;
}

/* ═══════════════════════════════════════════════════════════════
   AÇÕES DO CARTÃO (dashboard, lista de serviços/orçamentos)
   ─────────────────────────────────────────────────────────────
   v-rebuild-5 · antes disto, cada ação (reenviar, marcar pago,
   arquivar…) era um botão redondo flutuando sozinho em cima do
   cartão — cada um com sua própria posição absoluta, sem relação
   visual entre si. Com duas ou três ações no mesmo cartão (comum:
   um serviço com pagamento pendente E link de avaliação), viravam
   dois ou três "balões" empilhados de jeitos diferentes. Relato
   direto: parecia quebrado.
   Agora é um padrão só, o mesmo que a maioria dos apps usa: um
   botão discreto de três pontinhos, que abre uma listinha com as
   ações que fazem sentido pra aquele cartão. Nenhuma lógica mudou —
   é a mesma função por trás de cada ação (reenviarRelatorio,
   arquivarRegistro, etc.), só a apresentação. */
.service-card { display: flex; align-items: center; }

/* v-rebuild-6 · era position:absolute (top/right fixos), flutuando POR
   CIMA do cartão em vez de reservar seu próprio espaço — com um valor
   em R$ à direita (comum na lista de orçamentos), os dois disputavam
   o mesmo canto e o botão "atropelava" o número, como reportado.
   Como item de flex normal (o cartão já é `display:flex`), o layout
   reserva espaço pros três pontinhos e o valor nunca mais encosta
   nele — sem precisar calcular posição nenhuma na mão. */
.card-acts { position: relative; flex-shrink: 0; }

.rm-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s;
}
.rm-btn:hover, .rm-btn[aria-expanded="true"] {
  background: var(--paper3); color: var(--ink); border-color: var(--border2);
}
.rm-btn svg { pointer-events: none; }

.rm-menu {
  /* v-rebuild-5 · 401, não 30: a topbar fixa é 200 e o menu inferior
     do app é 300/320 (ver escala de z-index no topo do arquivo). Um
     menu aberto precisa ficar por CIMA de qualquer um dos dois —
     inclusive da topbar, que fica visível grudada no topo mesmo com
     a lista rolada. Abaixo do modal de perfil (700) e do menu
     hambúrguer (998/999) de propósito: se um desses estiver aberto,
     o menu de linha nem deveria ter sido alcançável. */
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 401;
  min-width: 208px; background: var(--paper); border: 1px solid var(--border2);
  border-radius: var(--r-l); box-shadow: 0 10px 28px rgba(14,14,20,.16);
  padding: .3rem; display: flex; flex-direction: column; gap: 1px;
}
.rm-menu[hidden] { display: none; }

.rm-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left; background: none; border: none;
  font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--text);
  padding: .6rem .65rem; border-radius: calc(var(--r) - 2px); cursor: pointer;
  text-decoration: none; min-height: 40px; transition: background .12s;
}
.rm-item:hover { background: var(--paper2); }
.rm-item:disabled { opacity: .55; cursor: default; background: none; }
.rm-item .rm-ico { flex-shrink: 0; width: 16px; text-align: center; font-size: .78rem; color: var(--gold-d); }
.rm-item--danger { color: #a3342a; }
.rm-item--danger .rm-ico { color: #a3342a; }
.rm-item--danger:hover { background: rgba(192,57,43,.08); }
.rm-item--green .rm-ico { color: var(--green); }
/* pulsa discretamente: é ação pendente do profissional, não decoração */
.rm-item--claim { color: #2d7d46; }
.rm-item--claim .rm-ico { color: #2d7d46; }
.rm-item--claim { animation: pagoPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rm-item--claim { animation: none } }

/* ═══════════════════════════════════════════════════════════════
   v4.3 — TEMAS ALTERNATIVOS (Pro)
   ─────────────────────────────────────────────────────────────
   Aplicados via <html data-theme="X">. FIELDO.Themes.boot() faz
   isso antes do paint pra evitar flash. Cada tema reescreve as
   variáveis-base; o resto do CSS (que consome --bg, --paper,
   --text, --gold, etc) segue funcionando sem alteração.
   ═══════════════════════════════════════════════════════════════ */

/* ── MIDNIGHT — dark, mantém o gold como accent ── */
:root[data-theme="midnight"] {
  --bg:        #0e0e14;
  --paper:     #16161e;
  --paper2:    #1e1e28;
  --paper3:    #262631;
  --paper4:    #2f2f3a;
  --paper5:    #393945;

  --ink:       #f5f2ec;

  /* v10.13 · no midnight o painel escuro não pode ser igual ao fundo da
     página (#0e0e14), senão o bloco some. Sobe um degrau: fica um
     painel elevado, e o texto branco por cima continua com contraste
     de sobra. */
  --surface-ink:  #1e1e28;
  --surface-ink2: #262631;
  --on-ink:    #f5f2ec;
  /* v10.13 · aqui o dourado é claro (#c49a30) — branco em cima dá
     2.62:1. O texto do botão primário passa a ser quase preto: 7.34:1.
     É a mesma inversão que qualquer interface escura faz. */
  --on-gold:   #0e0e14;
  --veu:       rgba(22,22,30,.97);
  --veu2:      rgba(22,22,30,.92);
  --ink2:      #e4dfd2;
  --text:      #ede9df;
  --text2:     #c4bdb0;
  /* v10.13 · --muted era #8a857e (4.51:1 no --paper2, raspando o
     mínimo) e --subtle era #6a6660 (3.15:1 — reprova em qualquer
     tamanho de texto normal). O tema claro já resolveu isto do mesmo
     jeito, e pelo mesmo motivo: um degrau abaixo do secundário que não
     se lê não é degrau. Os dois passam a ser o mesmo tom, agora
     legível (5.29 no --paper2, 6.16 no --bg). */
  --muted:     #9a9089;
  --subtle:    #9a9089;
  --ghost:     #4a4640;

  --border:    rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.14);
  --border3:   rgba(255,255,255,.22);

  --gold:      #c49a30;
  --gold-l:    #d4ab40;
  /* v10.13 · era #a47a18 — mais ESCURO que --gold, como manda o tema
     claro. No midnight isso quebra os dois papéis do token de uma vez:
     como texto dava 3.98:1 sobre o --gold-bg (o rótulo dourado do
     topo de quase toda tela), e como fundo de :hover escurecia um
     botão sobre página escura, que é o contrário do que hover faz no
     escuro. Clareando, os dois voltam a fazer sentido: 6.80:1 como
     texto, e o hover ilumina. */
  --gold-d:    #cfa63a;
  --gold-bg:   rgba(196,154,48,.10);
  --gold-bd:   rgba(196,154,48,.28);
  --gold-text: #d4ab40;

  /* v10.13 · as semânticas NÃO existiam neste bloco: verde, vermelho e
     âmbar herdavam os tons do tema claro, escolhidos para se ler sobre
     papel creme. Sobre #16161e, "Excluir conta" ficava em 2.84:1.
     Estes são os mesmos matizes, clareados para o fundo escuro. Os
     fundos (--*-bg) e bordas já eram rgba e continuam valendo.
     Onde --green-l e --red-l são usados como fundo é sempre ponto,
     faixa ou barra de progresso — nunca há texto em cima. */
  --green:     #57b98a;
  --green-l:   #6ecb9f;
  --red:       #e2726a;
  --red-l:     #ef8a82;
  --amber:     #d9a441;

  --topbar-bg:     #08080d;
  --topbar-border: rgba(255,255,255,.06);
}

/* ── SAGE — verde-acinzentado claro, accent oliva ── */
:root[data-theme="sage"] {
  --bg:        #dfe6dc;
  --paper:     #e6ece2;
  --veu:       rgba(230,236,226,.97);
  --veu2:      rgba(230,236,226,.92);
  --paper2:    #d8dfd2;
  --paper3:    #ccd4c4;
  --paper4:    #bcc4b2;
  --paper5:    #aab39d;

  --text:      #1e2820;
  --text2:     #3e4a3f;
  /* v10.13 · mesma correção que o tema claro fez na v9.14b e o
     midnight fez agora: --muted carregava quase todo o texto
     secundário do app e reprovava em AA sobre as superfícies mais
     fundas deste tema, e --subtle ficava em ~2,6:1 — invisível.
     Um degrau que não se lê não é degrau: os dois viram o mesmo
     tom legível. --ghost segue só para ornamento, nunca texto. */
  --muted:     #4f5550;
  --subtle:    #4f5550;
  --ghost:     #b2b6ab;

  --border:    rgba(30,40,32,.10);
  --border2:   rgba(30,40,32,.18);
  --border3:   rgba(30,40,32,.28);

  --gold:      #5a6b2e;
  --gold-l:    #6f8338;
  --gold-d:    #455624;
  --gold-bg:   rgba(90,107,46,.09);
  --gold-bd:   rgba(90,107,46,.22);
  --gold-text: #455624;
}

/* ── EMBER — areia/terracota, accent quente ── */
:root[data-theme="ember"] {
  --bg:        #f4e2d0;
  --paper:     #f8ead9;
  --veu:       rgba(248,234,217,.97);
  --veu2:      rgba(248,234,217,.92);
  --paper2:    #efd9c0;
  --paper3:    #e6c8a7;
  --paper4:    #d9b58c;
  --paper5:    #c89e72;

  --text:      #2a1c14;
  --text2:     #4e362a;
  /* v10.13 · mesma correção que o tema claro fez na v9.14b e o
     midnight fez agora: --muted carregava quase todo o texto
     secundário do app e reprovava em AA sobre as superfícies mais
     fundas deste tema, e --subtle ficava em ~2,6:1 — invisível.
     Um degrau que não se lê não é degrau: os dois viram o mesmo
     tom legível. --ghost segue só para ornamento, nunca texto. */
  --muted:     #664a39;
  --subtle:    #664a39;
  --ghost:     #c4a892;

  --border:    rgba(42,28,20,.10);
  --border2:   rgba(42,28,20,.18);
  --border3:   rgba(42,28,20,.28);

  --gold:      #b85427;
  --gold-l:    #d06530;
  --gold-d:    #8e3f1c;
  --gold-bg:   rgba(184,84,39,.09);
  --gold-bd:   rgba(184,84,39,.24);
  --gold-text: #8e3f1c;
}

/* ═══════════════════════════════════════════════════════════════
   v4.3 — SELETOR DE TEMA (perfil)
   ═══════════════════════════════════════════════════════════════ */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.theme-opt {
  display: flex; flex-direction: column;
  align-items: center; gap: .35rem;
  padding: .6rem .4rem;
  border-radius: var(--r);
  background: var(--paper2);
  border: 1.5px solid var(--border2);
  cursor: pointer;
  transition: var(--t);
  position: relative;
}
.theme-opt:hover { border-color: var(--border3); background: var(--paper3); }
.theme-opt.is-active {
  background: var(--gold-bg);
  border-color: var(--gold-bd);
}
.theme-opt.is-active::after {
  content: '✓';
  position: absolute;
  top: 2px; right: 5px;
  font-size: .65rem;
  color: var(--gold-d);
  font-weight: 600;
}
.theme-swatch {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.10);
  background-size: cover;
}
.theme-opt-lbl {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
}
.theme-opt.is-active .theme-opt-lbl { color: var(--gold-d); font-weight: 500; }
.theme-opt.is-locked .theme-swatch { opacity: .55; }
.theme-opt.is-locked .theme-opt-lbl::after {
  content: ' 🔒';
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════
   v4.3 — EDITOR DE NICHOS CUSTOM (perfil)
   ═══════════════════════════════════════════════════════════════ */
.niche-edit-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}
.niche-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem .35rem .55rem;
  background: var(--paper2);
  border: 1px solid var(--border2);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--text);
}
.niche-chip.is-default {
  background: transparent;
  color: var(--muted);
  border-style: dashed;
}
.niche-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1;
  padding: 0 0 0 .15rem;
  transition: color .15s;
}
.niche-chip-x:hover { color: #c0392b; }
.niche-add-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: .4rem;
  align-items: center;
}
.niche-add-emoji {
  text-align: center;
  font-size: 1.1rem;
  padding: .55rem 0;
}
.niche-add-btn {
  background: var(--gold);
  color: var(--on-gold);
  border: none;
  border-radius: var(--r);
  padding: 0 .85rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  height: 100%;
  min-height: 38px;
  transition: background .2s;
}
.niche-add-btn:hover { background: var(--gold-d); }
.niche-add-btn:disabled { opacity: .5; cursor: not-allowed; }
.niche-hint {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
}

/* ── Controle segmentado (v5.3) ─────────────────────────────────
   Escolha binária com alvo grande: o usuário está em obra, de pé,
   possivelmente de luva. Radio button nativo é pequeno demais. */
.seg {
  display: flex;
  gap: .35rem;
  background: var(--paper3);
  border: 1px solid var(--border2);
  border-radius: .6rem;
  padding: .25rem;
}
.seg-btn {
  flex: 1;
  padding: .7rem .5rem;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;            /* alvo mínimo de toque */
}
.seg-btn.on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(14,14,20,.09);
}
.seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Painel financeiro (v5.3) ───────────────────────────────────── */
.doc-metrics--2 { grid-template-columns: repeat(2, 1fr); }

/* Destaque só quando há dinheiro a cobrar — chamar atenção para um
   valor zerado treina o usuário a ignorar o cartão. */
.doc-metric--alert {
  background: var(--gold-bg);
  border-color: var(--gold-bd);
}
.doc-metric--alert .doc-metric-val { color: var(--gold-text); }

/* ── Valor e cobrança na lista de serviços (v5.3) ───────────────── */
.service-valor { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.service-valor--pend { color: var(--gold-text); font-weight: 500; }

/* v-rebuild-5 · "marcar recebido" e "criar serviço a partir do
   orçamento" viraram itens de menu (.rm-item, ver bloco AÇÕES DO
   CARTÃO acima) — .pago-btn continua existindo só como GANCHO de
   JS (bindPagoBtns ouve por esta classe, não por data-act), sem
   estilo próprio: o visual vem inteiro de .rm-item. */

/* ── Aviso de pagamento do cliente (v5.4) ───────────────────────── */
.service-claim {
  display: block; width: 100%;
  font-size: .64rem; color: #2d7d46; margin-top: .2rem;
}
@keyframes pagoPulse { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

/* ── Registro ainda não sincronizado (v5.7.3) ───────────────────── */
.service-pend {
  font-family: var(--mono); font-size: .6rem;
  color: var(--gold-text); background: var(--gold-bg);
  border: 1px solid var(--gold-bd); border-radius: 3px;
  padding: .05rem .3rem; white-space: nowrap;
}

/* ── Foto de capa no card do marketplace (v6.0) ─────────────────
   Proporção larga (16:9) em vez de quadrada: ocupa menos altura, então
   cabem mais profissionais na tela sem virar mural de fotos. */
.pro-capa { aspect-ratio: 16/9; overflow: hidden; background: var(--paper3); }
.pro-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════════════════════════════════════════════════════════
   FIELDO DESIGN SYSTEM · v10.0
   ════════════════════════════════════════════════════════════════

   A auditoria mediu o que EXISTIA de fato nas 19 páginas, no browser:

     30 valores de espaçamento (22 fora da grade de 8)
     24 tamanhos de fonte
     13 raios de borda
      6 alturas de input — incluindo 41, 43 E 44
     32 variantes de botão
     14 variantes de card

   Isso não é um sistema. São trinta decisões tomadas em trinta
   momentos diferentes.

   O que vem abaixo é o sistema. Regra de uso: NENHUMA página declara
   espaçamento, raio, altura de input ou variante de botão própria.
   Se algo aqui não serve, o conserto é aqui — não uma exceção lá.

   Os tokens ANTIGOS (--r, --r-l, --r-xl) continuam definidos no :root
   e apontam para os novos. Trocar 1.356 linhas de CSS de uma vez seria
   a maneira mais rápida de quebrar o que funciona.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── ESPAÇAMENTO · grade de 8 ──
     Seis degraus. Nada entre eles. */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;

  /* ── TIPOGRAFIA · sete degraus, e só ──
     Escala em rem pra respeitar o tamanho de fonte do sistema — um
     eletricista de 50 anos costuma aumentar a fonte do celular, e uma
     escala em px ignora isso. */
  --t-hero:  1.75rem;   /* título de página            28px */
  --t-h1:    1.375rem;  /* título de seção maior       22px */
  --t-h2:    1.125rem;  /* título de card / bloco      18px */
  --t-body:  0.9375rem; /* corpo                       15px */
  --t-sm:    0.8125rem; /* apoio, descrição            13px */
  --t-meta:  0.6875rem; /* metadado, rótulo mono       11px */
  --t-micro: 0.5625rem; /* eyebrow                      9px */

  --lh-tight: 1.25;
  --lh-base:  1.6;

  /* ── RAIOS · três ── */
  --rad-sm: 8px;    /* chips, badges, inputs  */
  --rad-md: 12px;   /* cards, botões          */
  --rad-lg: 20px;   /* folhas, modais         */
  --rad-full: 999px;

  /* ── ALTURA ÚNICA de controle ──
     41, 43 e 44 conviviam. 44 é o mínimo de alvo de toque; usar o
     mínimo como padrão elimina a categoria inteira de "esse é 43?". */
  --ctrl-h: 44px;
  --ctrl-h-lg: 52px;

  /* ── SOMBRAS · duas ── */
  --shadow-1: 0 1px 2px rgba(14,14,20,.06);
  --shadow-2: 0 8px 28px rgba(14,14,20,.14);

  /* ── compatibilidade: os raios antigos apontam pros novos ── */
  --r:    var(--rad-sm);
  --r-l:  var(--rad-md);
  --r-xl: var(--rad-lg);
}

/* ════════════ TIPOGRAFIA ════════════ */
.ds-hero  { font-family: var(--serif); font-size: var(--t-hero); line-height: var(--lh-tight);
            font-weight: 400; color: var(--text); letter-spacing: -.01em; }
.ds-hero em { font-style: italic; color: var(--gold); }
.ds-h1    { font-family: var(--serif); font-size: var(--t-h1); line-height: var(--lh-tight);
            font-weight: 400; color: var(--text); }
.ds-h2    { font-size: var(--t-h2); line-height: var(--lh-tight); font-weight: 500; color: var(--text); }
.ds-body  { font-size: var(--t-body); line-height: var(--lh-base); color: var(--text2); }
.ds-sm    { font-size: var(--t-sm); line-height: var(--lh-base); color: var(--muted); }
.ds-meta  { font-family: var(--mono); font-size: var(--t-meta); color: var(--muted);
            letter-spacing: .04em; }
/* Eyebrow é o ÚNICO lugar com caixa alta e letra espaçada. O brief
   pediu pra parar de transformar a interface inteira em rótulo. */
.ds-eyebrow { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
              letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
              display: flex; align-items: center; gap: var(--s1); }
.ds-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold); flex-shrink: 0; }

/* ════════════ BOTÕES · três variantes ════════════
   Antes: 32 assinaturas visuais diferentes. */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--ctrl-h); padding: 0 var(--s3);
  font-family: var(--sans); font-size: var(--t-body); font-weight: 500;
  border-radius: var(--rad-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--t), border-color var(--t), color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.ds-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ds-btn--primary   { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.ds-btn--primary:hover  { background: var(--gold-d); border-color: var(--gold-d); }
.ds-btn--secondary { background: var(--gold-bg); color: var(--gold-text); border-color: var(--gold-bd); }
.ds-btn--secondary:hover{ background: rgba(133,99,16,.13); }
.ds-btn--ghost     { background: transparent; color: var(--text2); border-color: var(--border2); }
.ds-btn--ghost:hover    { background: var(--paper2); color: var(--text); }
/* destrutiva: diferente por COR e por posição, nunca ao lado da primária */
.ds-btn--danger    { background: transparent; color: var(--red); border-color: var(--red-bd); }
.ds-btn--danger:hover   { background: var(--red-bg); }
.ds-btn--full { display: flex; width: 100%; }
.ds-btn--lg   { min-height: var(--ctrl-h-lg); font-size: 1rem; }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* No fundo escuro do herói */
.ds-dark .ds-btn--ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); }
.ds-dark .ds-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ════════════ INPUTS · uma altura ════════════ */
.ds-field { display: block; margin-bottom: var(--s2); }
.ds-label { display: block; font-size: var(--t-sm); font-weight: 500;
            color: var(--text); margin-bottom: var(--s1); }
.ds-label .req { color: var(--gold-text); }
.ds-input, .ds-select {
  width: 100%; min-height: var(--ctrl-h); padding: 0 var(--s2);
  font-family: var(--sans); font-size: var(--t-body); color: var(--text);
  background: var(--paper); border: 1px solid var(--border2);
  border-radius: var(--rad-sm); transition: border-color var(--t);
}
.ds-textarea { width: 100%; min-height: 96px; padding: var(--s2);
  font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-base);
  color: var(--text); background: var(--paper); border: 1px solid var(--border2);
  border-radius: var(--rad-sm); resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.ds-hint { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s1); }
.ds-erro { font-size: var(--t-sm); color: var(--red); margin-top: var(--s1); }

/* ════════════ CARDS · seis padrões, não catorze ════════════ */
.ds-card { background: var(--paper); border: 1px solid var(--border);
           border-radius: var(--rad-md); padding: var(--s3); }
.ds-card + .ds-card { margin-top: var(--s2); }

/* card de AÇÃO: ícone, nome e uma linha de descrição — o brief pede
   que nenhum recurso seja só um ícone */
.ds-action { display: flex; align-items: center; gap: var(--s2);
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--rad-md); padding: var(--s2); text-decoration: none;
  min-height: 64px; transition: border-color var(--t), background var(--t); }
.ds-action:hover { border-color: var(--gold-bd); background: var(--paper2); }
.ds-action-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--rad-sm);
  background: var(--gold-bg); color: var(--gold-text);
  display: flex; align-items: center; justify-content: center; }
.ds-action-ico svg { width: 20px; height: 20px; }
.ds-action-txt { min-width: 0; flex: 1; }
.ds-action-nome { font-size: var(--t-body); font-weight: 500; color: var(--text); }
.ds-action-sub  { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ds-action-seta { color: var(--ghost); flex-shrink: 0; }

/* card de ESTATÍSTICA — número COM significado, nunca solto */
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
            gap: var(--s1); }
.ds-stat { background: var(--paper); border: 1px solid var(--border);
           border-radius: var(--rad-md); padding: var(--s2); text-align: center; }
.ds-stat-val { font-family: var(--serif); font-size: var(--t-h1); line-height: 1;
               color: var(--text); }
.ds-stat-lbl { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s1); }

/* ESTADO VAZIO — título, explicação, saída. Nunca "Nenhum dado." */
.ds-empty { text-align: center; padding: var(--s6) var(--s3); }
.ds-empty-ico { width: 44px; height: 44px; margin: 0 auto var(--s2);
  color: var(--paper5); display: flex; align-items: center; justify-content: center; }
.ds-empty-ico svg { width: 100%; height: 100%; }
.ds-empty-tit { font-family: var(--serif); font-size: var(--t-h2);
                color: var(--text); margin-bottom: var(--s1); }
.ds-empty-txt { font-size: var(--t-sm); line-height: var(--lh-base); color: var(--muted);
                max-width: 34ch; margin: 0 auto var(--s3); }

/* AVISO / erro / offline — mesma casca, cor semântica */
.ds-nota { display: flex; gap: var(--s2); align-items: flex-start;
  border-radius: var(--rad-md); padding: var(--s2); font-size: var(--t-sm);
  line-height: var(--lh-base); border: 1px solid; }
.ds-nota svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ds-nota--info  { background: var(--gold-bg);  border-color: var(--gold-bd);  color: var(--text2); }
.ds-nota--ok    { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.ds-nota--erro  { background: var(--red-bg);   border-color: var(--red-bd);   color: var(--red); }

/* ════════════ BADGE ════════════ */
.ds-badge { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--rad-full); border: 1px solid; }
.ds-badge--pro  { background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold-l); }
.ds-badge--free { background: transparent; border-color: var(--border2); color: var(--muted); }
/* No fundo escuro a borda --border2 (preta a 16%) some. Variante de
   contexto em vez de segundo componente. */
.ds-dark .ds-badge--free { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.62); }
.ds-dark .ds-badge--pro  { border-color: var(--gold-bd); color: var(--gold-l); }
.ds-badge--ok   { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.ds-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ════════════ SEÇÃO ════════════ */
.ds-sec { margin-bottom: var(--s4); }
.ds-sec-head { display: flex; align-items: center; justify-content: space-between;
               gap: var(--s2); margin-bottom: var(--s2); }
.ds-sec-tit { font-size: var(--t-h2); font-weight: 500; color: var(--text); }
.ds-sec-act { font-size: var(--t-sm); color: var(--gold-text); background: none; border: 0;
  cursor: pointer; min-height: var(--ctrl-h); display: inline-flex; align-items: center;
  padding: 0 4px; margin: 0 -4px; }

/* ════════════ PROGRESSO ════════════ */
.ds-prog { height: 6px; border-radius: var(--rad-full); background: var(--paper3); overflow: hidden; }
.ds-prog-fill { height: 100%; background: var(--gold); border-radius: inherit;
                transition: width .4s var(--ez); }

/* ════════════ LOADING ════════════ */
.ds-skel { background: linear-gradient(90deg, var(--paper2) 25%, var(--paper3) 37%, var(--paper2) 63%);
  background-size: 400% 100%; animation: ds-shimmer 1.4s ease infinite;
  border-radius: var(--rad-sm); }
@keyframes ds-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) {
  .ds-skel { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ════════════ LAYOUT ════════════
   Uma margem lateral só, no app inteiro. */
.ds-page { max-width: 720px; margin: 0 auto; padding: var(--s3) var(--s3) var(--s6); }
.ds-page--flush { padding-left: 0; padding-right: 0; }
.ds-inset { padding-left: var(--s3); padding-right: var(--s3); }

/* ════════════ FOCO VISÍVEL ════════════
   Feedback que não depende de cor nem de mouse. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════
   NAVEGAÇÃO INFERIOR · v10.0
   ─────────────────────────────────────────────────────────────
   A navegação inteira do app era UMA lista de nove itens dentro de um
   hambúrguer — e "Novo Serviço" estava lá, como se ação fosse destino.
   "Perfil", a página mais importante do produto, não estava.

   Cinco destinos, o do meio é criação. Contratos NÃO entra aqui: é
   recurso Pro, e porta trancada na navegação principal faz o usuário
   grátis esbarrar nela todo dia.
   ════════════════════════════════════════════════════════════════ */
.nav-inf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; align-items: stretch;
  background: var(--paper); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; min-height: 58px;
  color: var(--muted); text-decoration: none; background: none; border: 0;
  font-family: var(--sans); font-size: 10px; letter-spacing: .01em;
  cursor: pointer; transition: color var(--t); position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-item svg { width: 22px; height: 22px; }
.nav-item[aria-current="page"] { color: var(--gold-text); }
/* O estado ativo NÃO depende só de cor — há um traço no topo.
   Feedback independente de cor é requisito de acessibilidade. */
.nav-item[aria-current="page"]::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%;
  height: 2px; background: var(--gold); border-radius: 0 0 2px 2px;
}
.nav-item:hover { color: var(--text2); }

/* o "+" é criação, e parece */
.nav-novo { flex: 0 0 auto; padding: 0 var(--s1); display: flex; align-items: center; }
.nav-novo-btn {
  width: 48px; height: 48px; border-radius: var(--rad-md);
  background: var(--gold); color: var(--on-gold); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1); transition: background var(--t);
}
.nav-novo-btn:hover { background: var(--gold-d); }
.nav-novo-btn svg { width: 24px; height: 24px; }

/* espaço pro conteúdo não ficar embaixo da barra */
body.tem-nav-inf { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

/* folha de criação */
.nav-sheet {
  position: fixed; inset: 0; z-index: 320; display: none;
  background: rgba(14,14,20,.5); backdrop-filter: blur(2px);
}
.nav-sheet.aberta { display: block; }
.nav-sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper); border-radius: var(--rad-lg) var(--rad-lg) 0 0;
  padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  animation: sobe .28s var(--ez);
}
@keyframes sobe { from { transform: translateY(100%) } to { transform: none } }
.nav-sheet-alca { width: 36px; height: 4px; border-radius: 2px; background: var(--paper4);
  margin: 0 auto var(--s3); }
.nav-sheet-tit { font-family: var(--serif); font-size: var(--t-h2); color: var(--text);
  margin-bottom: var(--s2); }

/* ════════════════════════════════════════════════════════════════
   ALVOS DE TOQUE · v10.0
   ─────────────────────────────────────────────────────────────
   Medido nas 22 páginas × 5 larguras, com o overflow-x desligado à
   força. Os mesmos punhados de classes reprovavam em página após
   página — o que é justamente o motivo de existir um arquivo comum:
   dezessete telas, um conserto.

   44px é o mínimo de alvo. Onde o elemento é um link de TEXTO no meio
   de uma frase, a altura vem de padding com margem negativa igual —
   a área cresce, o alinhamento visual não muda.
   ════════════════════════════════════════════════════════════════ */

/* hambúrguer: era 36×36 em todas as telas */
.hbg-btn { width: 44px; height: 44px; }

/* voltar / navegação de texto na topbar */
.topbar-back, .stepper-back {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 8px; margin: 0 -8px;
}
.topbar-logo { min-height: 44px; }

/* inputs: 41 e 43px conviviam com 44 */
.field-input, .field-select, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"], select {
  min-height: var(--ctrl-h);
}
.field-textarea { min-height: 88px; }

/* abas e alternadores */
.ctab, .dash-tab, .stab, .per-btn, .plan-toggle-btn, .chip, .sort-btn, .sv-filtro {
  min-height: 44px;
}

/* link de texto dentro de parágrafo — cresce a área, não o desenho */
.link-toque, .plan-bar-cta, .sec-toggle, .sec-action {
  min-height: 44px; display: inline-flex; align-items: center;
}