html, body {
  /* v157: fonte única já na raiz — o <html> ficava no default do UA (Times) */
  font-family: var(--font-app);
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  /* v119/v141: canvas/safe-area = fundo EDITORIAL chapado — v158: via --bg-app */
  background: var(--bg-app);
}
*{margin:0;padding:0;box-sizing:border-box}
:root{
/* v140 — REDESIGN GRAFITE: navy+dourado aposentados como cor de UI. Os tokens
   LEGADOS foram REDEFINIDOS pro novo esquema (migra todos os consumidores var()
   de graça); o dourado sobrevive só como cor de DADO da faixa Ouro. */
--primary:#262626;--primary-light:#333333;--accent:#fafafa;--accent-light:rgba(250,250,250,.92);
--bg:#171717;--card:rgba(255,255,255,.05);--text:#fafafa;--text-light:rgba(250,250,250,.55);--success:#34d977;
--danger:#ef4444;--warning:#f59e0b;--border:rgba(255,255,255,.11);--shadow:0 14px 34px rgba(0,0,0,.55);
--radius:12px;
/* paleta funcional v140 */
--txt-2:rgba(250,250,250,.6);--txt-3:rgba(250,250,250,.4);
--verde:#34d977;--verde-claro:#a9edc3;--salmao:rgba(232,158,150,.8);--vermelho:#e07a6a;
--faixa-ouro:#e0bd66;
/* v157 — FONTE ÚNICA do app. A Inter vem PRIMEIRO (é a webfont que o
   index.html carrega); o resto é só rede de segurança se o Google Fonts falhar.
   ATENÇÃO: até a v156 o `--fonte` era a stack DE SISTEMA (decisão da v140), e só
   uns 30 seletores soltos pediam 'Inter' na mão — ou seja, landing em Inter e app
   logado em SF Pro. Este token unifica os dois em Inter. */
--font-app:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
/* v158 — FUNDO do app. O #111213 vivia solto em 3 lugares (html/body, body e o
   ::before das telas logadas) e não tinha token; agora tem. Manter em sync com o
   theme-color do index.html e o manifest.json (armadilha v119). */
--bg-app:#111213;
/* alias legado: `--fonte` sobrevive apontando pro token novo, pra qualquer
   consumidor esquecido (ou style inline antigo) não cair em fonte diferente. */
--fonte:var(--font-app);
/* v140 — card de vidro padrão (substitui o fumê navy da v124). O border-top
   mais claro (.3) e o fio de luz ::before vivem nos consumidores. */
--glass-bg:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.025));
--glass-blur:blur(22px);
--glass-border:1px solid rgba(255,255,255,.11);
--glass-radius:16px;
--glass-shadow:0 14px 34px rgba(0,0,0,.55);
/* legados do fumê: --gold vira a cor de DADO (faixa Ouro); --gold-hi vira luz
   branca (plim do card de notificações); --gold-dim vira cinza neutro. */
--gold:#e0bd66;--gold-hi:#fafafa;--gold-dim:#737373;
/* v153 — recuo lateral padrão do conteúdo no mobile e cor do fio de 1px que
   separa fileiras/seções (o valor que o projeto já usava solto por todo lado). */
--gutter:20px;--fio:rgba(255,255,255,.06);
/* v185: tokens de MODAL — antes eram literais soltos no .juris-modal-overlay
   (scrim) e no .juris-modal-card (surface). Extraídos pro bottom sheet consumir
   sem espalhar literal. Mesmos valores que os modais já usavam. */
--modal-scrim:rgba(10,10,10,.78);   /* v195: --modal-surface removido — descrevia o vidro v124 do .juris-modal-card, sem consumidor desde que a superfície virou --bg-app */
/* v186: app é dark — sem isto o iOS/Chrome abrem a LISTA do <select> em fundo
   branco (as <option> quase não aceitam estilo; color-scheme é o caminho). */
color-scheme: dark;
/* v165/v166: respiro entre ícone e rótulo das abas (.seg-tab) */
--seg-lbl-gap:7px;
/* v154 — FILEIRA: o padrão único de linha do /perfil (métricas, ações, share,
   localização). Valores canônicos vindos da linha "Ver planos" (.btn-upgrade
   editorial da v145) — quem for criar fileira nova consome estes tokens em vez
   de repetir números, senão os blocos voltam a divergir de altura. */
--fileira-pad-y:13px;--fileira-fs:13.5px;--fileira-peso:500;--fileira-cor:rgba(250,250,250,.85);
}
body{font-family:var(--font-app);background:var(--bg-app);color:var(--text);overflow-x:hidden}
/* v157 — os controles de formulário NÃO herdam fonte do documento por padrão
   (o browser aplica a própria): sem isto, input/select/textarea/button caem em
   Helvetica/Arial e destoam do resto. Regra base — qualquer seletor com fonte
   própria mais abaixo continua vencendo. */
input,select,textarea,button,optgroup{font-family:inherit}
/* texto dentro de SVG (rótulos dos gráficos do painel/admin/landing): o
   font-family fica no CSS, não em atributo de apresentação. */
svg text{font-family:var(--font-app)} /* v141: editorial chapado (radials da v140 removidos) */
.screen{display:none;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:auto}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes countdown{from{stroke-dashoffset:0}to{stroke-dashoffset:113}}

/* NAV */
/* v128: NAV principal ÚNICA (.app-nav, fora das .screen). Mobile = barra inferior
   glass; desktop = sidebar (regras no @media 768). O item ATIVO não é uma pílula
   por botão — é o .nav-ind que DESLIZA sob o item ativo (posicionado por JS,
   posicionarNavInd). Os .nav-item são transparentes. v130: barra de volta ao VIDRO
   FUMÊ FROSTED (revertido o trilho recuado da v129; restaura safe-area/rodapé/banding
   da v118/v119) e o .nav-ind usa o "cristal dourado C2" (igual ao .seg-ind). */
/* v140: nav mobile virou PÍLULA FLUTUANTE grafite (o container fixo dá as
   margens laterais + safe-area; a pílula é a própria .app-nav via border/radius).
   Retração por rolagem: .compact colapsa os labels e encolhe os paddings —
   listener de scroll em fase de captura no document (o scroll do app é por
   .screen, não no window), ver _navRetracao em app.js. */
.app-nav{position:fixed;bottom:0;left:16px;right:16px;margin:0 0 calc(12px + env(safe-area-inset-bottom));border-radius:999px;background:rgba(28,30,29,.85);border:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);box-shadow:0 12px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;display:flex;justify-content:space-around;padding:7px;z-index:100;transition:padding .35s cubic-bezier(.3,1.2,.4,1)}
.app-nav .nav-item{position:relative;z-index:1;background:none;border:none;color:rgba(250,250,250,.55);font-family:var(--font-app);font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;padding:11px 0 10px;border-radius:999px;transition:color .2s,padding .35s cubic-bezier(.3,1.2,.4,1)}
.app-nav .nav-item svg{width:21px;height:21px;flex-shrink:0}
.app-nav .nav-item .nav-lbl{display:block;max-height:14px;opacity:1;margin-top:4px;overflow:hidden;transition:max-height .35s cubic-bezier(.3,1.2,.4,1),opacity .25s,margin-top .35s cubic-bezier(.3,1.2,.4,1)}
.app-nav .nav-item:hover{color:var(--accent-light)}
/* v144: foco por teclado no TEMA (o outline azul default destoava). Clique não
   mostra anel (:focus sem :focus-visible); Tab mostra anel branco — a11y ok. */
.app-nav .nav-item:focus{outline:none}
.app-nav .nav-item:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px;border-radius:999px}
.app-nav .nav-item.active{color:#fafafa}
/* retraída (mobile, rolando pra baixo) */
.app-nav.compact{padding:5px}
.app-nav.compact .nav-item{padding:9px 0}
.app-nav.compact .nav-item .nav-lbl{max-height:0;opacity:0;margin-top:0}
/* indicador deslizante = "cristal dourado C2" (v130, idêntico ao .seg-ind): vidro
   claro + fio dourado + bloom. JS cobre o box do item ativo (top/left/width/height),
   então já fica flush (preenche a célula). SEM backdrop-filter próprio (o blur fica
   no container .app-nav, não empilha vidro) e SEM fios ::before/::after. Transiciona
   nos 4 eixos pra servir a barra horizontal (mobile) e a sidebar vertical (desktop). */
/* v140: indicador = pílula de vidro branco translúcido (sem dourado). O box
   (left/top/width/height) segue 100% por JS (posicionarNavInd) — cobre o item
   ativo tanto na barra horizontal quanto na sidebar vertical; easing spring. */
.app-nav .nav-ind{position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none;border-radius:999px;background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:left .5s cubic-bezier(.3,1.35,.4,1),top .5s cubic-bezier(.3,1.35,.4,1),width .5s cubic-bezier(.3,1.35,.4,1),height .5s cubic-bezier(.3,1.35,.4,1),opacity .2s}
@media (prefers-reduced-motion: reduce){.app-nav .nav-ind,.app-nav,.app-nav .nav-item,.app-nav .nav-item .nav-lbl{transition:none}}

/* mobile (≤767px): itens com largura igual (flex:1 ≡ grid de colunas iguais,
   robusto com o 6º item Admin visível). Conteúdo ganha padding-bottom pra nada
   ficar atrás da pílula flutuante. */
/* v162: rótulo do item Jurisprudência em duas variantes — "Juris" na pílula
   mobile, "Jurisprudência" na sidebar desktop (o swap desktop vive no bloco
   @media(min-width:768px) da nav). display:none tira a variante oculta do
   fluxo: não mede errado (posicionarNavInd/retração v140) nem é lida em dobro
   (o botão tem aria-label="Jurisprudência" pra leitura sempre por extenso).
   Substitui o encolhimento de fonte da v161 — inclusive o residual do admin
   a 320px fecha ("Juris" cabe em qualquer célula). */
.app-nav .nav-lbl-longo{display:none}
@media (max-width:767px){
  .app-nav .nav-item{flex:1 1 0;min-width:0}
  #screen-dashboard .main-content,
  #screen-painel .main-content,
  #screen-ajuda .main-content,
  #screen-jurisprudencia .main-content,
  #screen-feed .main-content,
  #screen-profile .main-content,
  #screen-admin .main-content,
  #screen-perfil-publico .main-content{ /* v184: espaço pra pílula da nav não cobrir a última publicação */
    padding-bottom: calc(env(safe-area-inset-bottom) + 104px);
  }
}
/* fallback pra browsers sem backdrop-filter (Android antigo): pílula sólida */
@supports not (backdrop-filter: blur(1px)){
  .app-nav{background:rgba(28,30,29,.97)}
}

/* HEADER (v140: grafite; wordmark + label da tela em caixa alta) */
/* v141: header editorial — título 20px + subtítulo 12px, fundo chapado (blur só
   pra legibilidade do sticky), fio de 1px separando */
.header{background:rgba(17,18,19,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fafafa;padding:calc(env(safe-area-inset-top) + 20px) 20px 18px;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.header h1{font-size:20px;font-weight:600;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px}
.header h1 i{color:#fafafa}
.header p{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:rgba(250,250,250,0.5);margin-top:4px}
.header-row{display:flex;justify-content:space-between;align-items:center}

/* TOGGLE SWITCH */
.toggle-wrap{display:flex;align-items:center;gap:8px}
.toggle-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.85)}
.toggle-switch{position:relative;width:34px;height:20px;background:rgba(255,255,255,.12);border-radius:999px;cursor:pointer;transition:background .25s}
.toggle-switch.on{background:var(--success)}
.toggle-switch .toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .25s cubic-bezier(.34,1.4,.4,1);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.toggle-switch.on .toggle-knob{left:16px}

/* LANDING */
.landing{background:linear-gradient(160deg,var(--primary) 0%,#202020 100%);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:#fff}
.landing-logo{font-size:48px;font-weight:800;margin-bottom:8px;letter-spacing:-1px}
.landing-logo i{color:var(--accent);margin-right:8px}
.landing-subtitle{font-size:16px;opacity:.7;margin-bottom:40px;max-width:400px}
.landing-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}
.landing-buttons button{padding:16px 32px;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:10px}
.btn-client{background:var(--accent);color:var(--primary)}
.btn-client:hover{background:var(--accent-light);transform:translateY(-2px)}
.btn-lawyer{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)!important}
.btn-lawyer:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.landing-features{display:flex;gap:24px;margin-top:48px;flex-wrap:wrap;justify-content:center}
.landing-feat{text-align:center;max-width:140px}
.landing-feat i{font-size:28px;color:var(--accent);margin-bottom:8px}
.landing-feat p{font-size:12px;opacity:.7}

/* CLIENT FORM */
.client-form-wrapper{padding:20px;padding-bottom:100px}
.form-card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;transition:.2s;background:var(--bg)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent);background:#fff}
.form-group textarea{resize:vertical;min-height:120px}
.btn-submit{width:100%;padding:16px;background:var(--accent);color:var(--primary);border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-submit:hover:not(:disabled){background:var(--accent-light);transform:translateY(-1px)}
/* Feedback visual padrão de loading — usado em login/cadastro/reset/cliente (submitQuestion) */
.btn-submit:disabled{opacity:.7;cursor:wait;transform:none;filter:saturate(.85)}
.areas-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.area-chip{padding:8px 14px;border-radius:20px;font-size:12px;border:2px solid var(--border);cursor:pointer;transition:.2s;background:#fff;font-weight:500}
.area-chip.selected{border-color:var(--accent);background:var(--accent);color:var(--primary)}
.area-chip:hover{border-color:var(--accent)}

/* SUCCESS */
.success-screen{display:none;text-align:center;padding:60px 20px;animation:slideUp .5s ease}
.success-screen.show{display:block}
.success-icon{width:80px;height:80px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:36px;color:#fff;animation:pulse 1s ease infinite}

/* DASHBOARD */
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 20px;margin-top:-10px;margin-bottom:16px}
.stat-card{background:var(--card);border-radius:10px;padding:14px;text-align:center;box-shadow:var(--shadow)}
.stat-card .num{font-size:24px;font-weight:800;color:var(--primary)}
.stat-card .label{font-size:10px;color:var(--text-light);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.leads-section{padding:0 20px 100px}
.section-title{font-size:14px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.section-title .badge{background:var(--danger);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px}

/* ROI BANNER */
/* .roi-banner removido na v137 (banner de contagem de leads saiu do dashboard). */

/* LEAD CARDS */
/* v173: a animação de entrada saiu do .lead-card e foi pro wrapper .lead-slot
   (leads-ui.js) — transform animado NO elemento com backdrop-filter buga a
   composição do iOS PWA e apagava os stats + título da seção (lição v137).
   Os .lead-card do admin (sem wrapper) ficam sem animação de entrada — de
   propósito, mesmo bug em potencial. */
.lead-slot{animation:slideUp .4s ease}
.lead-card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:12px;box-shadow:var(--shadow);border-left:4px solid var(--accent);position:relative;overflow:hidden}
.lead-card.urgent{border-left-color:var(--danger)}
.lead-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.lead-region{font-size:11px;background:var(--bg);padding:4px 10px;border-radius:6px;color:var(--text-light);font-weight:500}
.lead-area{display:inline-block;font-size:11px;background:rgba(255,255,255,.15);color:var(--accent);padding:4px 10px;border-radius:6px;font-weight:600;margin-right:6px}
.lead-question{font-size:14px;font-weight:600;margin:10px 0;line-height:1.5;color:var(--text)}
.lead-timer{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger);font-weight:600;margin-bottom:12px}
.timer-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.timer-fill{height:100%;background:#34d977;border-radius:2px;transition:width 1s linear,background .3s} /* v140: default verde — o render emite a cor da fase inline; era var(--danger) e piscava vermelho a cada re-render (achado da revisão) */
.lead-actions{display:flex;gap:8px}
.lead-actions button{flex:1;padding:10px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-accept{background:var(--success);color:#fff}
.btn-accept:hover{filter:brightness(1.1)}
.btn-decline{background:var(--bg);color:var(--text-light)}
.btn-decline:hover{background:var(--border)}
.btn-notmine{background:var(--bg);color:var(--text-light)}
.btn-notmine:hover{background:var(--border)}

/* MATCH BADGE */
/* .match-badge removida na v140 — era CSS morto (zero ocorrências no markup/JS;
   ver a armadilha do acceptLead no ROADMAP: NUNCA referenciar no JS). */

/* VIEWERS */
.lead-viewers{font-size:11px;color:var(--warning);font-weight:500;margin-bottom:6px;display:flex;align-items:center;gap:4px}

/* MASKED DATA */
.lead-masked{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-light);background:var(--bg);padding:8px 12px;border-radius:8px;margin-bottom:10px}
.lead-masked .mask-dots{font-weight:700;letter-spacing:2px;color:var(--text)}
.lead-masked .mask-lock{color:var(--text-light);font-size:10px;display:flex;align-items:center;gap:4px}

/* v110 — caixa de resposta no card de lead aceito (tema escuro do dashboard) */
.resp-box{width:100%;margin-top:4px;text-align:left}
.resp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.55)}
.resp-duvida{font-size:13px;line-height:1.5;color:rgba(255,255,255,.9);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 12px;margin-top:5px;white-space:pre-wrap;word-break:break-word}
.resp-textarea{width:100%;box-sizing:border-box;margin-top:6px;min-height:96px;resize:vertical;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:#fff;font-family:inherit;font-size:13px;line-height:1.5}
.resp-textarea:focus{outline:none;border-color:rgba(255,255,255,.5)}
.resp-textarea::placeholder{color:rgba(255,255,255,.4)}
.resp-contador{font-size:11px;color:rgba(255,255,255,.4);text-align:right;margin-top:4px}
.resp-contador.ok{color:#25D366}
.resp-preview{font-size:12px;line-height:1.5;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.25);border-radius:8px;padding:10px 12px;margin-top:5px;white-space:pre-wrap;word-break:break-word}
.resp-enviar{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:12px;border:none;border-radius:999px;background:#fafafa;color:#111213;box-shadow:none;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:.18s}
.resp-enviar:disabled{opacity:.5;cursor:default}
.resp-enviar:not(:disabled):hover{filter:brightness(1.08)}
.resp-status{font-size:12px;line-height:1.45;margin-top:8px}
.resp-status.erro{color:#ffb4a8}
.resp-ok{font-size:13px;font-weight:600;color:#25D366;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.resp-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px;background:#25D366;color:#fff;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none}

/* VERIFICATION BADGES */
.verify-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.v-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
/* Tooltip puro CSS — qualquer .tooltip-host com data-tooltip mostra balão no hover/focus.
   Fundo navy + borda dourada + Inter 12px, consistente com o resto do app.
   Aplicado no badge "Resposta Rápida" pra explicar o critério (80% Sim em >=3 avaliações). */
.tooltip-host{position:relative;cursor:help}
.tooltip-host::after{
  content:attr(data-tooltip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:#171717;border:1px solid rgba(255,255,255,0.45);
  color:#f5f5f5;font-family:var(--font-app);font-size:12px;font-weight:500;
  line-height:1.4;letter-spacing:.1px;
  padding:8px 12px;border-radius:8px;
  white-space:normal;width:max-content;max-width:260px;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  z-index:20;
}
.tooltip-host::before{
  content:'';position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);
  border:6px solid transparent;border-top-color:rgba(255,255,255,0.45);
  opacity:0;transition:opacity .18s ease;
  z-index:20;
}
.tooltip-host:hover::after,
.tooltip-host:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.tooltip-host:hover::before,
.tooltip-host:focus-visible::before{opacity:1}
.v-badge.specialist{background:rgba(59,130,246,.1);color:#1e40af}
.v-badge.fast{background:rgba(255,255,255,.15);color:#666}
.v-badge.top10{background:rgba(139,92,246,.1);color:#5b21b6}
.v-badge-mini{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;margin-right:2px}
.v-badge-mini.specialist{background:rgba(59,130,246,.12);color:#1e40af}
.v-badge-mini.fast{background:rgba(255,255,255,.15);color:#666}
.v-badge-mini.top10{background:rgba(139,92,246,.12);color:#5b21b6}
.rank-badges{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}

/* PROFILE */
/* v143: SEM capa — .profile-head é a linha flex do cabeçalho (avatar | textos);
   .profile-cover vira só o slot do avatar (mantém o input/lápis dentro). */
.profile-head{display:flex;align-items:flex-start;gap:16px;margin:8px 2px 16px;position:relative}
.profile-cover{height:auto;background:none;position:static;flex:none}
.btn-edit-profile{position:absolute;top:0;right:0;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);color:rgba(250,250,250,.7);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:.2s}
.btn-edit-profile:hover{background:rgba(255,255,255,.28);transform:scale(1.05)}

/* PROFILE - sobre e reviews vazias */
.profile-about{padding:0 20px 20px}
.profile-bio{font-size:14px;color:var(--text-light);line-height:1.6;margin-top:8px;background:var(--card);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}
.profile-bio.empty{font-style:italic;opacity:.7}
/* v216: fill chapado do avatar neutro da v141 (.06 / borda .1) — era gradiente .12→.04 */
.profile-avatar{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);position:relative;bottom:auto;left:auto;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:21px;color:rgba(250,250,250,0.9);font-weight:600;box-shadow:none;cursor:pointer;overflow:hidden}
.profile-info{padding:0;flex:1;min-width:0}
.profile-name{font-size:19px;font-weight:600;letter-spacing:-0.01em}
.profile-oab{font-size:12.5px;color:rgba(250,250,250,0.5);margin-top:2px}
.profile-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.spec-tag{padding:6px 12px;background:rgba(255,255,255,.1);color:var(--accent);border-radius:6px;font-size:12px;font-weight:600}

/* PERFORMANCE METRICS */
.perf-section{margin:0 20px 16px;padding:14px;background:var(--bg);border-radius:var(--radius)}
.perf-title{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(250,250,250,0.6);margin:28px 2px 12px}
.perf-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07)}
.perf-title i{display:none}
.perf-row{display:block}
.perf-metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,0.06);text-align:left}
.perf-metric .perf-val{order:2;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:#fafafa;text-align:right}
.perf-metric .perf-lbl{order:1;font-size:13px;text-transform:none;letter-spacing:0;color:rgba(250,250,250,0.6);margin-top:0}

/* PLAN BANNER */
.plan-banner{display:flex;align-items:center;justify-content:space-between;margin:0 20px 12px;padding:12px 16px;background:var(--card);border-radius:10px;box-shadow:var(--shadow)}
.plan-current{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.plan-badge{font-size:11px;padding:3px 10px;border-radius:6px;font-weight:700}
.plan-badge.basic{background:var(--bg);color:var(--text-light)}
.btn-upgrade{padding:8px 16px;background:var(--accent);color:var(--primary);border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.2s}
.btn-upgrade:hover{background:var(--accent-light)}
/* v134 (Stripe Fase 2) — estado da assinatura + ações no plan-banner do /perfil */
.plan-estado{font-size:12px;color:rgba(255,255,255,.7)}
.plan-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* SCREEN BLOQUEIO (v134) — v196: as regras .bloqueio-* foram REMOVIDAS. A tela
   passou a usar o componente .status-* compartilhado com /aguardando e /reprovado
   (bloco "TELAS DE STATUS" abaixo). O fundo radial + card de vidro saíram com elas. */

.profile-reviews{padding:0 20px 100px}

/* RANKING */
.rank-filters-wrap{position:relative}
.rank-filters{display:flex;gap:8px;padding:16px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rank-filters::-webkit-scrollbar{display:none}
.filter-btn{white-space:nowrap;padding:8px 16px;border-radius:20px;border:2px solid var(--border);background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:.2s}
.filter-btn.active{border-color:var(--accent);background:var(--accent);color:var(--primary)}
/* Botão "+" no fim dos chips — abre popup com áreas que não couberam */
.filter-btn.filter-more{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;padding:0;border-radius:50%;
  font-family:inherit;line-height:1;
}
.filter-btn.filter-more i{font-size:12px}
/* Indica visualmente que uma área "oculta" está ativa — o chip dela
   não existe na barra, então o "+" recebe o destaque dourado */
.filter-btn.filter-more.has-active{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--primary) !important;
}
/* Popup vertical com todas as áreas */
.rank-areas-menu{
  position:absolute;top:calc(100% - 8px);right:20px;z-index:30;
  min-width:220px;max-height:60vh;overflow-y:auto;
  background:#171717;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
  padding:6px;
  opacity:0;transform:translateY(-4px) scale(0.98);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.rank-areas-menu.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.rank-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:8px;
  font-family:var(--font-app);font-size:13px;font-weight:500;
  color:rgba(255,255,255,0.82);
  cursor:pointer;
  transition:background .15s,color .15s;
}
.rank-menu-item i{font-size:11px;color:rgba(250,250,250,0.5);width:14px;text-align:center}
.rank-menu-item:hover{background:rgba(255,255,255,0.05);color:#fff}
.rank-menu-item.active{
  background:rgba(255,255,255,0.1);
  color:#fafafa;
  font-weight:600;
}
.rank-menu-item.active i{color:#fafafa}
.rank-list{padding:0 20px 100px}
.rank-card{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:.2s}
.rank-card:hover{transform:translateX(4px);box-shadow:0 4px 20px rgba(0,0,0,.12)}
/* v189: coluna do pódio = FIO vertical + NÚMERO (era emoji 🥇🥈🥉). Hierarquia por
   OPACIDADE, sem metálicos (coerente v140/v141). Largura FIXA (30px) pra os
   números alinharem do 1º ao último; o fio de 2px é sempre reservado (4º+ fica
   transparente). */
.rank-pos{width:30px;flex:none;display:flex;align-items:center;gap:8px}
.rank-pos-fio{width:2px;height:16px;flex:none;background:transparent}
.rank-pos-fio.pos-1{background:#fafafa}
.rank-pos-fio.pos-2{background:rgba(250,250,250,.55)}
.rank-pos-fio.pos-3{background:rgba(250,250,250,.3)}
.rank-pos-num{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(250,250,250,.35)}
.rank-pos.top .rank-pos-num{color:#fafafa}
.rank-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}
.rank-info{flex:1;min-width:0}
.rank-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-spec{font-size:11px;color:var(--text-light);margin-top:2px}
.rank-score{text-align:right}
.rank-points{font-size:18px;font-weight:800;color:var(--primary)}
.rank-pts-label{font-size:10px;color:var(--text-light)}
.rank-rating{font-size:12px;color:var(--accent);margin-top:2px}

/* FEED */
.feed-section{padding:0 20px 100px}
/* Navegação por abas — padrão único (cartão elevado deslizante).
   Fonte ÚNICA das 3 barras (dashboard/ranking/feed). v130: REVERTEU o trilho recuado
   da v129 — a barra volta ao VIDRO FUMÊ FROSTED (base dos cards: --glass-bg/-border/
   -shadow, como na v126; blur via --glass-blur) e o indicador ativo (.seg-ind) virou
   o "cristal dourado C2" (vidro mais claro + fio dourado + bloom) PREENCHENDO A CÉLULA:
   padding:0 + overflow:hidden na barra e top/bottom:0 no indicador fazem o ativo
   encostar em cima/embaixo (o container não aparece em volta do selecionado).
   Geometria e slide continuam em app.js (posicionarIndicador). */
/* v141: abas EDITORIAIS — fileira sobre fio de 1px, indicador virou SUBLINHADO
   (mesmo mecanismo JS posicionarIndicador: left/width). Sem vidro, sem pill. */
.seg-nav{position:relative;display:flex;gap:22px;padding:0;margin:0 20px 16px;overflow:visible;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;box-shadow:none}
.seg-nav .seg-tab{flex:0 1 auto;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--seg-lbl-gap);border:none;background:none;cursor:pointer;color:rgba(250,250,250,.55);font-family:var(--font-app);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;padding:11px 2px;border-radius:0;white-space:nowrap;transition:color .2s ease}
.seg-nav .seg-tab:hover{color:#fafafa}
.seg-nav .seg-tab.active{color:#fafafa;font-weight:700}
.seg-nav .seg-tab:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
/* v140: indicador = vidro branco translúcido preenchendo a célula (top/bottom:0;
   left/width via posicionarIndicador). SEM backdrop-filter (blur só na barra),
   sem dourado; mesmo spring da nav principal. */
/* v165: ease-out monótono (sem overshoot) e 300ms, iguais aos do rótulo. */
.seg-nav .seg-ind{position:absolute;top:auto;bottom:-1px;left:0;width:0;height:2px;z-index:0;background:#fafafa;border-radius:2px;box-shadow:none;transition:left .3s cubic-bezier(.22,.61,.36,1),width .3s cubic-bezier(.22,.61,.36,1),opacity .2s}
@media (prefers-reduced-motion: reduce){.seg-nav .seg-ind{transition:none}}
.post-card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:12px;box-shadow:var(--shadow)}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.post-avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.post-author{font-size:14px;font-weight:600}
.post-meta{font-size:11px;color:var(--text-light)}
.post-body{font-size:14px;line-height:1.6;margin-bottom:14px}
.post-tag{display:inline-block;font-size:12px;color:var(--primary-light);font-weight:600;margin-bottom:8px}
.post-actions{display:flex;gap:20px;padding-top:12px;border-top:1px solid var(--border)}
.post-action{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-light);cursor:pointer;transition:.2s;background:none;border:none;font-family:inherit}
.post-action:hover{color:var(--primary)}
.post-action.liked{color:var(--danger)}

/* JURISPRUDÊNCIA — v215: redesign editorial (cards antigos .juris-card/.juris-
   tribunal/.juris-title/.juris-excerpt/.juris-meta REMOVIDOS — sem consumidor) */

/* Busca local: campo único com lupa lucide e "Limpar" só com texto digitado */
.juris-search{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.juris-busca-wrap{position:relative;display:flex;align-items:center}
.juris-busca-lupa{position:absolute;left:14px;width:16px;height:16px;color:rgba(255,255,255,.45);pointer-events:none}
.juris-busca-wrap input{width:100%;padding:12px 76px 12px 42px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:none;color:#fafafa;font-family:var(--font-app);font-size:14px}
.juris-busca-wrap input::placeholder{color:rgba(255,255,255,.38)}
.juris-busca-wrap input:focus{outline:none;border-color:rgba(255,255,255,.3)}
.juris-busca-limpar{position:absolute;right:8px;padding:6px 10px;border:none;background:none;color:rgba(255,255,255,.55);font-family:var(--font-app);font-size:12.5px;font-weight:500;cursor:pointer}
.juris-busca-limpar:hover{color:#fafafa}

/* Base completa: hint de cota à esquerda + pill outline à direita */
.juris-base-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.juris-base-hint{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.45}
.juris-base-hint strong{font-weight:600;color:rgba(255,255,255,.7)}
.juris-search-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;padding:9px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:none;color:#fafafa;font-family:var(--font-app);font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s}
.juris-search-btn svg{width:13px;height:13px}
.juris-search-btn:hover:not(:disabled){background:rgba(255,255,255,.08)}
.juris-search-btn:disabled{opacity:.6;cursor:default}
.juris-search-btn.esgotado{opacity:.35}

/* Abas de tribunal: TEXTO com sublinhado (sem pills), scroll sem scrollbar */
.juris-courts{display:flex;gap:18px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.juris-courts::-webkit-scrollbar{display:none}
.juris-court-tab{flex:none;display:inline-flex;align-items:baseline;gap:5px;padding:8px 0 10px;margin-bottom:-1px;border:none;border-bottom:2px solid transparent;background:none;color:rgba(255,255,255,.55);font-family:var(--font-app);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:color .15s}
.juris-court-tab:hover{color:rgba(255,255,255,.8)}
.juris-court-tab.active{color:#fafafa;border-bottom-color:#fff}
.juris-court-n{font-size:11px;color:rgba(255,255,255,.38)}

/* Lista editorial: fileiras direto no fundo, fio de 1px, clamp de 3 linhas */
.juris-row{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
.juris-row:hover{background:rgba(255,255,255,.02)}
.juris-row-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.juris-row-trib{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.juris-row-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);flex:none}
.juris-row-data{font-size:12px;color:rgba(255,255,255,.38)}
.juris-row-novo{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#34d977}
.juris-novo-dot{width:5px;height:5px;border-radius:50%;background:#34d977;animation:jurisNovoPulse 2s ease-out infinite}
@keyframes jurisNovoPulse{0%{box-shadow:0 0 0 0 rgba(52,217,119,.5)}70%{box-shadow:0 0 0 5px rgba(52,217,119,0)}100%{box-shadow:0 0 0 0 rgba(52,217,119,0)}}
@media (prefers-reduced-motion: reduce){.juris-novo-dot{animation:none}}
.juris-row-titulo{font-size:15px;font-weight:600;letter-spacing:-.15px;color:#fff;margin-bottom:5px}
.juris-row-resumo{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.juris-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:rgba(255,255,255,.38)}
.juris-row-meta>span+span::before{content:'·';margin-right:8px;color:rgba(255,255,255,.25)}
.juris-row-area{color:rgba(255,255,255,.55);font-weight:500}
.juris-row-ia{display:inline-flex;align-items:center;gap:4px}
.juris-row-ia svg{width:11px;height:11px}

/* Estado vazio do FILTRO (há docs; o recorte é que zerou) */
.juris-vazio{padding:48px 0;text-align:center}
.juris-vazio-t{font-size:15px;font-weight:600;color:rgba(255,255,255,.7);margin:0 0 6px}
.juris-vazio-s{font-size:13px;color:rgba(255,255,255,.45);margin:0}

/* Modal de detalhe da jurisprudência */
.juris-modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
/* v195: superfície EDITORIAL como comportamento da classe (era exceção do
   #seguir-modal na v194). Saiu o vidro fumê da v124 — gradiente + borda branca
   .28 + inset forte — que sobrevivia aqui depois da v140/141. Fundo = cor do
   app; quem separa o modal da página é o scrim do overlay + a sombra, mesmo
   princípio do bottom sheet .pub-sheet (v190). */
.juris-modal-card{position:relative;width:100%;max-width:560px;max-height:85vh;overflow-y:auto;background:var(--bg-app);border:none;border-radius:18px;padding:28px 24px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10)}
.juris-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.juris-modal-close:hover{background:rgba(255,255,255,.16)}
/* v167: os .juris-modal-title vivem em telas LOGADAS — a Cormorant ficou
   reservada às públicas/marketing (decisão do dono). v215: o #juris-modal
   deixou de usar título/close/conteúdo genéricos (virou .jm-*); a classe fica
   pro #share-modal e #seguir-modal. As regras do conteúdo antigo do detalhe
   (.juris-modal-tribunal/-meta/-excerpt/-link, .juris-topicos-wrap/-pill)
   foram REMOVIDAS — sem consumidor. */
.juris-modal-title{font-family:var(--font-app);font-size:22px;font-weight:600;color:#fff;line-height:1.25;margin-bottom:10px}

/* DETALHE DA JURISPRUDÊNCIA — v215: sheet no mobile (raio só em cima),
   centralizado no desktop; header e rodapé fixos, miolo rola */
#juris-modal{align-items:flex-end;padding:0}
#juris-modal .juris-modal-card{display:flex;flex-direction:column;padding:0;overflow:hidden;max-height:88vh;border-radius:18px 18px 0 0}
@media (min-width:768px){
  #juris-modal{align-items:center;padding:20px}
  #juris-modal .juris-modal-card{border-radius:18px;max-height:85vh}
}
.jm-head{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 16px}
.jm-head-txt{flex:1;min-width:0}
.jm-tribunal{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.jm-titulo{font-family:var(--font-app);font-size:17px;font-weight:700;line-height:1.3;color:#fff;margin:0}
.jm-close{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:none;color:#fafafa;cursor:pointer;transition:.15s}
.jm-close:hover{background:rgba(255,255,255,.08)}
.jm-body{flex:1;min-height:0;overflow-y:auto;padding:0 24px}
.jm-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.jm-meta-cel{min-width:0}
.jm-meta-label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:3px}
.jm-meta-valor{font-size:13px;color:rgba(255,255,255,.85);overflow-wrap:anywhere}
.jm-sec{margin-top:16px}
.jm-sec:last-child{margin-bottom:18px}
.jm-sec-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:8px}
.jm-ia-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.38)}
.jm-ia-tag svg{width:11px;height:11px}
.jm-topicos{display:flex;flex-wrap:wrap;gap:6px}
.jm-topico{font-family:var(--font-app);font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.jm-resumo{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin:0}
.jm-ementa-wrap{position:relative}
.jm-ementa{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.7);white-space:pre-wrap;margin:0}
.jm-ementa-wrap.recolhida{max-height:96px;overflow:hidden}
.jm-ementa-wrap.recolhida::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(rgba(17,18,19,0),var(--bg-app))}
.jm-ementa-wrap.curta.recolhida::after{content:none}
.jm-ementa-toggle{margin-top:8px;padding:0;border:none;background:none;color:rgba(255,255,255,.7);font-family:var(--font-app);font-size:12.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.jm-ementa-toggle:hover{color:#fafafa}
.jm-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.06)}
@media (min-width:768px){.jm-foot{padding-bottom:14px}}
.jm-btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:none;border-radius:999px;background:none;color:rgba(255,255,255,.7);font-family:var(--font-app);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.jm-btn-ghost:hover{background:rgba(255,255,255,.06);color:#fafafa}
.jm-btn-ghost svg,.jm-btn-primario svg{width:13px;height:13px}
.jm-btn-primario{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;background:#fafafa;color:#111213;font-family:var(--font-app);font-size:13px;font-weight:700;text-decoration:none;transition:.18s}
.jm-btn-primario:hover{opacity:.88}

/* PUBLICAÇÕES — feed de posts dos advogados */
/* v163: a barra "Nova publicação" (.pub-novo-wrap/.pub-novo-btn) virou o FAB
   .pub-fab; e o Feed voltou a ter .seg-nav (abas Para você|Seguindo), então a
   perna do padding-top:18px da v161 sai SÓ pro feed — a Jurisprudência segue
   sem barra de abas e PRECISA do respiro (bug que a v161 corrigiu). */
#screen-jurisprudencia .main-content{ padding-top:18px }
#screen-ajuda .main-content{ padding-top:18px }
/* estados vazios editoriais das abas (linha discreta, padrão v141/v156) */
.feed-vazio{font-size:15px;color:#6a6a70;margin:0;padding:14px 0 6px}
/* v163: FAB de nova publicação — par de cor do botão primário v141 (fundo
   branco, tinta preta). Mora acima da pílula da nav (bottom > ~74px+safe da
   nav expandida); z-index 99 = abaixo da nav (100), do update-banner (110,
   que passa POR CIMA quando aparece — sobreposição temporária aceita) e dos
   modais (1000). Recolhe JUNTO com a nav: o seletor de irmãos
   #app-nav.compact ~ #screen-feed .pub-fab pega a MESMA classe .compact da
   retração v140 (nav e .screen são irmãos no body) — zero listener novo,
   cobre os 4 pontos de toggle. Mesma curva spring da nav. */
.pub-fab{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 102px);width:56px;height:56px;border-radius:50%;background:#fafafa;color:#111213;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:99;box-shadow:0 10px 28px rgba(0,0,0,.5);transition:width .35s cubic-bezier(.3,1.2,.4,1),height .35s cubic-bezier(.3,1.2,.4,1),transform .2s}
.pub-fab svg{width:22px;height:22px;flex:none;transition:width .35s cubic-bezier(.3,1.2,.4,1),height .35s cubic-bezier(.3,1.2,.4,1)}
.pub-fab:hover{transform:translateY(-2px)}
.pub-fab:focus{outline:none}
.pub-fab:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:3px}
/* o encolhimento só existe no mobile — espelha o "desktop nunca retrai" da
   nav (v140): se a .compact ficar presa ao atravessar 768px, o FAB não fica
   miniatura no desktop (o resize listener da nav ainda limpa a classe). */
@media (max-width:767px){
  #app-nav.compact ~ #screen-feed .pub-fab{width:44px;height:44px}
  #app-nav.compact ~ #screen-feed .pub-fab svg{width:18px;height:18px}
}
@media (prefers-reduced-motion: reduce){.pub-fab,.pub-fab svg{transition:none}}
/* v163: o último post ficava cortado atrás da nav (aparelho real) — e agora o
   FAB empilha acima dela. Padding só no feed (não infla as outras telas). */
#screen-feed .feed-section{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 190px)}
/* desktop: sidebar à esquerda (sem pílula inferior nem retração) — o FAB vai
   pro canto de verdade e o padding volta ao normal do grupo */
@media(min-width:768px){
  .pub-fab{right:32px;bottom:32px}
  #screen-feed .feed-section{padding-bottom:120px}
}
.post-head-info{flex:1;min-width:0}
.post-area-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);color:#fafafa;white-space:nowrap;flex-shrink:0}
.post-del-btn{background:none;border:none;color:rgba(255,255,255,.4);font-size:13px;cursor:pointer;padding:4px 6px;flex-shrink:0;transition:.18s}
.post-del-btn:hover{color:#ef4444}
.pub-mais-wrap{display:flex;justify-content:center;margin:4px 0 8px}
.pub-carregar-mais{padding:10px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fafafa;font-family:var(--font-app);font-size:13px;font-weight:600;cursor:pointer;transition:.18s}
.pub-carregar-mais:hover:not(:disabled){background:rgba(255,255,255,.2)}
.pub-carregar-mais:disabled{opacity:.6;cursor:default}

/* v186: CSS morto do modal antigo (.pub-textarea/.pub-contador classe/.pub-label/
   .pub-select) removido — o modal virou o bottom sheet .pub-sheet-* (abaixo). O
   .pub-publicar-btn FICA: ainda é usado pelo #editp-salvar (modal editar perfil). */
.pub-publicar-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:12px 18px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.92),rgba(212,212,212,.9));color:#111;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:.18s}
.pub-publicar-btn:hover:not(:disabled){filter:brightness(1.08)}
.pub-publicar-btn:disabled{opacity:.7;cursor:default}

/* ============================================================
   v185 — BOTTOM SHEET "Nova publicação" (mobile ≤767) / modal centralizado
   (desktop). GEOMETRIA literal do mockup; COR/FONTE = tokens do app. Três
   camadas: scrim (dim, opacity), blur (backdrop-filter, opacity), sheet (só
   transform). NUNCA transform + backdrop-filter no MESMO elemento — bug v137/v173
   no WebKit. O borrão/dim acompanham o arrasto variando a OPACITY, não movendo.
   ============================================================ */
.pub-sheet-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.pub-sheet-scrim{position:absolute;inset:0;z-index:0;background:var(--modal-scrim)}
.pub-sheet-blur{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pub-sheet{position:relative;z-index:1;width:100%;max-width:560px;display:flex;flex-direction:column;
  background:var(--bg-app);border-radius:20px 20px 0 0; /* v190: mesma cor do fundo do app (#111213); o scrim escurece a página atrás, e a sombra/fio destacam o sheet */
  box-shadow:0 -12px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);
  /* v186: 100% do overlay (que o JS ancora na ÁREA VISÍVEL via visualViewport,
     item 4) — 130px de folga no topo. Com o teclado, o overlay encolhe → o sheet
     encolhe → o miolo rola e o rodapé fica acima do teclado. */
  height:calc(100% - 130px);max-height:calc(100% - 130px);
  padding-bottom:env(safe-area-inset-bottom);will-change:transform}
/* GRABBER: bloco 10px topo, barra 36x4 raio 2 */
.pub-sheet-grabber{display:flex;justify-content:center;padding:10px 0 0;cursor:grab;touch-action:none}
.pub-sheet-grabber span{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
/* CABEÇALHO: 8/18/0, space-between */
.pub-sheet-head{padding:8px 18px 0;display:flex;align-items:center;justify-content:space-between;touch-action:none;cursor:grab}
.pub-sheet-title{font-size:17px;font-weight:700;color:#fafafa}
.pub-sheet-close{cursor:pointer;background:none;border:none;padding:4px;color:rgba(250,250,250,.5);display:inline-flex;touch-action:manipulation}
.pub-sheet-close:hover{color:#fafafa}
/* CORPO: 12/18/0, gap 11. flex:1 + min-height:0 = miolo do sheet; a textarea
   rola sozinha (o cabeçalho e o rodapé ficam FIXOS — item 3). */
.pub-sheet-body{padding:12px 18px 0;display:flex;gap:11px;flex:1;min-height:0}
.pub-sheet-avatar{width:34px;height:34px;border-radius:50%;flex:none;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:rgba(250,250,250,.8)}
.pub-sheet-textarea{flex:1;background:none;border:none;outline:none;resize:none;padding:6px 0 0;font-family:var(--font-app);font-size:14.5px;line-height:1.5;color:#fafafa;height:100%;box-sizing:border-box;overflow-y:auto}
.pub-sheet-textarea::placeholder{color:rgba(250,250,250,.5)}
/* SELETOR DE ÁREA (v186): <select> NATIVO de uma linha (flex:none, fixo). Fio de
   box do app (.12, como os inputs/review cards), 12.5px (mesmo corpo dos botões
   antigos), seta nativa removida + chevron lucide 1.7. Lista dark via
   color-scheme (:root). */
.pub-sheet-arearow{padding:8px 18px 12px;flex:none}
.pub-select-wrap{position:relative;width:100%}
.pub-sheet-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:9px 34px 9px 12px;font-family:var(--font-app);font-size:12.5px;color:#fafafa;cursor:pointer;line-height:1.2}
.pub-sheet-select:focus{outline:none;border-color:rgba(255,255,255,.4)}
.pub-select-chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:rgba(250,250,250,.5);pointer-events:none}
/* RODAPÉ: fio do app, 12/18/16, space-between */
.pub-sheet-foot{border-top:1px solid var(--fio);padding:12px 18px 16px;display:flex;align-items:center;justify-content:space-between}
.pub-sheet-count{font-size:12px;color:rgba(250,250,250,.55)}
.pub-sheet-count.alerta{color:#e07a6a} /* vermelho do projeto, últimos 50 chars */
.pub-sheet-publicar{cursor:pointer;border:none;border-radius:10px;padding:8px 18px;font-family:var(--font-app);font-size:13px;font-weight:600;transition:all .2s;background:rgba(255,255,255,.16);color:rgba(250,250,250,.6)}
.pub-sheet-publicar.ativo{background:#fafafa;color:#111213} /* primário sólido branco v141 */
.pub-sheet-publicar:disabled{cursor:default}
/* fallback Android sem backdrop-filter (padrão v140): dim reforçado no lugar do blur */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pub-sheet-blur{background:rgba(10,10,10,.35)}
}
@media (prefers-reduced-motion: reduce){
  .pub-sheet,.pub-sheet-scrim,.pub-sheet-blur{transition:none !important}
}
/* DESKTOP (≥768): apresentação atual preservada — modal centralizado, cantos
   arredondados, grabber escondido, sem arrasto (JS guarda innerWidth>767). */
@media (min-width:768px){
  .pub-sheet-overlay{align-items:center;padding:20px}
  .pub-sheet{height:auto;max-height:85vh;border-radius:18px;max-width:520px;padding-bottom:0;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10)}
  .pub-sheet-grabber{display:none}
  .pub-sheet-head{cursor:default;padding-top:16px}
  .pub-sheet-textarea{min-height:180px}
}

/* Card de Story compartilhável — v86 (reusa .juris-modal-overlay/.juris-modal-card) */
/* ============================================================
   v211 — "Compartilhar minhas métricas" na PELE EDITORIAL. Saíram: as pílulas
   (2 grids de 13 = muito ruído) e o dourado #e8c77b, que é da pele fumê
   APOSENTADA na v140 (o dourado vivo é o #e0bd66 de DADO: faixa Ouro/estrelas).
   Entraram: botões de TEXTO com sublinhado (padrão v176/v191), labels de seção
   no idioma do app (11px caps + fio) e botão primário sólido branco (v141).
   O JS e as classes de estado (.sel/.off/.na-destaque) ficaram INTACTOS.
   ============================================================ */
.share-modal-card{max-width:380px}
/* v211: o título encostava/passava por baixo do ✕ (botão de 32px em top/right 14).
   Reserva a faixa dele — o .juris-modal-title base não tem padding-right. */
.share-modal-card .juris-modal-title{padding-right:46px}
/* botão de entrada (no /painel) — a cor já vinha do .perfil-row (v161) */
.share-entrada-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:11px 18px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(250,250,250,.85);font-family:var(--font-app);font-size:13px;font-weight:600;cursor:pointer;transition:.18s}
.share-entrada-btn:hover{background:rgba(255,255,255,.12)}
/* ABAS (Hoje / Meu mês): texto sublinhado, sem pílula (padrão .met-periodo v176) */
.share-tabs{display:flex;gap:16px;margin:10px 0 18px;background:none;border:none;border-radius:0;padding:0;width:auto}
.share-tab{border:none;border-bottom:2px solid transparent;background:none;color:rgba(250,250,250,.4);font-family:var(--font-app);font-size:13px;font-weight:400;padding:2px 0 5px;border-radius:0;cursor:pointer;transition:color .2s,border-color .2s}
.share-tab:hover{color:rgba(250,250,250,.75)}
.share-tab.active{color:#fafafa;font-weight:700;border-bottom-color:#fafafa;background:none}
/* LABEL de seção: mesmo idioma dos section-titles do app (11px caps + fio) */
.share-chips-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}
.share-chips-titulo{font-family:var(--font-app);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,250,250,.6);display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.share-chips-titulo::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}
.share-chips-count{font-size:11px;font-weight:600;color:rgba(250,250,250,.45);font-variant-numeric:tabular-nums;flex:none;letter-spacing:0}
/* MÉTRICAS: botões de TEXTO com sublinhado (era pílula) */
.share-chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:18px}
.share-chip{display:inline-flex;align-items:center;gap:7px;border:none;border-bottom:2px solid rgba(255,255,255,.14);background:none;border-radius:0;color:rgba(250,250,250,.55);font-family:var(--font-app);font-size:12.5px;font-weight:500;padding:5px 1px 6px;cursor:pointer;transition:color .15s,border-color .15s,opacity .15s}
.share-chip:hover{color:#fafafa;background:none}
.share-chip.sel{color:#fafafa;font-weight:700;border-bottom-color:#fafafa;background:none}
.share-chip.off{opacity:.3;cursor:default;border-bottom-color:transparent}
.share-chip.na-destaque{opacity:.45;cursor:default;border-bottom-style:dashed}
.share-chip .tag-destaque{font-size:9.5px;font-weight:600;color:rgba(250,250,250,.4);margin-left:2px;text-transform:lowercase;letter-spacing:.2px}
/* input das métricas manuais: input editorial (raio 4 + fio à esquerda, v191) */
.share-chip input{width:52px;padding:3px 7px;border-radius:4px;border:1px solid transparent;border-left:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.04);color:#fafafa;font-family:var(--font-app);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.share-chip input:focus{outline:none;border-left-color:#fafafa;background:rgba(255,255,255,.06)}
.share-chips-hint{font-size:11.5px;line-height:1.45;color:rgba(250,250,250,.45);margin:-8px 0 14px}
/* PRÉVIA */
.share-preview-wrap{display:flex;justify-content:center;margin-bottom:14px}
.share-preview-canvas{width:100%;max-width:248px;height:auto;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.share-aviso{font-size:12px;color:rgba(250,250,250,.5);text-align:center;margin:0 0 10px}
/* AÇÕES: secundário discreto + primário sólido branco (v141) */
.share-foto-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 16px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:rgba(250,250,250,.8);font-family:var(--font-app);font-size:13px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:.18s}
.share-foto-btn:hover{background:rgba(255,255,255,.08)}
.share-slider-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 4px}
.share-slider-lbl{font-size:12px;color:rgba(250,250,250,.5);white-space:nowrap}
.share-slider-row input[type=range]{flex:1;accent-color:#fafafa}
.share-postar-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:13px 18px;border-radius:10px;background:#fafafa;color:var(--bg-app);font-family:var(--font-app);font-weight:600;font-size:14px;border:none;cursor:pointer;transition:background .18s}
.share-postar-btn:hover{background:#e8e8ea}

/* ============================================================
   v212 — CENTRO DE NOTIFICAÇÕES (sino no header do Feed + painel top-level).
   Pele editorial: fios de 1px, sem pílulas, sem dourado; modal OPACO em
   --bg-app (padrão v190). Prefixo .notifc-* (o .notif-* é do card de avisos
   do dashboard, v137). Sem backdrop-filter + transform juntos (v137/v173).
   ============================================================ */
/* v212: mesmo fix do dashboard (v174) — no desktop o .header vira flex e o
   .header-row encolheria; flex:1+width:100% empurra o sino pra direita. */
#screen-feed .header .header-row{gap:14px;flex:1 1 auto;width:100%}
#screen-feed .header .header-titulo{min-width:0}
.notifc-sino{position:relative;flex:none;background:none;border:none;padding:8px;cursor:pointer;color:rgba(250,250,250,.65);display:inline-flex;align-items:center;justify-content:center}
.notifc-sino:hover{color:#fafafa}
.notifc-badge{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#fafafa;color:#111213;font-family:var(--font-app);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;line-height:16px;text-align:center}
/* PAINEL */
.notifc-overlay{position:fixed;inset:0;z-index:1000;background:var(--modal-scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.notifc-card{position:relative;width:100%;max-width:420px;max-height:min(560px,85vh);display:flex;flex-direction:column;
  background:var(--bg-app);border-radius:18px;font-family:var(--font-app);color:#fafafa;
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);overflow:hidden}
.notifc-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--fio);flex:none}
.notifc-title{font-size:16px;font-weight:700;color:#fafafa;flex:1;min-width:0}
.notifc-close,.notifc-voltar{background:none;border:none;padding:4px;cursor:pointer;color:rgba(250,250,250,.5);display:inline-flex;flex:none}
.notifc-close:hover,.notifc-voltar:hover{color:#fafafa}
.notifc-body{flex:1;min-height:120px;overflow-y:auto}
/* FILEIRA — fio entre itens, sem card */
.notifc-item{display:flex;align-items:flex-start;gap:11px;width:100%;padding:13px 18px;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font-app);transition:background .15s}
.notifc-item + .notifc-item{border-top:1px solid var(--fio)}
.notifc-item:hover{background:rgba(255,255,255,.03)}
.notifc-ico{flex:none;color:rgba(250,250,250,.45);margin-top:1px}
.notifc-item.nova .notifc-ico{color:#fafafa}
.notifc-txt{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:rgba(250,250,250,.75)}
.notifc-txt strong{color:#fafafa;font-weight:600}
.notifc-trecho{display:block;margin-top:2px;font-size:12.5px;color:rgba(250,250,250,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notifc-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.notifc-quando{font-size:11.5px;color:rgba(250,250,250,.4);font-variant-numeric:tabular-nums;white-space:nowrap}
.notifc-dot{width:7px;height:7px;border-radius:50%;background:#fafafa;display:none}
.notifc-item.nova .notifc-dot{display:block}
/* estado vazio (padrão discreto v156) */
.notifc-vazio{font-size:13.5px;color:rgba(250,250,250,.45);text-align:center;padding:32px 18px;margin:0}
/* detalhe da publicação: reusa .pp-post (perfil público); anula o fio do topo.
   v212 (revisão): .notifc-body .pp-post (0,2,0) — a forma .notifc-pub (0,1,0)
   PERDIA pra regra .pp-post que vem depois no arquivo, e o fio ficava. */
.notifc-body .pp-post{border-top:none}

/* ============================================================
   v191 — EDITAR MEUS DADOS (redesign do mockup do dono). Geometria literal do
   mock; COR/FONTE do app (Inter via --font-app). O acento #aebfca do mock NÃO
   existe no projeto e conflita com a v141 → BRANCO nos dois pontos (border-left
   do input e sublinhado da área selecionada). Sem backdrop-filter (v141/v137/v173).
   ============================================================ */
.editp-overlay{position:fixed;inset:0;z-index:1000;background:var(--modal-scrim);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:16px 0}
.editp-card{position:relative;width:100%;max-width:560px;margin:16px;padding:28px 28px 36px;box-sizing:border-box;
  background:var(--bg-app);border-radius:24px;font-family:var(--font-app);color:#fafafa;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.editp-close{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;border:none;padding:0;
  background:rgba(255,255,255,.08);color:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center}
.editp-close:hover{background:rgba(255,255,255,.14)}
.editp-titulo{margin:0;font-size:30px;font-weight:800;letter-spacing:-0.01em;padding-right:56px;line-height:1.15}
/* GRUPO: rótulo (15px/700 + ícone lucide 15px) + controle */
.editp-grupo{display:flex;flex-direction:column;gap:8px}
.editp-grupo-areas{gap:12px}
.editp-rotulo{font-size:15px;font-weight:700;color:#fafafa;display:flex;align-items:center;gap:8px}
.editp-rotulo svg{width:15px;height:15px;flex:none;color:rgba(250,250,250,.6)}
.editp-opt{color:rgba(250,250,250,.4);font-weight:400}
/* INPUT: border-left é o acento (branco); foco acende a borda e sobe o fundo */
.editp-input{font-family:inherit;font-size:15px;color:#fafafa;background:rgba(255,255,255,.04);
  border:1px solid transparent;border-left:2px solid rgba(255,255,255,.6);border-radius:4px;
  padding:13px 14px;outline:none;box-sizing:border-box;width:100%;transition:background .15s,border-color .15s}
.editp-input:focus{border-left-color:#fafafa;background:rgba(255,255,255,.06)}
.editp-input::placeholder{color:rgba(250,250,250,.35)}
.editp-input:disabled{color:rgba(250,250,250,.55);border-left-color:rgba(255,255,255,.18);cursor:not-allowed}
.editp-textarea{min-height:96px;resize:none;line-height:1.5}
/* AVISO do cadeado */
.editp-aviso{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(250,250,250,.5);padding:2px 4px;margin:0}
.editp-aviso svg{width:14px;height:14px;flex:none;color:rgba(250,250,250,.6)}
.editp-aviso a{color:rgba(250,250,250,.8);text-decoration:underline}
.editp-aviso a:hover{color:#fafafa}
/* ÁREAS: botões de TEXTO com sublinhado (selecionado = branco). Escopado ao
   modal — a .area-chip global (pílula) segue intacta no onboarding e no /consulta. */
.editp-areas{display:flex;flex-wrap:wrap;gap:8px 20px}
#edit-perfil-modal .area-chip{font-family:inherit;font-size:15.5px;font-weight:500;color:rgba(250,250,250,.55);
  padding:8px 1px 7px;background:none;border:none;border-radius:0;border-bottom:2px solid rgba(255,255,255,.14);
  cursor:pointer;transition:all .15s}
#edit-perfil-modal .area-chip:hover{color:#fafafa}
#edit-perfil-modal .area-chip.selected{font-weight:700;color:#fafafa;border-bottom-color:#fafafa;background:none}
/* SALVAR: primário sólido branco (v141) */
.editp-salvar{margin-top:2px;width:100%;padding:14px 18px;border:none;border-radius:10px;cursor:pointer;
  font-family:var(--font-app);font-size:15px;font-weight:600;background:#fafafa;color:var(--bg-app);transition:background .18s}
.editp-salvar:hover:not(:disabled){background:#e8e8ea}
.editp-salvar:disabled{opacity:.7;cursor:default}
/* mobile: mantém padding/título do mock (28/28/36, 30px); só a margem de 16px
   do container é que limita a largura, como o mockup especifica. */

/* AGENDAMENTO de disponibilidade (seção do /perfil) */
.profile-agenda{border-radius:var(--radius);padding:18px;margin:0 20px 16px}
.agenda-sub{font-size:12px;line-height:1.5;color:rgba(255,255,255,0.55);margin:6px 0 14px}
.agenda-list{display:flex;flex-direction:column}
.agenda-row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.agenda-row:last-child{border-bottom:none}
.agenda-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.agenda-dia{font-size:14px;font-weight:600;color:#e8eaf0}
.agenda-horarios{display:flex;align-items:center;gap:10px;margin-top:10px}
.agenda-horarios input[type=time]{flex:1;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);color:#fff;font-family:var(--font-app);font-size:14px}
.agenda-horarios input[type=time]:focus{outline:none;border-color:rgba(255,255,255,0.5)}
.agenda-horarios input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6;cursor:pointer}
.agenda-ate{font-size:12px;color:rgba(255,255,255,0.5);flex-shrink:0}
/* v216: submit de largura cheia DENTRO do app (tela com nav) — mesma anatomia do
   .editp-salvar da v191: #fafafa CHAPADO e raio 10px. O 999px da v203 é a forma
   do funil de entrada (telas SEM nav: .status-btn-primary, .welcome-cta, os
   .btn-submit de login/cadastro/reset), não desta família. */
.btn-salvar-agenda{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:12px 18px;border-radius:10px;background:#fafafa;color:#111;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:.18s}
.btn-salvar-agenda:hover:not(:disabled){filter:brightness(1.08)}
.btn-salvar-agenda:disabled{opacity:.7;cursor:default}
/* Agendamento — acordeão recolhível (v114). O .toggle-switch dos dias fica INTACTO. */
.agenda-acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:inherit;text-align:left;color:inherit;-webkit-appearance:none;appearance:none}
.agenda-acc-head .section-title{margin-bottom:0;flex:1;min-width:0}
.agenda-acc-meta{display:flex;align-items:center;gap:10px;flex:none}
.agenda-acc-resumo{font-size:12px;font-weight:600;color:#fafafa;white-space:nowrap}
.agenda-acc-chevron{font-size:13px;color:rgba(255,255,255,.55);transition:transform .3s;flex:none}
.profile-agenda.aberto .agenda-acc-chevron{transform:rotate(180deg)}
.agenda-acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.profile-agenda.aberto .agenda-acc-body{max-height:1200px}
.agenda-acc-inner{padding-top:14px}

/* v174: o toggle compacto .dispo-mini (v115) foi removido — o toggle de
   disponibilidade virou .dispo-eq no header da tela de Leads (regras acima).
   O @keyframes livePulse FICA (usado pelo dot "Em tempo real" do dashboard e
   pela variante ao vivo dos section-titles). */
@keyframes livePulse{0%{box-shadow:0 0 8px rgba(52,217,119,.6)}50%{box-shadow:0 0 3px rgba(52,217,119,.25)}100%{box-shadow:0 0 8px rgba(52,217,119,.6)}}
/* v174: toggle de disponibilidade "equalizer" — vive no header da tela de Leads
   (não é mais fixo/global). ON = barras verdes animadas + label + ícone pause;
   OFF = barras/label esmaecidos + ícone play verde. */
.dispo-eq{display:flex;align-items:center;gap:8px;padding:6px 2px;background:none;border:none;cursor:pointer;flex:none;font-family:var(--font-app)}
.dispo-eq-bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.dispo-eq-bars span{width:3px;border-radius:2px;background:rgba(250,250,250,.35);transition:background .25s}
.dispo-eq-bars span:nth-child(1){height:8px}
.dispo-eq-bars span:nth-child(2){height:13px}
.dispo-eq-bars span:nth-child(3){height:5px}
.dispo-eq.on .dispo-eq-bars span{background:#34d977}
.dispo-eq.on .dispo-eq-bars span:nth-child(1){animation:eqBarA 1.1s infinite ease-in-out}
.dispo-eq.on .dispo-eq-bars span:nth-child(2){animation:eqBarB 0.9s infinite ease-in-out}
.dispo-eq.on .dispo-eq-bars span:nth-child(3){animation:eqBarC 1.3s infinite ease-in-out}
@media (prefers-reduced-motion:reduce){.dispo-eq.on .dispo-eq-bars span{animation:none}}
.dispo-eq-label{font-size:12.5px;font-weight:600;color:rgba(250,250,250,.35);white-space:nowrap;transition:color .25s}
.dispo-eq.on .dispo-eq-label{color:rgba(250,250,250,.9)}
.dispo-eq-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.08);flex:none}
.dispo-eq-ico{display:none}
.dispo-eq.on .dispo-eq-ico-pause{display:block}
.dispo-eq:not(.on) .dispo-eq-ico-play{display:block}
@keyframes eqBarA{0%,100%{height:8px}50%{height:13px}}
@keyframes eqBarB{0%,100%{height:14px}50%{height:6px}}
@keyframes eqBarC{0%,100%{height:5px}50%{height:11px}}
/* v174: some só em telas MUITO estreitas — no header ele só compete com o
   wordmark curto "Juristter", então cabe folgado em 375/390 (antes o .dispo-mini
   escondia ≤380 porque disputava espaço como pill fixa). */
@media (max-width:340px){.dispo-eq-label{display:none}}

/* SEARCH */
.search-bar{margin:16px 20px;position:relative}
.search-bar input{width:100%;padding:12px 16px 12px 42px;border:2px solid var(--border);border-radius:10px;font-size:14px;background:var(--card);font-family:inherit}
.search-bar input:focus{outline:none;border-color:var(--accent)}
.search-bar i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-light)}

/* TABS */
/* .tab-switch (ranking) migrado pro componente único .seg-nav. */

/* TOAST */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--primary);color:#fff;padding:14px 24px;border-radius:10px;font-size:13px;font-weight:600;z-index:200;transition:.4s;box-shadow:0 8px 24px rgba(0,0,0,.2);display:flex;align-items:center;gap:8px}
.toast.show{transform:translateX(-50%) translateY(0)}

/* PLANS SCREEN */
/* ============================================================
   /planos/assinar (v206) — pele editorial
   ============================================================
   Era a pele v124/v140: cards com `var(--card)` + borda de 2px + sombra + raio,
   o Pro com borda branca .45 e um GLOW branco, o selo "Mais escolhido" com
   gradiente animado (goldShift) e os 3 botões em três vidros diferentes.
   ESCOPO: `.plan-*`, `.btn-plan` e `.plans-wrapper` são EXCLUSIVOS desta tela —
   o /planos público usa o prefixo `lp-plan-*`. Só o `.lp-toggle*` é compartilhado,
   e por isso vai por override escopado mais abaixo.
   DECISÃO sobre os 3 cartões: em vez de card, cada plano é um BLOCO separado por
   fio de 1px full-bleed, com o conteúdo em --gutter. Comparar planos precisa de
   separação, não de caixa: o fio dá o limite e mantém os três na mesma superfície,
   que é o que deixa a comparação de relance possível.
   Tela SEM nav — safe-area por conta do próprio padding (armadilha v119). */
/* v207: condição do teste (7 dias + cartão + cobrança automática + cancelamento).
   Discreta de propósito: é informação de termo, não chamariz — mesmo corpo e cor
   do `.status-prazo` das telas de status, sem badge nem cor de destaque. */
.plans-trial{
  margin:0;padding:14px var(--gutter) 18px;
  font-family:var(--font-app);font-size:13px;line-height:1.55;
  color:rgba(255,255,255,.4);
  border-bottom:1px solid var(--fio);
}
.plans-wrapper{
  padding:0;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.plan-card{
  background:none;border:none;border-radius:0;box-shadow:none;
  border-bottom:1px solid var(--fio);
  margin:0;padding:20px var(--gutter);position:relative;
}
.plan-card.featured{border-color:transparent;border-bottom-color:var(--fio);box-shadow:none}
/* "Mais escolhido": era pílula com gradiente animado sobreposta na borda. Vira
   rótulo discreto no idioma dos section-titles (11px, .15em), acima do nome. */
.plan-popular{
  position:static;display:block;margin:0 0 6px;padding:0;
  background:none;background-image:none;animation:none;border-radius:0;
  font-family:var(--font-app);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(250,250,250,.6);
}
.plan-name{font-size:15px;font-weight:600;color:rgba(250,250,250,.92);letter-spacing:0}
.plan-price{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;color:#fafafa;margin:2px 0 0;letter-spacing:-.02em}
.plan-price span{font-size:13px;font-weight:400;color:rgba(250,250,250,.5);letter-spacing:0}
.plan-features{list-style:none;margin:14px 0 16px}
.plan-features li{font-size:13.5px;padding:5px 0;color:rgba(250,250,250,.6);display:flex;align-items:center;gap:9px;line-height:1.45}
/* check deixa de ser VERDE: nesta pele o verde é cor de ESTADO (disponível,
   sucesso), não enfeite de lista. */
.plan-features li i{color:rgba(250,250,250,.35);font-size:11px;width:12px;text-align:center;flex:none}
.plan-features li i.disabled{color:rgba(250,250,250,.18)}
/* BOTÕES — a hierarquia de 3 níveis do desenho antigo é preservada, mas por
   CONTRASTE em vez de vidro: o Pro (`.accent`) fica sólido branco e os outros
   dois em contorno discreto. Nenhum glow, nenhum gradiente. */
.btn-plan{
  width:100%;padding:12px 18px;border-radius:999px;cursor:pointer;
  font-family:var(--font-app);font-size:14px;font-weight:600;
  background:none;color:rgba(250,250,250,.85);border:1px solid rgba(255,255,255,.16);
  transition:background .18s,border-color .18s,opacity .2s;
}
.btn-plan:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.btn-plan.accent{background:#fafafa;color:var(--bg-app);border-color:#fafafa;box-shadow:none}
.btn-plan.accent:hover{background:#fafafa;border-color:#fafafa;opacity:.88;filter:none;transform:none}
.btn-plan.primary{background:none;color:rgba(250,250,250,.85);border:1px solid rgba(255,255,255,.16)}
.btn-plan.primary:hover{background:rgba(255,255,255,.06);transform:none}
/* TOGGLE Mensal/Anual desta tela — v220 */
/* v220: os overrides de `.lp-toggle*` SAÍRAM daqui — o controle desta tela
   virou `.seg-nav` (o mesmo das abas do app), então não há mais switch pra
   revestir. A base `.lp-toggle*` segue intacta, servindo o /planos PÚBLICO.
   Só o seletor do desconto é novo: o "−20%" ao lado de "Anual". */
.seg-nav-plans{margin:18px 20px 4px}
.seg-nav-plans .seg-save{
  margin-left:7px;font-size:10.5px;font-weight:600;letter-spacing:0;
  color:rgba(250,250,250,.6);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:2px 7px;white-space:nowrap;
}
.seg-nav-plans .seg-tab.active .seg-save{color:rgba(250,250,250,.85);border-color:rgba(255,255,255,.3)}

/* RESPONSIVE - DESKTOP */
@media(min-width:768px){
  .screen{max-width:100%;box-shadow:none}
  .toast{max-width:400px}

  /* v128/v140: a nav única vira SIDEBAR vertical fixa, abaixo do header (64px).
     Mesma linguagem de vidro grafite da pílula mobile; indicador platina/branco
     desliza na VERTICAL (mesmo JS/easing). SEM retração por rolagem no desktop
     (guard em _navRetracao). */
  .app-nav{
    top:64px;
    bottom:0;
    left:0;
    right:auto;
    width:220px;
    height:auto;
    margin:0;
    border-radius:0;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    padding:16px 0;
    gap:2px;
    background:rgba(28,30,29,.85);
    -webkit-backdrop-filter:blur(28px) saturate(1.3);
    backdrop-filter:blur(28px) saturate(1.3);
    border:none;
    border-right:1px solid rgba(255,255,255,.09);
    box-shadow:none;
    overflow:visible
  }
  .app-nav .nav-item{
    flex-direction:row;
    justify-content:flex-start;
    padding:12px 20px;
    gap:12px;
    font-size:13px;
    border-radius:999px;
    margin:0 8px;
    width:calc(100% - 16px)
  }
  .app-nav .nav-item .nav-lbl{margin-top:0;max-height:none}
  /* v162: na sidebar (220px) cabe a palavra inteira — troca as variantes */
  .app-nav .nav-lbl-curto{display:none}
  .app-nav .nav-lbl-longo{display:inline}
  .app-nav .nav-item:hover:not(.active){background:rgba(255,255,255,.04);color:rgba(255,255,255,.95)}
  /* desktop nunca retrai */
  .app-nav.compact{padding:16px 0}
  .app-nav.compact .nav-item{padding:12px 20px}
  .app-nav.compact .nav-item .nav-lbl{max-height:none;opacity:1}

  /* telas do advogado: SEM grid. Header full-width sticky (64px) no topo;
     conteúdo recuado 220px (a sidebar fixa ocupa a coluna esquerda). */
  #screen-dashboard.active,#screen-painel.active,#screen-jurisprudencia.active,#screen-ajuda.active,
  #screen-feed.active,#screen-profile.active,#screen-admin.active{
    display:block
  }
  .header{
    height:64px;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between
  }
  #screen-dashboard .main-content,
  #screen-painel .main-content,
  #screen-ajuda .main-content,
  #screen-jurisprudencia .main-content,
  #screen-feed .main-content,
  #screen-profile .main-content,
  #screen-admin .main-content,
  #screen-perfil-publico .main-content{ /* v184: perfil público entra no grid do desktop (recuo 220 da sidebar) */
    margin-left:220px;
    background:transparent; /* v140: o fundo grafite global (body) aparece */
    /* v144: RESPIRO lateral central no desktop — o conteúdo não encosta mais
       na sidebar nem na borda direita. Os containers com 20px lateral próprio
       são normalizados logo abaixo pra alinhar tudo pela mesma margem. */
    padding-left:32px;
    padding-right:32px;
    min-height:calc(100vh - 64px);
    min-height:calc(100dvh - 64px);
    /* v220→v235: o "teto de leitura" (max-width 960px) existiu da v220 à v234;
       saiu na v235 a pedido do dono. Escopo: só as telas logadas deste seletor,
       dentro do @media 768 (mobile não entra); nenhuma tela pública na lista. */
    /* v232: a coluna deixou de ser CENTRADA no espaço depois da sidebar (abria
       um vão entre o menu e o conteúdo). v235: o teto de 960px também saiu, a
       pedido do dono — deixava uma faixa vazia à direita. O conteúdo ocupa da
       sidebar até a borda (32px de respiro), alinhado com o que fica à direita
       no header (toggle Disponível, sino). */
    margin-left:220px;
  }
  /* v222: /planos/assinar ficou de fora do teto de leitura da v220 porque não
     tem `.main-content` nem recuo de sidebar (é tela SEM nav). Sem isto, os três
     blocos de plano esticavam a largura inteira do monitor. Mesmo valor de
     coluna (960px), aqui centrado na janela toda, já que não há sidebar. */
  #screen-plans .plans-wrapper,
  #screen-plans .seg-nav-plans,
  #screen-plans .plans-trial,
  #screen-plans .header{
    max-width:960px;
    margin-left:auto;
    margin-right:auto;
  }

  /* v144: containers que traziam o recuo de 20px no mobile alinham pela margem
     nova do main-content (sem duplicar recuo). Perfil (2px) já alinha por ela. */
  .dash-stats, .leads-section, .rank-list, .feed-section { padding-left:0; padding-right:0 }
  .plans-wrapper { padding-left:0; padding-right:0 }
  .seg-nav { margin-left:0; margin-right:0 }
  #screen-dashboard .card-slot { margin-left:0; margin-right:0 }
  /* v145: seções do perfil com margem lateral própria também alinham pela margem nova */
  #screen-painel .perf-section, #screen-profile .profile-bio, #screen-profile .profile-agenda { margin-left:0 !important; margin-right:0 !important }

  #screen-client.active,
  #screen-landing.active,
  #screen-login.active,
  #screen-cadastro.active,
  #screen-reset-senha.active,
  #screen-pendente.active,
  #screen-reprovado.active,
  #screen-onboarding.active,
  #screen-welcome.active,
  #screen-plans-public.active,
  #screen-email-pendente.active,
  #screen-consulta.active,
  #screen-avaliar.active,
  #screen-privacidade.active{
    display:block
  }

  #screen-plans-public.active,
  #screen-landing.active,
  #screen-client.active,
  #screen-consulta.active,
  #screen-avaliar.active,
  #screen-login.active,
  #screen-cadastro.active,
  #screen-reset-senha.active,
  #screen-welcome.active,
  #screen-privacidade.active{
    overflow-y:auto;
    height:100vh;
    /* Reserva o espaço da scrollbar mesmo quando ela não está visível.
       Sem isso, telas com pouco conteúdo (ex: /login com só 2 campos) ficam
       15px mais largas que telas com conteúdo > 100vh (ex: /, /planos,
       /cadastro), descentralizando navs com max-width+margin:auto. */
    scrollbar-gutter: stable;
  }

  #screen-client .client-form-wrapper{
    max-width:600px;
    margin:0 auto;
    padding:40px 20px
  }
}

/* NOTIFICATION DOT */

/* LOGIN */
.login-wrapper{padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 80px)}
.login-card{background:var(--card);border-radius:var(--radius);padding:32px 24px;box-shadow:var(--shadow);width:100%;max-width:400px}
.login-card h2{font-size:22px;font-weight:800;color:var(--primary);margin-bottom:4px}
.login-card .login-sub{font-size:13px;color:var(--text-light);margin-bottom:24px}
.login-card .form-group{margin-bottom:16px}
.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.password-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-light);cursor:pointer;font-size:16px;padding:4px}
.password-toggle:hover{color:var(--text)}
.login-erro{display:none;background:rgba(239,68,68,.1);color:var(--danger);font-size:13px;font-weight:500;padding:10px 14px;border-radius:8px;margin-bottom:16px;align-items:center;gap:8px}
.login-erro.show{display:flex}
.login-link{text-align:center;margin-top:20px;font-size:13px;color:var(--text-light)}
.login-link a{color:var(--accent);font-weight:600;text-decoration:none}
.login-link a:hover{text-decoration:underline}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo i{font-size:36px;color:var(--accent)}
.login-logo span{display:block;font-size:24px;font-weight:800;color:var(--primary);margin-top:4px}

/* FIELD ERROR */
.field-error{font-size:12px;color:var(--danger);margin-top:4px;display:block}

/* EMPTY STATE */
.empty-leads{text-align:center;padding:48px 20px;color:var(--text-light)}
.empty-leads i.empty-icon{font-size:48px;color:var(--border);margin-bottom:16px}
.empty-leads h3{font-size:16px;font-weight:600;color:var(--text-light);margin-bottom:6px}
.empty-leads p{font-size:13px;color:var(--text-light);opacity:.7}

/* ONBOARDING */
.onb-wrapper{padding:24px 20px 40px;max-width:480px;margin:0 auto}
.onb-back{background:none;border:none;color:var(--text-light);font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;margin-bottom:12px;display:inline-flex;align-items:center;gap:6px}
.onb-back:hover{color:var(--primary)}
.onb-steps{display:flex;align-items:center;justify-content:center;gap:0;margin:8px 0 28px}
.onb-step-dot{width:28px;height:28px;border-radius:50%;background:var(--border);color:var(--text-light);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0;z-index:1}
.onb-step-dot.active{background:var(--accent);color:var(--primary)}
.onb-step-dot.done{background:var(--primary);color:#fff}
.onb-step-line{flex:0 0 48px;height:2px;background:var(--border);transition:.3s}
.onb-step-line.done{background:var(--primary)}
.onb-step{display:none;animation:fadeIn .3s ease}
.onb-step.active{display:block}
.onb-step h2{font-size:20px;font-weight:700;color:var(--primary);margin-bottom:4px}
.onb-step .onb-sub{font-size:13px;color:var(--text-light);margin-bottom:20px}
.onb-card{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:16px}
.onb-counter{font-size:11px;color:var(--text-light);text-align:right;margin-top:4px}
.onb-counter.over{color:var(--danger)}
.onb-areas-info{font-size:12px;color:var(--text-light);margin-top:8px}
.onb-areas-info.limit{color:var(--warning);font-weight:600}
.area-chip.disabled{opacity:.4;cursor:not-allowed}

/* UPLOAD AREA (onboarding) */
.upload-area{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:.2s;background:var(--bg)}
.upload-area:hover{border-color:var(--accent)}
.upload-area.done{border-color:var(--success);background:rgba(16,185,129,.05)}
.upload-area i{font-size:28px;color:var(--text-light);display:block;margin-bottom:8px}
.upload-area.done i{color:var(--success)}
.upload-area span{font-size:13px;color:var(--text-light)}
.form-group small{display:block;font-size:11px;color:var(--text-light);margin-top:6px}
.onb-inline-error{display:none;font-size:12px;color:var(--danger);margin-top:10px;font-weight:500}
.onb-inline-error.show{display:block}
.onb-step.slide-in-left{animation:slideInLeft .35s ease}

/* ============================================================
   v213 — ONBOARDING (/cadastro/perfil) PORTADO pra pele editorial v141.
   PORTABILIDADE, não redesign: a anatomia vem do #edit-perfil-modal (v191),
   das telas de status (v197) e dos section-titles do app. TUDO escopado a
   #screen-onboarding — zero JS, zero markup, zero mudança no payload.
   Causa raiz do estado anterior: o bloco .onb-* nasceu com tokens LEGADOS
   (--primary/--card/--radius/--shadow) que a v140 redefiniu pro grafite; o
   que era legível no tema claro virou texto quase invisível no escuro.
   ============================================================ */
/* moldura da tela sem nav (padrão v197): altura real + safe-area */
#screen-onboarding{min-height:100vh;min-height:100dvh}
#screen-onboarding .onb-wrapper{padding:24px var(--gutter) calc(40px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto}
/* INDICADOR DE PASSOS: existia como 3 bolinhas com pílula de acento; vira
   idioma editorial — número em tabular-nums e fio de progresso, sem pílula. */
#screen-onboarding .onb-steps{gap:0;margin:4px 0 26px}
#screen-onboarding .onb-step-dot{
  width:auto;height:auto;min-width:22px;border-radius:0;background:none;
  font-family:var(--font-app);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  color:rgba(250,250,250,.35);padding:0 2px 5px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
#screen-onboarding .onb-step-dot.active{color:#fafafa;font-weight:700;border-bottom-color:#fafafa;background:none}
#screen-onboarding .onb-step-dot.done{color:rgba(250,250,250,.7);background:none;border-bottom-color:rgba(255,255,255,.25)}
#screen-onboarding .onb-step-line{flex:0 0 40px;height:1px;background:rgba(255,255,255,.1)}
#screen-onboarding .onb-step-line.done{background:rgba(255,255,255,.25)}
/* TÍTULO do passo: era var(--primary) (#262626) sobre #111213 — ilegível */
#screen-onboarding .onb-step h2{font-family:var(--font-app);font-size:22px;font-weight:700;color:#fafafa;letter-spacing:-0.01em;margin-bottom:5px}
#screen-onboarding .onb-step .onb-sub{font-size:13.5px;color:rgba(250,250,250,.5);margin-bottom:22px}
#screen-onboarding .onb-back{color:rgba(250,250,250,.65);font-size:14px;font-weight:400}
#screen-onboarding .onb-back:hover{color:#fafafa}
/* CARD → conteúdo chapado sobre o fundo, separado por fio (editorial) */
#screen-onboarding .onb-card{background:none;border-radius:0;box-shadow:none;padding:0;margin-bottom:22px}
/* RÓTULO + INPUT: anatomia v191 (o onboarding já usa ícone no label, mantido) */
#screen-onboarding .form-group{margin-bottom:18px}
#screen-onboarding .form-group label{font-family:var(--font-app);font-size:15px;font-weight:700;color:#fafafa;display:flex;align-items:center;gap:8px;margin-bottom:8px}
#screen-onboarding .form-group label i{color:rgba(250,250,250,.6);font-size:14px;width:16px;text-align:center}
#screen-onboarding .form-group input,
#screen-onboarding .form-group select,
#screen-onboarding .form-group textarea{
  font-family:var(--font-app);font-size:15px;color:#fafafa;background:rgba(255,255,255,.04);
  border:1px solid transparent;border-left:2px solid rgba(255,255,255,.6);border-radius:4px;
  padding:13px 14px;outline:none;box-sizing:border-box;width:100%;transition:background .15s,border-color .15s}
#screen-onboarding .form-group input:focus,
#screen-onboarding .form-group select:focus,
#screen-onboarding .form-group textarea:focus{border-left-color:#fafafa;background:rgba(255,255,255,.06)}
#screen-onboarding .form-group input::placeholder,
#screen-onboarding .form-group textarea::placeholder{color:rgba(250,250,250,.35)}
#screen-onboarding .form-group textarea{min-height:96px;resize:none;line-height:1.5}
#screen-onboarding .form-group small{color:rgba(250,250,250,.45);font-size:11.5px}
/* UPLOAD: tracejado discreto no lugar do bloco com fundo próprio */
#screen-onboarding .upload-area{background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.16);border-radius:8px;padding:22px}
#screen-onboarding .upload-area:hover{border-color:rgba(255,255,255,.4)}
#screen-onboarding .upload-area i{color:rgba(250,250,250,.4);font-size:22px}
#screen-onboarding .upload-area span{color:rgba(250,250,250,.5);font-size:13px}
#screen-onboarding .upload-area.done{border-color:rgba(52,217,119,.45);background:rgba(52,217,119,.05)}
/* ÁREAS — CORRIGE BUG DE PRODUÇÃO: a base .area-chip é pílula de fundo BRANCO
   e, no escuro, o texto herdava branco → chips ILEGÍVEIS, e .selected não dava
   feedback nenhum. Vira o botão de texto sublinhado da v191. A regra é ESCOPADA
   porque a MESMA classe é usada pelo /consulta (#screen-client), que tem pele
   própria de landing clara — mexer na base quebraria aquela tela. */
#screen-onboarding .areas-grid{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px}
#screen-onboarding .area-chip{
  font-family:var(--font-app);font-size:15.5px;font-weight:500;color:rgba(250,250,250,.55);
  padding:8px 1px 7px;background:none;border:none;border-radius:0;
  border-bottom:2px solid rgba(255,255,255,.14);cursor:pointer;transition:all .15s}
#screen-onboarding .area-chip:hover{color:#fafafa;background:none;border-bottom-color:rgba(255,255,255,.4)}
#screen-onboarding .area-chip.selected{font-weight:700;color:#fafafa;background:none;border-bottom-color:#fafafa}
#screen-onboarding .area-chip.disabled{opacity:.3;cursor:not-allowed;border-bottom-color:transparent}
#screen-onboarding .onb-areas-info{font-size:12.5px;color:rgba(250,250,250,.45);margin-top:14px}
#screen-onboarding .onb-areas-info.limit{color:rgba(250,250,250,.75);font-weight:600}
#screen-onboarding .onb-counter{font-size:11.5px;color:rgba(250,250,250,.45)}
#screen-onboarding .onb-counter.over{color:#e07a6a}
#screen-onboarding .onb-inline-error{color:#e07a6a;font-size:12.5px}
/* "Outras áreas" no idioma dos section-titles (11px caps + fio). A classe é
   .areas-subtitle — COMPARTILHADA com o /consulta, por isso escopada aqui. */
#screen-onboarding .areas-subtitle{display:flex;align-items:center;gap:12px;font-family:var(--font-app);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,250,250,.6);margin:20px 0 10px}
#screen-onboarding .areas-subtitle::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}
/* BOTÃO primário: PÍLULA 999px — mesma forma do /login e /cadastro (v203), pra
   o funil de entrada inteiro ficar coerente (medido: os dois usam 999px). */
#screen-onboarding .btn-submit{border-radius:999px;background:#fafafa;color:var(--bg-app);font-family:var(--font-app);font-size:15px;font-weight:600;padding:15px 18px}
#screen-onboarding .btn-submit:hover:not(:disabled){background:#e8e8ea}
.onb-step.slide-in-right{animation:slideInRight .35s ease}
@keyframes slideInLeft{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}

/* CLIENT - progress steps */
.client-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:14px 16px;background:#fff;border-bottom:1px solid var(--border)}
.client-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.client-step-num{width:24px;height:24px;border-radius:50%;background:var(--border);color:var(--text-light);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.client-step.active .client-step-num{background:var(--accent);color:var(--primary)}
.client-step.done .client-step-num{background:var(--primary);color:#fff}
.client-step-label{font-size:10px;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:.4px;text-align:center;line-height:1.2}
.client-step.active .client-step-label{color:var(--primary)}
.client-step-bar{flex:0 0 24px;height:2px;background:var(--border);margin:0 4px;align-self:center;margin-top:-14px}
.client-step.done+.client-step-bar{background:var(--primary)}

/* CLIENT - input com feedback visual */
.input-wrap{position:relative}
.input-wrap input,.input-wrap textarea,.input-wrap select{padding-right:38px}
.input-check{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--success);font-size:14px;opacity:0;transition:.2s;pointer-events:none}
.input-wrap.valid .input-check{opacity:1}
.input-wrap.valid input,.input-wrap.valid textarea,.input-wrap.valid select{border-color:var(--success);background:#fff}
.input-wrap textarea+.input-check{top:18px;transform:none}

/* CLIENT - email opcional */
.email-optional input{font-size:13px;padding:10px 14px;background:#fff}
.email-optional label{font-size:12px;color:var(--text-light);font-weight:500}

/* CLIENT - tela de espera (classes reusadas pelo .busca-card da v98) */
.notify-sub{font-size:12px;color:var(--text-light);margin-bottom:14px}
.notify-wait{font-size:13px;color:var(--text-light);font-style:italic}

/* STATUS SCREENS (pendente / reprovado) */
/* ============================================================
   TELAS DE STATUS (v196) — /aguardando, /reprovado e o bloqueio
   ============================================================
   Componente ÚNICO das 3 telas sem nav. A v141 tinha deixado essa família de
   fora e ela seguia na pele v124/v140: `.status-screen` com GRADIENTE
   (var(--primary)→#202020, mais claro que o app) e `#screen-bloqueio` com dois
   radiais + card de vidro (--glass-*). Não havia fio dourado em nenhuma das
   duas — o `var(--accent)` do ícone/prazo já é #fafafa desde a v140.
   Anatomia copiada do estado vazio canônico da lista de leads (.empty-leads,
   v141/v188): ícone grande e apagado, título, corpo menor e mais fraco.
   DIVERGÊNCIA do canônico (reportada): título 20px/rgba(.92) em vez de
   16px/rgba(.7) — no .empty-leads o título é um aviso DENTRO de uma lista viva;
   aqui ele é a mensagem principal de uma tela inteira. Ícone e corpo seguem os
   valores reais do canônico. */
.status-screen{
  background:var(--bg-app);
  min-height:100vh;min-height:100dvh;   /* v119: dvh pro iOS não cortar */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fafafa;font-family:var(--font-app);
  /* sem nav nestas telas: a safe-area é por conta do próprio padding */
  padding:48px 24px calc(48px + env(safe-area-inset-bottom));
  padding-top:calc(48px + env(safe-area-inset-top));
}
/* ícone: bare, sem círculo de fundo (o círculo de 120px era da pele antiga) */
.status-icon{width:auto;height:auto;border-radius:0;background:none;margin-bottom:18px;display:block}
.status-icon i{font-size:48px;color:rgba(255,255,255,.2)}   /* = .empty-leads i.empty-icon */
.status-icon-error i{color:rgba(224,122,106,.55)}            /* --vermelho apagado: é estado, não decoração */
.status-title{font-size:20px;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.92);margin-bottom:8px}
.status-sub{font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);max-width:380px;margin-bottom:20px}
/* prazo: era pill de vidro com borda; virou linha discreta */
.status-prazo{display:block;font-size:13px;color:rgba(255,255,255,.4);margin-bottom:28px}
/* v196: indicador de "estou observando" — dot verde pulsante, mesmo idioma do
   "Em tempo real" do dashboard (animação livePulse já existe). */
.status-live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.4);margin-bottom:28px}
.status-live-dot{width:6px;height:6px;border-radius:50%;flex:none;background:#34d977;box-shadow:0 0 8px rgba(52,217,119,.6);animation:livePulse 2.4s ease-out infinite}
@media (prefers-reduced-motion: reduce){.status-live-dot{animation:none}}
/* BOTÕES — 3 níveis. Primário = sólido branco (grupo .btn-submit editorial);
   secundário = contorno discreto; "Sair" = link do .status-help. */
.status-btn{
  width:100%;max-width:320px;background:none;color:rgba(250,250,250,.55);
  border:none;border-radius:999px;
  padding:12px 24px;font-family:var(--font-app);font-size:14px;font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:color .18s,opacity .2s;
}
.status-btn:hover{color:rgba(250,250,250,.9)}
.status-btn + .status-btn{margin-top:10px}
/* v198: o secundário perdeu a pílula (virou texto discreto). O .status-btn-ghost
   saiu junto — a base agora É o que ele era, e manter os dois seria duplicata. */
.status-btn-primary{background:#fafafa;color:#111213;font-weight:600}
.status-btn-primary:hover{background:#fafafa;opacity:.88;color:#111213}
/* v219 — MOTIVO DA REPROVAÇÃO + REENVIO (tela /reprovado).
   Mesma pele das telas de status (v197): chapado, fio de 1px, zero vidro,
   zero raio de cartão. O motivo é DADO do admin, então ganha superfície
   discreta (fio + fundo .03) pra se separar do texto corrido sem virar caixa
   de alerta; o reenvio é um formulário, então só fios horizontais. */
.status-motivo{max-width:380px;margin:0 0 24px;padding:14px 16px;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--fio);border-radius:10px;
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.7)}
.status-motivo-lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:6px}
.reenvio-bloco{width:100%;max-width:380px;margin:0 0 26px;text-align:left;
  border-top:1px solid var(--fio);padding-top:22px}
.reenvio-intro{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55)}
.reenvio-campo{display:block;margin-bottom:14px}
.reenvio-campo span{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:6px}
.reenvio-campo input[type=file]{width:100%;font-family:var(--font-app);font-size:12.5px;
  color:rgba(255,255,255,.7);padding:10px 0;border:0;border-bottom:1px solid var(--fio);background:none}
.reenvio-campo input[type=file]::file-selector-button{font-family:var(--font-app);font-size:12.5px;
  margin-right:12px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:none;color:rgba(250,250,250,.85);cursor:pointer}
.reenvio-campo input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.06)}
#reprovado-reenvio .status-btn{width:100%;margin-top:8px}
.reenvio-hint{margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.35)}
.status-help{margin-top:22px;font-size:13px}
.status-help a{color:rgba(250,250,250,.45);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.status-help a:hover{color:rgba(250,250,250,.8)}

/* WELCOME SCREEN */
/* ============================================================
   WELCOME — onboarding visual exibido pra advogados aprovados
   ============================================================
   Layout: ícone redondo dourado pulsante + título Cormorant +
   subtítulo + 3 tópicos em cards glass-morphism + CTA dourada
   pra /dashboard. Fundo navy gradient consistente com o app.
   ============================================================ */
/* ============================================================
   /bem-vindo (v201) — mesma família das telas de status (v197–v200)
   ============================================================
   Era pele própria da era v140: gradiente #171717→#202020, título Cormorant
   38px, ícone de 84px com `animation:pulse`, e os 3 tópicos como cards de vidro
   (blur 8px + borda .07 + raio 14px). Nada disso era compartilhado — zero risco
   de vazar. Agora consome a MESMA anatomia do .status-*: ícone 48px rgba(.2),
   título 20px rgba(.92), corpo 14px rgba(.55), fundo --bg-app.
   Tela sem nav: a safe-area é por conta do próprio padding (armadilha v119). */
.welcome-screen{
  background:var(--bg-app);
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fafafa;font-family:var(--font-app);
  padding:48px 24px calc(48px + env(safe-area-inset-bottom));
  padding-top:calc(48px + env(safe-area-inset-top));
}
.welcome-container{ width:100%;max-width:420px;text-align:center }
/* ícone: bare, sem círculo e SEM a animação pulse herdada */
.welcome-icon{
  width:auto;height:auto;border-radius:0;background:none;border:none;
  margin:0 0 18px;display:block;animation:none;
}
.welcome-icon i{font-size:48px;color:rgba(255,255,255,.2)}
/* v201: Cormorant FORA (era tela logada com serifada — pendência que a v157
   listou e a v160 não fechou). Alinhado ao .status-title. */
.welcome-title{
  font-family:var(--font-app);
  font-size:20px;font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.92);margin:0 0 8px;line-height:1.25;
}
.welcome-sub{
  font-family:var(--font-app);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);
  margin:0 auto 28px;max-width:380px;
}
/* os 3 tópicos: FILEIRAS editoriais com fio, no lugar dos cards de vidro.
   Fio embaixo de cada uma (padrão v158: a última também fecha com fio). */
.welcome-topics{
  display:flex;flex-direction:column;gap:0;
  margin:0 0 28px;text-align:left;width:100%;
}
.welcome-topic{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;
  background:none;border:none;border-radius:0;
  border-bottom:1px solid var(--fio);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.welcome-topic-icon{
  flex:0 0 auto;width:auto;height:auto;border-radius:0;
  background:none;border:none;display:block;margin-top:1px;
}
.welcome-topic-icon i{font-size:15px;color:rgba(255,255,255,.35)}
/* v205: o tópico "Fique disponível" usa o MESMO equalizer do toggle da dashboard.
   A geometria (larguras, alturas, gap) e as @keyframes eqBarA/B/C vêm da base
   `.dispo-eq-bars`; aqui só ligamos a cor verde e as animações, que na dashboard
   dependem do ancestral `.dispo-eq.on` — inexistente nesta tela. */
#screen-welcome .welcome-topic-icon .dispo-eq-bars span{background:#34d977}
#screen-welcome .welcome-topic-icon .dispo-eq-bars span:nth-child(1){animation:eqBarA 1.1s infinite ease-in-out}
#screen-welcome .welcome-topic-icon .dispo-eq-bars span:nth-child(2){animation:eqBarB 0.9s infinite ease-in-out}
#screen-welcome .welcome-topic-icon .dispo-eq-bars span:nth-child(3){animation:eqBarC 1.3s infinite ease-in-out}
@media (prefers-reduced-motion:reduce){
  #screen-welcome .welcome-topic-icon .dispo-eq-bars span{animation:none}
}
.welcome-topic-body{flex:1;min-width:0}
.welcome-topic-title{
  font-family:var(--font-app);
  font-size:14px;font-weight:600;color:rgba(255,255,255,.92);
  margin-bottom:3px;letter-spacing:0;
}
.welcome-topic-text{
  font-family:var(--font-app);
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.55);margin:0;
}
/* botão primário: mesmo do .status-btn-primary (sólido branco, sem glow) */
.welcome-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:320px;
  padding:12px 24px;border-radius:999px;border:none;
  background:#fafafa;color:#111213;
  font-family:var(--font-app);font-size:14px;font-weight:600;letter-spacing:0;
  cursor:pointer;box-shadow:none;transition:opacity .2s;
}
.welcome-cta:hover{ opacity:.88;transform:none;box-shadow:none }
.welcome-cta i{font-size:12px}

/* =====================================================
   PREMIUM DARK THEME — telas de marketing (a landing saiu na v229)
   Escopo: tudo dentro de #screen-landing e #screen-client
   ===================================================== */

/* v229/v230: #screen-landing e #screen-plans-public saíram deste grupo (pele do app). */
#screen-client, #screen-login, #screen-cadastro {
  background: #171717;
  color: #fff;
}

/* Cinematic background com gradient + grain */
/* v201: #screen-login e #screen-cadastro SAÍRAM deste grupo (foram pra pele
   editorial). Os 3 ids de marketing seguem com as 4 camadas + grain. */
#screen-client .lp-bg {
  position: relative;
  min-height: 100%;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 100% 30%, rgba(28,30,29,0.85), transparent 60%),
    radial-gradient(900px 700px at 0% 60%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #171717 0%, #101010 100%);
  padding-bottom: 60px;
}
.lp-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* Navbar */
.lp-nav {
  position: relative;
  z-index: 20;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 16px 0;
}
.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 8px 8px 8px 18px;
}
.lp-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.lp-logo i { color: #fafafa; font-size: 18px; }
button.lp-logo { background: none; border: none; padding: 0; cursor: pointer; } /* v241: marca clicável */

/* Logo Juristter (imagem) — substitui o antigo ícone fa-scale-balanced.
   Altura em em: escala automaticamente com o font-size de cada contexto
   (navs ~26px, hero/h1 maior, rodapés 16px). */
.logo-img { height: 1.25em; width: auto; vertical-align: middle; flex-shrink: 0; }
.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-nav-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s;
}
.lp-nav-link:hover { color: #fff; }
.lp-nav-cta {
  background: rgba(255,255,255,.92);
  color: #111;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 999px;
  transition: filter 0.2s, transform 0.2s;
  box-shadow: 0 8px 30px -8px rgba(255,255,255,0.6);
  white-space: nowrap;
}
.lp-nav-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lp-nav-back {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lp-nav-back:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Hero */
.lp-hero {
  position: relative;
  z-index: 10;
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 20px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.4;
}
.lp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: inline-block;
  flex-shrink: 0;
}
.lp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(36px, 8vw, 76px);
  margin: 0;
  color: #fff;
}
.lp-title-line { display: block; }
.lp-title-gold {
  font-style: italic;
  background-image: linear-gradient(to right, #737373 0%, #a3a3a3 14%, #d4d4d4 32%, #f5f5f5 50%, #d4d4d4 68%, #a3a3a3 86%, #737373 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lp-shiny 7s linear infinite;
  padding-bottom: 4px;
}
@keyframes lp-shiny {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.lp-sub {
  color: rgba(255,255,255,0.65);
  font-size: 15px;
  line-height: 1.6;
  max-width: 540px;
  margin: 22px auto 0;
}
.lp-cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  width: 100%;
  max-width: 360px;
}
@media (min-width: 600px) {
  .lp-cta-row {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    width: auto;
  }
}
.lp-btn-primary,
.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s, background 0.2s;
}
.lp-btn-primary {
  background: rgba(255,255,255,.92);
  color: #111;
  box-shadow: 0 8px 30px -8px rgba(255,255,255,0.6);
}
.lp-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lp-btn-ghost {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.lp-btn-ghost:hover { background: rgba(255,255,255,0.08); }
.lp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.lp-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.lp-trust-item i { color: #fafafa; font-size: 11px; }

/* Features */
.lp-features {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.lp-features-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
}
.lp-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 14px 0 0;
  color: #fff;
}
.lp-italic-gold {
  font-style: italic;
  background-image: linear-gradient(to right, #8c6a26, #fafafa, #f0d27e, #fafafa, #8c6a26);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lp-shiny 8s linear infinite;
}
.lp-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .lp-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.lp-feature-card {
  position: relative;
  border-radius: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.lp-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.4);
}
.lp-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
  font-size: 18px;
}
.lp-feature-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 16px 0 0;
  color: #fff;
}
.lp-feature-card p {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0 0;
}

/* =====================================================
   SCREEN-CLIENT (/duvida) — v226: PELE DO APP LOGADO
   =====================================================
   Substitui a pele de marketing (vidro + gradiente + Cormorant) que esta tela
   herdava da landing. Motivo: quem chega aqui é LEIGO, muitas vezes no celular
   na rua, e o cinza claro sobre vidro sumia. Agora: fundo chapado, fio de 1px,
   Inter, contraste alto (texto de apoio a .88, nada abaixo de .66) e corpo de
   17px — acima dos 16px em que o iPhone dá zoom sozinho no foco do campo.
   O formulário virou TRÊS ETAPAS (uma pergunta por vez) com a caixa de escrita
   no formato que todo mundo já conhece de conversa. */
#screen-client{
  background:var(--bg-app);
  min-height:100vh;min-height:100dvh;
  font-family:var(--font-app);font-size:17px;line-height:1.55;color:#fafafa;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
#screen-client .cl-topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--fio)
}
#screen-client .cl-marca{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.01em}
#screen-client .cl-marca .logo-img{height:22px;width:auto}
/* v241: a marca virou botão (volta pra pergunta) — sem o visual padrão de button */
#screen-client button.cl-marca{background:none;border:none;padding:0;margin:0;color:inherit;font-family:inherit;cursor:pointer}
#screen-client .cl-sou-adv{
  background:none;border:none;color:rgba(250,250,250,.88);font-family:var(--font-app);
  font-size:14px;font-weight:500;cursor:pointer;padding:6px 2px
}
#screen-client .cl-sou-adv:hover{color:#fafafa;text-decoration:underline}

#screen-client .cl-grade{display:grid;grid-template-columns:1fr;max-width:1120px;margin:0 auto}
/* o .form-card global desenha cartão (fundo + raio + sombra); aqui ele é só o
   agrupador que o submitQuestion esconde ao enviar — some visualmente. */
#screen-client .form-card{background:none;border:none;border-radius:0;box-shadow:none;padding:0}
#screen-client .cl-painel{padding:22px 20px 44px;min-width:0}

/* progresso das etapas (reusa os ids #cstep-1..3 e as classes active/done) */
#screen-client .cl-conta{
  display:block;font-size:14px;font-weight:700;color:rgba(250,250,250,.66);margin-bottom:6px
}
#screen-client .cl-trilha{display:flex;gap:6px;margin-bottom:26px}
#screen-client .cl-trilha span{height:4px;border-radius:2px;background:rgba(255,255,255,.16);flex:1;transition:background .2s}
#screen-client .cl-trilha span.done{background:rgba(255,255,255,.5)}
#screen-client .cl-trilha span.active{background:#fafafa}

#screen-client .cl-tit{
  font-family:var(--font-app);font-size:clamp(26px,5.4vw,33px);line-height:1.2;
  font-weight:700;margin:0 0 10px;letter-spacing:-.025em;text-wrap:balance;color:#fafafa
}
#screen-client .cl-sub{margin:0 0 24px;font-size:17px;line-height:1.55;color:rgba(250,250,250,.88);max-width:46ch}

/* AVISO DE HUMANO — vem ANTES da caixa: ela parece de chatbot, e a primeira
   coisa lida tem que desfazer isso. Verde = cor de estado do app. */
#screen-client .cl-humano{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid rgba(52,217,119,.45);background:rgba(52,217,119,.08);
  border-radius:10px;padding:14px 15px;margin-bottom:18px
}
#screen-client .cl-humano svg{flex:none;width:22px;height:22px;color:#34d977;margin-top:1px}
#screen-client .cl-humano b{display:block;font-size:17px;font-weight:700;color:#fafafa;margin-bottom:3px}
#screen-client .cl-humano span{display:block;font-size:15.5px;line-height:1.45;color:rgba(250,250,250,.88)}

/* CAIXA DE ESCRITA no formato de conversa: botão de enviar dentro, cresce só */
#screen-client .cl-caixa{
  border:1px solid rgba(255,255,255,.26);border-radius:16px;
  background:rgba(255,255,255,.04);padding:6px 6px 6px 0;
  transition:border-color .15s,background .15s
}
#screen-client .cl-caixa:focus-within{border-color:#fafafa;background:rgba(255,255,255,.07)}
#screen-client .cl-caixa textarea{
  width:100%;background:none;border:none;border-radius:0;color:#fafafa;
  font-family:var(--font-app);font-size:17px;line-height:1.55;
  padding:14px 16px 4px;min-height:96px;max-height:340px;resize:none;overflow-y:auto
}
#screen-client .cl-caixa textarea:focus{outline:none;box-shadow:none}
#screen-client .cl-caixa textarea::placeholder{color:rgba(250,250,250,.5)}
#screen-client .cl-caixa-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 4px 16px}
#screen-client .cl-dica{font-size:14px;color:rgba(250,250,250,.66)}
#screen-client .cl-dica.ok{color:#34d977;font-weight:600}
#screen-client .cl-enviar-caixa{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  background:#fafafa;color:#111213;border:none;border-radius:10px;cursor:pointer;
  transition:background .15s,opacity .15s
}
#screen-client .cl-enviar-caixa:hover{background:#e8e8ea}
#screen-client .cl-enviar-caixa[disabled]{opacity:.35;cursor:not-allowed}

#screen-client .cl-sugs-tit{margin:20px 0 10px;font-size:15px;color:rgba(250,250,250,.88)}
#screen-client .cl-sugs{display:flex;flex-wrap:wrap;gap:10px 20px}
#screen-client .cl-sug{
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,.28);
  border-radius:0;color:#fafafa;font-family:var(--font-app);font-size:16px;font-weight:500;
  padding:7px 2px;cursor:pointer
}
#screen-client .cl-sug:hover{border-bottom-color:#fafafa}

/* campos: assinatura do app logado (.editp-input) — raio 4 + barra de 2px */
#screen-client .cl-campo{margin-bottom:26px}
#screen-client .cl-campo label{
  display:block;font-size:16px;font-weight:600;color:#fafafa;margin-bottom:9px
}
#screen-client .cl-campo .cl-opcional{font-size:14px;font-weight:400;color:rgba(250,250,250,.66);margin-left:6px}
#screen-client .cl-campo input[type=text],
#screen-client .cl-campo input[type=tel],
#screen-client .cl-campo input[type=email]{
  width:100%;background:rgba(255,255,255,.04);color:#fafafa;
  border:1px solid transparent;border-left:2px solid rgba(255,255,255,.6);border-radius:4px;
  font-family:var(--font-app);font-size:17px;line-height:1.5;padding:15px 16px;
  transition:background .15s,border-color .15s
}
#screen-client .cl-campo input::placeholder{color:rgba(250,250,250,.5)}
#screen-client .cl-campo input:focus{outline:none;border-left-color:#fafafa;background:rgba(255,255,255,.07)}
#screen-client .cl-ajuda{margin:9px 0 0;font-size:15px;color:rgba(250,250,250,.66);line-height:1.45}
#screen-client .cl-linha2{display:grid;grid-template-columns:1fr;gap:26px}

/* ASSUNTOS em FILEIRA (idioma das listas do app): sem cartão, sem cápsula */
#screen-client .areas-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--fio)}
#screen-client .areas-subtitle{
  font-size:14px;font-weight:600;color:rgba(250,250,250,.66);
  margin:22px 0 0;text-transform:none;letter-spacing:0
}
#screen-client .area-chip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;background:none;border:none;border-bottom:1px solid var(--fio);
  border-radius:0;color:rgba(250,250,250,.85);font-family:var(--font-app);
  font-size:16.5px;font-weight:500;padding:16px 2px;cursor:pointer;transition:color .15s;
  line-height:inherit /* v237: virou <button> (foco por teclado); button não herda line-height */
}
#screen-client .area-chip:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}
#screen-client .area-chip:hover{color:#fafafa;background:none;border-color:transparent;border-bottom-color:var(--fio)}
#screen-client .area-chip::after{
  content:"✓";font-size:17px;color:#fafafa;opacity:0;transition:opacity .15s
}
#screen-client .area-chip.selected{background:none;color:#fafafa;font-weight:700;border-bottom-color:var(--fio)}
#screen-client .area-chip.selected::after{opacity:1}

/* cidade: mantém a autocomplete real (lat/lng de /data/cidades.json) */
#screen-client .city-autocomplete-wrap{position:relative}
#screen-client .city-suggestions{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;
  background:#1b1c1e;border:1px solid rgba(255,255,255,.26);border-radius:10px;
  max-height:240px;overflow-y:auto;box-shadow:0 18px 40px rgba(0,0,0,.6)
}
#screen-client .city-suggestions.show{display:block}
#screen-client .city-suggestion{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:13px 16px;cursor:pointer;font-size:16px;color:#fafafa;
  border-bottom:1px solid var(--fio)
}
#screen-client .city-suggestion:last-child{border-bottom:none}
#screen-client .city-suggestion:hover{background:rgba(255,255,255,.08)}
#screen-client .city-suggestion .uf{color:rgba(250,250,250,.66);font-size:14px}

/* revisão da dúvida na etapa 3 */
#screen-client .cl-revisao{
  border:1px solid var(--fio);border-radius:10px;padding:15px 16px;margin-bottom:26px;
  background:rgba(255,255,255,.04)
}
#screen-client .cl-revisao-lbl{display:block;font-size:14px;font-weight:600;color:rgba(250,250,250,.66);margin-bottom:7px}
#screen-client .cl-revisao p{margin:0;font-size:16px;line-height:1.5;color:rgba(250,250,250,.88)}

/* ações */
#screen-client .cl-acoes{display:flex;flex-direction:column;gap:6px;margin-top:30px}
#screen-client .cl-btn{
  background:#fafafa;color:#111213;border:1px solid #fafafa;border-radius:10px;
  font-family:var(--font-app);font-size:17px;font-weight:700;padding:16px 30px;
  cursor:pointer;width:100%;box-shadow:none
}
#screen-client .cl-btn:hover{background:#e8e8ea}
#screen-client .cl-btn[disabled]{opacity:.5;cursor:not-allowed}
#screen-client .cl-voltar{
  background:none;border:none;color:rgba(250,250,250,.66);font-family:var(--font-app);
  font-size:16px;cursor:pointer;padding:14px;text-decoration:underline;text-underline-offset:3px
}
#screen-client .cl-voltar:hover{color:#fafafa}
#screen-client .cl-erro{
  color:#ff9d8d;font-size:16px;font-weight:600;margin-top:14px;
  display:flex;gap:8px;align-items:flex-start
}
#screen-client .cl-erro:empty{display:none}
#screen-client .cl-nota{
  margin:30px 0 0;padding-top:18px;border-top:1px solid var(--fio);
  font-size:15px;color:rgba(250,250,250,.66);line-height:1.5
}
/* erro inline do validarCampo (compartilhado) legível nesta tela */
#screen-client .field-error{color:#ff9d8d;font-size:15px;font-weight:600;display:block;margin-top:8px}

/* coluna de confiança: DEPOIS do formulário no celular, ao lado no desktop */
#screen-client .cl-rail{
  padding:24px 20px 30px;border-top:1px solid var(--fio);
  display:flex;flex-direction:column;gap:16px;min-width:0
}
#screen-client .cl-rail-tit{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em;color:#fafafa}
#screen-client .cl-rail-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
#screen-client .cl-rail-lista li{display:flex;gap:11px;font-size:16px;color:rgba(250,250,250,.88);line-height:1.45}
#screen-client .cl-rail-lista svg{flex:none;width:19px;height:19px;margin-top:2px;color:#34d977}
#screen-client .online-indicador{
  display:inline-flex;align-items:center;gap:9px;font-size:16px;color:#fafafa;
  font-weight:600;padding-top:16px;border-top:1px solid var(--fio)
}

/* SUCESSO — chapado, sem medalhão redondo (idioma das telas de status) */
#screen-client .success-screen{padding:32px 20px 40px;position:relative;z-index:10}
#screen-client .success-screen h2{
  font-family:var(--font-app);font-size:clamp(24px,5vw,30px);font-weight:700;
  letter-spacing:-.02em;color:#fafafa;margin-bottom:10px
}
#screen-client .success-screen > p{color:rgba(250,250,250,.88) !important;font-size:17px}
#screen-client .success-icon{
  background:none !important;border:none !important;color:#34d977;
  font-size:40px;width:auto;height:auto;margin-bottom:14px;box-shadow:none
}
#screen-client .busca-card{
  background:rgba(255,255,255,.04);border:1px solid var(--fio);border-radius:10px;
  padding:18px;margin-top:20px;display:flex;align-items:flex-start;gap:14px;text-align:left
}
#screen-client .busca-spinner{font-size:20px;color:#fafafa;margin-top:2px}
#screen-client .busca-card .notify-wait{font-weight:700;font-size:16.5px;color:#fafafa;font-style:normal}
#screen-client .busca-card .notify-sub{font-size:15.5px;color:rgba(250,250,250,.88);margin:0}

@media (min-width:560px){
  #screen-client .cl-linha2{grid-template-columns:1fr 1fr}
  #screen-client .cl-acoes{flex-direction:row;align-items:center;gap:18px}
  #screen-client .cl-btn{width:auto;min-width:230px}
}
@media (min-width:900px){
  #screen-client .cl-grade{grid-template-columns:1fr 320px}
  #screen-client .cl-painel{padding:34px 44px 72px}
  #screen-client .cl-rail{border-top:none;border-left:1px solid var(--fio);padding:34px 28px;position:sticky;top:0;align-self:start}
}

/* =====================================================
   SCREEN-LANDING (/) — v229: PELE DO APP
   (v230: as peças comuns — topo, botões, títulos, seções, rodapé — passaram
   a valer também pro /planos, /avaliar e /privacidade via :is(); o que é só
   da landing segue em #screen-landing.)
   =====================================================
   A landing dos advogados saiu da pele de marketing (fundo radial + grain +
   Cormorant + dourado) e foi pra mesma pele da /duvida v226 e do app logado:
   #111213 chapado, Inter, fio de 1px, botão branco. Pedido explícito do dono.
   Prefixo .ld-* (não .lp-*): as .lp-* seguem vivas no /consulta e no /planos.
   O card de exemplo usa .ld-card e NÃO .lead-card: o timer global do app.js
   varre todo .lead-card da página e reescreveria este. Ele reusa só o
   @keyframes ctaArrow do card de verdade. */
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade){
  --ld-apoio:rgba(250,250,250,.88);--ld-2:rgba(250,250,250,.66);--ld-3:rgba(250,250,250,.5);
  --ld-fio-forte:rgba(255,255,255,.11);
  background:var(--bg-app);color:#fafafa;
  font-family:var(--font-app);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)
}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) button{font-family:var(--font-app)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha) .ld-wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

/* topo (mesmo desenho do .cl-topo da /duvida), grudado no scroll da .screen */
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha) .ld-topo{
  position:sticky;top:0;z-index:10;
  background:rgba(17,18,19,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--fio);padding-top:env(safe-area-inset-top)
}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha) .ld-topo-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha) .ld-marca{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fafafa;background:none;border:none;padding:0;font-family:var(--font-app)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha) button.ld-marca{cursor:pointer}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha) .ld-marca .logo-img{height:22px;width:auto}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-topo-acoes{display:flex;align-items:center;gap:6px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-link{background:none;border:none;color:var(--ld-apoio);font-size:14px;font-weight:500;cursor:pointer;padding:8px 10px;border-radius:8px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-link:hover{color:#fafafa;background:rgba(255,255,255,.05)}
#screen-landing .ld-link-planos{display:none}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn-sm{background:#fafafa;color:var(--bg-app);border:none;border-radius:8px;font-size:14px;font-weight:700;padding:9px 14px;cursor:pointer}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn-sm:hover{background:#e8e8ea}

/* hero */
#screen-landing .ld-hero{display:grid;grid-template-columns:1fr;gap:44px;padding:40px 0 56px}
#screen-landing .ld-selo{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ld-apoio);border:1px solid var(--ld-fio-forte);border-radius:999px;padding:6px 12px 6px 10px;margin-bottom:22px}
#screen-landing .ld-ponto{flex:none;width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px rgba(52,217,119,.15)}
#screen-landing .ld-tit{font-family:var(--font-app);font-size:clamp(38px,8.4vw,62px);line-height:1.04;font-weight:700;letter-spacing:-.04em;margin:0 0 20px;text-wrap:balance;color:#fafafa}
#screen-landing .ld-tit span{display:block;color:var(--ld-3)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-sub{font-size:18px;line-height:1.55;color:var(--ld-apoio);margin:0 0 30px;max-width:44ch}
#screen-landing .ld-ctas{display:flex;flex-direction:column;gap:10px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;font-size:17px;font-weight:700;padding:16px 26px;cursor:pointer;transition:background .2s,border-color .2s;box-shadow:none}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn-pri{background:#fafafa;color:var(--bg-app);border:1px solid #fafafa}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn-pri:hover{background:#e8e8ea}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn-sec{background:none;color:#fafafa;border:1px solid rgba(255,255,255,.22)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-btn-sec:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.03)}
#screen-landing .ld-garantias{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--fio);display:grid;gap:10px}
#screen-landing .ld-garantias li{white-space:nowrap;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ld-apoio)}
#screen-landing .ld-garantias svg{width:16px;height:16px;color:var(--verde);flex:none}

/* card de EXEMPLO — espelha #screen-dashboard .lead-card (vidro v140 + rodapé de ação) */
#screen-landing .ld-demo-rot{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ld-3);margin-bottom:12px}
#screen-landing .ld-demo-rot em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500}
#screen-landing .ld-card{background:var(--glass-bg);border:var(--glass-border);border-top:1px solid rgba(255,255,255,.3);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow);padding:18px;position:relative;overflow:hidden}
#screen-landing .ld-card::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
#screen-landing .ld-card-topo{display:flex;flex-wrap:wrap;gap:6px}
#screen-landing .ld-area{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(250,250,250,.85);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:6px}
#screen-landing .ld-regiao{font-size:11px;font-weight:500;color:rgba(250,250,250,.65);background:rgba(255,255,255,.05);padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
#screen-landing .ld-regiao svg{width:11px;height:11px}
#screen-landing .ld-pergunta{font-size:15px;font-weight:600;line-height:1.5;margin:14px 0}
#screen-landing .ld-mascara{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px;color:rgba(250,250,250,.55);background:rgba(255,255,255,.05);padding:9px 12px;border-radius:8px;margin-bottom:12px}
#screen-landing .ld-pontos{white-space:nowrap;font-weight:700;letter-spacing:2px;color:rgba(250,250,250,.85)}
#screen-landing .ld-cadeado{display:inline-flex;align-items:center;gap:5px;font-size:11px}
#screen-landing .ld-cadeado svg{width:11px;height:11px}
#screen-landing .ld-timer{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ld-2)}
#screen-landing .ld-timer svg{width:13px;height:13px;flex:none}
#screen-landing .ld-timer-txt{min-width:96px;font-variant-numeric:tabular-nums}
#screen-landing .ld-barra{flex:1;height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
#screen-landing .ld-barra-fill{height:100%;width:100%;background:var(--verde);border-radius:2px;transition:width 1s linear,background .3s}
#screen-landing .ld-acoes{margin:14px -18px -18px}
#screen-landing .ld-assumir{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.09);padding:15px 16px;font-size:15px;font-weight:600;color:var(--verde-claro);text-shadow:0 0 9px rgba(120,230,165,.35)}
#screen-landing .ld-trilho{position:relative;flex:1;height:20px;max-width:120px;overflow:hidden}
#screen-landing .ld-seta{position:absolute;left:6px;top:50%;margin-top:-11px;font-size:17px;line-height:22px;opacity:0;animation:ctaArrow 4.2s ease-in-out infinite}
#screen-landing .ld-recusar{border-top:1px solid rgba(255,255,255,.07);padding:12px 16px;font-size:13px;font-weight:500;color:var(--salmao)}
#screen-landing .ld-demo-nota{margin:14px 2px 0;font-size:14px;color:var(--ld-2);line-height:1.5}
#screen-landing .ld-demo-nota b{color:#fafafa;font-weight:600}

/* seções */
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-sec{border-top:1px solid var(--fio);padding:56px 0}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-olho{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ld-3);margin:0 0 12px}
#screen-landing .ld-h2{font-family:var(--font-app);font-size:clamp(28px,5.6vw,40px);line-height:1.12;font-weight:700;letter-spacing:-.03em;margin:0 0 32px;text-wrap:balance;max-width:20ch;color:#fafafa}
#screen-landing .ld-h2 span{color:var(--ld-3)}
#screen-landing .ld-passos{list-style:none;margin:0;padding:0;display:grid}
#screen-landing .ld-passo{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:22px 0;border-top:1px solid var(--fio)}
#screen-landing .ld-passo:first-child{border-top:none;padding-top:0}
#screen-landing .ld-num{font-size:14px;font-weight:600;color:var(--ld-3);font-variant-numeric:tabular-nums;padding-top:3px}
#screen-landing .ld-passo h3{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:#fafafa}
#screen-landing .ld-passo p{margin:0;font-size:16px;color:var(--ld-2);line-height:1.55}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-difs{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--fio)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-dif{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--fio)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-dif svg{width:20px;height:20px;color:#fafafa;margin-top:2px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-dif b{display:block;font-size:17px;font-weight:700;margin-bottom:3px;letter-spacing:-.01em}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-dif span{display:block;font-size:16px;color:var(--ld-2);line-height:1.55}
#screen-landing .ld-planos{display:grid;border:1px solid var(--ld-fio-forte);border-radius:14px;overflow:hidden}
#screen-landing .ld-plano{padding:20px;border-top:1px solid var(--ld-fio-forte);display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 12px}
#screen-landing .ld-plano:first-child{border-top:none}
#screen-landing .ld-plano-nome{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
#screen-landing .ld-tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bg-app);background:#fafafa;border-radius:4px;padding:3px 6px}
#screen-landing .ld-preco{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
#screen-landing .ld-preco small{font-size:14px;font-weight:500;color:var(--ld-2)}
#screen-landing .ld-plano-spec{grid-column:1/-1;font-size:14.5px;color:var(--ld-2)}
#screen-landing .ld-plano-destaque{background:rgba(255,255,255,.035)}
#screen-landing .ld-planos-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:15px;color:var(--ld-2)}
#screen-landing .ld-seta-link{background:none;border:none;color:#fafafa;font-size:15px;font-weight:600;cursor:pointer;padding:6px 0;display:inline-flex;gap:6px;align-items:center}
#screen-landing .ld-seta-link:hover{text-decoration:underline;text-underline-offset:3px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-final{border-top:1px solid var(--fio);padding:64px 0}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-final .ld-h2{margin-bottom:12px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-final p{margin:0 0 28px;color:var(--ld-apoio);max-width:46ch}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-rodape{border-top:1px solid var(--fio);padding:28px 0 36px;font-size:14px;color:var(--ld-2)}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-rodape-in{display:flex;flex-direction:column;gap:14px}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-rodape-links{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-rodape-links button{background:none;border:none;color:var(--ld-2);font-size:14px;cursor:pointer;padding:4px 0}
:is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-rodape-links button:hover{color:#fafafa;text-decoration:underline}

@media (min-width:600px){
  #screen-landing .ld-ctas{flex-direction:row;flex-wrap:wrap}
  #screen-landing .ld-garantias{display:flex;flex-wrap:wrap;gap:10px 26px}
}
@media (min-width:900px){
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade,#screen-login,#screen-cadastro,#screen-reset-senha){--gutter:32px}
  #screen-landing .ld-link-planos{display:inline-block}
  #screen-landing .ld-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;padding:84px 0 96px}
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-sec{padding:88px 0}
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-sec-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}
  #screen-landing .ld-passo{grid-template-columns:56px 1fr;padding:26px 0}
  #screen-landing .ld-passo:first-child{padding-top:0}
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-difs{grid-template-columns:1fr 1fr;column-gap:40px}
  #screen-landing .ld-planos{grid-template-columns:repeat(3,1fr)}
  #screen-landing .ld-plano{border-top:none;border-left:1px solid var(--ld-fio-forte);grid-template-columns:1fr;padding:26px}
  #screen-landing .ld-plano:first-child{border-left:none}
  #screen-landing .ld-preco{text-align:left}
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-final-in{display:flex;align-items:center;justify-content:space-between;gap:40px}
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-final p{margin-bottom:0}
  :is(#screen-landing,#screen-plans-public,#screen-avaliar,#screen-privacidade) .ld-rodape-in{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  #screen-landing .ld-seta{animation:none;opacity:1;left:auto;right:6px}
  #screen-landing .ld-barra-fill{transition:none}
}

/* =====================================================
   v242/v243 — JANELA com o app de verdade (iframe /painel?demo=1) na landing.
   O efeito de rolagem vem de --ldm-p (0→1), escrito pelo app.js (ldmRolagem)
   conforme a seção sobe; sem JS / reduced-motion fica 1 = janela reta.
   O iframe renderiza num tamanho "de tela" (1280/1024 desktop ou 390 celular)
   e é escalado pra caber — por isso a tela dentro é idêntica ao app.
   ===================================================== */
#screen-landing .ldm-cab{max-width:640px}
#screen-landing .ldm-cab .ld-h2{margin-bottom:12px}
#screen-landing .ldm-sub{color:var(--ld-2);font-size:16px;margin:0 0 36px}
#screen-landing .ldm-palco{perspective:1400px;perspective-origin:50% 0;overflow-x:clip;overflow-y:visible;padding-bottom:40px;margin-bottom:-40px} /* clip: inclinada, a perspectiva alarga a janela além da tela */
#screen-landing .ldm-app{
  --ldm-p:1;--ldm-incl:12deg;
  position:relative;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;background:var(--bg-app);
  box-shadow:0 40px 90px rgba(0,0,0,.55);transform-origin:50% 0;
  transform:translateY(calc((1 - var(--ldm-p)) * 90px)) rotateX(calc((1 - var(--ldm-p)) * var(--ldm-incl))) scale(calc(.9 + var(--ldm-p) * .1));
  opacity:calc(.35 + var(--ldm-p) * .65);will-change:transform
}
#screen-landing .ldm-chrome{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;border-bottom:1px solid var(--fio);background:#1a1b1d}
#screen-landing .ldm-bolas{display:flex;gap:7px}
#screen-landing .ldm-bolas i{width:11px;height:11px;border-radius:50%}
#screen-landing .ldm-bolas i:nth-child(1){background:#e0675d}#screen-landing .ldm-bolas i:nth-child(2){background:#e3b341}#screen-landing .ldm-bolas i:nth-child(3){background:#5bbf5f}
#screen-landing .ldm-url{flex:1;max-width:360px;margin:0 auto;text-align:center;font-size:12px;color:var(--ld-3);background:rgba(255,255,255,.05);border-radius:999px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-landing .ldm-url b{font-weight:500;color:var(--ld-2)}
#screen-landing .ldm-viewport{position:relative;overflow:hidden;height:var(--ldm-h,520px);background:var(--bg-app)}
#screen-landing .ldm-viewport iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:0 0;background:var(--bg-app)}
/* a tela da demo é cortada embaixo: fio de sombra avisa que continua */
#screen-landing .ldm-viewport::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;background:linear-gradient(transparent,rgba(17,18,19,.85))}
@media (min-width:720px){ #screen-landing .ldm-app{--ldm-incl:22deg} }
@media (prefers-reduced-motion:reduce){ #screen-landing .ldm-app{transform:none;opacity:1} }

/* =====================================================
   /planos, /avaliar e /privacidade — v230: PELE DO APP
   =====================================================
   Mesmo padrão da landing v229: as peças comuns (.ld-topo, .ld-btn, .ld-h2,
   .ld-sec, .ld-difs, .ld-final, .ld-rodape) vêm do bloco SCREEN-LANDING via
   :is(). Aqui só o que é de cada tela: .pp-* (planos), .av-* (avaliar, régua
   da /duvida porque quem lê é cliente) e .pv-* (privacidade). No /avaliar,
   .star/.selected e os IDs são os que o avaliar-ui.js manipula. */
/* ===== /planos (#screen-plans-public) ===== */
#screen-plans-public .pp-head{padding:44px 0 28px}
#screen-plans-public .pp-tit{font-size:clamp(36px,8vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
#screen-plans-public .pp-tit span{display:block;color:var(--ld-3)}
#screen-plans-public .pp-periodo{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--ld-fio-forte);border-radius:12px;margin:0}
#screen-plans-public .pp-periodo button{background:none;border:none;color:var(--ld-2);font-size:15px;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
#screen-plans-public .pp-periodo button.active{background:#fafafa;color:var(--bg-app)}
#screen-plans-public .pp-economia{font-size:12px;font-weight:700;color:var(--verde)}
#screen-plans-public .pp-periodo button.active .pp-economia{color:#1d8a4b}
#screen-plans-public .pp-grade{display:grid;gap:14px;padding:12px 0 56px}
#screen-plans-public .pp-plano{position:relative;border:1px solid var(--ld-fio-forte);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column}
#screen-plans-public .pp-plano-destaque{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.035)}
#screen-plans-public .pp-tier{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:14px}
#screen-plans-public .pp-tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bg-app);background:#fafafa;border-radius:4px;padding:3px 6px}
#screen-plans-public .pp-preco{display:flex;align-items:baseline;gap:4px}
#screen-plans-public .pp-valor{font-size:40px;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
#screen-plans-public .pp-per{font-size:15px;color:var(--ld-2)}
#screen-plans-public .pp-cobranca{font-size:14px;color:var(--ld-3);margin:8px 0 0;min-height:21px}
#screen-plans-public .pp-desc{font-size:15.5px;color:var(--ld-apoio);margin:16px 0 18px;line-height:1.5}
#screen-plans-public .pp-itens{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--fio);flex:1}
#screen-plans-public .pp-itens li{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--fio);font-size:15px;line-height:1.45;color:var(--ld-apoio)}
#screen-plans-public .pp-itens svg{width:16px;height:16px;color:var(--verde);flex:none;margin-top:2px}
#screen-plans-public .pp-plano .ld-btn{width:100%;padding:15px 16px;font-size:16px}
#screen-plans-public .pp-faq{border-top:1px solid var(--fio)}
#screen-plans-public .pp-faq details{border-bottom:1px solid var(--fio)}
#screen-plans-public .pp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-size:17px;font-weight:600;color:#fafafa}
#screen-plans-public .pp-faq summary::-webkit-details-marker{display:none}
#screen-plans-public .pp-faq summary svg{width:18px;height:18px;flex:none;color:var(--ld-2);transition:transform .2s}
#screen-plans-public .pp-faq details[open] summary svg{transform:rotate(180deg)}
#screen-plans-public .pp-faq p{margin:-6px 0 20px;font-size:16px;color:var(--ld-2);line-height:1.6;max-width:62ch}

/* ===== /avaliar (#screen-avaliar) — cliente leigo: mesma régua da /duvida ===== */
#screen-avaliar .av-col{max-width:560px;margin:0 auto;padding:32px var(--gutter) 56px}
#screen-avaliar .av-tit{font-size:clamp(26px,5.4vw,33px);line-height:1.2;font-weight:700;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
#screen-avaliar .av-sub{margin:0 0 26px;font-size:17px;color:var(--ld-apoio)}
#screen-avaliar .av-carregando{display:flex;align-items:center;gap:12px;padding:40px 0;color:var(--ld-apoio)}
#screen-avaliar .av-spin{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#fafafa;animation:avGira .8s linear infinite}
@keyframes avGira{to{transform:rotate(360deg)}}
#screen-avaliar .av-adv{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);margin-bottom:28px}
#screen-avaliar .avaliar-adv-avatar{width:52px;height:52px;flex:none;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;overflow:hidden;color:#fafafa}
#screen-avaliar .avaliar-adv-avatar img{width:100%;height:100%;object-fit:cover}
#screen-avaliar .avaliar-adv-nome{font-size:17px;font-weight:700}
#screen-avaliar .avaliar-adv-area{font-size:15px;color:var(--ld-2)}
#screen-avaliar .av-pergunta{display:block;font-size:16px;font-weight:600;margin-bottom:12px}
#screen-avaliar .star-rating{display:flex;gap:6px}
#screen-avaliar .star{background:none;border:none;padding:4px;cursor:pointer;font-size:38px;line-height:1;color:rgba(255,255,255,.18);transition:color .15s,transform .15s}
#screen-avaliar .star:hover{transform:scale(1.08)}
#screen-avaliar .star.selected{color:var(--faixa-ouro)}
#screen-avaliar .avaliar-nota-label{margin:8px 0 30px;font-size:15px;color:var(--ld-2)}
#screen-avaliar .av-campo{margin-bottom:24px}
#screen-avaliar .av-campo label{display:block;font-size:16px;font-weight:600;margin-bottom:9px}
#screen-avaliar .av-campo .optional{font-size:14px;font-weight:400;color:var(--ld-2);margin-left:4px}
#screen-avaliar .av-campo input,#screen-avaliar .av-campo textarea{width:100%;background:rgba(255,255,255,.04);color:#fafafa;border:1px solid transparent;border-left:2px solid rgba(255,255,255,.6);border-radius:4px;font-family:var(--font-app);font-size:17px;line-height:1.5;padding:15px 16px;transition:background .15s,border-color .15s;resize:vertical}
#screen-avaliar .av-campo input::placeholder,#screen-avaliar .av-campo textarea::placeholder{color:rgba(250,250,250,.5)}
#screen-avaliar .av-campo input:focus,#screen-avaliar .av-campo textarea:focus{outline:none;border-left-color:#fafafa;background:rgba(255,255,255,.07)}
#screen-avaliar .avaliar-char-counter{text-align:right;font-size:13px;color:var(--ld-3);margin-top:6px;font-variant-numeric:tabular-nums}
#screen-avaliar .avaliar-erro{color:#ff9d8d;font-size:16px;font-weight:600;margin:0 0 16px}
#screen-avaliar .av-btn{width:100%}
#screen-avaliar .av-fim{padding:24px 0}
#screen-avaliar .av-icone{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}
#screen-avaliar .av-icone-ok{background:rgba(52,217,119,.12);color:var(--verde)}
#screen-avaliar .av-icone-aviso{background:rgba(224,189,102,.12);color:var(--faixa-ouro)}
#screen-avaliar .av-fim h2{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
#screen-avaliar .av-fim p{margin:0 0 28px;color:var(--ld-apoio)}

/* ===== /privacidade (#screen-privacidade) ===== */
#screen-privacidade .pv-doc{max-width:720px;margin:0 auto;padding:40px var(--gutter) 64px}
#screen-privacidade .pv-doc h1{font-size:clamp(30px,6vw,42px);line-height:1.12;font-weight:700;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
#screen-privacidade .priv-vigencia{font-size:15px;color:var(--ld-3);margin:0 0 32px;padding-bottom:28px;border-bottom:1px solid var(--fio)}
#screen-privacidade .priv-body p,#screen-privacidade .priv-body li{font-size:16.5px;line-height:1.7;color:var(--ld-apoio)}
#screen-privacidade .priv-body p{margin:0 0 16px}
#screen-privacidade .priv-body ul{margin:0 0 16px;padding-left:20px}
#screen-privacidade .priv-body li{margin-bottom:8px}
#screen-privacidade .priv-body strong{color:#fafafa}
#screen-privacidade .priv-body h2{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:36px 0 12px;color:#fafafa}
#screen-privacidade .priv-body a{color:#fafafa;text-underline-offset:3px}
#screen-privacidade .priv-contato{margin-top:36px !important;padding-top:24px;border-top:1px solid var(--fio)}
#screen-privacidade .pv-voltar{margin-top:12px}
@media (min-width:600px){
  #screen-avaliar .av-btn{width:auto;min-width:240px}
  #screen-avaliar .av-col{padding-top:48px}
}
@media (min-width:900px){
  #screen-plans-public .pp-head{padding:80px 0 36px}
  #screen-plans-public .pp-grade{grid-template-columns:repeat(3,1fr);padding-bottom:88px}
}

/* Desktop layout para essas duas telas — sobrescreve o display:block do bloco principal */
@media (min-width: 768px) {
  #screen-login .login-wrapper { padding-top: 24px; padding-bottom: 100px; }
}

/* =====================================================
   SCREEN-LOGIN + SCREEN-CADASTRO — dark form (override de estilos existentes)
   ===================================================== */
/* v201: fundo CHAPADO nas três (o cinematográfico ficou só no marketing). O
   reset-senha entra no grupo — ele tinha class="lp-bg" no markup mas não estava
   em NENHUMA regra, então renderizava sem min-height e sem padding. Telas sem a
   nav do app: safe-area por conta do próprio padding (armadilha v119).
   `100dvh` com fallback `100vh` — o `100vh` sozinho corta no iOS. */
#screen-login .lp-bg,
#screen-cadastro .lp-bg,
#screen-reset-senha .lp-bg {
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
/* v231: o TOPO é o .ld-topo compartilhado (bloco SCREEN-LANDING). Ele é
   flex-item da coluna .lp-bg: não pode encolher. */
#screen-login .ld-topo,
#screen-cadastro .ld-topo,
#screen-reset-senha .ld-topo { flex-shrink: 0; }
/* v231: título numa coluna da MESMA largura do formulário (.login-card 420px
   + o --gutter do .login-wrapper, o mesmo recuo da marca no topo), alinhado à esquerda com os campos.
   As regras-base .cl-hero/.cl-title/.cl-sub morreram na v226 junto com a
   /duvida antiga — por isso o título tinha ido parar colado na borda. */
#screen-login .cl-hero,
#screen-cadastro .cl-hero,
#screen-reset-senha .cl-hero {
  flex-shrink: 0;
  width: 100%;
  max-width: calc(420px + 2 * var(--gutter));
  margin: auto auto 0;
  padding: 40px var(--gutter) 10px;
  text-align: left;
}
#screen-login .login-wrapper,
#screen-cadastro .login-wrapper,
#screen-reset-senha .login-wrapper {
  position: relative;
  z-index: 10;
  padding: 16px var(--gutter) 40px;   /* v231: mesma margem do .ld-topo */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: auto;
  margin-bottom: auto;
}
/* v201: o CARD saiu — o conteúdo fica direto sobre o fundo (era vidro: blur 8px
   + borda .10 + raio 16px + inset). Sobrou só a caixa de largura. */
#screen-login .login-card,
#screen-cadastro .login-card,
#screen-reset-senha .login-card {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;               /* = .editp-card, o precedente de formulário (v191) */
}
/* v201: no /reset-senha os campos ficam dentro de wrappers de ETAPA (não são
   filhos diretos do .login-card), então o gap acima não os alcançava e os dois
   campos da etapa 2 colavam. Os wrappers herdam a mesma coluna com gap. */
#screen-reset-senha #reset-form-wrap,
#screen-reset-senha #reset-confirmar-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* TÍTULO: tamanho/peso/cor escopados (a fonte foi trocada na base). Alinhado ao
   .status-title; o clamp de 44px era da era v140. */
#screen-login .cl-title,
#screen-cadastro .cl-title,
#screen-reset-senha .cl-title {
  font-family: var(--font-app);
  font-size: clamp(26px, 5.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fafafa;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
#screen-login .cl-sub,
#screen-cadastro .cl-sub,
#screen-reset-senha .cl-sub {
  font-family: var(--font-app);
  font-size: 16px;
  color: rgba(250,250,250,.66);
  margin: 8px 0 0;
}
/* o dourado brilhante (.lp-italic-gold) é decoração de marketing: desligado nas
   quatro telas desta task. A base segue intacta pra landing. */
#screen-login .lp-italic-gold,
#screen-cadastro .lp-italic-gold,
#screen-reset-senha .lp-italic-gold,
#screen-welcome .lp-italic-gold {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  font-style: normal;
  animation: none;
}
/* CAMPOS (v201): geometria copiada do modal "Editar meus dados" (.editp-*, v191),
   que é o precedente editorial de formulário do app — fio ESQUERDO de 2px em vez
   de borda inteira, raio 4px, fundo .04, padding 13/14, corpo 15px. */
#screen-login .form-group,
#screen-cadastro .form-group,
#screen-reset-senha .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;                /* = .editp-grupo */
  margin-bottom: 0;        /* o gap:18px do .login-card cuida do espaçamento */
}
#screen-login .form-group label,
#screen-cadastro .form-group label,
#screen-reset-senha .form-group label {
  font-size: 15px;
  font-weight: 700;
  color: #fafafa;          /* = .editp-rotulo */
  margin-bottom: 0;
}
#screen-login .form-group input,
#screen-cadastro .form-group input,
#screen-cadastro .form-group select,
#screen-reset-senha .form-group input {
  font-size: 15px;
  padding: 13px 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  border-left: 2px solid rgba(255,255,255,0.6);
  color: #fafafa;
  font-family: inherit;
}
#screen-login .form-group input::placeholder,
#screen-cadastro .form-group input::placeholder,
#screen-reset-senha .form-group input::placeholder {
  color: rgba(255,255,255,0.4);
}
#screen-login .form-group input::placeholder,
#screen-cadastro .form-group input::placeholder,
#screen-reset-senha .form-group input::placeholder {
  color: rgba(250,250,250,0.35);   /* = .editp-input::placeholder */
}
#screen-login .form-group input:focus,
#screen-cadastro .form-group input:focus,
#screen-cadastro .form-group select:focus,
#screen-reset-senha .form-group input:focus {
  border-color: transparent;
  border-left-color: #fafafa;      /* = .editp-input:focus */
  background: rgba(255,255,255,0.06);
  outline: none;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}
/* Options do select abrem com fundo escuro (consistente com tema) */
#screen-cadastro .form-group select option {
  background: #171717;
  color: #fff;
}
#screen-login .password-toggle {
  color: rgba(255,255,255,0.55);
}
#screen-login .password-toggle:hover {
  color: #fff;
}
/* v201: alinhado ao grupo editorial (#screen-dashboard .btn-submit / .status-btn-primary):
   branco CHAPADO #fafafa sobre #111213, sem o GLOW (box-shadow 0 8px 30px branco)
   e sem brightness no hover — os dois eram da era v140. */
/* v203: PÍLULA de volta (o raio 10px do .editp-salvar foi testado na v202 e o
   dono não curtiu). Fica o 999px, igual aos botões primários das telas sem nav
   (.status-btn-primary, .welcome-cta) — o funil inteiro usa a mesma forma.
   O resto da geometria segue o .editp-salvar da v191: padding 14/18, 15px/600. */
#screen-login .btn-submit,
#screen-cadastro .btn-submit,
#screen-reset-senha .btn-submit {
  background: #fafafa;
  color: var(--bg-app);
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  margin-top: 2px;
  transition: background .18s;
}
#screen-login .btn-submit:hover:not(:disabled),
#screen-cadastro .btn-submit:hover:not(:disabled),
#screen-reset-senha .btn-submit:hover:not(:disabled) {
  background: #e8e8ea;      /* = .editp-salvar:hover */
  filter: none;
  opacity: 1;
  transform: none;
}
#screen-login .login-link,
#screen-cadastro .login-link,
#screen-reset-senha .login-link {
  color: rgba(255,255,255,0.55);
}
#screen-login .login-link a,
#screen-cadastro .login-link a,
#screen-reset-senha .login-link a {
  color: #fafafa;
}
#screen-login .login-link a:hover,
#screen-cadastro .login-link a:hover,
#screen-reset-senha .login-link a:hover {
  text-decoration: underline;
}
#screen-login .login-erro,
#screen-cadastro .login-erro,
#screen-reset-senha .login-erro {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}

/* ============================================================
   Reset de senha — extras específicos da tela
   ============================================================
   Reaproveita .login-card / .login-link / .login-erro do login,
   estilizados acima via seletores estendidos. Aqui adicionamos:
   - .forgot-link → "Esqueci minha senha?" abaixo do botão de login
   - .reset-sucesso → caixa verde com ícone (estado pós-envio)
   - .reset-help → texto auxiliar de orientação
   ============================================================ */
#screen-login .forgot-link {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
}
#screen-login .forgot-link a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-weight: 500;
}
#screen-login .forgot-link a:hover {
  color: #fafafa;
  text-decoration: underline;
}
#screen-reset-senha .reset-help {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
  line-height: 1.5;
}
#screen-reset-senha .reset-sucesso {
  display: none;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.30);
  color: #86efac;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  margin-bottom: 16px;
}
#screen-reset-senha .reset-sucesso.show { display: flex; }
#screen-reset-senha .reset-sucesso i {
  font-size: 18px;
  color: #4ade80;
  margin-top: 1px;
  flex-shrink: 0;
}
#screen-reset-senha .reset-sucesso strong {
  color: #bbf7d0;
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

/* CTA secundário na landing (terceiro botão) */
.lp-cta-secondary {
  margin-top: 12px !important;
}

/* =====================================================
   SCREEN-PLANS-PUBLIC — planos & preços
   ===================================================== */

/* Toggle mensal/anual */
.lp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.lp-toggle-label {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-toggle-label.active {
  color: #fff;
  font-weight: 600;
}
.lp-toggle-save {
  font-size: 10px;
  color: #fafafa;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 2px 8px;
  border-radius: 999px;
}
.lp-toggle-switch {
  width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  border: none;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}
.lp-toggle-switch.active {
  background: rgba(255,255,255,.92);
}
.lp-toggle-knob {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: transform 0.3s;
}
.lp-toggle-switch.active .lp-toggle-knob {
  transform: translateX(24px);
}

/* Como funciona (planos-public) */
.lp-how {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 0;
}
.lp-how .lp-features-head {
  margin: 0 auto 32px;
}

/* Plans section */
.lp-plans {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0 40px;
}
.lp-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 20px;
}
@media (min-width: 900px) {
  .lp-plan-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 24px;
  }
}
.lp-plan-card {
  position: relative;
  background: linear-gradient(135deg, rgba(28,30,29,0.85), rgba(23,23,23,0.65));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.lp-plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.5);
}
.lp-plan-card-pro {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(28,30,29,0.85) 60%);
  border-color: rgba(255,255,255,0.45);
}
/* v140: selo em PLATINA animada (mesmo tratamento da faixa Diamante) */
.lp-plan-badge-popular {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #111;
  background: linear-gradient(120deg,#737373,#e5e5e5,#d4d4d4,#e5e5e5,#737373);
  background-size: 300% 100%;
  animation: goldShift 3.2s ease infinite;
  border-radius: 999px;
  padding: 4px 10px;
}
.lp-plan-tier {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lp-plan-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  margin-top: 10px;
  white-space: nowrap;
}
.lp-plan-per {
  font-family: var(--font-app);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-left: 4px;
  white-space: nowrap;
}
.lp-plan-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 14px;
  line-height: 1.55;
  min-height: 3em;
}
.lp-plan-features {
  list-style: none;
  margin: 24px 0 24px;
  padding: 0;
}
.lp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
  line-height: 1.5;
}
.lp-plan-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fafafa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  margin-top: 1px;
}
.lp-plan-card-pro .lp-plan-check {
  background: rgba(255,255,255,.92);
  color: #111;
}
.lp-plan-btn {
  background: #fff;
  color: #111;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: auto;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.lp-plan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  filter: brightness(1.05);
}
.lp-plan-btn-pro {
  background: rgba(255,255,255,.92);
  color: #111;
  box-shadow: 0 8px 30px -8px rgba(255,255,255,0.6);
}

/* FAQ */
.lp-faq {
  position: relative;
  z-index: 10;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.lp-faq-item {
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
}
.lp-faq-item > summary {
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  list-style: none;
}
.lp-faq-item > summary::-webkit-details-marker { display: none; }
.lp-faq-item > summary i {
  color: #fafafa;
  font-size: 13px;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.lp-faq-item[open] > summary i {
  transform: rotate(180deg);
}
.lp-faq-item > p {
  padding: 0 22px 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: -2px 0 0;
}

/* =====================================================
   SCREEN-PLANS-PUBLIC — design completo
   ===================================================== */

/* Section helpers */
.lp-section-bordered {
  border-top: 1px solid rgba(255,255,255,0.10);
}
.lp-section-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}
.lp-section-head .lp-h2 { margin-top: 14px; }
.lp-section-sub {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  line-height: 1.6;
  margin: 20px auto 0;
  max-width: 540px;
}
.lp-eyebrow-tag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.9);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  margin-left: 4px;
}

/* Dashboard Mockup */
.lp-mockup {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.lp-mockup-window {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,18,48,0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.8);
}
/* v124: o mock da landing reusa o markup real do painel e herda a base de
   vidro fumê (tokens --glass via o grupo LIQUID GLASS FUMÊ, pra espelhar o
   /painel real). PORÉM cancela o backdrop-filter próprio: a .lp-mockup-window
   já tem blur(12px), então os met-* dentro dela não podem blurrar de novo
   (vidro sobre vidro = pior caso de perf em Android fraco). */
.lp-mockup-window .met-card,
.lp-mockup-window .met-grafico-card,
.lp-mockup-window .met-aval-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.lp-mockup-titlebar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.3);
}
.lp-mockup-dots { display: flex; gap: 8px; }
.lp-mockup-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.lp-mockup-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.lp-mockup-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 600px;
}
@media (max-width: 768px) {
  .lp-mockup-body { grid-template-columns: 1fr; min-height: auto; }
  .lp-mockup-sidebar { display: none; }
}
.lp-mockup-sidebar {
  border-right: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.lp-mockup-plan {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  padding: 12px;
}
.lp-mockup-plan-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.9);
}
.lp-mockup-plan-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  color: #fff;
  margin-top: 4px;
  line-height: 1;
}
.lp-mockup-plan-renew {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.lp-mockup-plan-btn {
  width: 100%;
  margin-top: 12px;
  background: rgba(255,255,255,.92);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.lp-mockup-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-mockup-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  border-radius: 6px;
  margin-bottom: 2px;
}
.lp-mockup-nav li.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.lp-mockup-nav li.active i { color: #fafafa; }
.lp-mockup-nav li i { font-size: 14px; min-width: 16px; }
.lp-mockup-nav li > span:first-of-type { flex: 1; }
.lp-mockup-nav-count {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.lp-mockup-user {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-mockup-user-info { min-width: 0; flex: 1; }
.lp-mockup-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(135deg, #171717, #1d3168);
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.10);
}
.lp-mockup-avatar.gold {
  background: linear-gradient(rgba(255,255,255,.92),rgba(212,212,212,.9));
  color: #111;
  border-color: rgba(255,255,255,0.4);
}
.lp-mockup-user-name {
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-mockup-user-oab {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
}
.lp-mockup-settings {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

.lp-mockup-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lp-mockup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.lp-mockup-search {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.lp-mockup-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-mockup-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(110,231,183,0.9);
  background: rgba(110,231,183,0.10);
  border: 1px solid rgba(110,231,183,0.25);
  padding: 4px 10px;
  border-radius: 999px;
}
.lp-mockup-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
}
.lp-mockup-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lp-mockup-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) { .lp-mockup-kpis { grid-template-columns: 1fr; } }
.lp-mockup-kpi {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  padding: 14px;
}
.lp-mockup-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.lp-mockup-kpi-head i { color: rgba(255,255,255,0.8); }
.lp-mockup-kpi-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  color: #fff;
  margin-top: 8px;
  line-height: 1;
}
.lp-mockup-kpi-delta {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  margin-top: 6px;
}
.lp-mockup-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1024px) {
  .lp-mockup-row { grid-template-columns: 7fr 5fr; }
}
.lp-mockup-panel {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  padding: 18px;
}
.lp-mockup-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lp-mockup-panel-eyebrow {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.lp-mockup-panel-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  color: #fff;
  margin-top: 2px;
  line-height: 1;
}
.lp-mockup-tabs { display: flex; gap: 4px; font-size: 11px; }
.lp-mockup-tabs span {
  padding: 4px 8px;
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
}
.lp-mockup-tabs span.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.lp-mockup-sparkline { margin-top: 14px; }
.lp-mockup-sparkline svg { width: 100%; height: 64px; display: block; }
.lp-mockup-sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 640px) {
  .lp-mockup-sub-row { grid-template-columns: 1fr; }
}
.lp-mockup-sub-title {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.lp-mockup-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 88px;
}
.lp-mockup-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.lp-mockup-bar > div {
  width: 100%;
  background: linear-gradient(to top, rgba(255,255,255,0.6), rgba(255,255,255,0.9));
  border-radius: 4px 4px 0 0;
  min-height: 6px;
  margin-top: auto;
}
.lp-mockup-bar > span {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.lp-mockup-sources {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.lp-mockup-sources li { margin-bottom: 8px; }
.lp-mockup-source-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.lp-mockup-source-head span:last-child { color: rgba(255,255,255,0.5); }
.lp-mockup-source-bar {
  margin-top: 4px;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.lp-mockup-source-bar > div {
  height: 100%;
  background: linear-gradient(to right, #fafafa, #f0d27e);
  border-radius: 3px;
}
.lp-mockup-link {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  white-space: nowrap;
}
.lp-mockup-contacts {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.lp-mockup-contacts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lp-mockup-contacts li:last-child { border-bottom: none; }
.lp-mockup-contact-info { flex: 1; min-width: 0; }
.lp-mockup-contact-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lp-mockup-contact-name {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-mockup-contact-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.lp-mockup-contact-sub > span { color: rgba(255,255,255,0.8); }
.lp-mockup-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}
.lp-mockup-pill.gold {
  background: rgba(255,255,255,0.15);
  color: #fafafa;
  border-color: rgba(255,255,255,0.4);
}
.lp-mockup-pill.green {
  background: rgba(16,185,129,0.10);
  color: rgba(110,231,183,0.9);
  border-color: rgba(16,185,129,0.3);
}
.lp-mockup-time {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

/* Logo Cloud */
.lp-logos {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
}
.lp-logos-head {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
.lp-logos-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 640px) { .lp-logos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .lp-logos-grid { grid-template-columns: repeat(8, 1fr); } }
.lp-logos-grid span {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.45);
  line-height: 1.2;
  cursor: default;
  transition: color 0.2s;
}
.lp-logos-grid span:hover { color: #fff; }

/* Features section (full) */
.lp-features-section {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}
.lp-feature-bullets {
  list-style: none;
  padding: 18px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-feature-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.lp-feature-bullets li i {
  color: #fafafa;
  flex-shrink: 0;
  font-size: 11px;
}

/* How it Works steps */
.lp-how-section {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}
.lp-how-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}
@media (min-width: 768px) {
  .lp-how-head { grid-template-columns: 1fr 1fr; }
}
.lp-how-head .lp-h2 { margin-top: 14px; }
.lp-how-side {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  line-height: 1.7;
  max-width: 420px;
  margin: 0;
}
@media (min-width: 768px) { .lp-how-side { margin-left: auto; } }
.lp-steps-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position: relative;
}
@media (min-width: 768px) {
  .lp-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.lp-step-line { display: none; }
@media (min-width: 768px) {
  .lp-step-line {
    display: block;
    position: absolute;
    top: 48px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  }
}
.lp-step {
  position: relative;
  border-radius: 16px;
  padding: 26px;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
}
.lp-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(28,30,29,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
  font-size: 16px;
  flex-shrink: 0;
}
.lp-step-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
.lp-step h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 22px 0 0;
  color: #fff;
}
.lp-step p {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* Pricing section with watermark */
.lp-pricing-section {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 48px;
  text-align: center;
}
.lp-pricing-head { max-width: 880px; margin: 0 auto; }
.lp-watermark {
  margin-top: 24px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(48px, 9vw, 116px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-watermark-line-1 { color: #fff; font-style: italic; }
.lp-watermark-line-2 {
  background-image: linear-gradient(to right, #6a4d18, #fafafa, #f0d27e, #fafafa, #6a4d18);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lp-pricing-sub {
  margin: 16px auto 0;
  max-width: 480px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  line-height: 1.6;
}
.lp-pricing-section .lp-toggle { margin-top: 36px; }
.lp-pricing-section .lp-plan-grid {
  margin-top: 40px;
  text-align: left;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ extra */
.lp-faq .lp-section-head { max-width: 520px; }
.lp-faq-foot {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.lp-faq-foot a {
  color: #fafafa;
  text-decoration: none;
}
.lp-faq-foot a:hover { text-decoration: underline; }

/* Final CTA */
.lp-final-cta {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
}
.lp-final-cta-box {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 56px 28px;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
}
.lp-final-cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.25), transparent 70%);
  pointer-events: none;
}
.lp-final-cta-box h2 {
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  color: #fff;
}
.lp-final-cta-box > p {
  position: relative;
  margin: 22px auto 0;
  max-width: 480px;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  line-height: 1.6;
}
.lp-final-cta-box .lp-cta-row {
  position: relative;
  margin-top: 32px;
  justify-content: center;
}
.lp-final-cta-foot {
  position: relative;
  margin-top: 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Footer */
.lp-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.lp-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
@media (min-width: 768px) {
  .lp-footer-inner { flex-direction: row; text-align: left; }
}
.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-footer-sep { color: rgba(255,255,255,0.3); }
.lp-footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lp-footer-links a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.lp-footer-links a:hover { color: #fff; }

/* Hover nos itens do nav do mockup */
.mock-nav-item {
  transition: all 0.2s ease;
  cursor: pointer;
}
.mock-nav-item:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: inset 3px 0 0 #fafafa, 0 0 12px rgba(255,255,255,0.15);
  color: #fafafa;
}
.mock-nav-item:hover i {
  color: #fafafa;
}

/* Parallax suave no mockup do dashboard */
.mock-dashboard {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Hover nos contatos recentes e barras de visualização */
.mock-contact-item, .mock-stat-bar {
  transition: all 0.25s ease;
  cursor: pointer;
}
.mock-contact-item {
  border: 1px solid transparent;
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
}
.mock-contact-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  transform: translateX(4px);
}
.mock-stat-bar:hover {
  filter: brightness(1.3);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Stats animados (social proof) */
.lp-stats {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
}
.lp-stats-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .lp-stats-row { grid-template-columns: repeat(3, 1fr); }
}
.lp-stat-item { text-align: center; }
.lp-stat-num {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  background-image: linear-gradient(to right, #6a4d18, #fafafa, #f0d27e, #fafafa, #6a4d18);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lp-stat-plus {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 600;
  color: #fafafa;
  vertical-align: 0.1em;
  margin-left: 2px;
}
.lp-stat-label {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
}

/* Divisória animada entre seções */
.lp-divider {
  padding: 0 24px;
  overflow: hidden;
  margin: 8px 0;
  position: relative;
  z-index: 10;
}
.lp-divider-line {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.4) 20%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.4) 80%,
    transparent
  );
  width: 0%;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.lp-divider-line.visible { width: 100%; }

/* =====================================================
   HEADER + SIDEBAR — telas autenticadas (dark dourado)
   ===================================================== */

/* Header escuro com border-bottom sutil */
#screen-dashboard .header,
#screen-ajuda .header,
#screen-jurisprudencia .header,
#screen-feed .header,
#screen-profile .header,
#screen-painel .header,
#screen-admin .header {
  background: rgba(17,18,19,.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* v174: a reserva de padding-right pro #dispo-fixo saiu — o toggle não é mais
   fixo/sobreposto (virou .dispo-eq no header da tela de Leads, como flex child
   do .header-row). As demais telas não têm mais toggle no topo. */
/* flex:1 + width:100% — no desktop o .header vira display:flex e sem isso o
   .header-row encolhe pro tamanho do conteúdo (o space-between perdia efeito e
   o toggle colava no título em vez de ir pra direita). */
#screen-dashboard .header .header-row{gap:14px;flex:1 1 auto;width:100%}
#screen-dashboard .header .header-titulo{min-width:0}

/* v140: wordmark do header em stack de sistema (Spectral aposentada) */
#screen-dashboard .header h1,
#screen-ajuda .header h1,
#screen-jurisprudencia .header h1,
#screen-feed .header h1,
#screen-profile .header h1,
#screen-painel .header h1,
#screen-admin .header h1 {
  font-family: var(--font-app);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* v140: ícone do título neutro (fim do dourado de UI) */
#screen-dashboard .header h1 i,
#screen-ajuda .header h1 i,
#screen-jurisprudencia .header h1 i,
#screen-feed .header h1 i,
#screen-profile .header h1 i,
#screen-painel .header h1 i,
#screen-admin .header h1 i {
  color: rgba(250,250,250,.9);
}

/* v128: bg da sidebar (#171717) e do conteúdo (#1c1e1d) no desktop foram pro
   bloco da .app-nav / .main-content do @media(min-width:768px) acima (a nav não é
   mais filha de #screen-* — consolidada numa .app-nav única fora das .screen). */

/* Legibilidade nas telas autenticadas dark */
#screen-dashboard .main-content,
#screen-ajuda .main-content,
#screen-jurisprudencia .main-content,
#screen-feed .main-content,
#screen-profile .main-content,
#screen-painel .main-content,
#screen-admin .main-content {
  color: #fafafa;
}

/* Global text-light fallback */
.text-light, [style*="color:var(--text-light)"] {
  color: rgba(250,250,250,0.55) !important;
}

/* =====================================================
   ALINHAMENTO COM LANDING — telas autenticadas (glass dark + gold)
   Escopo: #screen-dashboard, #screen-jurisprudencia, #screen-feed,
           #screen-profile, #screen-admin
   ===================================================== */

/* SECTION TITLES — Cormorant + ícone dourado + badge dourada */
/* v141: cabeçalho de seção EDITORIAL — "LABEL ——— meta". A linha é o ::after
   (flex:1, order 1); a badge/meta existente vai depois dela (order 2). Ícones FA
   dos títulos saem (o protótipo não usa; a variante "Em tempo real" ganha dot
   verde pulsante via ::before no title do dashboard). */
#screen-dashboard .section-title,
#screen-ajuda .section-title,
#screen-jurisprudencia .section-title,
#screen-feed .section-title,
#screen-profile .section-title,
#screen-painel .section-title,
#screen-admin .section-title,
#screen-perfil-publico .section-title,
#seguir-modal .section-title,
.lp-mockup-window .section-title {
  font-family: var(--font-app) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(250,250,250,0.6) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#screen-dashboard .section-title::after,
#screen-ajuda .section-title::after,
#screen-jurisprudencia .section-title::after,
#screen-feed .section-title::after,
#screen-profile .section-title::after,
#screen-painel .section-title::after,
#screen-admin .section-title::after,
#screen-perfil-publico .section-title::after,
#seguir-modal .section-title::after {
  content:''; flex:1; order:1; height:1px; background:rgba(255,255,255,0.07);
}
#screen-dashboard .section-title .badge,
#screen-admin .section-title .badge { order:2; }
/* variante "Em tempo real" (título dos leads do dashboard): dot verde pulsante */
#screen-dashboard #dash-tab-leads .leads-section .section-title::before {
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:#34d977; box-shadow:0 0 8px rgba(52,217,119,.6);
  animation:livePulse 2.4s ease-out infinite;
}
/* Funil de conversão do admin (v95) — escopado a #screen-admin */
#screen-admin .funil-row{margin-bottom:12px}
#screen-admin .funil-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
#screen-admin .funil-lbl{font-size:13px;color:rgba(255,255,255,0.78);display:inline-flex;align-items:center;gap:7px}
#screen-admin .funil-lbl i{color:#fafafa;font-size:12px;width:14px;text-align:center}
#screen-admin .funil-val{font-size:16px;font-weight:700;color:#fff}
#screen-admin .funil-bar-track{height:3px;border-radius:3px;background:rgba(255,255,255,0.07);overflow:hidden}
#screen-admin .funil-bar{height:100%;border-radius:3px;background:rgba(250,250,250,0.7);min-width:4px;transition:width .4s ease}
#screen-admin .funil-pass{font-size:11px;color:rgba(255,255,255,0.62);margin-top:4px}
#screen-admin .funil-total{margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.08);font-size:13px;color:rgba(255,255,255,0.7)}
#screen-admin .funil-total strong{color:#fff;font-weight:700}
#screen-dashboard .section-title i,
#screen-ajuda .section-title i,
#screen-jurisprudencia .section-title i,
#screen-feed .section-title i,
#screen-profile .section-title i,
#screen-painel .section-title i,
#screen-admin .section-title i,
#screen-perfil-publico .section-title i,
.lp-mockup-window .section-title i {
  display: none !important; /* v141: editorial sem ícone no label */
}
#screen-dashboard .section-title .badge,
#screen-admin .section-title .badge {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(250,250,250,.6) !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 1px 7px !important;
  letter-spacing: 0 !important;
}

/* Fundo ambiente (v140) — grafite #171717 com profundidade por radial-gradients
   brancos MUITO suaves (fim do navy/dourado/roxo), pro vidro ter o que refratar.
   Escopado às telas do app; fixo, atrás do conteúdo (z-index:-1). */
#screen-dashboard.active::before,
#screen-ajuda.active::before,
#screen-jurisprudencia.active::before,
#screen-feed.active::before,
#screen-profile.active::before,
#screen-painel.active::before,
#screen-admin.active::before,
#screen-perfil-publico.active::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--bg-app); /* v141: editorial chapado (v158: token) */
}

/* ============================================================
   v141 — EDITORIAL: cards de vidro ficam RESERVADOS a leads na fila (dashboard
   .lead-card) e ao mockup da landing (tela pública, fora do escopo do v141).
   Todo o resto virou conteúdo CHAPADO sobre #111213 com fios de 1px — ver os
   blocos "EDITORIAL v141" adiante. Escopo #screen-* mantido (armadilha v124).
   ============================================================ */
#screen-dashboard .lead-card,
.lp-mockup-window .met-card,
.lp-mockup-window .met-grafico-card,
.lp-mockup-window .met-aval-card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border) !important;
  border-top: 1px solid rgba(255,255,255,.3) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  color: #fafafa !important;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* fio de LUZ no topo — só nos cards que continuam cards */
#screen-dashboard .lead-card::before,
.lp-mockup-window .met-card::before,
.lp-mockup-window .met-grafico-card::before,
.lp-mockup-window .met-aval-card::before {
  content:""; position:absolute; top:0; left:16px; right:16px; height:1px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
/* hover de elevação (só desktop) — só no card de lead */
@media (hover:hover) and (min-width:768px){
  #screen-dashboard .lead-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(0,0,0,.65) !important;
  }
}

/* ============================================================
   EDITORIAL v141 — superfícies chapadas
   ============================================================ */
/* 5. fileira de stats com divisores verticais (dashboard + perfil) */
#screen-dashboard .dash-stats { display:flex !important; gap:0 !important; grid-template-columns:none !important; }
#screen-dashboard .stat-card {
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:#fafafa !important; text-align:left !important; overflow:visible !important;
}
#screen-dashboard .stat-card { flex:1 !important; padding:4px 0 !important; }
#screen-dashboard .stat-card + .stat-card { border-left:1px solid rgba(255,255,255,.1) !important; padding-left:16px !important; }
/* métricas do painel/admin: chapadas (sem caixa) */
#screen-painel .met-card,
#screen-painel .met-grafico-card,
#screen-painel .met-aval-card,
#screen-admin .met-card,
#screen-admin .met-grafico-card,
#screen-admin .met-aval-card {
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:#fafafa !important;
}
#screen-painel .met-card, #screen-admin .met-card { border-bottom:1px solid rgba(255,255,255,.06) !important; }
/* 6. listas editoriais: fileiras sem card com fio embaixo */
/* v215: #screen-jurisprudencia .juris-card saiu — a lista de juris virou
   .juris-row nativa (fileira editorial de fábrica, sem card pra despir) */
#screen-painel .rank-card,
#screen-feed .post-card,
#screen-admin .lead-card {
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  color:#fafafa !important; padding:13px 0 !important; margin-bottom:0 !important;
  overflow:visible !important;
}
#screen-painel .rank-card:hover { transform:none !important; box-shadow:none !important; background:rgba(255,255,255,.02) !important; }
/* seções do perfil: chapadas, separadas pelos section-titles com linha */
#screen-profile .profile-bio,
#screen-painel .perf-section,
#screen-profile .plan-banner,
#screen-profile .profile-agenda {
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:#fafafa !important; padding-left:0 !important; padding-right:0 !important;
}

/* v220 — /ADMIN: o último resíduo da pele antiga nos BOTÕES de aprovação.
   O resto da tela já tinha sido portado na v141 (card de cadastro despido pra
   fileira com fio, met-card com border-bottom, funil e section-titles no padrão)
   — medido antes de mexer: fundo chapado herdado, Inter, card sem fundo/raio/
   sombra com fio de 1px embaixo, section-title 11px/600/.6. O que sobrava era o
   par de botões: "Aprovar" SÓLIDO VERDE (#34d977 — na v141 verde é cor de ESTADO,
   nunca preenchimento de botão) ao lado de "Reprovar" vermelho translúcido, os
   dois em raio 8px.
   Agora seguem a hierarquia por CONTRASTE das outras telas (v206): primário
   sólido branco, secundário em contorno. O vermelho SOBREVIVE no texto e no fio
   do Reprovar — perigo é dado, não enfeite —, mas perde o preenchimento.
   Raio 10px = mesmo dos submits editoriais (.editp-salvar, v191).
   !important porque o markup do admin vem com style inline do render. */
#screen-admin .btn-accept{
  background:#fafafa !important; color:#111213 !important;
  border:1px solid #fafafa !important; border-radius:10px !important; font-weight:600 !important;
}
#screen-admin .btn-accept:hover{background:#e8e8ea !important;filter:none !important}
#screen-admin .btn-decline{
  background:none !important; color:#e07a6a !important;
  border:1px solid rgba(224,122,106,.35) !important; border-radius:10px !important; font-weight:600 !important;
}
#screen-admin .btn-decline:hover{background:rgba(224,122,106,.08) !important}

/* NÚMEROS (KPIs) em Spectral + tabular-nums (v124). Inclui os do painel
   (.met-card .num/.met-aval-media/.met-aval-rapida-pct) que eram Inter; o
   pct deixa de ser dourado (spec: número de KPI nunca dourado → branco). */
#screen-dashboard .stat-card .num,
#screen-painel .rank-points,
#screen-painel .perf-metric .perf-val,
#screen-painel .met-card .num,
#screen-painel .met-aval-media,
#screen-painel .met-aval-rapida-pct,
#screen-admin .met-card .num,
#screen-admin .met-aval-media,
#screen-admin .met-aval-rapida-pct,
.lp-mockup-window .met-card .num,
.lp-mockup-window .met-aval-media,
.lp-mockup-window .met-aval-rapida-pct {
  font-family: var(--font-app) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: #fafafa !important;
  letter-spacing: -0.02em !important;
}
/* RÓTULOS em Barlow maiúsculo (v124) */
#screen-dashboard .stat-card .label,
#screen-painel .rank-pts-label,
#screen-painel .perf-metric .perf-lbl,
#screen-painel .perf-section .perf-title,
#screen-painel .met-card .label,
#screen-painel .met-aval-rapida-lbl,
#screen-painel .met-aval-total,
#screen-admin .met-card .label,
#screen-admin .met-aval-rapida-lbl,
#screen-admin .met-aval-total,
.lp-mockup-window .met-card .label,
.lp-mockup-window .met-aval-rapida-lbl,
.lp-mockup-window .met-aval-total {
  color: rgba(250,250,250,0.5) !important;
  font-family: var(--font-app) !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 5px !important;
}

/* RANKING — textos (v141 editorial) */
#screen-painel .rank-name { color: rgba(250,250,250,.9) !important; font-weight: 600 !important; font-size: 13.5px !important; }
#screen-painel .rank-spec { color: rgba(250,250,250,0.5) !important; font-size: 12px !important; }
/* v189: coluna do pódio (fio + número). O !important vence o antigo override do
   emoji; a cor/tamanho do número vêm de .rank-pos-num (base). */
#screen-painel .rank-pos { width: 30px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
#screen-painel .rank-rating { color: rgba(250,250,250,.6) !important; }
#screen-painel .rank-avatar {
  width: 37px !important; height: 37px !important; font-size: 12.5px !important; font-weight: 600 !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fafafa !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
#screen-painel .rank-points { font-size: 15px !important; }
#screen-painel .rank-pts-label { font-size: 10.5px !important; color: rgba(250,250,250,0.4) !important; margin-top: 0 !important; }
#screen-painel .search-bar input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 11px 14px 11px 42px !important; /* v168: 42px à esq. preserva espaço da lupa (regra base .search-bar input); o shorthand anterior zerava e o placeholder ficava embaixo do ícone */
  font-size: 13.5px !important;
  color: #fafafa !important;
}
#screen-painel .search-bar input::placeholder { color: rgba(250,250,250,0.4) !important; }
#screen-painel .search-bar i { color: rgba(250,250,250,0.4) !important; font-size: 15px !important; }

/* FEED — textos */
#screen-feed .post-author { color: #fff !important; font-weight: 600 !important; }
#screen-feed .post-meta { color: rgba(255,255,255,0.62) !important; }
#screen-feed .post-body { color: rgba(255,255,255,0.78) !important; }
#screen-feed .post-tag { color: #fafafa !important; font-weight: 600 !important; }
#screen-feed .post-actions { border-top-color: rgba(255,255,255,0.10) !important; }
#screen-feed .post-action { color: rgba(255,255,255,0.55) !important; }
#screen-feed .post-action:hover { color: #fff !important; }
#screen-feed .post-action.liked { color: #ef4444 !important; }
#screen-feed .post-avatar {
  width: 37px !important; height: 37px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fafafa !important;
  font-size: 12.5px !important; font-weight: 600 !important;
}
/* Comentários das publicações (v100) — escopado ao feed (tema escuro) */
#screen-feed .coment-section { display:none; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.08); }
#screen-feed .coment-vazio { font-size:13px; color:rgba(255,255,255,0.62); padding:6px 0 10px; text-align:center; }
#screen-feed .coment-item { display:flex; gap:10px; padding:8px 0; }
/* v216: avatar neutro da v141 (mesmo .06/.1/#fafafa do #screen-feed .post-avatar
   logo acima) — a cor do texto TEM de virar clara junto com o fundo, senão o #111
   antigo ficaria escuro sobre escuro. */
#screen-feed .coment-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); box-sizing:border-box; color:#fafafa; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
#screen-feed .coment-corpo { flex:1; min-width:0; }
#screen-feed .coment-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#screen-feed .coment-autor { font-size:13px; font-weight:700; color:#fff; }
#screen-feed .coment-meta { font-size:11px; color:rgba(255,255,255,0.62); }
#screen-feed .coment-del { margin-left:auto; background:none; border:none; color:rgba(255,255,255,0.35); font-size:12px; cursor:pointer; padding:2px 6px; transition:.18s; }
#screen-feed .coment-del:hover { color:#ef4444; }
#screen-feed .coment-texto { font-size:13px; line-height:1.45; color:rgba(255,255,255,0.8); margin-top:2px; word-wrap:break-word; }
#screen-feed .coment-like { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:0; background:none; border:none; font-family:inherit; font-size:12px; color:rgba(255,255,255,0.45); cursor:pointer; transition:.18s; }
#screen-feed .coment-like:hover { color:#fff; }
#screen-feed .coment-like.liked { color:#ef4444; }
#screen-feed .coment-mais { display:block; margin:8px auto 4px; padding:6px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.1); color:#fafafa; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
#screen-feed .coment-form { margin-top:10px; }
#screen-feed .coment-input { width:100%; box-sizing:border-box; resize:vertical; min-height:42px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.20); color:#fff; font-family:inherit; font-size:13px; line-height:1.4; }
#screen-feed .coment-input:focus { outline:none; border-color:rgba(255,255,255,0.5); }
#screen-feed .coment-input::placeholder { color:rgba(255,255,255,0.55); }
/* time-input da agenda fica dentro do card de vidro .profile-agenda: fundo mais
   opaco + borda visível pra moldura não sumir sobre o vidro (v124, escopado). */
#screen-profile .agenda-horarios input[type=time] { background:rgba(0,0,0,0.18); border-color:rgba(255,255,255,0.20); }
#screen-feed .coment-form-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
#screen-feed .coment-contador { font-size:11px; color:rgba(255,255,255,0.4); }
/* v216: fill CHAPADO #fafafa. O raio 999px FICA: é botão de ação inline (91x32),
   par do .coment-mais logo acima, não o submit de largura cheia do .editp-salvar. */
#screen-feed .coment-enviar { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; border:none; background:#fafafa; color:#111; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.18s; }
#screen-feed .coment-enviar:hover { filter:brightness(1.08); }
/* v215: overrides dos .juris-card/.juris-title/etc. removidos junto com os
   cards (a .juris-row nova já nasce na pele editorial, sem !important) */

/* DASHBOARD/ADMIN — lead-card extras (v140: sem border-left dourado; badge de
   área neutra em caixa alta; timer com trilho de 2px na cor da fase) */
#screen-dashboard .lead-question { color: #fafafa !important; font-weight: 600 !important; }
#screen-dashboard .lead-masked,
#screen-admin .lead-masked {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(250,250,250,0.55) !important;
}
#screen-dashboard .lead-masked .mask-dots,
#screen-admin .lead-masked .mask-dots { color: rgba(250,250,250,0.85) !important; }
#screen-dashboard .lead-area,
#screen-admin .lead-area {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(250,250,250,0.85) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}
#screen-dashboard .lead-region,
#screen-admin .lead-region {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(250,250,250,0.65) !important;
}
#screen-dashboard .lead-viewers,
#screen-admin .lead-viewers { color: rgba(250,250,250,0.55) !important; }
#screen-dashboard .timer-bar,
#screen-admin .timer-bar { height: 2px !important; background: rgba(255,255,255,0.07) !important; }
#screen-dashboard .lead-timer,
#screen-admin .lead-timer { color: var(--txt-2) !important; }

/* v140 — RODAPÉ DE AÇÃO do card de lead: duas fileiras full-width sangrando até
   as bordas do card (margin negativa anula o padding 18px do .lead-card).
   Handlers acceptLead/declineLead intocados (as classes .btn-accept/.btn-decline
   seguem no botão). A seta anda no trilho com pulso triplo (ctaArrow). */
#screen-dashboard .lead-actions,
#screen-admin .lead-actions {
  display: block;
  margin: 14px -18px -18px;
  gap: 0;
}
#screen-dashboard .lead-actions .lead-cta-assumir,
#screen-admin .lead-actions .lead-cta-assumir {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: none; border: none; cursor: pointer;
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 15px 16px;
  font-family: var(--font-app); font-size: 15px; font-weight: 600;
  color: #a9edc3; text-shadow: 0 0 9px rgba(120,230,165,.35);
  border-radius: 0;
  transition: background .2s, color .2s;
}
#screen-dashboard .lead-actions .lead-cta-assumir:hover,
#screen-admin .lead-actions .lead-cta-assumir:hover { background: rgba(120,230,165,.05); color: #c4f5d6; }
#screen-dashboard .lead-actions .lead-cta-assumir:active,
#screen-admin .lead-actions .lead-cta-assumir:active { background: rgba(120,230,165,.09); }
.lead-cta-assumir .cta-trilho { position: relative; flex: 1; height: 20px; max-width: 120px; overflow: hidden; }
.lead-cta-assumir .cta-seta {
  position: absolute; left: 6px; top: 50%; margin-top: -11px;
  font-size: 17px; line-height: 22px; opacity: 0;
  animation: ctaArrow 4.2s ease-in-out infinite;
}
@keyframes ctaArrow{0%{left:6px;opacity:0;transform:scale(1);}6%{opacity:1;}30%{left:calc(100% - 16px);opacity:1;transform:scale(1);}38%{transform:scale(1);}44%{transform:scale(1.28);}50%{transform:scale(1);}56%{transform:scale(1.28);}62%{transform:scale(1);}68%{transform:scale(1.28);}74%{opacity:1;transform:scale(1);}82%{opacity:0;}100%{left:calc(100% - 16px);opacity:0;transform:scale(1);}}
@media (prefers-reduced-motion: reduce){ .lead-cta-assumir .cta-seta{ animation:none; opacity:1; left:auto; right:6px; } }
#screen-dashboard .lead-actions .lead-cta-recusar,
#screen-admin .lead-actions .lead-cta-recusar {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: 0 0 var(--glass-radius) var(--glass-radius);
  padding: 12px 16px; text-align: left;
  font-family: var(--font-app); font-size: 13px; font-weight: 500;
  color: rgba(232,158,150,.8);
  transition: color .2s, background .2s;
}
#screen-dashboard .lead-actions .lead-cta-recusar:hover,
#screen-admin .lead-actions .lead-cta-recusar:hover { color: #f2b3ac; background: rgba(232,158,150,.04); }

/* ============================================================
   CARD DE NOTIFICAÇÕES fumê (v137) — substitui o notif-banner inline e o
   roi-banner (removido). Escopado a #screen-dashboard (regra do tema: glass
   nunca por classe global). O colapso de ALTURA anima no wrapper .card-slot
   (animar height no card quebraria a perf do backdrop-filter). */
#screen-dashboard .card-slot {
  margin: 0 20px 12px; overflow: hidden; max-height: 240px;
  transition: max-height .35s ease, margin-bottom .35s ease, opacity .35s ease;
}
#screen-dashboard .card-slot.colapsado { max-height: 0; margin-bottom: 0; opacity: 0; }
#screen-dashboard .fume-card {
  position: relative; display: flex; align-items: center; gap: 13px;
  border-radius: 12px; transform-origin: center;
  box-shadow: none;
}
/* v140: fios de LUZ brancos finos no topo/base (era dourado). Card de destaque
   usa a variante mais clara do vidro. */
/* v141: fios de luz do card de aviso removidos (fileira editorial chapada) */
#screen-dashboard .fume-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px 14px;
}
#screen-dashboard .notif-icone {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:none; border:none; width:auto; height:auto;
}
#screen-dashboard .notif-sino { width:17px; height:17px; stroke:rgba(250,250,250,.7); }
#screen-dashboard .notif-textos { flex:1; min-width:0; }
/* v142: título do banner — "Notificações" em caps 11px .85 (também veste o
   eyebrow do card de punição, que compartilha a classe) */
#screen-dashboard .notif-eyebrow {
  font-family:var(--font-app); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(250,250,250,.85); margin-bottom:3px;
}
#screen-dashboard .notif-titulo {
  font-family:var(--font-app); font-weight:600; font-size:13px;
  color:rgba(250,250,250,.9); line-height:1.35;
}
#screen-dashboard .notif-sub { font-size:12.5px; line-height:1.45; color:rgba(250,250,250,.65); margin-top:2px; }
#screen-dashboard .btn-wrap { position:relative; flex-shrink:0; }
#screen-dashboard .notif-cta {
  padding:8px 15px; cursor:pointer;
  background:#fafafa; color:#111213; font-family:var(--font-app);
  border:none; border-radius:999px;
  font-weight:600; font-size:12.5px; white-space:nowrap;
  box-shadow:none; transition:opacity .2s;
}
#screen-dashboard .notif-cta:hover { opacity:.88; }
#screen-dashboard .notif-fechar {
  position:absolute; top:8px; right:10px; background:none; border:none; cursor:pointer;
  font-size:16px; line-height:1; padding:4px 6px; color:rgba(250,250,250,.35); transition:color .18s;
}
#screen-dashboard .notif-fechar:hover { color:rgba(250,250,250,.7); }

/* Card de punição/aviso (v139) — reusa a base .fume-card/.notif-*; só o ícone
   muda: dourado no aviso de abandono, vermelho na suspensão vigente. */
#screen-dashboard .punicao-icone { color:rgba(250,250,250,.9); font-size:18px; }
#screen-dashboard .punicao-card.suspensa .punicao-icone {
  color:#e07a6a;
  background:linear-gradient(180deg,rgba(224,122,106,.14),rgba(224,122,106,.04));
  border-color:rgba(224,122,106,.35);
}
#screen-dashboard .punicao-card.suspensa .notif-eyebrow { color:rgba(224,140,130,.9); }

/* sino balançando (ambiente): badalada que amortece, parado até 52% do ciclo */
#screen-dashboard .notif-sino { transform-origin:50% 15%; animation:notifSwing 3.4s infinite ease-in-out; }
@keyframes notifSwing {
  0%, 52%, 85%, 100% { transform:rotate(0); }
  56% { transform:rotate(13deg); }
  62% { transform:rotate(-11deg); }
  68% { transform:rotate(8deg); }
  74% { transform:rotate(-5deg); }
  80% { transform:rotate(2deg); }
}
/* squeeze (fechar): botão .28s, card .38s — encadeados por animationend no JS */
@keyframes notifSqueeze {
  0% { transform:scaleX(1); opacity:1; }
  70% { opacity:1; }
  100% { transform:scaleX(0); opacity:0; }
}
#screen-dashboard .notif-cta.closing {
  animation:notifSqueeze .28s cubic-bezier(.55,0,.6,1) forwards;
  transform-origin:center; pointer-events:none;
}
#screen-dashboard .fume-card.closing {
  animation:notifSqueeze .38s cubic-bezier(.55,0,.6,1) forwards;
  pointer-events:none;
}
/* plim: anel + 6 faíscas no centro do .btn-wrap (onde o botão estava) */
#screen-dashboard .plim { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
#screen-dashboard .plim-anel {
  position:absolute; left:-9px; top:-9px; width:18px; height:18px;
  border:2px solid var(--gold-hi); border-radius:50%;
  animation:notifPlimAnel .5s ease-out forwards;
}
@keyframes notifPlimAnel {
  from { transform:scale(.4); opacity:.95; }
  to { transform:scale(4.2); opacity:0; }
}
#screen-dashboard .plim-faisca {
  position:absolute; left:-2px; top:-2px; width:4px; height:4px; border-radius:50%;
  background:var(--gold-hi); box-shadow:0 0 6px rgba(255,255,255,.9);
  animation:notifPlimFaisca .55s ease-out forwards;
}
@keyframes notifPlimFaisca {
  from { transform:translate(0,0) scale(1); opacity:1; }
  to { transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; }
}
/* a11y: sem swing; squeeze/plim viram fade simples (animationend segue disparando,
   então a cadeia do JS continua funcionando) */
@keyframes notifFade { to { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  #screen-dashboard .notif-sino { animation:none; }
  #screen-dashboard .notif-cta.closing,
  #screen-dashboard .fume-card.closing { animation:notifFade .25s ease forwards; }
  #screen-dashboard .plim { display:none; }
}
/* mobile: CTA em largura total abaixo do texto; ✕ segue no canto sup. direito */
@media (max-width:560px) {
  #screen-dashboard .fume-card { flex-wrap:wrap; }
  #screen-dashboard .btn-wrap { width:100%; }
  #screen-dashboard .notif-cta { width:100%; }
}

/* BOTÕES PRIMÁRIOS — v140: pill de VIDRO BRANCO (fim do dourado). O .btn-accept
   saiu deste grupo — o card de lead usa o rodapé de ação próprio (.lead-cta-*). */
#screen-dashboard .btn-submit,
#screen-jurisprudencia .btn-submit,
#screen-feed .btn-submit,
#screen-profile .btn-submit,
#screen-admin .btn-submit {
  background: #fafafa !important;
  color: #111213 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
#screen-dashboard .btn-submit:hover,
#screen-jurisprudencia .btn-submit:hover,
#screen-feed .btn-submit:hover,
#screen-profile .btn-submit:hover,
#screen-admin .btn-submit:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
}
/* v134: "Gerenciar assinatura" = botão SECUNDÁRIO (não dourado); compartilha a
   classe .btn-upgrade, então sobrescreve aqui (mesma especificidade, vem depois). */
/* v145: .btn-gerenciar herda a fileira editorial (regras próprias removidas) */
/* estados da assinatura (cor do texto do estado no plan-banner) */
#screen-profile .plan-estado.estado-trial,
#screen-profile .plan-estado.estado-isento { color: var(--gold-hi); }
#screen-profile .plan-estado.estado-ativa { color: #34d977; }
#screen-profile .plan-estado.estado-pendente { color: #FF9F0A; }

/* v140: os antigos ghosts .btn-decline/.btn-notmine do card de lead saíram —
   o rodapé de ação (.lead-cta-recusar, salmão) assumiu a recusa. */

/* RANKING — filtros e tabs */
/* v141: filtro em TEXTO — chips sem pill, ativo branco w600 */
#screen-painel .filter-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  color: rgba(250,250,250,0.5) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
#screen-painel .filter-btn.active {
  background: none !important;
  color: #fafafa !important;
  border: none !important;
  font-weight: 600 !important;
}
#screen-painel .filter-bar, #screen-painel .rank-filtros { gap: 16px !important; }

/* PROFILE — cover, avatar, badges, bio */
#screen-profile .profile-name {
  font-family: var(--font-app) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}
#screen-profile .profile-oab { color: rgba(255,255,255,0.65) !important; }
#screen-profile .spec-tag {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(250,250,250,0.85) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
/* v143: capa REMOVIDA — cabeçalho direto sobre o #111213 */
#screen-profile .profile-cover { background: none !important; }
/* v216: o !important escopado repetia o gradiente da base — precisa cair junto,
   senão a correção da .profile-avatar não chega ao /perfil. */
#screen-profile .profile-avatar {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(250,250,250,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
#screen-profile .btn-edit-profile {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(250,250,250,0.7) !important;
  /* v143: sem capa, o cabeçalho fica abaixo do header — o canto direito do
     .profile-head é livre (o toggle fixo vive no topo da TELA, não aqui). */
  right: 0 !important;
  left: auto !important;
}
#screen-profile .btn-edit-profile:hover { background: rgba(255,255,255,0.18) !important; }
#screen-profile .profile-bio { color: rgba(255,255,255,0.78) !important; }
#screen-profile .profile-bio.empty { color: rgba(255,255,255,0.45) !important; font-style: italic !important; }
/* v145: .plan-current re-vestido no bloco PLANO editorial (fim do arquivo) */
#screen-profile .plan-badge {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(250,250,250,0.75) !important;
}
/* v192: as regras de `.v-badge.oab` saíram junto com o selo "Identidade OAB
   conferida" (removido do /perfil — era o ÚNICO uso da classe no app). O verde
   #7dedb0 FICA no projeto: é usado pelo "convertido" e pelo botão Seguindo (v147). */
#screen-profile .v-badge.specialist,
#screen-profile .v-badge.fast,
#screen-profile .v-badge.top10 {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(250,250,250,0.75) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* EMPTY STATES */
#screen-dashboard .empty-leads,
#screen-jurisprudencia .empty-leads,
#screen-feed .empty-leads { color: rgba(255,255,255,0.55) !important; }
#screen-dashboard .empty-leads i.empty-icon,
#screen-jurisprudencia .empty-leads i.empty-icon,
#screen-feed .empty-leads i.empty-icon { color: rgba(255,255,255,0.2) !important; }
#screen-dashboard .empty-leads h3,
#screen-jurisprudencia .empty-leads h3,
#screen-feed .empty-leads h3 { color: rgba(255,255,255,0.7) !important; }

/* v128: o item ATIVO da nav virou o indicador deslizante .nav-ind (a superfície
   de vidro fumê neutro da v127 — gradientes + borda branca .30 + fios dourados
   ::before/::after — agora vive no .app-nav .nav-ind, posicionado por JS). O
   item ativo só muda a cor do texto (#fafafa); o hover dos inativos no desktop
   está no bloco .app-nav do @media(min-width:768px). Bloco antigo (escopado a
   #screen-* .bottom-nav, que não existe mais) removido. */

/* HEADER subtítulo nas telas autenticadas */
#screen-dashboard #dash-subtitle,
#screen-ajuda .header p,
#screen-jurisprudencia .header p,
#screen-feed .header p,
#screen-profile .header p,
#screen-painel .header p,
#screen-admin .header p {
  color: rgba(255,255,255,0.6) !important;
}

/* TOAST — dark com glow dourado */
.toast {
  background: rgba(23,23,23,0.95) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 30px -10px rgba(255,255,255,0.4) !important;
  color: #fff !important;
}
.toast i { color: #fafafa !important; }

/* Banner de "Nova versão disponível" (Service Worker update) */
/* v143: toast de atualização EDITORIAL — fileira em texto acima da nav
   flutuante (bottom 92px + safe-area; z-index acima da nav z100). O "Atualizar"
   é texto com border-bottom (sem pill). Handler atualizarApp intocado.
   NÃO há ✕ de dispensar (nunca existiu — registrado como sem equivalente). */
.update-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: -120px;
  background: rgba(28,29,30,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  z-index: 110;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  transition: bottom 0.4s cubic-bezier(.22,1,.36,1);
  color: #fafafa;
}
.update-banner.show {
  bottom: calc(92px + env(safe-area-inset-bottom));
}
/* v163 (revisão adversarial): no Feed o banner cobria 44px do FAB — e como não
   tem dismiss, a "sobreposição temporária" durava até o usuário atualizar.
   Com a tela do Feed ativa, o banner sobe pra cima do FAB (topo do FAB =
   102px + 56px; 8px de folga). O banner vem DEPOIS das .screen no DOM, então
   o seletor de irmãos funciona. */
#screen-feed.active ~ .update-banner.show {
  bottom: calc(166px + env(safe-area-inset-bottom));
}
@media(min-width:768px){
  /* desktop: FAB em bottom:32px — o banner padrão (92px) já passa por cima
     sem cobrir o miolo; mantém o comportamento global */
  #screen-feed.active ~ .update-banner.show {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}
.update-banner-ico { flex: none; }
.update-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(250,250,250,0.85);
}
.update-banner-meta {
  font-weight: 400;
  color: rgba(250,250,250,0.45);
}
.update-banner-btn {
  background: none;
  color: #fafafa;
  border: none;
  border-bottom: 1px solid rgba(250,250,250,0.4);
  border-radius: 0;
  padding: 2px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  transition: border-bottom-color 0.2s;
}
.update-banner-btn:hover {
  border-bottom-color: #fafafa;
}
/* desktop (sidebar; nav não é flutuante embaixo): encosta mais na base e
   respeita a coluna de conteúdo */
@media (min-width: 768px) {
  .update-banner { left: 240px; right: 20px; max-width: 460px; margin-left: auto; }
  .update-banner.show { bottom: 20px; }
}

/* ============================================================
   AUTOCOMPLETE DE CIDADES — form do cliente
   ============================================================ */
.city-autocomplete-wrap { position: relative; }
.city-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(7, 13, 32, 0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.city-suggestions.show { display: block; }
.city-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s ease;
}
.city-suggestion:last-child { border-bottom: none; }
.city-suggestion:hover {
  background: rgba(255,255,255,0.12);
}
.city-suggestion .city-name { color: rgba(255,255,255,0.92); }
.city-suggestion .city-uf {
  color: #fafafa;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.city-suggestion-empty {
  padding: 14px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  line-height: 1.4;
}

/* Subtítulo entre grupos de áreas (mais comuns / outras) */
.areas-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin: 18px 0 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.areas-subtitle::before,
.areas-subtitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   FAIXAS — Bronze / Prata / Ouro / Diamante
   ============================================================
   Faixa de desempenho. NÃO confundir com o plano de assinatura
   "Elite" (campo `plano`) — conceitos independentes.
   Aplicadas em:
   - .v-badge.faixa (badge no perfil — herda layout base do .v-badge)
   - .rank-faixa-tag (tag inline ao lado do nome no ranking)
   ============================================================ */

/* Badge no perfil (herda layout do .v-badge: padding, border-radius, flex...).
   Aqui só os "skins" por faixa: background, border, text color. */
.v-badge.faixa { font-weight: 700; letter-spacing: 0.3px; }

/* v140: faixas recoloridas — Bronze/Prata/Ouro como cor de DADO (o Ouro #e0bd66
   é o único tom dourado sobrevivente do tema antigo). */
/* v141: chips de faixa NEUTROS (pill .05/.14, texto .75) — só o Diamante mantém
   a platina animada. As cores de faixa seguem vivas onde são DADO (ex: timer). */
.faixa-bronze, .faixa-prata, .faixa-ouro {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: rgba(250,250,250,0.75);
}
/* v140: Diamante virou PLATINA animada (gradiente metálico deslizante, mesmo
   tratamento do selo "Mais escolhido" dos planos). */
.faixa-diamante {
  color: #111;
  background: linear-gradient(120deg, #737373, #e5e5e5, #d4d4d4, #e5e5e5, #737373);
  background-size: 300% 100%;
  border-color: #e5e5e5;
  box-shadow: 0 0 12px rgba(229,229,229,0.35), inset 0 1px 2px rgba(255,255,255,0.5);
  animation: goldShift 3.2s ease infinite;
  text-shadow: none;
}
@keyframes goldShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Tag inline no ranking (ao lado do nome) — versão compacta */
.rank-faixa-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin-left: 6px;
  border-radius: 8px; border: 1px solid transparent;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.rank-faixa-tag i { font-size: 9px; }
.rank-faixa-tag.faixa-bronze,
.rank-faixa-tag.faixa-prata,
.rank-faixa-tag.faixa-ouro { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: rgba(250,250,250,0.75); }
.rank-faixa-tag.faixa-diamante {
  color: #111;
  background: linear-gradient(120deg, #737373, #e5e5e5, #d4d4d4, #e5e5e5, #737373);
  background-size: 300% 100%;
  border-color: #e5e5e5;
  box-shadow: 0 0 8px rgba(229,229,229,0.35);
  animation: goldShift 3.2s ease infinite;
}

/* ============================================================
   SCREEN-CONSULTA — landing do cliente
   ============================================================
   Visualmente IDÊNTICA à screen-landing do advogado (mesmas
   classes da família .lp-*, replicadas em .cs-* pra evitar
   coupling — alterações na landing NÃO propagam pra consulta).
   Estrutura: nav pill flutuante + hero + features 3-col
   + testimonials 3-col + cta bottom + safety + footer.
   ============================================================ */
#screen-consulta {
  padding: 0;
  background: #171717;
  color: #f5f5f5;
  font-family: var(--font-app);
  min-height: 100vh;
}

/* BG — cópia exata do .lp-bg: gradiente cinematográfico multi-camada */
#screen-consulta .cs-bg {
  position: relative;
  min-height: 100%;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 100% 30%, rgba(28,30,29,0.85), transparent 60%),
    radial-gradient(900px 700px at 0% 60%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #171717 0%, #101010 100%);
  padding-bottom: 60px;
  overflow-x: hidden;
}
/* Grain — cópia exata do .lp-grain (SVG noise + overlay blend) */
#screen-consulta .cs-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* ───── NAV — cópia exata de .lp-nav + .lp-nav-inner (pill flutuante) ───── */
#screen-consulta .cs-nav {
  position: relative;
  z-index: 20;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 16px 0;
  background: transparent;
  border-bottom: none;
}
#screen-consulta .cs-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 8px 8px 8px 18px;
}
#screen-consulta .cs-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-transform: none;
}
#screen-consulta .cs-logo i { color: #fafafa; font-size: 18px; }
#screen-consulta .cs-logo span {
  color: #fff;
  letter-spacing: -0.01em;
  font-weight: 600;
}
/* Botão "Sou advogado" — estilo .lp-nav-link (ghost discreto) */
#screen-consulta .cs-nav-advogado {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
#screen-consulta .cs-nav-advogado:hover { color: #fff; }
#screen-consulta .cs-nav-advogado i { font-size: 11px; }

/* ───── HERO — cópia de .lp-hero ───── */
#screen-consulta .cs-hero {
  position: relative;
  z-index: 10;
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 20px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Eyebrow — cópia de .lp-badge */
#screen-consulta .cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
#screen-consulta .cs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: none;
}
/* Title — cópia de .lp-title + .lp-title-gold com shiny gradient */
#screen-consulta .cs-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(36px, 8vw, 76px);
  margin: 0;
  color: #fff;
}
#screen-consulta .cs-title-line { display: block; }
#screen-consulta .cs-title-gold {
  font-style: italic;
  background-image: linear-gradient(to right, #737373 0%, #a3a3a3 14%, #d4d4d4 32%, #f5f5f5 50%, #d4d4d4 68%, #a3a3a3 86%, #737373 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lp-shiny 7s linear infinite;
  padding-bottom: 4px;
  font-weight: 600;
}
#screen-consulta .cs-sub {
  color: rgba(255,255,255,0.65);
  font-size: 15px;
  line-height: 1.6;
  max-width: 540px;
  margin: 22px auto 0;
}
/* CTA principal — match .lp-btn-primary */
#screen-consulta .cs-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 30px;
  padding: 14px 24px;
  background: rgba(255,255,255,.92);
  color: #111;
  border: none; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 30px -8px rgba(255,255,255,0.6);
  transition: filter 0.2s, transform 0.2s, background 0.2s;
}
#screen-consulta .cs-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
#screen-consulta .cs-cta:focus-visible { outline: 2px solid #fafafa; outline-offset: 3px; }
#screen-consulta .cs-cta i { font-size: 12px; }

/* Trust badges — cópia de .lp-trust */
#screen-consulta .cs-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
#screen-consulta .cs-trust-item { display: inline-flex; align-items: center; gap: 6px; }
#screen-consulta .cs-trust-item i { color: #fafafa; font-size: 11px; }

/* Indicador de advogados disponíveis nas landings do cliente (v97) */
#screen-consulta .online-indicador,
#screen-client .online-indicador {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; padding: 8px 15px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#screen-consulta .online-dot,
#screen-client .online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none;
  animation: online-pulse 2s infinite;
}
#screen-consulta .online-dot.plantao,
#screen-client .online-dot.plantao { background: rgba(255,255,255,.92); animation: none; }
@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ───── DIVIDER — cópia de .lp-divider ───── */
#screen-consulta .cs-divider {
  padding: 0 24px;
  overflow: hidden;
  margin: 8px 0;
  position: relative;
  z-index: 10;
}
#screen-consulta .cs-divider-line {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.4) 20%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.4) 80%,
    transparent
  );
}

/* ───── FEATURES — cópia de .lp-features + .lp-feature-card ───── */
#screen-consulta .cs-features {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  #screen-consulta .cs-features {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
#screen-consulta .cs-feature {
  position: relative;
  border-radius: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  overflow: hidden;
  text-align: left;
  transition: transform 0.25s, border-color 0.25s;
}
#screen-consulta .cs-feature:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.4);
}
/* Icon — cópia de .lp-feature-icon (caixa 44×44 dourada sutil) */
#screen-consulta .cs-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
  font-size: 18px;
  margin: 0;
}
#screen-consulta .cs-feature h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 16px 0 0;
  color: #fff;
}
#screen-consulta .cs-feature p {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0 0;
}

/* ───── CTA BOTTOM ───── */
#screen-consulta .cs-cta-bottom {
  position: relative; z-index: 2;
  max-width: 720px; margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) 24px clamp(56px, 8vw, 96px);
  text-align: center;
}
#screen-consulta .cs-cta-bottom-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 600; line-height: 1.2;
  color: #f5f5f5;
  margin: 0 0 28px;
}
#screen-consulta .cs-italic-gold {
  color: #fafafa;
  font-style: italic;
  font-weight: 500;
}

/* ───── TESTIMONIAL — mesmo padrão visual de .lp-feature-card ───── */
#screen-consulta .cs-testimonial {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 60px;
}
#screen-consulta .cs-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  #screen-consulta .cs-testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
#screen-consulta .cs-testimonial-card {
  position: relative;
  border-radius: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, border-color 0.25s;
}
#screen-consulta .cs-testimonial-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.4);
}
#screen-consulta .cs-testimonial-stars {
  display: inline-flex;
  gap: 4px;
  color: #fafafa;
  font-size: 13px;
  margin-bottom: 14px;
}
#screen-consulta .cs-testimonial-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0;
  padding: 0;
  border: none;
  flex-grow: 1;
  letter-spacing: -0.01em;
}
#screen-consulta .cs-testimonial-author {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
#screen-consulta .cs-testimonial-name {
  color: #fafafa;
  font-weight: 600;
}
#screen-consulta .cs-testimonial-sep {
  color: rgba(255,255,255,0.3);
}
#screen-consulta .cs-testimonial-city {
  color: rgba(255,255,255,0.55);
}

/* ───── CTA BOTTOM ───── */
#screen-consulta .cs-cta-bottom {
  position: relative;
  z-index: 10;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 60px;
  text-align: center;
}
#screen-consulta .cs-cta-bottom-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 24px;
}
#screen-consulta .cs-italic-gold {
  font-style: italic;
  background-image: linear-gradient(to right, #8c6a26, #fafafa, #f0d27e, #fafafa, #8c6a26);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lp-shiny 8s linear infinite;
}

/* ───── SAFETY (selo de segurança) ───── */
#screen-consulta .cs-safety {
  position: relative;
  z-index: 10;
  padding: 0 24px 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.2px;
}
#screen-consulta .cs-safety i {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

/* ───── FOOTER ───── */
#screen-consulta .cs-footer {
  position: relative;
  z-index: 10;
  padding: 24px 20px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.4px;
}

/* ============================================================
   SCREEN-CLIENT — topbar discreta "Sou advogado"
   ============================================================
   Substituiu a lp-nav anterior (com Voltar + logo).
   Tema escuro (combina com lp-bg do screen-client).
   ============================================================ */
#screen-client .cl-topbar {
  position: absolute; top: 16px; right: 16px;
  z-index: 5;
}
/* v102 — opção D: texto discreto, sem caixa/borda/dourado (não compete com o
   fluxo do cliente). Só muda a aparência; posição e destino do clique intactos.
   v103 — mesma regra reusada na /consulta (#screen-consulta), sem duplicar. */
#screen-client .cl-topbar-adv,
#screen-consulta .cl-topbar-adv {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  padding: 6px 4px;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.18s;
}
#screen-client .cl-topbar-adv:hover,
#screen-consulta .cl-topbar-adv:hover {
  color: rgba(255,255,255,0.9);
}
#screen-client .cl-topbar-adv:focus-visible,
#screen-consulta .cl-topbar-adv:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
  border-radius: 4px;
}
#screen-client .cl-topbar-adv i,
#screen-consulta .cl-topbar-adv i { font-size: 10px; opacity: 0.7; }

/* ============================================================
   PERFIL — lista de avaliações reais (.profile-reviews)
   ============================================================ */
.profile-reviews .reviews-list { display: flex; flex-direction: column; gap: 12px; }
/* v124: migrado pros tokens de vidro fumê (era a base .03 antiga). Sem
   backdrop-filter próprio — herda o fundo ambiente da tela, evita vidro
   sobre vidro. O border-left dourado segue como assinatura do card. */
.profile-reviews .review-item {
  padding: 14px 16px;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-left: 3px solid #fafafa;
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  color: #e8eaf0;
}
.profile-reviews .review-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.profile-reviews .review-date { font-size: 11px; color: rgba(255,255,255,0.4); }
.profile-reviews .review-comment { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.7); }

/* ============================================================
   Histórico de Leads aceitas (renderiza nas abas Histórico/Clientes
   do #screen-dashboard via leads-ui.js, NÃO no perfil).
   ============================================================
   Liquid glass fumê v124 (tokens --glass), com border-left dourado
   como assinatura. Não exibe dados sensíveis do cliente (nome,
   whatsapp, email) — filtrado na renderização em leads-ui.js.
   ============================================================ */
/* v141: histórico virou LISTA EDITORIAL — fileiras chapadas com fio de 1px */
.profile-history { margin-top: 24px; }
.profile-history .history-list { display: flex; flex-direction: column; gap: 0; }
.profile-history .history-item {
  padding: 13px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  box-shadow: none;
  color: #fafafa;
  overflow: visible;
  position: relative;
  transition: border-color 0.2s;
}
.profile-history .history-item:hover {
  border-color: rgba(255,255,255,0.3);
}
.profile-history .history-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.profile-history .history-area {
  font-size: 14px; font-weight: 600; color: #fafafa;
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-history .history-area i { font-size: 12px; }
.profile-history .history-date {
  font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap;
}
/* v111 — timer circular de 1h + status no card do Histórico (sem mudar o layout) */
.profile-history .history-item.a-responder { background: none; } /* v141: o timer já sinaliza o estado */
.profile-history .hist-timer {
  position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: conic-gradient(#34d977 360deg, rgba(255,255,255,0.08) 0deg);
  display: flex; align-items: center; justify-content: center;
}
.profile-history .hist-timer::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #1c1e1d; /* v140: miolo grafite (era navy) */
}
.profile-history .hist-timer-time {
  position: relative; z-index: 1; font-size: 10px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
}
.profile-history .hist-timer.expirado .hist-timer-time { color: #e07a6a; }
.profile-history .hist-resp-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: #34d977;
}
.profile-history .hist-resp-chip.late { color: #e07a6a; }
.hist-pend-banner {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(250,250,250,.8); font-size: 13px; font-weight: 500; line-height: 1.4;
  display: flex; align-items: center; gap: 8px;
}
.hist-pend-banner strong { color: #fafafa; }
.hist-pend-banner i { color: rgba(250,250,250,.85); }
.profile-history .history-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.profile-history .history-meta i {
  color: rgba(255,255,255,0.6); font-size: 10px; margin-right: 4px;
}
.profile-history .history-question {
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.65);
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-style: italic;
}
/* Nome do cliente — visível só pro advogado dono (tab privada) */
.profile-history .history-client {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-history .history-client i {
  color: rgba(255,255,255,0.7); font-size: 11px;
}
/* Contatos (WhatsApp / Email) — links clicáveis dourados */
.profile-history .history-contacts {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.profile-history .history-contact {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-app);
  font-size: 12px;
  font-weight: 500;
  color: #fafafa;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  word-break: break-all;
}
.profile-history .history-contact i { font-size: 12px; }
.profile-history .history-contact:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}
.profile-history .history-contact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.45);
}
/* Toggle "Virou cliente" (conversão) — v74 */
.history-conv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
  font-family: var(--font-app);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.history-conv-btn i { font-size: 12px; }
.history-conv-btn:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.history-conv-btn.is-on {
  background: rgba(52,217,119,0.08);
  border-color: rgba(52,217,119,0.25);
  color: #7dedb0; /* v141: verde "convertido" editorial */
}
.history-conv-btn:disabled { opacity: 0.55; cursor: default; }
.history-conv-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(37,211,102,0.4); }
.profile-history .history-empty {
  text-align: center; padding: 32px 20px;
  color: rgba(255,255,255,0.4);
}
.profile-history .history-empty i {
  font-size: 36px; color: rgba(255,255,255,0.3); margin-bottom: 12px;
}
.profile-history .history-empty h3 {
  /* v160: era a ÚNICA Cormorant vazando pra dentro do app logado */
  font-family: var(--font-app);
  font-size: 20px; color: #f5f5f5; margin: 0 0 6px; font-weight: 600;
}
.profile-history .history-empty p { font-size: 13px; margin: 0; }
.profile-history .history-error {
  padding: 16px; text-align: center;
  font-size: 13px; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.profile-history .history-load-more {
  display: block; margin: 16px auto 0;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fafafa;
  border-radius: 999px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 0.2s;
}
.profile-history .history-load-more:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: #fafafa;
  transform: translateY(-1px);
}
.profile-history .history-load-more:disabled {
  opacity: 0.6; cursor: wait; transform: none;
}

/* ============================================================
   Dashboard tabs (Leads | Histórico)
   ============================================================
   Pill segmentado com glass-morphism. Mesma paleta navy/dourado
   do resto do app. Estado ativo: fundo dourado translúcido + glow
   sutil + borda interna dourada. Inactive: texto branco esmaecido
   com hover. Histórico é lazy (vide mostrarTabDashboard em
   leads-ui.js) — esconde-se com display:none.
   ============================================================ */
/* ============================================================
   Banner iOS no dashboard — orienta advogado em Safari sem PWA
   ============================================================
   Glass-morphism com borda dourada sutil. Não bloqueia conteúdo,
   é dismissível (botão X salva preferência em localStorage).
   Default hidden — JS revela via display:flex quando aplicável.
   ============================================================ */
.pwa-ios-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 20px 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.25s ease-out;
}
.pwa-ios-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pwa-ios-icon i { color: #fafafa; font-size: 13px; }
.pwa-ios-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-app);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.1px;
}
.pwa-ios-text i {
  color: #fafafa;
  font-size: 11px;
  margin: 0 1px;
  vertical-align: -1px;
}
.pwa-ios-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.pwa-ios-close:hover {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.05);
}
.pwa-ios-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.45);
}
.pwa-ios-close i { font-size: 13px; }

/* .dash-tabs/.dash-tab* migrados pro componente único .seg-nav. */
.dash-tab-content {
  animation: fadeIn 0.22s ease-out;
}

/* ============================================================
   PAINEL (aba default do dashboard)
   ============================================================
   3 cards de métricas acumuladas + gráfico SVG de barras +
   lista de leads recentes. Tudo glass-morphism, mesma paleta
   navy/dourado do app. Sem dependência de lib de gráfico.
   ============================================================ */
.met-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px;
  margin-bottom: 16px;
}
.met-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.met-card .num {
  font-family: var(--font-app);
  font-size: 22px;
  font-weight: 800;
  color: #f5f5f5;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.met-card .label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

/* Card do gráfico */
.met-grafico-card {
  margin: 0 20px 16px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Linha gráfico (2/3) + card de avaliações (1/3) */
.met-row {
  display: flex;
  gap: 16px;
  margin: 0 20px 16px;
  align-items: stretch;
}
.met-row .met-grafico-card {
  flex: 2;
  min-width: 0;     /* permite o SVG encolher abaixo do tamanho intrínseco */
  margin: 0;
}
.met-aval-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.met-aval-media {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-app);
  font-weight: 600;
  font-size: 30px !important;
  line-height: 1;
  color: #fafafa;
  letter-spacing: -0.02em;
}
.met-aval-media i { color: var(--gold); font-size: 15px; } /* v181: star agregado dourado (cor de DADO), igual às estrelas das review cards */
.met-aval-total { font-size: 12.5px; color: rgba(250,250,250,0.5); margin-top: 6px; }
.met-aval-rapida { margin-top: auto; padding-top: 14px; }
.met-aval-rapida-pct {
  font-family: var(--font-app);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: #fafafa;
}
.met-aval-rapida-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .met-row { flex-direction: column; }
}

/* Ajustes de layout do /painel (v76) — ESCOPADOS a #screen-painel pra não
   afetar o mockup da landing nem o admin, que reusam .met-cards/.met-row/
   .met-aval-card. Converte a linha gráfico+avaliações no MESMO grid de 3
   colunas dos cards de cima: gráfico ocupa 2 colunas (alinha a borda direita
   com o card "Taxa de aceite") e avaliações 1 coluna (mesma largura do card
   "Tempo médio"). Gap 10px = igual ao .met-cards pra as colunas baterem. */
#screen-painel .met-cards { margin-top: 18px; }
#screen-painel .met-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#screen-painel .met-row .met-grafico-card { grid-column: span 2; }
#screen-painel .met-row .met-aval-card { grid-column: span 1; }
@media (max-width: 600px) {
  #screen-painel .met-row { grid-template-columns: 1fr; }
  /* v118: no mobile (1 coluna) zera o span — senão o gráfico (span 2) cria uma
     coluna IMPLÍCITA e o gap deixa o card "Avaliações" ~10px mais estreito que o
     gráfico. Com grid-column:auto os dois ocupam a coluna única (mesma largura). */
  #screen-painel .met-row .met-grafico-card,
  #screen-painel .met-row .met-aval-card { grid-column: auto; }
}
.met-grafico-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.met-periodo {
  display: inline-flex;
  gap: 16px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
/* v176: seletor de período no padrão SUBLINHADO (modelo do dono) — ativo com
   fio 2px embaixo + peso 700; inativo esmaecido peso 400. Substitui a caixinha
   (box-shadow inset) anterior. Mesma família visual das abas .seg-nav. */
.met-periodo-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(250,250,250,0.4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  padding: 2px 0 5px;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, font-weight 0.2s;
}
.met-periodo-btn:hover:not(.active) { color: rgba(255,255,255,0.85); }
.met-periodo-btn.active {
  background: none;
  color: #fafafa;
  font-weight: 700;
  border-bottom-color: #fafafa;
  box-shadow: none;
}
#met-grafico-wrap { width: 100%; }
.met-grafico-vazio {
  text-align: center;
  padding: 36px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

/* Leads recentes */
.met-leads-recentes-wrap {
  margin: 0 20px 20px;
}
.met-lead-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.met-lead-item:last-child { border-bottom: none; }
.met-lead-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-app);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.met-lead-avatar i { font-size: 13px; }

/* ============================================================
   FOTO DE PERFIL DO ADVOGADO (avatar com imagem)
   ============================================================ */

/* Imagem dentro de qualquer avatar. NÃO força width/height: herda o
   tamanho da classe do avatar (rank-avatar 48px, met-lead-avatar 36px).
   No perfil, o tamanho vem de .profile-avatar-content (abaixo). */
.avatar-img { object-fit: cover; border-radius: 50%; display: block; }

/* Avatares menores precisam clipar a foto no círculo */
.rank-avatar, .met-lead-avatar, .avaliar-adv-avatar { overflow: hidden; }

/* --- Avatar do perfil: área clicável de upload --- */
.profile-avatar { overflow: hidden; cursor: pointer; }
.profile-avatar-content {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.profile-avatar-content .avatar-img { width: 100%; height: 100%; }

/* Overlay de câmera (hover) */
.avatar-camera-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.profile-avatar:hover .avatar-camera-overlay { opacity: 1; }
.profile-avatar.is-uploading .avatar-camera-overlay { opacity: 0; }

/* ============================================================
   FOTO DE PERFIL — visualizador + recorte (v233)
   ============================================================
   Toque LONGO no avatar do /perfil abre #foto-modal (top-level). Fica abaixo
   do toast (200) e acima da nav (100) e do header (50). Fundo quase preto,
   como visualizador de foto; botões na pele do app (branco = ação principal,
   salmão = destrutivo). O recorte é um quadrado com máscara circular (a foto
   aparece em círculo no app inteiro). */
#profile-avatar{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .45s ease}
#profile-avatar img{pointer-events:none;-webkit-user-drag:none}
#profile-avatar.segurando{transform:scale(.94)}
#profile-avatar:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ #profile-avatar{transition:none} }

.foto-modal{position:fixed;inset:0;z-index:190;display:flex;flex-direction:column;background:rgba(8,8,9,.97);color:#fafafa;font-family:var(--font-app);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fotoEntra .18s ease-out}
@keyframes fotoEntra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .foto-modal{animation:none} }
body.foto-modal-aberto{overflow:hidden}
.foto-modal [hidden]{display:none !important}
.foto-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));flex-shrink:0}
.foto-ico{width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#fafafa;display:flex;align-items:center;justify-content:center;cursor:pointer}
.foto-ico:hover{background:rgba(255,255,255,.14)}
.foto-ico svg{width:20px;height:20px}
.foto-titulo{flex:1;text-align:center;font-size:15px;font-weight:600}
.foto-salvar{min-width:40px;background:#fafafa;color:#111213;border:none;border-radius:8px;font-family:var(--font-app);font-size:14px;font-weight:700;padding:9px 16px;cursor:pointer}
.foto-salvar:hover{background:#e8e8ea}
.foto-salvar:disabled{opacity:.5;cursor:default}
/* sem o Salvar (modo ver), um espaçador de 40px mantém o título centrado */
.foto-topo:has(.foto-salvar[hidden])::after{content:"";width:40px;flex-shrink:0}
.foto-palco{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:8px 16px}
.foto-ver{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.foto-ver img{max-width:min(100%,560px);max-height:100%;object-fit:contain;border-radius:12px;-webkit-user-select:none;user-select:none}
.foto-ver-vazio{width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:60px;font-weight:700;letter-spacing:-.02em;color:rgba(250,250,250,.85)}
.foto-crop{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.foto-crop-area{position:relative;width:min(100%,420px,56vh);aspect-ratio:1;overflow:hidden;background:#000;touch-action:none;cursor:grab;border-radius:6px}
.foto-crop-area:active{cursor:grabbing}
.foto-crop-area img{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;-webkit-user-select:none;user-select:none;pointer-events:none}
.foto-crop-mascara{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 9999px rgba(8,8,9,.62);border:1px solid rgba(255,255,255,.7);pointer-events:none}
.foto-zoom{display:flex;align-items:center;gap:12px;width:min(100%,420px);color:rgba(250,250,250,.66)}
.foto-zoom svg{width:18px;height:18px;flex:none}
.foto-zoom input{flex:1;accent-color:#fafafa;height:28px}
.foto-dica{margin:0;font-size:13px;color:rgba(250,250,250,.55);text-align:center}
.foto-carregando{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(8,8,9,.6);font-size:14px;color:rgba(250,250,250,.88)}
.foto-spin{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#fafafa;animation:fotoGira .8s linear infinite}
@keyframes fotoGira{to{transform:rotate(360deg)}}
.foto-acoes{display:flex;justify-content:center;gap:8px;padding:14px 16px;padding-bottom:calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.foto-acoes button{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;border-radius:12px;color:#fafafa;font-family:var(--font-app);font-size:13px;font-weight:600;padding:10px 6px;cursor:pointer}
.foto-acoes button:hover{background:rgba(255,255,255,.06)}
.foto-acoes button svg{width:24px;height:24px}
.foto-acoes .foto-perigo{color:#f2b3ac}
.foto-acoes .foto-perigo:hover{background:rgba(232,158,150,.08)}
.foto-confirma{padding:18px 20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.06);background:#151617;flex-shrink:0}
.foto-confirma p{margin:0 auto 16px;max-width:420px;font-size:15px;line-height:1.5;color:rgba(250,250,250,.75)}
.foto-confirma b{display:block;color:#fafafa;font-size:16px;margin-bottom:2px}
.foto-confirma-btns{display:flex;gap:10px;max-width:420px;margin:0 auto}
.foto-confirma-btns button{flex:1;border-radius:10px;font-family:var(--font-app);font-size:15px;font-weight:700;padding:13px;cursor:pointer}
.foto-conf-nao{background:none;color:#fafafa;border:1px solid rgba(255,255,255,.22)}
.foto-conf-sim{background:rgba(224,122,106,.16);color:#f2b3ac;border:1px solid rgba(224,122,106,.45)}
.foto-conf-sim:hover{background:rgba(224,122,106,.24)}

/* Spinner de loading durante o upload (JS alterna display:flex) */
.avatar-loading {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  color: #fafafa; font-size: 22px;
}
.met-lead-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.met-lead-nome-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.met-lead-nome {
  font-family: var(--font-app);
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.met-lead-meta-info {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.met-lead-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.met-lead-tempo {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}
.met-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-app);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.met-badge-novo {
  background: rgba(255,255,255,0.15);
  color: #fafafa;
  border: 1px solid rgba(255,255,255,0.35);
}
.met-badge-respondido {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.32);
}
/* Botão WhatsApp inline ao lado do nome (verde oficial #25D366) */
.met-lead-wa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(37,211,102,0.32);
}
.met-lead-wa:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37,211,102,0.4);
}
.met-lead-wa i { font-size: 12px; }
.met-lead-wa:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37,211,102,0.55);
}
/* Estado vazio dos leads recentes */
.met-leads-recentes-vazio {
  text-align: center;
  padding: 28px 16px;
  color: rgba(255,255,255,0.45);
}
.met-leads-recentes-vazio i {
  font-size: 28px;
  color: rgba(255,255,255,0.32);
  margin-bottom: 8px;
}
.met-leads-recentes-vazio p { font-size: 13px; margin: 0; }

/* =====================================================
   PERFIL PÚBLICO DO ADVOGADO (v107) — screen-perfil-publico
   Tema escuro próprio (a screen é nova, fora dos grupos dark) +
   autor clicável no feed (.post-author-link).
   ===================================================== */
/* ============================================================
   v182 REDESIGN — perfil público editorial (chapado var(--bg-app), Inter, fios).
   Sem backdrop-filter (v141 reserva vidro pro lead/avisos). Sem animação nos
   cards de publicação (lição v137/v173: vidro/transform quebra no WebKit).
   ============================================================ */
#screen-perfil-publico .header{background:rgba(17,18,19,.92);border-bottom:1px solid rgba(255,255,255,0.08)}
#screen-perfil-publico .header-row{display:flex;align-items:center}
.pub-voltar-btn{background:none;border:none;color:rgba(250,250,250,0.65);cursor:pointer;font-family:var(--font-app);font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 2px}
.pub-voltar-btn:hover{color:#fafafa}
#screen-perfil-publico .main-content{color:#fafafa}
/* cabeçalho da seção "Publicações" — componente editorial v141 (11px caps + fio),
   herda a regra compartilhada; só adiciono o recuo lateral pra casar com as fileiras. */
#screen-perfil-publico .perfilpub-posts-sec .section-title{ padding:14px 18px 12px !important; margin:0 !important }

/* IDENTIDADE */
.perfilpub-card{ margin:0 }
.pp-ident{ display:flex; align-items:center; gap:14px; padding:14px 18px 0 }
.pp-avatar-wrap{ flex:none }
.pp-avatar{ width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);color:#fafafa;font-weight:600;font-size:22px;
  border:1px solid rgba(255,255,255,0.1) }
.pp-avatar.avatar-img{ object-fit:cover }
.pp-id{ flex:1; min-width:0 }
.pp-nome-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.pp-nome{ font-size:18px;font-weight:700;color:#fafafa;line-height:1.2;min-width:0;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.pp-linha{ font-size:12.5px;color:rgba(250,250,250,0.5);margin-top:3px;line-height:1.35 }
/* BIO — só existe quando há texto (JS não renderiza o bloco vazio, sem respiro órfão) */
.pp-bio{ font-size:13.5px;line-height:1.6;color:rgba(250,250,250,0.78);padding:12px 18px 0;white-space:pre-wrap }
/* MÉTRICAS */
.pp-metrics{ display:flex;align-items:center;gap:18px;padding:14px 18px 0 }
.pp-metric{ font-size:13.5px;font-weight:700;color:#fafafa;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none }
.pp-metric strong{ font-weight:700;font-variant-numeric:tabular-nums }
.pp-metric .pp-metric-lbl{ font-size:12.5px;font-weight:400;color:rgba(250,250,250,0.45) }
.pp-star{ color:var(--gold);font-size:13px }
.pp-aval-vazio{ font-size:13px;font-weight:400;color:rgba(250,250,250,0.45) }
/* áreas: a parte que CEDE espaço (ellipsis) pra 3 áreas longas não estourarem 390px */
.pp-areas{ flex:1 1 auto;min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:block }
/* AÇÕES */
.pp-actions{ display:flex;align-items:center;gap:10px;padding:14px 18px 18px }
.pp-rede{ width:27px;height:27px;border-radius:50%;flex:none;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  color:rgba(250,250,250,0.8);display:flex;align-items:center;justify-content:center;
  font-size:13px;text-decoration:none;transition:.18s }
.pp-rede:hover{ border-color:rgba(255,255,255,0.5);color:#fafafa }
/* PUBLICAÇÕES — fileiras separadas por fio, read-only */
.pp-post{ display:flex;flex-direction:column;gap:7px;padding:14px 18px;border-top:1px solid rgba(255,255,255,0.06) }
.pp-post-head{ display:flex;align-items:center;gap:10px }
.pp-post-avatar-wrap{ flex:none }
.pp-post-avatar{ width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);color:#fafafa;font-weight:600;font-size:12px;
  border:1px solid rgba(255,255,255,0.1) }
.pp-post-avatar.avatar-img{ object-fit:cover }
.pp-post-id{ display:flex;flex-direction:column;min-width:0 }
.pp-post-nome{ font-size:13.5px;font-weight:600;color:#fafafa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.pp-post-oab{ font-size:11.5px;font-weight:400;color:rgba(250,250,250,0.45);margin-left:5px }
.pp-post-sub{ font-size:11.5px;color:rgba(250,250,250,0.45);margin-top:1px }
.pp-post-body{ font-size:14px;line-height:1.5;color:rgba(250,250,250,0.9);white-space:normal }
.pp-post-actions{ display:flex;align-items:center;gap:18px }
.pp-post-act{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(250,250,250,0.45);font-variant-numeric:tabular-nums }
.pp-post-act .pp-ico{ flex:none }
.perfilpub-posts-vazio{ font-size:13px;color:rgba(250,250,250,0.45);padding:14px 18px;margin:0 }
/* feed: bloco do autor clicável (avatar + nome) — não engloba área/excluir/ações */
.post-author-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}

/* ============================================================
   v140 — FALLBACK sem backdrop-filter (Android antigo): superfícies de vidro
   viram grafite sólido. A .app-nav já tem o dela junto do bloco base.
   ============================================================ */
@supports not (backdrop-filter: blur(1px)){
  /* v141: só as superfícies que AINDA usam blur (o resto virou chapado) */
  /* v195: .juris-modal-card SAIU daqui — virou opaco (--bg-app) na v195, então
     este fallback não só é desnecessário como pintaria o modal de OUTRA cor
     (rgba(24,25,26,.97)) justamente nos aparelhos sem backdrop-filter. */
  /* v196: #screen-bloqueio .bloqueio-card saiu — a classe deixou de existir
     (a tela virou .status-*, que é chapada e nunca usou blur). */
  .header,
  #screen-dashboard .lead-card {
    background: rgba(24,25,26,0.97) !important;
  }
}


/* ============================================================
   v143 — PERFIL editorial: precedências finais (vencem os grupos KPI/rótulo)
   ============================================================ */
#screen-painel .perf-title, #screen-painel .perf-section .perf-title { text-transform: uppercase !important; letter-spacing: .15em !important; font-size: 11px !important; font-weight: 600 !important; color: rgba(250,250,250,0.6) !important; }
#screen-painel .perf-metric .perf-val { font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
#screen-painel .perf-metric .perf-lbl { font-size: 13px !important; color: rgba(250,250,250,0.6) !important; margin-top: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
#screen-profile .v-badge.faixa { border-radius: 999px !important; padding: 4px 10px !important; font-size: 11px !important; font-weight: 600 !important; }
#screen-profile .verify-badges { margin-top: 8px; gap: 6px; }


/* ============================================================
   v145 — PERFIL: fileiras editoriais (share, localização, PLANO)
   v161: o botão "Compartilhar minhas métricas" (que é uma .perfil-row) migrou
   pro /painel — as regras da fileira valem nos DOIS escopos (o perfil segue
   usando .perfil-row na localização).
   ============================================================ */
#screen-profile .perfil-row,
#screen-painel .perfil-row{display:flex;align-items:center;gap:9px;width:100%;background:none !important;border:none;border-bottom:1px solid var(--fio) !important;border-radius:0 !important;margin:0;padding:var(--fileira-pad-y) 2px !important;font-family:var(--font-app);font-size:var(--fileira-fs);font-weight:var(--fileira-peso);color:var(--fileira-cor) !important;cursor:pointer;text-align:left;transition:color .18s;box-shadow:none !important}
#screen-profile .perfil-row:hover,
#screen-painel .perfil-row:hover{color:#fafafa !important;background:none !important;filter:none !important;transform:none !important}
#screen-profile .perfil-row::after,
#screen-painel .perfil-row::after{content:'\203A';margin-left:auto;font-size:15px;line-height:1;color:rgba(250,250,250,.3);flex:none}
#screen-profile .perfil-row .perfil-row-txt,
#screen-painel .perfil-row .perfil-row-txt{flex:1;min-width:0}
/* v174: "Sair da conta" — última fileira do perfil. Mesmo chassi da .perfil-row
   (fio, padding, tipografia), sem o chevron (ação terminal, não navega adiante)
   e com ícone à esquerda. Tom levemente de alerta pra distinguir das demais. */
#screen-profile .perfil-row-sair::after{content:none !important}
#screen-profile .perfil-row-sair{color:rgba(224,122,106,.9) !important}
#screen-profile .perfil-row-sair:hover{color:#e07a6a !important}
#screen-profile .perfil-row-sair .perfil-row-ico{flex:none}
/* variante de duas linhas (localização) */
#screen-profile .perfil-row-2l{justify-content:space-between}
#screen-profile .perfil-row-2l .perfil-row-col{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#screen-profile .perfil-row-2l .perfil-row-tit{font-size:var(--fileira-fs);font-weight:var(--fileira-peso);color:var(--fileira-cor);transition:color .18s}
#screen-profile .perfil-row-2l:hover .perfil-row-tit{color:#fafafa}
#screen-profile .perfil-row-2l .perfil-row-sub{font-size:11.5px;font-weight:400;color:rgba(250,250,250,.45)}
/* PLANO — label + fio + meta (nome do plano e status) à direita */
#screen-profile .plan-current{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(250,250,250,.6);margin:28px 0 4px}
#screen-profile .plan-lbl{order:0;flex:none}
#screen-profile .plan-current::after{content:'';order:1;flex:1;height:1px;background:rgba(255,255,255,.07)}
#screen-profile .plan-meta{order:2;display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0}
#screen-profile .plan-estado{font-size:12px !important}
#screen-profile .plan-estado.estado-cancelada,
#screen-profile .plan-estado.estado-sem{color:#e07a6a !important}
/* o plan-banner base era flex lado-a-lado (v134) — no editorial vira bloco:
   label+meta em cima, fileiras abaixo em largura total */
#screen-profile .plan-banner{display:block !important;margin:0 20px !important;padding:0 !important}
#screen-profile .plan-actions{display:block;margin:0;gap:0}
#screen-profile .plan-actions .btn-upgrade{display:flex;align-items:center;width:100%;background:none !important;border:none;border-bottom:1px solid rgba(255,255,255,.06) !important;border-radius:0 !important;box-shadow:none !important;margin:0;padding:var(--fileira-pad-y) 0 !important;font-family:var(--font-app);font-size:var(--fileira-fs) !important;font-weight:var(--fileira-peso) !important;color:var(--fileira-cor) !important;cursor:pointer;text-align:left;transition:color .18s}
#screen-profile .plan-actions .btn-upgrade:hover{color:#fafafa !important;background:none !important;filter:none !important;transform:none !important;opacity:1 !important}
#screen-profile .plan-actions .btn-upgrade::after{content:'\203A';margin-left:auto;font-size:15px;line-height:1;color:rgba(250,250,250,.3)}

#screen-profile .loc-wrap{margin:0 20px}
@media(min-width:768px){ #screen-profile .plan-banner{margin:0 !important} #screen-profile .loc-wrap{margin:0} }

/* ============================================================
   v147 — SEGUIR ADVOGADOS
   ============================================================ */
/* botão Seguir/Seguindo no perfil público (pill, tema v141) */
/* v182: "Seguir" = SÓLIDO BRANCO (padrão v141), ocupa o espaço restante da linha
   de ações. Texto = token --bg-app (#111213, NÃO #141416). O estado "Seguindo"
   da v147 é PRESERVADO (#7dedb0 sobre rgba(52,217,119,.08)); só o "Seguir" mudou. */
.seguir-btn{
  flex:1;padding:10px;border-radius:10px;cursor:pointer;font-family:var(--font-app);
  font-size:13.5px;font-weight:600;white-space:nowrap;text-align:center;
  transition:background .18s,color .18s,border-color .18s,opacity .18s;
  background:#fafafa;color:var(--bg-app);border:1px solid #fafafa;
}
.seguir-btn:hover{ background:#e8e8ea;border-color:#e8e8ea; }
.seguir-btn:disabled{ opacity:.6;cursor:default; }
.seguir-btn.seguindo{
  color:#7dedb0;background:rgba(52,217,119,.08);border:1px solid rgba(52,217,119,.25);
}
.seguir-btn.seguindo:hover{ background:rgba(52,217,119,.12); }
/* v183: no desktop o botão parava de esticar pela janela inteira (a coluna da
   tela não tem largura máxima + flex:1). Cap de 240px, alinhado à ESQUERDA — o
   .pp-actions já é flex-start, então as redes ficam logo após o botão (gap 10),
   não empurradas pra borda. flex:0 (não cresce) + basis fixa = mesma largura em
   "Seguir" e "Seguindo", sem salto ao clicar. Mobile (<768) INTOCADO. */
@media(min-width:768px){
  #screen-perfil-publico .seguir-btn{ flex:0 1 240px; max-width:240px; }
  /* v184: no desktop o .main-content ganhou o respiro de 32px do grid (List D);
     as seções (que trazem 18px lateral no mobile) zeram o recuo pra o conteúdo
     alinhar pela mesma margem das outras telas logadas, não somar 32+18. */
  #screen-perfil-publico .pp-ident,
  #screen-perfil-publico .pp-bio,
  #screen-perfil-publico .pp-metrics,
  #screen-perfil-publico .pp-actions,
  #screen-perfil-publico .pp-post,
  #screen-perfil-publico .perfilpub-posts-vazio{ padding-left:0; padding-right:0; }
  #screen-perfil-publico .perfilpub-posts-sec .section-title{ padding-left:0 !important; padding-right:0 !important; }
}
/* ============================================================
   v193 — MODAIS Seguidores/Seguindo na pele EDITORIAL
   ============================================================
   Saíram o card interno (fundo/borda/raio 18px) e o chevron: as fileiras ficam
   direto sobre o fundo do modal, separadas por fio de 1px FULL-BLEED com o
   conteúdo recuado em --gutter (mesma doutrina do /perfil v153). O card do
   modal traz padding próprio (28px 24px), então as fileiras usam margin
   NEGATIVA pra o fio ir de borda a borda e o padding devolve o recuo. */
/* v195: a superfície editorial virou a BASE — aqui fica só a largura própria. */
#seguir-modal .juris-modal-card{ max-width:420px; }
#seguir-modal-lista{ margin-top:2px; }
.seguir-lista{ display:flex;flex-direction:column; }
.seguir-item{
  display:flex;align-items:center;gap:12px;   /* respiro identidade ↔ botão */
  /* SEM width:100% — com ele a caixa não cresce e a margem negativa só empurra
     pra esquerda (o fio morria antes da borda direita). O stretch do flex
     column + as margens negativas é que dão o full-bleed. */
  margin:0 -24px;                       /* anula o padding lateral do card */
  padding:0 var(--gutter);              /* e devolve o recuo do conteúdo */
  border-bottom:1px solid var(--fio);
}
.seguir-item:hover{ background:rgba(255,255,255,.03); }
/* alvo = avatar + identidade. flex:1 → cobre a fileira toda menos o botão. */
.seguir-item-alvo{
  display:flex;align-items:center;gap:14px;flex:1;min-width:0;   /* gap 14 = .rank-card */
  background:none;border:none;padding:13px 0;margin:0;   /* 13px = .rank-card editorial */
  font-family:var(--font-app);text-align:left;cursor:pointer;
}
.seguir-item-avatar-wrap{ flex:none; }
.seguir-item .seguir-item-avatar{
  width:37px;height:37px;border-radius:50%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;color:#fafafa;overflow:hidden;
}
.seguir-item-id{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px; }
/* v194: valores da LISTA CANÔNICA (#screen-painel .rank-name/.rank-spec) — o
   análogo mais próximo (avatar + nome + OAB, fileira clicável). A spec da tarefa
   pedia 15px/500 e 13px, mas o critério "mesma anatomia da lista editorial"
   manda, e a lista real usa 13.5/600 e 12px. Reportado ao dono. */
.seguir-item-nome{ font-size:13.5px;font-weight:600;color:rgba(250,250,250,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.seguir-item-oab{ font-size:12px;color:rgba(250,250,250,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
/* botão inline: pílula do padrão v147/v182 em escala de fileira. flex:none — com
   nome longo quem trunca é o NOME (ellipsis no .seguir-item-nome), nunca o botão. */
.seguir-item-btn{
  flex:none;padding:6px 13px;border-radius:999px;cursor:pointer;
  font-family:var(--font-app);font-size:12px;font-weight:600;white-space:nowrap;
  background:#fafafa;color:var(--bg-app);border:1px solid #fafafa;
  transition:background .18s,color .18s,border-color .18s,opacity .18s;
}
.seguir-item-btn:hover{ background:#e8e8ea;border-color:#e8e8ea; }
.seguir-item-btn.seguindo{
  background:none;color:rgba(250,250,250,.6);border:1px solid rgba(255,255,255,.18);
}
.seguir-item-btn.seguindo:hover{ background:rgba(255,255,255,.06); }
.seguir-item-btn:disabled{ opacity:.6;cursor:default; }
/* pendente = estado do lote ainda não chegou: reserva o espaço mas não pisca
   "Seguir" pra depois virar "Seguindo". */
.seguir-item-btn.pendente{ visibility:hidden; }
/* cabeçalho: reusa o .section-title editorial (grupo lá em cima) + contador */
#seguir-modal .section-title{ margin-bottom:14px; padding-right:40px; }  /* livra o ✕ do canto */
#seguir-modal .seguir-total{
  order:2;flex:none;font-size:11px;font-weight:400;letter-spacing:0;
  color:rgba(250,250,250,.45);text-transform:none;
}
.seguir-vazio{ text-align:center;color:rgba(250,250,250,.5);font-size:13px;padding:24px 12px; }
.seguir-mais-wrap{ text-align:center;padding:14px 0 4px; }
/* v194: sem próxima página o wrapper fica vazio e sobrava 18px de vão morto
   embaixo da última fileira (somados aos 24px do card). */
.seguir-mais-wrap:empty{ padding:0; }
.seguir-mais-btn{
  background:none;border:1px solid rgba(255,255,255,.2);color:rgba(250,250,250,.85);
  border-radius:999px;padding:8px 20px;font-family:var(--font-app);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s;
}
.seguir-mais-btn:hover{ background:rgba(255,255,255,.06); }
.seguir-mais-btn:disabled{ opacity:.6;cursor:default; }


/* ============================================================
   v153 — PERFIL: gutter único + métricas unificadas
   ============================================================
   ORIGEM DO BUG (v143→v152): cada bloco do /perfil trazia o próprio recuo
   lateral por conta própria e com valores diferentes — .header 20px,
   .profile-head/.perfil-row 2px, .perf-section/.plan-banner/.loc-wrap/
   .profile-agenda margin 0 20px. Resultado no mobile: faixa de stats e
   fileiras de seguidores coladas na borda (2px) e o chevron ">" cortado.
   CORREÇÃO: o recuo passa a ser UM só (--gutter), aplicado como PADDING de
   blocos que ocupam a largura toda — nunca como margin. Assim o conteúdo
   recua 20px e os fios de 1px (border-* desses mesmos blocos) continuam indo
   de borda a borda. No desktop o recuo vem do padding:32px do .main-content
   (v144) e o gutter dos blocos é zerado pra não duplicar. */

/* nenhum bloco do perfil carrega margem lateral própria */
#screen-profile .profile-head,
#screen-painel .perf-section,
#screen-profile .plan-banner,
#screen-profile .loc-wrap,
#screen-profile .profile-agenda,
#screen-profile .perfil-social{
  margin-left:0 !important; margin-right:0 !important;
}
/* ...e o recuo vem do padding de cada um (fio full-bleed) */
#screen-profile .profile-head{ padding-left:var(--gutter); padding-right:var(--gutter) }
#screen-profile .profile-about{ padding-left:var(--gutter); padding-right:var(--gutter) }
/* v161: as Avaliações Recentes moram no /painel agora */
#screen-painel .profile-reviews{ padding-left:var(--gutter); padding-right:var(--gutter) }
#screen-profile .profile-agenda{ padding-left:var(--gutter) !important; padding-right:var(--gutter) !important }
#screen-painel .perf-section{ padding-left:0 !important; padding-right:0 !important }
#screen-profile .perfil-row,
#screen-painel .perfil-row{ padding-left:var(--gutter) !important; padding-right:var(--gutter) !important }
#screen-profile .plan-actions .btn-upgrade{ padding-left:var(--gutter) !important; padding-right:var(--gutter) !important }
#screen-painel #perf-conversao{ padding-left:var(--gutter) !important; padding-right:var(--gutter) !important }
/* labels "LABEL ———" (v141/v145): o fio nasce depois do texto e morre no gutter */
#screen-painel .perf-title{ margin-left:var(--gutter) !important; margin-right:var(--gutter) !important }
#screen-profile .plan-current{ margin-left:var(--gutter) !important; margin-right:var(--gutter) !important }
/* o lápis é absoluto dentro do .profile-head (agora com padding) — respeita o gutter */
#screen-profile .btn-edit-profile{ right:var(--gutter) !important }

/* A) BLOCO SOCIAL — duas colunas iguais, divisor vertical SÓ entre elas,
   fio horizontal em cima e embaixo (full-bleed). Coluna inteira clicável. */
#screen-profile .perfil-social{
  display:flex; align-items:stretch; margin:10px 0 0;
  border-top:1px solid var(--fio); border-bottom:1px solid var(--fio);
}
#screen-profile .perfil-social-col{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:none; border:none; border-radius:0; box-shadow:none; margin:0;
  padding:16px var(--gutter); font-family:var(--font-app); text-align:left; cursor:pointer;
  transition:background .18s;
}
#screen-profile .perfil-social-col + .perfil-social-col{ border-left:1px solid var(--fio) }
#screen-profile .perfil-social-col:hover{ background:rgba(255,255,255,.03) }
#screen-profile .perfil-social-num{
  font-size:34px; line-height:1.05; font-weight:700; color:#fafafa;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
#screen-profile .perfil-social-lbl{ font-size:15px; font-weight:400; color:rgba(250,250,250,.5) }

/* B) SEU DESEMPENHO — 6 fileiras rótulo→valor; fio embaixo de cada uma, nunca
   acima da primeira (o título já traz o seu). */
#screen-painel .perf-row{ display:block }
/* v154: mesma FILEIRA das linhas de ação ("Ver planos") — padding, corpo e cor
   do rótulo saem dos tokens; a única diferença permitida é o peso/cor do valor.
   v155: o fio saiu do `:not(:last-child)` e passou a valer pra TODAS as fileiras.
   Com a CONVERSÃO oculta, "Tempo médio" virou a última linha da seção e ficava
   sem separador antes de "Compartilhar minhas métricas" — agora fecha com fio,
   igual a toda fileira da tela (localização, Ver planos, Gerenciar assinatura). */
#screen-painel .perf-row .perf-metric{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:var(--fileira-pad-y) var(--gutter) !important;
  border-bottom:1px solid var(--fio) !important; text-align:left;
}
#screen-painel .perf-row .perf-lbl{
  order:1; flex:none; font-size:var(--fileira-fs) !important; font-weight:var(--fileira-peso) !important;
  color:var(--fileira-cor) !important; text-transform:none !important;
  letter-spacing:0 !important; margin-top:0 !important;
}
/* valor: MESMO corpo do rótulo (não estoura a altura da linha) — destaca por
   peso e cor, só isso. */
#screen-painel .perf-row .perf-val{
  order:2; min-width:0; font-size:var(--fileira-fs) !important; font-weight:700 !important;
  font-variant-numeric:tabular-nums !important; color:#fafafa !important;
  letter-spacing:0 !important; text-align:right;
}
/* estado vazio: texto discreto no lugar do traço solto (nunca "—") */
#screen-painel .perf-row .perf-val.perf-val-vazio{
  font-weight:400 !important; color:rgba(250,250,250,.45) !important;
}
/* mesma regra pro valor da CONVERSÃO (inline-styled desde a v112 → !important) */
#screen-painel #perf-conversao-val.perf-val-vazio{
  font-weight:400 !important; color:rgba(250,250,250,.45) !important;
}

/* DESKTOP (v144): o recuo é o padding:32px do .main-content — zera o gutter dos
   blocos pra não duplicar. */
@media(min-width:768px){
  #screen-profile .profile-head,
  #screen-profile .profile-about,
  #screen-painel .profile-reviews,
  #screen-profile .profile-agenda,
  #screen-profile .perfil-social-col,
  #screen-profile .perfil-row,
  #screen-painel .perfil-row,
  #screen-profile .plan-actions .btn-upgrade,
  #screen-painel #perf-conversao,
  #screen-painel .perf-row .perf-metric{
    padding-left:0 !important; padding-right:0 !important;
  }
  #screen-painel .perf-title,
  #screen-profile .plan-current{ margin-left:0 !important; margin-right:0 !important }
  #screen-profile .btn-edit-profile{ right:0 !important }
  /* a 2ª coluna do bloco social precisa respirar do divisor vertical */
  #screen-profile .perfil-social-col + .perfil-social-col{ padding-left:24px !important }
}


/* ============================================================
   v156 — ESTRELAS (SVG proporcional) + AVALIAÇÕES RECENTES
   ============================================================ */
/* estrelas: base apagada + cópia cheia recortada por largura (renderEstrelas,
   app.js). Global de propósito — é o helper canônico pra qualquer tela. */
.estrelas{ display:inline-flex; align-items:center; gap:2px; line-height:0 }
.estrela{ position:relative; display:block; width:14px; height:14px; flex:none }
.estrela .estrela-svg{ display:block; width:14px; height:14px }
.estrela-fill{ position:absolute; left:0; top:0; height:14px; overflow:hidden; display:block }

/* AVALIAÇÕES RECENTES — lateral pelo --gutter (20px) e NÃO pelos 24px da spec:
   o alinhamento com o resto da tela manda (era o item 2 da verificação do dono);
   os valores verticais (22/20) são os da spec. */
#screen-painel .profile-reviews{
  font-family:var(--font-app);
  padding:22px var(--gutter) 20px !important;
  border-top:1px solid var(--fio);
}
/* v157: o título voltou pro padrão dos vizinhos (SEU DESEMPENHO / PLANO /
   SOBRE) — 11px, .15em, mesma cor e peso. Só o alinhamento por baseline e o
   gap de 10px do contador ficaram da v156. */
#screen-painel .profile-reviews .section-title{
  font-family:var(--font-app) !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.15em !important;
  color:rgba(250,250,250,0.6) !important; text-transform:uppercase !important;
  align-items:baseline !important; gap:10px !important; margin-bottom:14px !important;
}
#screen-painel .profile-reviews #reviews-total{
  font-size:12px; font-weight:400; color:rgba(250,250,250,0.45); letter-spacing:0; text-transform:none;
}
/* v181: 10px entre cards (era 12) */
#screen-painel .profile-reviews .reviews-list{ display:flex; flex-direction:column; gap:10px }
/* v181: REDESIGN. Fundo IGUAL ao da página (--bg-app, v158) — a borda de 1px é a
   ÚNICA coisa que desenha o card, então fica em .12 (1.39:1; NÃO usar --fio, que
   é hairline de separador, não contorno). Raio 16, gap 6. Padding CONDICIONAL: o
   card sem comentário encolhe (reverte a altura única da v158). */
#screen-painel .profile-reviews .review-item{
  background:var(--bg-app);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; padding:14px 16px; box-shadow:none;
  display:flex; flex-direction:column; gap:6px; color:inherit;
}
#screen-painel .profile-reviews .review-item.sem-comentario{ padding:10px 16px }
/* linha de cima: [nome + estrelas] à esquerda, [nota · data] à direita.
   min-height:18px segura a linha do card anônimo (só estrelas de 14px), pra não
   ficar mais baixa que a do card com nome. */
#screen-painel .profile-reviews .review-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:0; min-height:18px;
}
/* ESQUERDA — nome + estrelas. flex:1 + min-width:0 pra o nome poder ceder espaço
   (ellipsis) com nome longo; as estrelas ficam flex:none e nunca encolhem. */
#screen-painel .profile-reviews .review-ident{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0 }
#screen-painel .profile-reviews .review-ident .estrelas{ flex:none }
#screen-painel .profile-reviews .review-autor{
  font-size:14.5px; font-weight:600; color:rgba(250,250,250,0.9); margin:0; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* card sem comentário: nome menor (13px) */
#screen-painel .profile-reviews .sem-comentario .review-autor{ font-size:13px }
/* DIREITA — [nota] · [data] (padrão v159). flex:none: nunca encolhe nem quebra. */
#screen-painel .profile-reviews .review-meta{
  display:flex; align-items:center; flex:none; white-space:nowrap;
}
#screen-painel .profile-reviews .review-nota{
  font-size:12px; font-weight:700; color:rgba(250,250,250,0.75); font-variant-numeric:tabular-nums;
}
#screen-painel .profile-reviews .review-sep{ color:rgba(250,250,250,0.25); margin:0 6px }
#screen-painel .profile-reviews .review-date{ font-size:12px; color:rgba(250,250,250,0.35); flex:none; white-space:nowrap }
/* COMENTÁRIO — só existe quando há texto (JS não renderiza o <p> vazio). Clamp de
   3 linhas com reticência como MÁXIMO, SEM min-height: o card encolhe com 1-2 linhas. */
#screen-painel .profile-reviews .review-comment{
  font-size:14px; line-height:1.5; color:rgba(250,250,250,0.75); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
#screen-painel .profile-reviews .reviews-vazio{ font-size:15px; color:#6a6a70; margin:0 }

/* desktop: o recuo continua sendo o padding:32px do .main-content (v144/v153) */
@media(min-width:768px){
  #screen-painel .profile-reviews{ padding-left:0 !important; padding-right:0 !important }
}


/* ============================================================
   v166 — abas: ícone + rótulo SEMPRE (colapso da v164/v165 removido)
   ============================================================
   O `.seg-nav-ico` e toda a máquina de colapso saíram: com o rótulo sempre
   visível a largura do tab é ESTÁTICA, então medir no clique volta a bastar
   (nada de scrollWidth preditivo, transitionend ou remedida por timeout).
   Fica o que a v165 acertou: sublinhado de 2px deslizando com ease-out.
   As 4 barras têm ícone agora — as do Painel usam SVG de traço 1.7, mesma
   família do feed e da nav principal. */
.seg-nav .seg-tab svg{ width:16px; height:16px; flex:none }

/* =====================================================
   v245 — MURAL de leads não atendidos (aba do Dashboard), selo Elite,
   cartão do advogado Elite na tela do cliente e aviso de áreas por plano.
   ===================================================== */
#screen-dashboard .mural-wrap{padding:4px 20px 110px}
#screen-dashboard .mural-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:2px 0 14px}
#screen-dashboard .mural-intro p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(250,250,250,.72)}
#screen-dashboard .mural-intro p span{color:rgba(250,250,250,.45)}
#screen-dashboard .mural-link{flex:none;background:none;border:none;color:rgba(250,250,250,.75);font:600 13px var(--font-app);cursor:pointer;padding:4px 6px;border-radius:8px;white-space:nowrap}
#screen-dashboard .mural-link:hover{color:#fafafa;background:rgba(255,255,255,.06)}
#screen-dashboard .mural-carregando,#screen-dashboard .mural-vazio{text-align:center;color:rgba(250,250,250,.55);font-size:14px;padding:36px 12px;line-height:1.6}
#screen-dashboard .mural-vazio i{font-size:26px;opacity:.5;margin-bottom:6px}
#screen-dashboard .mural-vazio small{color:rgba(250,250,250,.4)}
#screen-dashboard .mural-card .lead-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
#screen-dashboard .mural-espera{font-size:11.5px;color:rgba(250,250,250,.5);white-space:nowrap}
#screen-dashboard .mural-travado{opacity:.7;cursor:not-allowed;justify-content:center}
#screen-dashboard .mural-trancado{text-align:center;padding:34px 18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:none}   /* v248: só a moldura, sem o fundo claro */
#screen-dashboard .mural-trancado-ico{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:#fafafa;font-size:18px}
#screen-dashboard .mural-trancado h3{margin:0 0 8px;font-size:18px;font-weight:700;color:#fafafa}
#screen-dashboard .mural-trancado p{margin:0 auto 18px;max-width:420px;font-size:14px;line-height:1.55;color:rgba(250,250,250,.65)}
#screen-dashboard .mural-trancado p:not(:last-of-type){margin-bottom:10px}
#screen-dashboard .mural-trancado p:last-of-type{color:#fafafa;font-weight:500}
#screen-dashboard .mural-cta{background:#fafafa;color:var(--bg-app);border:none;border-radius:10px;padding:11px 22px;font:700 14px var(--font-app);cursor:pointer}
#screen-dashboard .mural-cta:hover{background:#e8e8ea}

/* selo Elite: ranking (.rank-name) e perfil público (.v-badge) */
.selo-elite{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#1a1408;background:var(--faixa-ouro);padding:2px 8px;border-radius:999px;vertical-align:middle}
.selo-elite i{font-size:9.5px}
.v-badge.selo-elite{font-size:11px;padding:4px 10px}

/* cartão do advogado Elite na espera do cliente */
#screen-client .cartao-adv{text-align:left;margin:22px auto 0;max-width:440px;border:1px solid rgba(224,189,102,.35);border-radius:16px;padding:16px;background:linear-gradient(rgba(224,189,102,.07),rgba(255,255,255,.02));animation:slideUp .45s ease}
#screen-client .cartao-adv-topo{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:11.5px;font-weight:600}
#screen-client .cartao-adv-selo{color:var(--faixa-ouro)}
#screen-client .cartao-adv-ok{color:var(--verde-claro)}
#screen-client .cartao-adv-id{display:flex;align-items:center;gap:12px}
#screen-client .cartao-adv-foto{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;font-size:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:#fafafa;font-weight:600}
#screen-client .cartao-adv-id b{display:block;font-size:17px;color:#fafafa}
#screen-client .cartao-adv-id small{display:block;font-size:12.5px;color:rgba(250,250,250,.55);margin-top:1px}
#screen-client .cartao-adv-nota{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:13px;font-weight:700;color:#fafafa}
#screen-client .cartao-adv-nota i{color:var(--faixa-ouro);font-size:12px}
#screen-client .cartao-adv-nota em{font-style:normal;font-weight:400;color:rgba(250,250,250,.5)}
#screen-client .cartao-adv-extra{margin:12px 0 0;font-size:12.5px;color:rgba(250,250,250,.6)}
#screen-client .cartao-adv-areas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#screen-client .cartao-adv-areas span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(250,250,250,.85)}
#screen-client .cartao-adv-bio{margin:12px 0 0;font-size:13px;line-height:1.5;color:rgba(250,250,250,.75)}

/* aviso de áreas por plano no "Editar meus dados" */
#edit-perfil-modal .editp-areas-plano{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:rgba(250,250,250,.55)}
#edit-perfil-modal .editp-areas-plano.alerta{color:#f0c27a}
#edit-perfil-modal .editp-areas-plano:empty{display:none}
#edit-perfil-modal .editp-link{background:none;border:none;padding:0;color:#fafafa;font:600 12.5px var(--font-app);text-decoration:underline;cursor:pointer}

/* v243 — MODO DEMO (/painel?demo=1, iframe da landing): a janela não rola por
   dentro (a rolagem da roda/dedo segue pra landing) e some o que é de sessão real. */
html.modo-demo, html.modo-demo body{overflow:hidden!important}
html.modo-demo .screen.active{overflow:hidden!important}
html.modo-demo #update-banner{display:none!important}

/* v247 — aviso de áreas livres no bloco PLANO do /perfil (renderAvisoAreasPlano) */
#screen-profile .plan-areas-aviso{margin:12px var(--gutter) 4px;padding:14px 16px;border:1px solid rgba(52,217,119,.28);border-radius:12px;background:rgba(52,217,119,.06)}
#screen-profile .plan-areas-aviso[hidden]{display:none}
#screen-profile .plan-areas-aviso p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(250,250,250,.75)}
#screen-profile .plan-areas-aviso b{color:#fafafa;font-weight:600}
#screen-profile .plan-areas-acoes{display:flex;align-items:center;gap:16px;margin-top:12px}
#screen-profile .plan-areas-btn{background:#fafafa;color:var(--bg-app);border:none;border-radius:8px;padding:9px 14px;font:600 13px var(--font-app);cursor:pointer}
#screen-profile .plan-areas-depois{background:none;border:none;padding:0;color:rgba(250,250,250,.55);font:500 13px var(--font-app);cursor:pointer}
#screen-profile .plan-areas-depois:hover{color:#fafafa}

/* v247 — COMPARATIVO DOS PLANOS (.cmp-*): tabela única no /planos (#cmp-planos),
   copiada pro /planos/assinar (#cmp-planos-assinar). Coluna do Pro destacada
   igual ao card .pp-plano-destaque. Cabe em 375px: 1ª coluna ~40%, 3 de ~20%. */
#screen-plans-public .pp-compara{padding:0 0 64px}
#screen-plans-public .pp-compara-tit{margin-bottom:22px}
.cmp-tabela{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--font-app)}
.cmp-tabela .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-tabela th,.cmp-tabela td{padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle}
.cmp-tabela thead th{width:20%;text-align:center;font-size:16px;font-weight:700;color:#fafafa;padding:16px 4px 14px;border-bottom:1px solid rgba(255,255,255,.14)}
.cmp-tabela thead th:first-child{width:40%}
.cmp-tabela thead th small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:rgba(250,250,250,.5);white-space:nowrap}
.cmp-tabela tbody th{text-align:left;font-size:15px;font-weight:600;color:#fafafa;line-height:1.3;padding-left:0}
.cmp-tabela tbody th small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:rgba(250,250,250,.5);line-height:1.4}
.cmp-tabela td{text-align:center;font-size:15px;color:rgba(250,250,250,.88)}
.cmp-tabela td b{color:#fafafa;font-weight:700}
.cmp-tabela td small{display:block;font-size:11.5px;color:rgba(250,250,250,.5);line-height:1.3;margin-top:1px}
.cmp-tabela .cmp-dest{background:rgba(255,255,255,.045)}
.cmp-tabela thead .cmp-dest{border-radius:12px 12px 0 0}
.cmp-tabela tr.cmp-grupo th{padding:28px 0 10px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,250,250,.5);border-bottom:1px solid rgba(255,255,255,.14);background:none}
.cmp-sim{width:19px;height:19px;color:var(--verde);vertical-align:middle}
.cmp-nao{color:rgba(250,250,250,.28);font-size:15px}
.cmp-num{display:block;font-size:22px;line-height:1;letter-spacing:-.02em;margin-bottom:7px}
.cmp-pts{display:inline-flex;gap:3px}
.cmp-pts i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.14)}
.cmp-pts i.on{background:var(--verde)}
.cmp-nota{margin:18px 0 0;font-size:14px;line-height:1.6;color:rgba(250,250,250,.6);max-width:70ch}
.cmp-nota b{color:#fafafa;font-weight:600}
@media (max-width:480px){
  .cmp-tabela tbody th{font-size:14px}
  .cmp-tabela tbody th small{font-size:11.5px}
  .cmp-tabela td{font-size:14px;padding-left:3px;padding-right:3px}
  .cmp-tabela thead th{font-size:15px}
  .cmp-tabela thead th small{font-size:11px;letter-spacing:-.01em}
  .cmp-pts{gap:2px}
  .cmp-pts i{width:5px;height:5px}
}
@media (min-width:900px){
  .cmp-tabela tbody th{font-size:16px}
  .cmp-tabela td{font-size:16px}
  .cmp-tabela thead th{font-size:18px}
}
/* no /planos/assinar: mesma tabela, no gutter do app */
#screen-plans .cmp-planos-app{padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom))}
#screen-plans .cmp-planos-app::before{content:'Compare os planos';display:block;margin:8px 0 4px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,250,250,.6)}
@media (min-width:768px){ #screen-plans .cmp-planos-app{max-width:960px;margin:0 auto} }
@media(min-width:768px){ #screen-profile .plan-areas-aviso{margin-left:0;margin-right:0} }

/* v249 — CENTRAL DE AJUDA (/ajuda, #screen-ajuda). Chassi de tela do app herdado
   dos seletores da Jurisprudência (header, .main-content, .section-title);
   aqui só o miolo: busca, índice de assuntos e perguntas em <details>. */
#screen-ajuda .main-content{max-width:760px}
#screen-ajuda .aj-busca{position:relative;margin:0 0 14px}
#screen-ajuda .aj-busca svg{position:absolute;left:14px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:rgba(250,250,250,.4);pointer-events:none}
#screen-ajuda .aj-busca input{width:100%;box-sizing:border-box;background:none;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px 12px 40px;font:400 15px var(--font-app);color:#fafafa;outline:none;-webkit-appearance:none;appearance:none}
#screen-ajuda .aj-busca input:focus{border-color:rgba(255,255,255,.35)}
#screen-ajuda .aj-busca input::placeholder{color:rgba(250,250,250,.4)}
#screen-ajuda .aj-indice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
#screen-ajuda .aj-indice button{background:none;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font:500 13px var(--font-app);color:rgba(250,250,250,.75);cursor:pointer;transition:border-color .18s,color .18s}
#screen-ajuda .aj-indice button:hover{border-color:rgba(255,255,255,.35);color:#fafafa}
#screen-ajuda .aj-sec{scroll-margin-top:84px}
#screen-ajuda .aj-sec[hidden]{display:none}
#screen-ajuda .aj-item{border-bottom:1px solid var(--fio)}
#screen-ajuda .aj-item[hidden]{display:none}
#screen-ajuda .aj-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;font-size:15.5px;font-weight:600;line-height:1.4;color:#fafafa}
#screen-ajuda .aj-item summary::-webkit-details-marker{display:none}
#screen-ajuda .aj-item summary svg{width:17px;height:17px;flex:none;color:rgba(250,250,250,.45);transition:transform .2s}
#screen-ajuda .aj-item[open] summary svg{transform:rotate(180deg)}
#screen-ajuda .aj-resp{padding:0 0 16px;font-size:14.5px;line-height:1.6;color:rgba(250,250,250,.72)}
#screen-ajuda .aj-resp p{margin:0 0 10px}
#screen-ajuda .aj-resp p:last-child{margin-bottom:0}
#screen-ajuda .aj-resp ul{margin:0 0 10px;padding-left:18px}
#screen-ajuda .aj-resp ul:last-child{margin-bottom:0}
#screen-ajuda .aj-resp li{margin:0 0 4px}
#screen-ajuda .aj-resp b{color:#fafafa;font-weight:600}
#screen-ajuda .aj-link{background:none;border:none;padding:0;font:600 14.5px var(--font-app);color:#fafafa;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#screen-ajuda .aj-vazio{text-align:center;color:rgba(250,250,250,.55);font-size:14px;padding:28px 0}
#screen-ajuda .aj-contato{display:flex;flex-direction:column;gap:4px;margin:28px 0 8px;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:14px}
#screen-ajuda .aj-contato b{font-size:15.5px;color:#fafafa}
#screen-ajuda .aj-contato span{font-size:14px;color:rgba(250,250,250,.6)}
#screen-ajuda .aj-contato-btn{align-self:flex-start;margin-top:10px;background:#fafafa;color:var(--bg-app);border-radius:8px;padding:9px 14px;font:600 13.5px var(--font-app);text-decoration:none}
#screen-ajuda .aj-indice[hidden]{display:none}
#screen-ajuda .aj-sec{margin-top:26px}
#screen-ajuda .aj-sec .section-title{margin-bottom:2px}
@media (max-width:767px){ #screen-ajuda .main-content{padding-left:var(--gutter);padding-right:var(--gutter)} }