/* Tokens de cor/tipografia (paleta, semânticos, claro/escuro, @font-face do
   Google Fonts) moraram aqui até a Fase 9 — extraídos pra styles/tokens.css
   pra serem importados também pela experiência web desktop (painel/), sem
   duplicar nenhum valor. Qualquer ajuste de cor/fonte da marca entra em
   tokens.css, nunca aqui. */
@import url("tokens.css?v=1789754424");

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  display: flex; justify-content: center;
}
button { font-family: inherit; }
input { font-family: inherit; }
button, .day-pill, .chip, .qz-opt, .navbar button, .icon-btn { transition: opacity .12s ease, background-color .12s ease, border-color .12s ease; }
button:active, .day-pill:active, .chip:active, .qz-opt:not(.disabled):active, .icon-btn:active { opacity: 0.8; }
button:disabled { opacity: 0.55; cursor: default; }

.phone {
  /* min(100vh, 860px): no celular de verdade continua esticando até a
     borda da tela (100vh sempre vence lá, a viewport nunca chega perto de
     860px); é só em preview de navegador/desktop bem alto que 100vh puro
     estufava um vão enorme entre o último card e o menu inferior — 860px
     é aproximadamente a altura de um iPhone alto (ver também o
     min-height:auto do modo computador mais abaixo, que já resolvia isso
     lá, faltava aqui no caso mobile). */
  width: 100%; max-width: 430px; min-height: min(100vh, 860px);
  background: var(--app-bg);
  display: flex; flex-direction: column;
  position: relative;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}

#view-root { flex: 1; display: flex; flex-direction: column; }

/* ---- gate screens (login/cadastro) ---- */
.gate { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; gap: 22px; }
.gate-mark { display: flex; align-items: center; gap: 10px; }
.gate-mark img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.gate-mark .name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.gate h1 { font-weight: 600; font-size: 25px; margin: 4px 0 2px; letter-spacing: -0.01em; }
.gate .sub { color: var(--ink-2); font-size: 14px; margin: 0; }
.pf-dots { display: flex; gap: 5px; }
.pf-dot { width: 20px; height: 4px; border-radius: 2px; background: var(--line); }
.pf-dot.active { background: var(--accent); }
.pf-dot.done { background: var(--line-strong); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--ink-3); font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.field input {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 11px 13px; font-size: 14.5px; outline: none;
}
.field input:focus { border-color: var(--blue); }
.field .hint { font-size: 11.5px; color: var(--ink-3); }
.auth-msg { font-size: 12.5px; color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 9px 11px; margin: 0; }
.btn-primary {
  border: none; background: var(--accent); color: var(--accent-ink);
  border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-text { background: none; border: none; color: var(--ink-2); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px 0; align-self: center; }

/* ---- página de vendas (hotsite real, primeira tela antes de cadastro/login) ----
   Diferente do resto do app: enquanto session.screen === 'landing', router.js
   marca <body class="landing-mode">, e essas duas regras soltam o .phone
   (o "quadro de celular" de 430px) pra essa tela virar um site de largura
   cheia de verdade. Especificidade (body.landing-mode .phone) é maior que a
   do `.phone` normal — inclusive o de dentro do @media de "modo computador"
   lá embaixo — então essas regras vencem independente da ordem no arquivo. */
body.landing-mode { padding: 0; }
body.landing-mode .phone {
  max-width: none; min-height: 100vh; border: none; border-radius: 0; box-shadow: none;
  background: var(--app-bg);
}

.salespage { display: flex; flex-direction: column; width: 100%; }

.ls-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 1120px; width: 100%; margin: 0 auto;
}
.ls-nav-actions { display: flex; align-items: center; gap: 10px; }
.ls-nav-link { background: none; border: none; color: var(--ink-2); font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 8px 6px; text-decoration: none; }
.ls-nav-cta { padding: 10px 18px; font-size: 13.5px; }

.ls-hero {
  display: flex; flex-direction: column; gap: 36px;
  padding: 12px 24px 52px; max-width: 1120px; width: 100%; margin: 0 auto;
}
.ls-hero-text { display: flex; flex-direction: column; gap: 16px; }
.ls-eyebrow {
  font-family: var(--font-label); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold);
}
.ls-hero h1 {
  /* cor era fixa em --navy-deep (só funciona no claro) — no escuro o
     título ficava quase invisível em cima do próprio fundo escuro da
     página. var(--ink) acompanha o tema (escuro no claro, claro no
     escuro), igual o resto do texto normal da página. Peso de volta pro
     800: essa é a página de vendas, não uma das telas do vetor que o
     Celso mandou — ele confirmou que gostava do peso que já tinha aqui. */
  font-weight: 800; font-size: 36px; line-height: 1.14;
  letter-spacing: -0.015em; margin: 0; color: var(--ink); max-width: 15ch;
}
.ls-hero-sub { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 46ch; }
.ls-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ls-hero-actions .btn-primary { padding: 14px 26px; font-size: 15px; }
.ls-hero-note { font-size: 12.5px; color: var(--ink-3); }

.ls-hero-visual {
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px; padding: 40px 24px;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  position: relative; overflow: hidden;
}
.ls-hero-visual::before {
  content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: var(--gold); opacity: 0.16; top: -80px; right: -60px;
}

/* mockup decorativo do Início real (ver mockupHtml() em views/landing.js) */
.ls-mock {
  width: 100%; max-width: 300px; background: var(--surface-raised); border-radius: 18px;
  border: 1px solid var(--line); box-shadow: 0 20px 44px -20px rgba(3,28,44,.4);
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 14px; position: relative;
}
.ls-mock-top { display: flex; align-items: center; gap: 8px; }
.ls-mock-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.ls-mock-greet { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.ls-mock-greet span { font-size: 10.5px; color: var(--ink-3); }
.ls-mock-greet strong { font-size: 13px; color: var(--ink); }
.ls-mock-streak {
  font-size: 11px; font-weight: 700; color: var(--gold); background: var(--gold-soft);
  border-radius: 20px; padding: 4px 9px;
}
.ls-mock-card {
  background: var(--navy-deep); color: var(--on-navy); border-radius: 12px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ls-mock-label { font-family: var(--font-label); font-weight: 700; font-size: 9px; letter-spacing: 0.06em; opacity: 0.85; }
.ls-mock-card strong { font-size: 13px; font-weight: 800; }
.ls-mock-bar { height: 5px; background: rgba(244,241,234,.28); border-radius: 4px; overflow: hidden; margin-top: 2px; }
.ls-mock-bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.ls-mock-chips { display: flex; gap: 6px; }
.ls-mock-chip {
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; color: var(--ink-2);
  background: var(--app-bg); border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px;
}
.ls-mock-chip.active { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--navy-deep); }
.ls-mock-quiz {
  border: 1px solid var(--line); background: var(--app-bg); border-radius: 10px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.ls-mock-q { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.ls-mock-opt {
  font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface);
  border-radius: 6px; padding: 7px 9px;
}
.ls-mock-opt.ok { border-color: var(--good); background: var(--good-soft); color: var(--ink); }

.ls-section { padding: 44px 24px; max-width: 1120px; width: 100%; margin: 0 auto; }
.ls-section-head { text-align: center; max-width: 52ch; margin: 0 auto 30px; display: flex; flex-direction: column; gap: 8px; }
.ls-section-head h2 { font-weight: 800; font-size: 26px; margin: 0; color: var(--ink); }
.ls-section-head p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

.ls-features-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ls-feature {
  border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ls-feature-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--navy-deep); color: var(--gold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ls-feature-icon svg { width: 19px; height: 19px; }
.ls-feature strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.ls-feature p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.ls-audience { background: var(--navy-deep); border-radius: 24px; }
.ls-audience-inner { max-width: 62ch; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.ls-audience-inner h2 { font-weight: 800; font-size: 25px; margin: 0; color: var(--on-navy); }
.ls-audience-inner p { font-size: 14.5px; color: var(--blue-soft); line-height: 1.65; margin: 0; }

.ls-cta-band {
  background: var(--gold); color: var(--on-gold); text-align: center;
  padding: 52px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ls-cta-band h2 { font-weight: 800; font-size: 26px; margin: 0; }
.ls-cta-band p { font-size: 14px; opacity: 0.85; margin: 0; max-width: 46ch; }
.ls-cta-band-btn { margin-top: 8px; background: var(--navy-deep); color: var(--on-navy); padding: 14px 28px; font-size: 15px; }

.ls-footer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 24px 40px; text-align: center;
}
.ls-footer p { margin: 0; font-size: 12px; color: var(--ink-3); }

@media (min-width: 860px) {
  .ls-hero { flex-direction: row; align-items: center; padding-top: 40px; padding-bottom: 76px; }
  .ls-hero-text { flex: 1; }
  .ls-hero-visual { flex: 1; }
  .ls-hero h1 { font-size: 46px; max-width: 13ch; }
  .ls-hero-sub { font-size: 16.5px; }
  .ls-features-grid { grid-template-columns: repeat(3, 1fr); }
  .ls-section { padding: 64px 40px; }
  .ls-nav { padding: 22px 40px; }
}

.profile-recap {
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.profile-recap .ptag { font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.profile-recap ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }

/* ---- app chrome ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px; gap: 8px;
}
.topbar .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.conta-foto-row { display: flex; align-items: center; gap: 16px; }
.who .greet { font-size: 11.5px; color: var(--ink-3); }
.who .nome { font-size: 14px; font-weight: 800; color: var(--ink); }
.topbar-brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topbar-brand img { height: 24px; width: auto; display: block; border-radius: 5px; }
.topbar-brand .tb-word { display: flex; flex-direction: column; line-height: 0.95; }
.topbar-brand .tb-mentor { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink); }
.topbar-brand .tb-juridico { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
.topbar-cluster { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.streak-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: var(--gold-soft); border-radius: 20px; padding: 5px 10px;
}
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; cursor: pointer; padding: 0; }
.icon-btn svg { width: 20px; height: 20px; }

main.screen { flex: 1; overflow-y: auto; padding: 4px 0 22px; display: flex; flex-direction: column; gap: 18px; }
main.screen > * { margin-left: 20px; margin-right: 20px; }
main.screen > .full-bleed { margin-left: 0; margin-right: 0; }

/* Fundo navy fixo (não muda entre claro/escuro — conferido nos vetores
   app-1.svg/app-dark.svg: o menu de baixo é a mesma cor navy nos dois).
   Isso também é a correção do bug "sumiu o ícone": antes o fundo era
   --surface-raised (quase branco) com ícone em --ink-3 (cinza-azulado bem
   claro) — contraste baixo demais pra aparecer numa screenshot pequena.
   Com fundo navy + ícone claro, o contraste fica igual ao do design. */
.navbar {
  display: flex; background: var(--navy);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  position: sticky; bottom: 0;
}
.navbar button {
  flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; color: var(--on-navy); opacity: 0.72; font-size: 9.5px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; text-align: center;
}
.navbar button svg { width: 20px; height: 20px; }
.navbar button.active { color: var(--gold); opacity: 1; }
.navbar button.active svg { stroke-width: 2.2; }

/* ---- retomada / home ---- */
.resume-block { display: flex; flex-direction: column; gap: 14px; }
/* peso bem mais fino que o resto do app — assim no vetor original ("VOCÊ
   PAROU AQUI" vem fininho e grande, enquanto o texto ao lado é bold; ver
   app-1.svg/app-dark.svg). font-weight 300 é o mais leve que o Manrope
   importado oferece. */
.resume-eyebrow { margin: 0; font-weight: 300; font-size: 34px; line-height: 1.05; letter-spacing: 0; color: var(--ink); text-transform: uppercase; }
.resume-body { display: flex; flex-direction: column; gap: 8px; }
.resume-body h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.resume-body p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.resume-cta {
  align-self: flex-start; margin-top: 4px; background: var(--fixed-light); color: var(--fixed-navy);
  border: none; border-radius: 10px; padding: 11px 22px; font-weight: 800; font-size: 14px; cursor: pointer;
}

/* mantido por compatibilidade — telas antigas que ainda não usam resume-block */
.resume-card {
  background: var(--panel-navy); color: var(--on-navy); border-radius: 16px; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.resume-card .tag { font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.resume-card h3 { margin: 0; font-size: 19px; font-weight: 800; }
.resume-card p { margin: 0; font-size: 13px; opacity: 0.92; line-height: 1.5; }
.resume-card button {
  margin-top: 6px; align-self: flex-start; background: var(--gold); color: var(--on-gold);
  border: none; border-radius: 10px; padding: 10px 18px; font-weight: 800; font-size: 13.5px; cursor: pointer;
}

.section-label { font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 -6px; }
.section-label.on-navy { color: var(--blue-soft); }

/* faixa navy de progresso — full-bleed (encosta nas duas bordas da tela).
   Fundo navy fixo, igual ao menu de baixo — os dois vetores (claro/escuro)
   mostram exatamente a mesma cor aqui, então não usa --panel-navy (que
   muda pro alerta abaixo), usa --navy direto. */
.progress-banner {
  background: var(--navy); color: var(--on-navy);
  padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 14px;
}
.progress-banner .section-label { margin: 0; }
.ring-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ring-card { background: var(--ring-bg); border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ring-card svg { width: 84px; height: 84px; }
.ring-card .ring-num { font-size: 20px; font-weight: 800; fill: var(--fixed-navy); }
.ring-card .ring-label { font-size: 11.5px; color: var(--fixed-navy); opacity: 0.72; text-align: center; }

.alert-card { display: flex; border-radius: 14px; overflow: hidden; background: var(--panel-navy); flex-shrink: 0; } /* mesmo bug/correção do .study-grid — ver comentário lá embaixo. Esse aqui é filho direto do main.screen e tem overflow:hidden (pro border-radius cortar o .tab dourado), o que também zera o tamanho mínimo automático dele; sem flex-shrink:0 ele encolhia a zero, sumindo o card de Prazo/Desafio inteiro (só sobrava uma tarja fina da cor do .tab) */
.alert-card .tab { flex-shrink: 0; width: 76px; background: var(--gold); color: var(--on-gold);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-label); font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 6px; }
.alert-card p { margin: 0; padding: 14px 14px; font-size: 13px; color: var(--panel-ink); line-height: 1.5; }

/* mantido por compatibilidade com telas que ainda usam o alerta antigo */
.alert-mini { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; align-items: flex-start; }
.alert-mini .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 5px; flex-shrink: 0; }
.alert-mini .tag { font-family: var(--font-label); font-weight: 700; font-size: 9.5px; text-transform: uppercase; color: var(--ink-3); letter-spacing: 0.05em; }
.alert-mini p { margin: 2px 0 0; font-size: 13px; color: var(--ink); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat-card .n { font-size: 20px; color: var(--ink); font-weight: 800; }
.stat-card .l { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Linha com scroll lateral (não grid fixo) — assim dá pra ir adicionando
   áreas (Penal, Família, e o que mais vier) sem precisar redesenhar o
   layout: elas só entram na fileira e ficam alcançáveis arrastando pro
   lado, igual ao vetor que o Celso mandou (4 cards numa fileira só).
   `flex-shrink: 0` é essencial e não é só estilo: essa fileira é filha do
   main.screen (uma coluna flex vertical) e tem `overflow-x: auto` — o que,
   por regra do próprio CSS, faz o overflow VERTICAL dela também virar
   "auto" (não dá pra só o eixo horizontal ter overflow diferente de
   visible sem afetar o outro). Isso muda o "tamanho mínimo automático"
   dela de "do tamanho do conteúdo" pra zero, tornando ela a única filha
   do main.screen que pode encolher além do próprio conteúdo quando falta
   espaço — e faltou, assim que o main.screen passou a ter altura definida
   de verdade (ver o comentário grande no @media do modo computador, mais
   abaixo): essa fileira encolheu até sobrar só os 2px do padding-bottom,
   cortando o texto dos cards (reportado pelo Celso: "bugou a home, não
   ta aparecendo o restante das informações"). `flex-shrink: 0` trava a
   altura dela no tamanho real do conteúdo — quem absorve a falta de
   espaço, corretamente, é o overflow-y:auto do main.screen (rolando a
   tela), não essa fileira encolhendo. Mesmo raciocínio em .day-pills
   logo abaixo, que tem o mesmo overflow-x:auto. */
.study-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
.study-card {
  flex: 0 0 auto; scroll-snap-align: start; width: 118px;
  border: 1px solid var(--line); background: var(--study-bg); color: var(--study-ink); border-radius: 14px; padding: 18px 14px;
  font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; min-height: 64px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.study-card .em-breve {
  font-family: var(--font-label); font-weight: 700; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase;
  opacity: 0.7;
}

/* ---- trilha / dias ---- */
.day-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; flex-shrink: 0; } /* ver comentário em .study-grid, acima — mesmo bug, mesma correção */
.day-pill {
  flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 20px; padding: 10px 15px; font-size: 12.5px; cursor: pointer; font-weight: 700;
}
.day-pill.active { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--on-navy); }
.day-pill.done::after { content: " ✓"; }

/* feed de questões misturadas (Trilha · Mix de áreas) */
.trilha-feed { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.feed-item { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
/* Fase 8 — etiqueta do item de feed que veio do caminho de revisão
   inteligente (tema de maior taxa de erro), ao lado do rótulo de área/Dia. */
.tag-revisao { display: inline-block; margin-left: 6px; font-family: var(--font-label); font-weight: 700;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy-deep);
  background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; vertical-align: middle; }

.stack { display: flex; flex-direction: column; gap: 9px; counter-reset: si; }
.stack-item { counter-increment: si; display: grid; grid-template-columns: 26px 1fr; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.stack-item::before { content: counter(si); font-size: 11px; font-weight: 800; color: var(--on-gold);
  background: var(--gold); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.stack-item h4 { margin: 0 0 2px; font-size: 13px; font-weight: 800; }
/* white-space: pre-line — blocos gerados por IA vêm com parágrafos
   separados por linha em branco (\n\n) dentro do mesmo texto (ex: um
   "resumo" seguido de um "exemplo" no mesmo bloco). Sem isso, o navegador
   colapsa toda quebra de linha num espaço só e o texto vira uma parede
   única, sem separação nenhuma entre as ideias — bug reportado pelo Celso
   ("o fundo não está acompanhando as informações, fica estranho"),
   junto com asteriscos de markdown (**palavra**) aparecendo literalmente
   porque o texto nunca passa por um parser de markdown (ver
   corrigir_markdown_blocos.sql pro conteúdo já publicado com isso, e o
   SYSTEM_PROMPT de gerar-dia-estudo, que agora pede pra IA não usar
   markdown nem lista numerada dentro do texto do bloco).
   Não é regressão em conteúdo curado (escrito à mão): esse nunca usou \n
   dentro de um bloco, só prosa corrida — pre-line não muda nada nesses. */
.stack-item p { margin: 0; font-size: 12.5px; color: var(--ink-2); white-space: pre-line; }

/* ---- quiz: tappable option buttons ---- */
.qz-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.qz-prompt { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.qz-options { display: flex; flex-direction: column; gap: 7px; }
.qz-opt { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--app-bg);
  color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; cursor: pointer; width: 100%; }
.qz-opt .letter { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--surface-raised);
  border-radius: 50%; width: 21px; height: 21px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qz-opt.correct { border-color: var(--good); background: var(--good-soft); }
.qz-opt.correct .letter { background: var(--good); color: #fff; }
.qz-opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.qz-opt.wrong .letter { background: var(--bad); color: #fff; }
.qz-opt.disabled { cursor: default; }
/* Simulado completo (Provas anteriores): marca a alternativa escolhida sem
   revelar se está certa — diferente de .correct/.wrong, que só aparecem
   depois de "Finalizar simulado". Fiel à prova real: você só descobre o
   gabarito no final, não questão a questão. */
.qz-opt.selected { border-color: var(--blue); background: var(--blue-soft); }
.qz-opt.selected .letter { background: var(--blue); color: #fff; }

/* ---- provas anteriores (lista de exames, dentro de Trilha) ---- */
.prova-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left;
}
.prova-row .pr-title { font-size: 13px; font-weight: 800; }
.prova-row .pr-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.prova-row .pr-status { font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; text-align: right; flex-shrink: 0; }
.prova-row .pr-status.progresso { color: var(--blue); }
.prova-row .pr-status.done { color: var(--good); }
.qz-explain { border-top: 1px solid var(--line); padding-top: 10px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.qz-explain code { font-size: 11px; background: var(--accent-soft); color: var(--navy-deep); padding: 1px 5px; border-radius: 3px; }
.qz-explain.aprofundamento { border-top: none; padding-top: 4px; }
.qz-explain.aprofundamento p { margin: 0 0 6px; }
.qz-explain.aprofundamento p:last-child { margin-bottom: 0; }

.locked-card { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.locked-card .lt { font-size: 13px; font-weight: 800; color: var(--ink); }
.locked-card .ls { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.locked-card a { font-size: 12px; color: var(--blue); text-decoration: none; white-space: nowrap; }

/* ---- bússola ---- */
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quad-card { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); }
.quad-card .qt { font-family: var(--font-label); font-weight: 700; font-size: 9px; text-transform: uppercase; color: var(--ink-3); }
.quad-card h5 { margin: 3px 0 2px; font-size: 12.5px; font-weight: 800; }
.quad-card.best { background: var(--gold-soft); border-color: var(--gold); color: var(--fixed-navy); }
.quad-card.best .qt { color: var(--gold); }
.quad-card.solid { background: var(--blue-soft); border-color: var(--blue); color: var(--fixed-navy); }
.quad-card.solid .qt { color: var(--navy); }
.quad-card.unknown { border-style: dashed; }

.rank-row { display: flex; align-items: center; gap: 10px; }
.rank-name { width: 84px; flex-shrink: 0; font-size: 12.5px; }
.rank-track { flex: 1; height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rank-fill { height: 100%; background: var(--navy); }
.rank-fill.top { background: var(--gold); }
.rank-val { font-size: 11px; color: var(--ink-2); width: 34px; text-align: right; }
.illus-note { font-size: 11.5px; color: var(--ink-3); font-style: italic; }

/* ---- prazos (agora dentro do Início) ---- */
.deadline-card { background: var(--fixed-blue-soft); border: none; border-radius: 14px; padding: 15px 16px; display: flex; gap: 14px; align-items: center; }
.deadline-card .dnum { font-size: 22px; color: var(--fixed-navy); font-weight: 800; width: 44px; text-align: center; flex-shrink: 0; }
.deadline-card .dtext .dt1 { font-size: 13px; font-weight: 800; color: var(--fixed-navy); }
.deadline-card .dtext .dt2 { font-size: 11.5px; color: var(--fixed-navy); opacity: 0.7; margin-top: 1px; }
/* sem borda dourada — os dois vetores enviados mostram o card de prazo
   liso, sem contorno (o Celso não gostou da borda que tinha antes aqui). */

/* ---- vade mecum ---- */
.vm-select { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--ink); width: 100%; outline: none; font-family: var(--font-sans); margin-bottom: 8px; }
.vm-select:focus { border-color: var(--blue); }
.vm-search { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; color: var(--ink); width: 100%; outline: none; }
.vm-search:focus { border-color: var(--blue); }
.vm-card { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 4px; }
.vm-card .art { font-size: 11.5px; color: var(--blue); font-weight: 700; }
.vm-status-badge { font-family: var(--font-label); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: var(--bad); background: var(--bad-soft); border-radius: 4px; padding: 2px 6px; margin-left: 6px; }
.vm-card .tema { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.vm-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.vm-row-list { display: flex; flex-direction: column; gap: 8px; }
.vm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; font-size: 13.5px; color: var(--ink); cursor: pointer; font-family: var(--font-sans); }
.vm-row .chev { color: var(--ink-3); font-size: 15px; }
.vm-filtro-ativo { display: flex; align-items: center; justify-content: space-between; background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--navy-deep); font-weight: 700; }
.vm-filtro-ativo button { background: none; border: none; color: var(--navy); font-size: 13px; cursor: pointer; padding: 2px 4px; }

/* ---- notícias ---- */
.back-link { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ink-2); font-size: 13px; cursor: pointer; padding: 4px 0; align-self: flex-start; }
.news-banner { font-size: 11.5px; color: var(--ink-3); font-style: italic; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 10px 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 20px; padding: 9px 15px; font-size: 12.5px; cursor: pointer; font-family: var(--font-label); font-weight: 700; }
.chip.active { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--on-navy); }
.news-card { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; }
.news-card .src { font-family: var(--font-label); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.news-card h5 { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.news-card p { margin: 0; font-size: 12px; color: var(--ink-2); }

/* ---- assistente ---- */
.chat-scroll { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13px; }
.bubble.user { align-self: flex-end; background: var(--navy-deep); color: var(--on-navy); border-bottom-right-radius: 3px; }
.bubble.mentor { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 3px; }
.chat-input-row { display: flex; gap: 8px; padding-top: 6px; }
.chat-input-row input { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 10px 14px; font-size: 13px; color: var(--ink); outline: none; }
.chat-input-row input:focus { border-color: var(--blue); }
.chat-input-row button { border: none; background: var(--gold); color: var(--on-gold); border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; font-size: 15px; }
.mock-note { font-size: 11px; color: var(--ink-3); text-align: center; }

.empty-hint { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 14px 0; }

/* ---- peças jurídicas ---- */
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; }
.case-card .tag { font-family: var(--font-label); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.case-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.case-card .task { margin-top: 6px; font-size: 12.5px; color: var(--ink); font-weight: 700; }
.level-pills { display: flex; gap: 6px; }
.level-pill { flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 10px; padding: 12px 6px; font-size: 11.5px; text-align: center; cursor: pointer; font-family: var(--font-sans); }
.level-pill .lp-n { display: block; font-family: var(--font-label); font-weight: 700; font-size: 9.5px; color: var(--ink-3); margin-bottom: 2px; }
.level-pill.active { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--on-navy); }
.level-pill.active .lp-n { color: var(--on-navy); opacity: 0.85; }
.peca-fields { display: flex; flex-direction: column; gap: 10px; }
.peca-field label { display: block; font-size: 11.5px; font-family: var(--font-label); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
.peca-field textarea {
  width: 100%; min-height: 74px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: var(--font-sans); line-height: 1.5; resize: vertical; outline: none;
}
.peca-field textarea:focus { border-color: var(--blue); }
.skeleton-toggle { background: none; border: 1px dashed var(--line-strong); color: var(--ink-2); border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; text-align: left; }
.feedback-card { border: 1px solid var(--good); background: var(--good-soft); border-radius: 14px; padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.feedback-card .tag { font-family: var(--font-label); font-weight: 700; font-size: 10px; text-transform: uppercase; color: var(--good); }
.feedback-card p { margin: 0; font-size: 12.5px; color: var(--ink); }

/* ---- modo computador ---- */
.desktop-banner { display: none; }
@media (min-width: 820px) {
  body { padding: 24px 0; }
  /* Corner-clip do fundo bege nos cantos arredondados do .phone, resolvido
     de vez — histórico das duas tentativas anteriores (pra não repetir o
     mesmo erro):
     1ª tentativa: `overflow: hidden` direto no .phone. Quebrou o scroll de
        telas de conteúdo longo — o .navbar usa `position: sticky; bottom:
        0`, e overflow:hidden no .phone virou a nova referência de scroll
        do sticky (em vez do viewport), sem de fato dar conta de rolar o
        conteúdo internamente.
     2ª tentativa: tirar o overflow:hidden do .phone e arredondar só os
        elementos de ponta a ponta (desktop-banner/.navbar). Resolveu o
        corte nos cantos, mas expôs o problema de verdade: o .phone nunca
        tinha uma ALTURA DEFINIDA no modo computador (só min-height:auto).
        Sem altura definida, o main.screen (que já tinha overflow-y:auto)
        nunca tinha um limite pra realmente rolar por dentro — o conteúdo
        vazava pra fora do .phone (que tem overflow:visible por padrão) e
        quem rolava era a PÁGINA inteira. Como o .phone (a "cartela"
        arredondada) só cobre sua própria altura, o conteúdo que vazava
        pra fora dele ficava sem nenhum fundo por trás — exatamente o
        "fundo fica e a informação segue sem o fundo do app" que o Celso
        reportou numa Trilha longa (Casamento, Família).
     Causa raiz encontrada (conferida ao vivo, inspecionando a página real
     com getBoundingClientRect/getComputedStyle antes de mexer de novo):
     o .phone RECEBE sim uma altura definida do body (a altura da janela
     menos o padding de 24px em cima/embaixo, via align-items:stretch, o
     padrão do flexbox) — o
     problema é o #view-root (o filho direto do .phone, também flex
     column) não tinha esse mesmo tratamento. Um item flex sem
     `min-height:0` ou `overflow` diferente de visible usa o tamanho do
     PRÓPRIO CONTEÚDO como altura mínima automática, ignorando o espaço
     que o pai reservou — isso derrubava a altura definida antes mesmo de
     chegar no main.screen, que ficava sem nada pra realmente rolar
     dentro.
     Correção definitiva, testada ao vivo (injetei essas duas regras numa
     conta de teste e conferi scrollHeight/clientHeight antes de publicar):
     `overflow: hidden` no .phone (agora seguro — o main.screen passa a
     rolar de verdade por dentro, então nada mais vaza pra fora do .phone)
     + `min-height: 0` no #view-root (o elo que faltava pra essa altura
     definida chegar até o main.screen). Como o .phone corta tudo direitinho
     agora, não precisa mais arredondar desktop-banner/.navbar na mão. */
  .phone { max-width: 760px; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(3,28,44,.4); min-height: auto; }
  #view-root { min-height: 0; }
  .desktop-banner {
    display: flex; align-items: center; gap: 8px; background: var(--gold-soft); color: var(--gold);
    font-size: 12px; padding: 8px 32px; border-bottom: 1px solid var(--line);
    text-decoration: none; cursor: pointer;
  }
  .desktop-banner:hover { opacity: 0.85; }
  .peca-field textarea { min-height: 92px; }

  /* A página de vendas (body.landing-mode, ver comentário lá em cima) não
     usa main.screen com overflow-y:auto por dentro — o conteúdo dela
     (.salespage) é feito pra rolar a PÁGINA inteira, do jeito normal de
     qualquer site. O `.phone { overflow: hidden }` logo acima, criado pro
     app (onde o main.screen é quem rola por dentro), sem essa exceção
     também cortava a página de vendas em exatamente 1 tela de altura,
     escondendo tudo abaixo disso sem dar pra rolar — reportado pelo Celso
     ("a página de vendas não está descendo o scroll"). Confirmado ao vivo:
     .salespage tinha 2326px de conteúdo, mas .phone cortava em 900px (a
     altura da janela) e o documento não tinha nada além disso pra rolar.
     `body.landing-mode .phone` tem mais especificidade que o `.phone`
     sozinho aqui de cima, então essa regra vence independente da ordem no
     arquivo — devolve o overflow:visible só nessa tela, sem mexer no
     comportamento do app normal (conferido ao vivo: alternando a classe
     landing-mode no mesmo elemento, o overflow muda de hidden pra visible
     e volta, nas duas direções). */
  body.landing-mode .phone { overflow: visible; }
}

/* ---- modal de recortar foto de perfil (Conta → trocar/adicionar foto) ----
   Não existia nenhum padrão de modal/overlay no app até aqui — cada tela
   até agora troca o conteúdo inteiro de #view-root, nunca sobrepõe nada.
   Esse aqui é criado e destruído direto pelo JS (conta.js,
   abrirRecorteFoto/montarModalRecorte), anexado em document.body (não
   dentro de #view-root), então sobrevive tranquilo mesmo se o resto do app
   re-renderizar por trás enquanto ele está aberto. Existe pra resolver um
   problema real reportado pelo Celso: salvar a foto direto, sem recorte,
   cortava a cabeça da pessoa — `.avatar img { object-fit: cover }` (acima)
   centraliza a imagem sem deixar escolher qual parte aparece. */
.crop-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(2, 10, 17, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.crop-modal {
  width: 100%; max-width: 340px;
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 20px 44px -20px rgba(3, 28, 44, .4);
}
.crop-title { font-weight: 700; font-size: 16px; color: var(--ink); margin: 0; align-self: flex-start; }
.crop-frame {
  width: 240px; height: 240px; border-radius: 50%;
  overflow: hidden; position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  touch-action: none; cursor: grab;
}
.crop-frame:active { cursor: grabbing; }
/* `pointer-events: none` na imagem: o arrasto é ouvido no `.crop-frame`
   (o círculo inteiro), não na imagem — assim funciona mesmo quando, com
   zoom baixo, uma borda da imagem fica momentaneamente dentro da área do
   círculo sem cobrir tudo (não deveria acontecer, já clampado, mas evita
   qualquer "buraco" sem escuta de arrasto por segurança). */
.crop-frame .crop-img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-zoom-row { width: 100%; display: flex; align-items: center; gap: 10px; }
.crop-zoom-icon { font-size: 13px; color: var(--ink-3); }
.crop-zoom { flex: 1; accent-color: var(--accent); }
.crop-hint { font-size: 11.5px; color: var(--ink-3); margin: -6px 0 0; }
.crop-actions { width: 100%; display: flex; gap: 10px; margin-top: 4px; }
.crop-actions .chip { flex: 1; text-align: center; }
.crop-actions .btn-primary { flex: 1; padding: 12px; }

/* ---- tela Estatísticas (Fase 7 — mapa de pontos fortes/fracos por tema) ----
   Sem lib de gráfico (o app nunca usou nenhuma) — mesma filosofia do anel
   SVG em .ring-card (views/inicio.js), só que em barra: uma lista de N
   temas não cabe bem num anel, mas cabe numa lista de barras horizontais. */
.stat-row { margin: 14px 0; }
.stat-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stat-row-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.stat-row-sub { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.stat-row-count { flex-shrink: 0; font-size: 11.5px; color: var(--ink-3); }
.stat-bar-track { height: 8px; border-radius: 4px; background: var(--line); margin-top: 6px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--bad); border-radius: 4px; }