/* Teodora UI v3 · Entrada /entrar (dono: unidade Configurações + Entrada).
   Escopo: body.account-page.v3 e main.account-layout (tela dividida, painel de marca, composição da interface em CSS).
   Tela dividida sobre o canvas: à esquerda o painel de marca escuro (texto do fundador, fonte do sistema) com uma
   composição da carteira desenhada só com HTML e CSS (nenhuma imagem), recortada pela borda do painel; à direita a folha
   branca com o formulário. Estados: aviso neutro, de erro (vermelho) e de confirmação (verde) por data-kind; botão
   ocupado (is-busy) com o indicador girando. A composição só LÊ as cores da paleta (var(--sit-*), var(--vara-*)) em
   classes próprias v3-entrada-*; nenhuma regra pinta .state-chip ou .vara-marker.
   Regras v3: nada herdável em html/body/:root; nenhum token legado redefinido; fonte do sistema. */

body.account-page.v3 { margin: 0; padding: 0; background: var(--v3-canvas); min-height: 100vh; }

/* ------------------------------------------------------------------ tela dividida */
body.account-page.v3 main.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(440px, .8fr);
  align-items: stretch;
  gap: 0;
  width: auto;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--v3-canvas);
  color: var(--v3-text);
  font-family: var(--v3-font);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
body.account-page.v3 main.account-layout :is(a, button, input):focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }

/* ------------------------------------------------------------------ painel de marca */
body.account-page.v3 .account-layout .account-story {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 40px 56px;
  border: 0;
  border-radius: 0;
  /* a cor de fundo sob o degradê é a mesma do meio dele: medidores de contraste (qa/contrast.js) leem o fundo certo */
  background: radial-gradient(120% 80% at 0% 0%, #1d1d21 0%, #141416 55%, #111113 100%) #141416;
  color: var(--v3-on-dark);
  overflow: hidden;
}
body.account-page.v3 .account-layout .account-story .brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--v3-on-dark);
  font: 700 18px/1 var(--v3-font);
  letter-spacing: -.02em;
  text-decoration: none;
}
body.account-page.v3 .account-layout .account-story .brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 8px;
  background: var(--v3-brand);
  box-shadow: var(--v3-sh-btn-brand);
  color: var(--v3-ink);
  font: 750 19px/1 var(--v3-font);
  letter-spacing: -.02em;
}
body.account-page.v3 .account-layout .account-intro { position: relative; z-index: 2; max-width: 560px; margin: 56px 0 0; }
body.account-page.v3 .account-layout .account-story .eyebrow {
  display: block;
  margin: 0;
  color: var(--v3-on-dark-2);
  font: 600 11px/14px var(--v3-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.account-page.v3 .account-layout .account-story h1 {
  margin: 0 0 16px;
  color: var(--v3-on-dark);
  font: 600 clamp(40px, 3.4vw, 52px)/1.05 var(--v3-font);
  letter-spacing: -.032em;
}
body.account-page.v3 .account-layout .account-story h1 span { color: #ff7540; }
body.account-page.v3 .account-layout .account-intro > p {
  max-width: 470px;
  margin: 0;
  color: var(--v3-on-dark-2);
  font: 400 15px/1.7 var(--v3-font);
}
body.account-page.v3 .account-layout .account-signature {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgb(255 255 255 / .11);
}
body.account-page.v3 .account-layout .account-signature > span { color: var(--v3-on-dark); font: 500 14px/20px var(--v3-font); }
body.account-page.v3 .account-layout .account-signature > small { margin: 0; color: var(--v3-on-dark-2); font: 400 12px/18px var(--v3-font); }

/* ------------------------------------------------------------------ composição da interface (só HTML + CSS)
   Peça principal do painel: depois do texto no fluxo, em leve perspectiva, sangrando pela borda; o corte é suavizado
   por máscaras (direita e embaixo), para parecer intencional. */
body.account-page.v3 .account-layout .v3-entrada-ui {
  position: relative;
  left: auto;
  bottom: auto;
  flex: 0 0 340px;
  z-index: 1;
  container-type: inline-size;
  width: 880px;
  height: 340px;
  margin: 52px 0 -80px;
  overflow: visible;
  transform: perspective(1800px) rotateY(-9deg) rotateX(4deg);
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}
/* véu do painel sobre a composição: o corte na borda direita e embaixo se dissolve no fundo escuro */
body.account-page.v3 .account-layout .v3-entrada-ui::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 560px;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgb(17 17 19 / 0) 64%, rgb(17 17 19 / .85) 90%, #111113 100%),
    linear-gradient(90deg, rgb(17 17 19 / 0) 78%, rgb(17 17 19 / .9) 100%);
  pointer-events: none;
}
.account-layout .v3-entrada-ui i { display: block; font-style: normal; }
.account-layout .v3-entrada-win {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  --v3-entrada-side: 172px;
  --v3-entrada-l: calc(100cqw - var(--v3-entrada-side) - 26px);
  grid-template-columns: var(--v3-entrada-side) minmax(0, 1fr);
  width: 100%;
  height: 560px;
  border-radius: 14px;
  background: var(--v3-canvas);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 90px rgb(0 0 0 / .5);
  color: var(--v3-text);
  font: 400 11px/1.3 var(--v3-font);
  overflow: hidden;
}
/* barras no lugar de nomes e números (nenhum texto que imite dado real) */
.account-layout .v3-entrada-bar { flex: none; height: 7px; border-radius: 4px; background: #d9d9de; }
.account-layout .v3-entrada-bar.is-ink { height: 8px; background: #3f3f46; }
.account-layout .v3-entrada-bar.is-mid { background: #d4d4d8; }
.account-layout .v3-entrada-bar.is-soft { height: 6px; background: #e8e8eb; }
.account-layout .v3-entrada-bar.is-dark { background: rgb(24 24 27 / .5); }
.account-layout .v3-entrada-bar.is-label { height: 6px; margin: 12px 0 6px 8px; background: #d4d4d8; }
.account-layout .v3-entrada-bar.w-40 { width: 40px; } .account-layout .v3-entrada-bar.w-48 { width: 48px; }
.account-layout .v3-entrada-bar.w-56 { width: 56px; } .account-layout .v3-entrada-bar.w-64 { width: 64px; }
.account-layout .v3-entrada-bar.w-72 { width: 72px; } .account-layout .v3-entrada-bar.w-96 { width: 96px; }
.account-layout .v3-entrada-bar.w-180 { width: 180px; }
.account-layout .v3-entrada-ui .v3-i { width: 13px; height: 13px; }

/* menu no canvas */
.account-layout .v3-entrada-side { display: flex; flex-direction: column; min-width: 0; padding: 12px 10px; }
.account-layout .v3-entrada-logo { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 4px; margin: 0 0 10px; }
.account-layout .v3-entrada-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--v3-brand);
  color: var(--v3-ink);
  font: 700 13px/1 var(--v3-font);
}
.account-layout .v3-entrada-nav { display: flex; flex-direction: column; gap: 2px; }
.account-layout .v3-entrada-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  color: var(--v3-muted);
}
.account-layout .v3-entrada-item > .v3-i:last-child:not(:first-child) { width: 11px; height: 11px; margin-left: auto; color: var(--v3-faint); }
.account-layout .v3-entrada-item.is-active { background: var(--v3-sheet); box-shadow: var(--v3-sh-1); color: var(--v3-brand); }
.account-layout .v3-entrada-view { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--v3-text); font: 600 11px/1 var(--v3-font); white-space: nowrap; text-overflow: ellipsis; }
.account-layout .v3-entrada-count {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--v3-surface-3);
  color: var(--v3-text-2);
  font: 600 11px/1 var(--v3-font);
}
.account-layout .v3-entrada-sub { position: relative; display: flex; align-items: center; height: 22px; padding: 0 0 0 31px; }
.account-layout .v3-entrada-sub::before { content: ""; position: absolute; top: 0; bottom: 0; left: 13px; width: 1px; background: #d4d4d8; }

/* área principal: barra e folha */
.account-layout .v3-entrada-main { display: flex; flex-direction: column; min-width: 0; }
.account-layout .v3-entrada-top { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 6px; color: var(--v3-faint); }
.account-layout .v3-entrada-top > .v3-i { width: 11px; height: 11px; }
.account-layout .v3-entrada-search,
.account-layout .v3-entrada-pje,
.account-layout .v3-entrada-sync {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--v3-sheet);
  box-shadow: var(--v3-sh-1);
  color: var(--v3-subtle);
}
.account-layout .v3-entrada-search { margin-left: auto; width: 150px; }
.account-layout .v3-entrada-pje { border-radius: 999px; }
.account-layout .v3-entrada-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v3-ok-icon); box-shadow: 0 0 0 2px var(--v3-ok-bg); }
.account-layout .v3-entrada-sync { background: var(--v3-brand); box-shadow: var(--v3-sh-btn-brand); color: var(--v3-ink); }
.account-layout .v3-entrada-sheet {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 0 0;
  padding: 14px 14px 0;
  border-radius: 12px 0 0 0;
  background: var(--v3-sheet);
  box-shadow: 0 0 0 1px rgb(24 24 27 / .05);
}
.account-layout .v3-entrada-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.account-layout .v3-entrada-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-layout .v3-entrada-head strong { color: var(--v3-text); font: 600 16px/1.1 var(--v3-font); letter-spacing: -.02em; }
/* seletor de visões, como no cabeçalho da carteira */
.account-layout .v3-entrada-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--v3-surface-3); color: var(--v3-muted); font: 500 11px/1 var(--v3-font); white-space: nowrap; }
.account-layout .v3-entrada-seg > span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 6px; }
.account-layout .v3-entrada-seg > span.is-on { background: var(--v3-sheet); box-shadow: var(--v3-sh-1); color: var(--v3-text); font-weight: 600; }
.account-layout .v3-entrada-seg b { min-width: 16px; height: 14px; padding: 0 4px; border-radius: 999px; background: rgb(24 24 27 / .06); font: 600 11px/14px var(--v3-font); text-align: center; }
.account-layout .v3-entrada-seg b.is-alert { background: var(--v3-brand-tint); color: #5c2208; }
.account-layout .v3-entrada-tool { width: 52px; height: 22px; margin-left: 4px; border-radius: 6px; box-shadow: var(--v3-sh-1); }
.account-layout .v3-entrada-tools > .v3-entrada-tool:first-of-type { margin-left: auto; }

/* KPIs-atalho brancos com ladrilho */
.account-layout .v3-entrada-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, max-content); gap: 8px; width: max-content; margin: 0 0 10px; }
.account-layout .v3-entrada-kpi {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 14px 0 10px;
  border-radius: 10px;
  background: var(--v3-sheet);
  box-shadow: var(--v3-sh-1);
}
.account-layout .v3-entrada-tile { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; }
.account-layout .v3-entrada-tile.is-brand { background: var(--v3-brand-tint); color: #5c2208; }
.account-layout .v3-entrada-tile.is-ink { background: var(--v3-ink); color: #fff; }
.account-layout .v3-entrada-tile.is-lime { background: var(--v3-lime); color: #2f3510; }
.account-layout .v3-entrada-tile.is-mint { background: var(--v3-mint); color: #173822; }
.account-layout .v3-entrada-tile.is-neutral { background: var(--v3-surface-3); color: var(--v3-muted); }
.account-layout .v3-entrada-tile .v3-i { width: 14px; height: 14px; }
/* a mesma faixa de KPIs da carteira (cartões com contorno, o vencido no ladrilho preto) */
.account-layout .v3-entrada-kpis .v3-entrada-kpi { box-shadow: inset 0 0 0 1px var(--v3-line); }
.account-layout .v3-entrada-kpi-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.account-layout .v3-entrada-kpi-text small { overflow: hidden; color: var(--v3-muted); font: 500 11px/13px var(--v3-font); white-space: nowrap; text-overflow: ellipsis; }
.account-layout .v3-entrada-kpi-text b { color: var(--v3-text); font: 600 17px/1 var(--v3-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* cartão da lista de casos */
.account-layout .v3-entrada-list { overflow: hidden; border-radius: 10px 0 0 0; box-shadow: 0 0 0 1px rgb(24 24 27 / .08); }
.account-layout .v3-entrada-tools { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; }
.account-layout .v3-entrada-field {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 170px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px var(--v3-line-strong);
  color: var(--v3-subtle);
}
.account-layout .v3-entrada-chip { width: 54px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--v3-line); }
.account-layout .v3-entrada-th,
.account-layout .v3-entrada-row {
  display: grid;
  grid-template-columns: calc(var(--v3-entrada-l) * .17) calc(var(--v3-entrada-l) * .17) calc(var(--v3-entrada-l) * .14) calc(var(--v3-entrada-l) * .30) calc(var(--v3-entrada-l) * .22) minmax(60px, 1fr);
  align-items: center;
  padding: 0 10px 0 12px;
}
.account-layout .v3-entrada-th {
  height: 26px;
  border-top: 1px solid var(--v3-line-soft);
  border-bottom: 1px solid var(--v3-line-soft);
  background: var(--v3-surface-2);
  color: var(--v3-muted);
  font: 600 11px/1 var(--v3-font);
}
.account-layout .v3-entrada-th > span { overflow: hidden; white-space: nowrap; text-overflow: clip; }
.account-layout .v3-entrada-row { position: relative; height: 44px; background: var(--v3-sheet); }
.account-layout .v3-entrada-row + .v3-entrada-row { border-top: 1px solid var(--v3-line-soft); }
.account-layout .v3-entrada-row.is-focus { background: #fff6f0; box-shadow: inset 3px 0 0 var(--v3-brand); }
.account-layout .v3-entrada-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 10px; overflow: hidden; }
.account-layout .v3-entrada-cell > .v3-entrada-bar { max-width: 100%; }
.account-layout .v3-entrada-cell.is-line > .v3-entrada-bar { flex: 0 1 auto; min-width: 16px; }
.account-layout .v3-entrada-cell.is-line { flex-direction: row; align-items: center; gap: 7px; }
/* marcadores de vara: quadrado, losango e contorno, nas cores da docs/39 (lidas, não redefinidas) */
.account-layout .v3-entrada-vm { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--vara-1); }
.account-layout .v3-entrada-vm.is-v2 { background: var(--vara-2); }
.account-layout .v3-entrada-vm.is-v3 { background: var(--vara-3); }
.account-layout .v3-entrada-vm.is-v4 { background: var(--vara-4); }
.account-layout .v3-entrada-vm.is-losango { transform: rotate(45deg) scale(.82); }
.account-layout .v3-entrada-vm.is-contorno { background: transparent; box-shadow: inset 0 0 0 2px var(--vara-4); }
/* etiquetas de situação nas cores da paleta (ação: cheia; espera: tom claro com ponto) */
.account-layout .v3-entrada-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  height: 20px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 999px;
  font: 600 11px/1 var(--v3-font);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.account-layout .v3-entrada-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-layout .v3-entrada-tag.is-p1 { background: var(--sit-prelaudo-1); color: var(--sit-sobre-claro); }
.account-layout .v3-entrada-tag.is-p3 { background: var(--sit-prelaudo-3); color: var(--sit-sobre-escuro); }
.account-layout .v3-entrada-tag.is-laudo { background: var(--sit-laudo-tom-1); color: var(--sit-laudo-texto); }
.account-layout .v3-entrada-tag.is-laudo::before { background: var(--sit-laudo-1); }
.account-layout .v3-entrada-tag.is-judicial { background: var(--sit-judicial-tom-1); color: var(--sit-judicial-texto); }
.account-layout .v3-entrada-tag.is-judicial::before { background: var(--sit-judicial-1); }
.account-layout .v3-entrada-tag.is-honorarios { background: var(--sit-honorarios-tom-1); color: var(--sit-honorarios-texto); }
.account-layout .v3-entrada-tag.is-honorarios::before { background: var(--sit-honorarios-1); }
/* prazo: "Vencido" em ink (ênfase sem cor nova de prazo) e etiqueta relativa neutra */
.account-layout .v3-entrada-due,
.account-layout .v3-entrada-rel {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  font: 600 11px/1 var(--v3-font);
  white-space: nowrap;
}
.account-layout .v3-entrada-due { height: auto; padding: 0; background: none; color: var(--v3-text); font-weight: 600; }
.account-layout .v3-entrada-rel { height: auto; padding: 0; background: none; color: var(--v3-text-2); font-weight: 500; }

/* painel estreito (1280): o menu da composição vira trilho, como no app */
@container (max-width: 640px) {
  .account-layout .v3-entrada-win { --v3-entrada-side: 50px; }
  .account-layout .v3-entrada-side { align-items: center; padding: 12px 6px; }
  .account-layout .v3-entrada-logo > .v3-entrada-bar,
  .account-layout .v3-entrada-item > .v3-entrada-bar,
  .account-layout .v3-entrada-item > .v3-i:last-child:not(:first-child),
  .account-layout .v3-entrada-view,
  .account-layout .v3-entrada-sub { display: none; }
  .account-layout .v3-entrada-logo { padding: 0; }
  .account-layout .v3-entrada-bar.is-label { width: 22px; margin: 10px auto 6px; height: 1px; }
  .account-layout .v3-entrada-item { position: relative; justify-content: center; width: 32px; height: 28px; padding: 0; }
  .account-layout .v3-entrada-item.is-active .v3-entrada-count { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 14px; padding: 0 4px; }
}

/* ------------------------------------------------------------------ formulário (sobre o canvas, sem cartão) */
body.account-page.v3 .account-layout .v3-entrada-side-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 48px 40px;
  border-radius: 0;
  background: var(--v3-canvas);
  box-shadow: none;
}
body.account-page.v3 .account-layout .account-form {
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0;
  color: var(--v3-text);
}
body.account-page.v3 .account-layout .account-form .v3-entrada-formmark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 0 22px;
  border-radius: 10px;
  background: var(--v3-brand);
  box-shadow: var(--v3-sh-btn-brand);
  color: var(--v3-ink);
  font: 700 21px/1 var(--v3-font);
  letter-spacing: -.02em;
}
body.account-page.v3 .account-layout .account-form h2 {
  margin: 0 0 6px;
  color: var(--v3-text);
  font: 600 24px/30px var(--v3-font);
  letter-spacing: -.02em;
}
body.account-page.v3 .account-layout .account-form .subtitle {
  margin: 0 0 26px;
  color: var(--v3-muted);
  font: 400 14px/22px var(--v3-font);
}
body.account-page.v3 .account-layout .v3-entrada-field-row { margin: 0 0 16px; }
body.account-page.v3 .account-layout .account-form label {
  display: block;
  margin: 0 0 6px;
  color: var(--v3-text-2);
  font: 500 13px/18px var(--v3-font);
}
body.account-page.v3 .account-layout .v3-entrada-input { position: relative; }
body.account-page.v3 .account-layout .v3-entrada-input > .v3-i {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--v3-subtle);
  pointer-events: none;
}
body.account-page.v3 .account-layout .account-form .v3-entrada-input input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 40px;
  border: 1px solid var(--v3-line-strong);
  border-radius: 10px;
  background: var(--v3-sheet);
  box-shadow: 0 1px 2px rgb(24 24 27 / .04);
  color: var(--v3-text);
  font: 400 15px/1.2 var(--v3-font);
  outline: none;
  transition: border-color var(--v3-dur-1) var(--v3-ease), box-shadow var(--v3-dur-1) var(--v3-ease);
}
body.account-page.v3 .account-layout .account-form .v3-entrada-input input:hover { border-color: #c4c4ca; }
body.account-page.v3 .account-layout .account-form .v3-entrada-input input:focus { border-color: var(--v3-brand); box-shadow: var(--v3-focus); }
body.account-page.v3 .account-layout .account-form .v3-entrada-input input:focus-visible { outline: none; }
body.account-page.v3 .account-layout .account-form .v3-entrada-input:focus-within > .v3-i { color: var(--v3-brand-text); }

/* vínculo do piloto (primeiro acesso): cartão de opção */
body.account-page.v3 .account-layout .account-form .account-claim {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--v3-surface-2);
  box-shadow: inset 0 0 0 1px var(--v3-line);
  color: var(--v3-text-2);
  font: 400 13px/20px var(--v3-font);
  cursor: pointer;
}
body.account-page.v3 .account-layout .account-form .account-claim:has(input:checked) { background: var(--v3-selected-bg); box-shadow: var(--v3-selected-ring); }
body.account-page.v3 .account-layout .account-form .account-claim input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  border: 1.5px solid var(--v3-line-strong);
  border-radius: 5px;
  background: var(--v3-sheet) center / 12px 12px no-repeat;
  cursor: pointer;
}
body.account-page.v3 .account-layout .account-form .account-claim input:checked {
  border-color: var(--v3-ink);
  background-color: var(--v3-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.2 4.2 8.8-9.2'/%3E%3C/svg%3E");
}

/* botão laranja de 44 px com texto ink; ocupado: desabilitado e com o indicador girando */
body.account-page.v3 .account-layout .account-form #account-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  min-height: 0;
  margin: 8px 0 0;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--v3-brand);
  box-shadow: var(--v3-sh-btn-brand);
  color: var(--v3-ink);
  font: 600 15px/1 var(--v3-font);
  letter-spacing: -.005em;
  cursor: pointer;
  opacity: 1;
  transition: background var(--v3-dur-1) var(--v3-ease);
}
body.account-page.v3 .account-layout .account-form #account-submit:hover { background: var(--v3-brand-hover); }
body.account-page.v3 .account-layout .account-form #account-submit > span { font-size: 16px; }
body.account-page.v3 .account-layout .account-form #account-submit:disabled {
  background: var(--v3-brand-tint);
  box-shadow: inset 0 0 0 1px var(--v3-brand-line);
  color: #5c2208;
  cursor: progress;
  opacity: 1;
}
body.account-page.v3 .account-layout .account-form #account-submit.is-busy::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--v3-icon-spinner) center / contain no-repeat;
  mask: var(--v3-icon-spinner) center / contain no-repeat;
  animation: v3-spin .8s linear infinite;
}

/* aviso com ícone: neutro; vermelho no erro; verde quando a ação terminou */
body.account-page.v3 .account-layout .account-form #account-message {
  position: relative;
  margin: 2px 0 12px;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--v3-info-line);
  border-radius: 10px;
  background: var(--v3-info-bg);
  color: var(--v3-info-fg);
  font: 400 13px/20px var(--v3-font);
}
body.account-page.v3 .account-layout .account-form #account-message::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 13px;
  width: 16px;
  height: 16px;
  background: var(--v3-info-icon);
  -webkit-mask: var(--v3-icon-info) center / contain no-repeat;
  mask: var(--v3-icon-info) center / contain no-repeat;
}
body.account-page.v3 .account-layout .account-form #account-message[data-kind="error"] { border-color: var(--v3-danger-line); background: var(--v3-danger-bg); color: var(--v3-danger-fg); }
body.account-page.v3 .account-layout .account-form #account-message[data-kind="error"]::before { background: var(--v3-danger-icon); -webkit-mask-image: var(--v3-icon-alert); mask-image: var(--v3-icon-alert); }
body.account-page.v3 .account-layout .account-form #account-message[data-kind="ok"] { border-color: var(--v3-ok-line); background: var(--v3-ok-bg); color: var(--v3-ok-fg); }
body.account-page.v3 .account-layout .account-form #account-message[data-kind="ok"]::before { background: var(--v3-ok-icon); -webkit-mask-image: var(--v3-icon-checkCircle); mask-image: var(--v3-icon-checkCircle); }

/* links: criar conta e reenviar confirmação; nota de rodapé */
body.account-page.v3 .account-layout .v3-entrada-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 18px 0 0;
  padding: 0;
  border-top: 0;
}
body.account-page.v3 .account-layout .account-form :is(.account-switch, .account-resend) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--v3-text-2);
  font: 500 13px/18px var(--v3-font);
  text-decoration: none;
  cursor: pointer;
}
body.account-page.v3 .account-layout .account-form .account-switch { color: var(--v3-brand-text); font-weight: 600; }
body.account-page.v3 .account-layout .account-form .account-resend { color: var(--v3-muted); }
body.account-page.v3 .account-layout .account-form :is(.account-switch, .account-resend):hover { color: var(--v3-text); text-decoration: underline; text-underline-offset: 3px; }
body.account-page.v3 .account-layout .account-form .account-resend:disabled { color: var(--v3-subtle); cursor: progress; opacity: 1; }
body.account-page.v3 .account-layout .account-form .account-note {
  margin: 26px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--v3-line);
  color: var(--v3-subtle);
  font: 400 12px/18px var(--v3-font);
}

body.account-page.v3 .account-layout .v3-entrada-links > a { color: var(--v3-brand-text); font: 600 13px/18px var(--v3-font); }

@media (max-width: 900px) {
  body.account-page.v3 main.account-layout { grid-template-columns: minmax(0, 1fr); }
  body.account-page.v3 .account-layout .account-story { padding: 28px 24px; }
  body.account-page.v3 .account-layout .account-intro { margin-top: 28px; }
  body.account-page.v3 .account-layout .account-story h1 { font-size: 34px; }
  body.account-page.v3 .account-layout .v3-entrada-ui { display: none; }
  body.account-page.v3 .account-layout .v3-entrada-side-panel { padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body.account-page.v3 .account-layout .account-form #account-submit.is-busy::before { animation: none; }
  body.account-page.v3 .account-layout .account-form #account-submit,
  body.account-page.v3 .account-layout .account-form .v3-entrada-input input { transition: none; }
}