/* Estilos proprios da Central (o resto e o kit, por referencia). So layout: cor e medida vem dos tokens --wm-*. */

html, body { height: 100%; }
body { margin: 0; background: var(--wm-surface-base); color: var(--wm-label-primary); }

/* ── Seletor de idioma (_parciais/idiomas.html): menu compacto no fluxo; a lista abre por cima so ao clicar ── */
.wm-idiomas { position: relative; display: inline-block; font-size: var(--wm-font-size-footnote); }
.wm-idiomas summary { cursor: pointer; list-style: none; color: var(--wm-label-secondary); padding: 4px 8px; border-radius: 8px; }
.wm-idiomas summary::-webkit-details-marker { display: none; }
.wm-idiomas summary:hover, .wm-idiomas summary:focus-visible { color: var(--wm-label-primary); background: var(--wm-fill-secondary); }
.wm-idiomas nav { position: absolute; right: 0; z-index: 20; margin-top: 4px; display: grid; min-width: 12rem; padding: 6px;
  background: var(--wm-surface-raised, var(--wm-surface-base)); border: 1px solid var(--wm-separator-primary, rgba(0,0,0,.1));
  border-radius: 12px; box-shadow: var(--wm-shadow-medium, 0 8px 24px rgba(0,0,0,.12)); }
.wm-idiomas nav a { color: var(--wm-label-primary); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.wm-idiomas nav a:hover, .wm-idiomas nav a:focus-visible { background: var(--wm-fill-secondary); }
.wm-idiomas nav a[aria-current="true"] { font-weight: var(--wm-font-weight-semibold); }
.wm-auth-aurora__idiomas { display: flex; justify-content: center; margin-top: var(--wm-space-4); }
.wm-auth-aurora__field--seguinte { margin-top: var(--wm-space-6); }

/* ── Layout logado (layouts/logado.html): a aurora da tela de entrar continua depois do login ──
   Mesma paleta de assinatura do auth-aurora do kit (mesmo hex): e a identidade da Wortic, nao token do sistema,
   por isso mora em custom properties locais (--lg-*). Claro e escuro trocam so estas variaveis.
   Palco: 100% de largura, 3% lateral. */
.lg {
  --lg-azul: #1d59f0; --lg-azul2: #2f6ff0; --lg-azul-claro: #8fc0ff; --lg-ciano: #63d2ff; --lg-violeta: #8a7bff;
  --lg-fundo: #eaf0fb; --lg-tinta: #0e1730; --lg-tinta2: #4a5578; --lg-tinta3: #7a84a3;
  --lg-vidro: rgba(255, 255, 255, 0.58); --lg-vidro-forte: rgba(255, 255, 255, 0.8);
  --lg-vidro-borda: rgba(255, 255, 255, 0.85); --lg-linha: rgba(23, 50, 102, 0.12);
  --lg-sombra: 0 30px 80px -30px rgba(20, 45, 110, 0.38), 0 2px 8px rgba(20, 45, 110, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --lg-sombra-alta: 0 40px 90px -28px rgba(20, 45, 110, 0.5), 0 2px 8px rgba(20, 45, 110, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --lg-brilho: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 45%);
  --lg-blobs: 1;
  position: relative; isolation: isolate; min-height: 100dvh; background: var(--lg-fundo); color: var(--lg-tinta);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .lg {
  --lg-fundo: #060a17; --lg-tinta: #eef2ff; --lg-tinta2: #a7b0cc; --lg-tinta3: #7c86a6;
  --lg-vidro: rgba(24, 32, 58, 0.52); --lg-vidro-forte: rgba(34, 44, 76, 0.72);
  --lg-vidro-borda: rgba(255, 255, 255, 0.09); --lg-linha: rgba(255, 255, 255, 0.08);
  --lg-sombra: 0 30px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lg-sombra-alta: 0 40px 90px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(99, 210, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lg-brilho: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 45%);
  --lg-blobs: 0.55;
}
/* aurora fixa atras de tudo (parede, nao rola) */
.lg__aurora { position: fixed; inset: -20% -10% -10% -10%; z-index: 0; filter: blur(58px) saturate(1.25); pointer-events: none; }
.lg__blob { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.lg__blob--1 { width: 46vw; height: 46vw; left: -6vw; top: -8vw; opacity: calc(0.55 * var(--lg-blobs));
  background: radial-gradient(circle at 30% 30%, var(--lg-azul) 0, rgba(29, 89, 240, 0) 68%); animation: lg-flo1 26s ease-in-out infinite; }
.lg__blob--2 { width: 42vw; height: 42vw; right: -8vw; top: 6vw; opacity: calc(0.5 * var(--lg-blobs));
  background: radial-gradient(circle at 60% 40%, var(--lg-ciano) 0, rgba(99, 210, 255, 0) 66%); animation: lg-flo2 32s ease-in-out infinite; }
.lg__blob--3 { width: 50vw; height: 50vw; left: 12vw; bottom: -22vw; opacity: calc(0.42 * var(--lg-blobs));
  background: radial-gradient(circle at 50% 50%, var(--lg-violeta) 0, rgba(138, 123, 255, 0) 68%); animation: lg-flo3 30s ease-in-out infinite; }
.lg__blob--4 { width: 34vw; height: 34vw; right: 6vw; bottom: -10vw; opacity: calc(0.5 * var(--lg-blobs));
  background: radial-gradient(circle at 40% 40%, var(--lg-azul-claro) 0, rgba(143, 192, 255, 0) 66%); animation: lg-flo1 24s ease-in-out infinite reverse; }
@keyframes lg-flo1 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(4vw, 3vw) scale(1.12) } }
@keyframes lg-flo2 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(-5vw, 4vw) scale(1.08) } }
@keyframes lg-flo3 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(3vw, -4vw) scale(1.14) } }
.lg__grao { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.lg__palco { position: relative; z-index: 1; box-sizing: border-box; width: 100%; padding: 16px 3vw 64px; }

/* barra de vidro: marca | navegacao em trilho (item ativo = pilula branca, como as abas da tela de entrar) | idioma e sair */
.lg__topo { position: sticky; top: 12px; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 14px;
  margin-bottom: clamp(32px, 6vh, 64px); border-radius: 22px; background: var(--lg-vidro);
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); }
.lg__marca { display: inline-flex; align-items: center; gap: 10px; color: var(--lg-tinta); text-decoration: none; }
.lg__marca img { width: 32px; height: 32px; }
.lg__marca strong { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.lg__nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 14px;
  background: rgba(23, 50, 102, 0.06); border: 1px solid var(--lg-linha); }
:root[data-theme="dark"] .lg__nav { background: rgba(0, 0, 0, 0.25); }
.lg__nav > a { font-size: 14px; font-weight: 600; color: var(--lg-tinta2); text-decoration: none; padding: 8px 16px; border-radius: 10px;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.lg__nav > a:hover { color: var(--lg-tinta); }
.lg__nav > a[aria-current="page"] { color: var(--lg-azul); background: var(--lg-vidro-forte);
  box-shadow: 0 1px 2px rgba(20, 45, 110, 0.08), 0 6px 16px -8px rgba(20, 45, 110, 0.35); }
:root[data-theme="dark"] .lg__nav > a[aria-current="page"] { color: #fff; background: var(--lg-azul); }
.lg__acoes { display: flex; align-items: center; gap: 4px; }
.lg__acoes form { margin: 0; }
.lg__sair { font: inherit; font-size: 14px; font-weight: 600; color: var(--lg-tinta2); background: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 10px; transition: color .2s ease, background-color .2s ease; }
.lg__sair:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
.lg .wm-idiomas summary { font-size: 13px; color: var(--lg-tinta3); padding: 8px 10px; border-radius: 10px; }
.lg .wm-idiomas summary:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
.lg__marca, .lg__nav > a, .wm-idiomas summary { flex: none; white-space: nowrap; }
.lg a:focus-visible, .lg button:focus-visible, .lg summary:focus-visible { outline: 2px solid var(--lg-azul2); outline-offset: 2px; }
/* celular: marca e acoes numa linha; o trilho da navegacao embaixo, largura toda (antes passava por cima da marca) */
@media (max-width: 720px) {
  .lg__topo { flex-wrap: wrap; row-gap: 8px; padding: 8px; top: 8px; margin-bottom: 28px; }
  .lg__marca { padding-left: 6px; }
  .lg__acoes { margin-left: auto; }
  .lg__nav { order: 3; width: 100%; margin: 0; }
  .lg__nav > a { flex: 1; text-align: center; padding: 8px 6px; font-size: 13px; }
}

/* titulos e avisos das paginas internas (perfil, apps conectados) */
.lg__titulo { margin: 0 0 var(--wm-space-8); font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.1; color: var(--lg-tinta); }
.lg__aviso { margin: 0 0 var(--wm-space-8); padding: var(--wm-space-4) var(--wm-space-6); border-radius: 14px;
  font-weight: var(--wm-font-weight-semibold); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.lg__aviso--ok { background: var(--wm-success-fill); color: var(--wm-success); }
.lg__aviso--erro { background: var(--wm-error-fill); color: var(--wm-error); }

/* ── Inicio: a pessoa e as duas portas ── */
.hub__hero { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); margin-bottom: clamp(32px, 6vh, 56px); }
.hub__eu { position: relative; flex: none; display: block; width: 112px; height: 112px; border-radius: 50%; text-decoration: none; }
.hub__anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hub__anel circle { fill: none; stroke-width: 4; }
.hub__anel-trilho { stroke: var(--lg-linha); }
/* o anel enche na entrada e acompanha o onboarding (o JS troca --hub-progresso a cada etapa respondida) */
.hub__anel-feito { stroke: var(--lg-azul); stroke-linecap: round; stroke-dasharray: 289.03;
  stroke-dashoffset: calc(289.03 * (1 - var(--hub-progresso)));
  animation: hub-anel 1.2s cubic-bezier(.16, 1, .3, 1) .2s backwards; transition: stroke-dashoffset .8s cubic-bezier(.16, 1, .3, 1); }
@keyframes hub-anel { from { stroke-dashoffset: 289.03; } }
.hub__rosto { position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  background: var(--lg-azul); box-shadow: 0 12px 28px -18px rgba(20, 45, 110, 0.55); }
.hub__rosto img { width: 100%; height: 100%; object-fit: cover; }
.hub__rosto .wm-icon { width: 40px; height: 40px; }
.hub__ola { margin: 0; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; color: var(--lg-tinta); }
.hub__sub { margin: 10px 0 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--lg-tinta2); }

.hub__portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.hub__porta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 220px; box-sizing: border-box;
  padding: 24px 26px 26px; border-radius: 28px; text-decoration: none; color: var(--lg-tinta);
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1); }
.hub__porta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--lg-brilho); }
.hub__porta:hover { transform: translateY(-3px); box-shadow: var(--lg-sombra-alta); }
.hub__porta-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 28px; }
/* ladrilho de cor chapada, como os icones do System Settings (a cor diz o assunto; brilho colorido nao) */
.hub__icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: #fff;
  background: var(--lg-azul); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(20, 45, 110, 0.2); }
.hub__icone--apps { background: #5e5ce6; }
.hub__icone .wm-icon { width: 24px; height: 24px; }
.hub__seta { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--lg-tinta2); border: 1px solid var(--lg-linha); transition: transform .35s cubic-bezier(.16, 1, .3, 1), color .2s ease, background-color .2s ease; }
.hub__seta .wm-icon { width: 18px; height: 18px; }
.hub__porta:hover .hub__seta { transform: translateX(3px); color: #fff; background: var(--lg-azul); border-color: transparent; }
.hub__porta-titulo { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.hub__porta-desc { max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--lg-tinta2); }
.hub__etapas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hub__etapa { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--lg-tinta2); background: rgba(23, 50, 102, 0.05); border: 1px dashed rgba(23, 50, 102, 0.22); }
:root[data-theme="dark"] .hub__etapa { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); }
.hub__etapa .wm-icon { width: 16px; height: 16px; }
.hub__etapa--feita { color: #1f9c6a; background: rgba(47, 174, 122, 0.1); border: 1px solid rgba(47, 174, 122, 0.25); }
:root[data-theme="dark"] .hub__etapa--feita { color: #5fd3a0; background: rgba(47, 174, 122, 0.14); border-color: rgba(47, 174, 122, 0.3); }
.hub__marcas { display: flex; margin-top: 14px; }
.hub__marca { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lg-fundo); box-shadow: 0 6px 14px -8px rgba(20, 45, 110, 0.5); color: var(--lg-tinta2); }
.hub__marca + .hub__marca { margin-left: -10px; }
.hub__marca img { width: 56%; height: 56%; object-fit: contain; }
.hub__marca .wm-icon { width: 18px; height: 18px; }

/* uma entrada so: a pessoa, depois as portas (e o anel enche) */
.hub__hero, .hub__porta { animation: hub-entra .7s cubic-bezier(.16, 1, .3, 1) backwards; }
.hub__porta:nth-child(1) { animation-delay: .08s; }
.hub__porta:nth-child(2) { animation-delay: .16s; }
@keyframes hub-entra { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 560px) {
  .hub__hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hub__eu { width: 88px; height: 88px; }
  .hub__rosto { inset: 8px; font-size: 24px; }
  .hub__porta { min-height: 0; padding: 20px; border-radius: 24px; }
  .hub__porta-topo { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg__blob, .hub__hero, .hub__porta, .hub__anel-feito, .onb { animation: none; }
  .hub__porta, .hub__seta, .hub__anel-feito { transition: none; }
}

/* o rosto sem foto (avatar do kit, no inicio e no perfil) e azul chapado como o do inicio, sem o degrade da marca */
.lg .wm-avatar { --wm-gradient-brand: var(--lg-azul); }
.lg .wm-avatar-upload__iniciais .wm-icon { width: 40%; height: 40%; }

/* ── Perfil (perfil.html): settings-group do kit no vidro da aurora; cada linha abre o dialogo dela.
   Desktop: a foto numa coluna ao lado (parada ao rolar), os grupos na outra; celular: uma coluna so. ── */
.lg .pf { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wm-space-10); }
.lg .lg__aviso:has(+ .pf) { max-width: 1040px; }
@media (min-width: 980px) {
  .lg .pf { grid-template-columns: 320px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); align-items: start; }
  .lg .pf > .pf__grupo:first-child { grid-row: 1 / span 3; position: sticky; top: 110px; }
}
.lg .pf .wm-settings-group { background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border-radius: 20px; box-shadow: inset 0 0 0 1px var(--lg-vidro-borda), var(--lg-sombra); }
.lg .pf .wm-settings-group__label, .lg .pf .wm-settings-group__footer { color: var(--lg-tinta2); }
.lg .pf .wm-settings-row__label { color: var(--lg-tinta); }
.lg .pf .wm-settings-row__desc { color: var(--lg-tinta2); }
.lg .pf .wm-settings-row + .wm-settings-row::before { border-top-color: var(--lg-linha); }
.pf__ladrilho--nome { background: #1d59f0; }
.pf__ladrilho--email { background: #5e5ce6; }
.pf__ladrilho--whatsapp { background: #30b67a; }
.pf__ladrilho--cpf { background: #8e8e93; }
.lg .pf .pf__vazio { color: var(--lg-tinta3); }
.pf__foto { padding: var(--wm-space-7); }
.pf__campos { display: grid; gap: var(--wm-space-5); margin-top: var(--wm-space-6); }
.pf__erro { margin: var(--wm-space-4) 0 0; min-height: 1.2em; color: var(--wm-error); font-size: var(--wm-font-size-footnote); }
.pf__dialogo { width: min(30rem, calc(100vw - 32px)); }
.pf__dialogo .wm-field { margin-top: var(--wm-space-3); }

/* ── Onboarding do inicio (_parciais/onboarding.html): o agentic-flow do kit num painel de vidro ── */
.onb { margin-bottom: clamp(24px, 4vh, 40px); padding: clamp(20px, 2.6vw, 32px); border-radius: 28px;
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); animation: hub-entra .7s cubic-bezier(.16, 1, .3, 1) .08s backwards; }
.onb[hidden] { display: none; }
.lg .onb .wm-agentic-flow__track-title { color: var(--lg-tinta2); }
/* quem pergunta e a Wortic: a marca num circulo branco (o kit pinta o avatar com o degrade da marca) */
.onb .wm-agentic-turn__avatar { background: #fff; box-shadow: inset 0 0 0 1px var(--lg-linha); }
.onb .wm-agentic-turn__avatar img { width: 70%; height: 70%; object-fit: contain; }
.lg .onb .wm-agentic-turn__bubble { background: var(--lg-vidro-forte); box-shadow: inset 0 0 0 1px var(--lg-vidro-borda); }
/* a pergunta na escala da pagina (o kit e denso, de app de mesa; aqui e a conversa que abre a conta) */
.onb .wm-agentic-turn__question { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.onb .wm-agentic-turn__hint { font-size: 14px; line-height: 1.5; }
.onb__dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--wm-space-4); }
.onb__codigo { display: grid; gap: var(--wm-space-3); }
.onb__codigo-texto { margin: 0; color: var(--lg-tinta2); }
.onb__codigo-campo { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.onb__codigo-acoes { display: flex; flex-wrap: wrap; gap: var(--wm-space-2); margin: 0; }
.onb__pronto { margin-top: var(--wm-space-5); }
.onb .wm-avatar-upload { max-width: none; }

/* ── Apps conectados (conexoes.html): lista do kit (oauth-connection-status --row) + confirmar sem JS ── */
.cx__titulo { margin-bottom: var(--wm-space-3); }
.cx__sub { margin: 0 0 var(--wm-space-8); max-width: 60rem; color: var(--wm-label-secondary); line-height: 1.6; }
/* a lista do kit corta o que passa da borda (overflow: hidden, pelos cantos); aqui a caixa de confirmar
   precisa sair por baixo, entao os cantos vao nas linhas das pontas */
.cx__lista { margin-bottom: var(--wm-space-9); overflow: visible; }
.cx__lista .wm-oauth-connection-status { max-width: none; }
.cx__lista > .wm-oauth-connection-status:first-child { border-start-start-radius: var(--wm-radius-lg); border-start-end-radius: var(--wm-radius-lg); }
.cx__lista > .wm-oauth-connection-status:last-child { border-end-start-radius: var(--wm-radius-lg); border-end-end-radius: var(--wm-radius-lg); }
.cx__pode { flex-wrap: wrap; row-gap: var(--wm-space-2); }
.cx__pode .wm-badge { margin-inline-start: var(--wm-space-2); }
.cx__confirmar { position: relative; }
.cx__confirmar summary { list-style: none; }
.cx__confirmar summary::-webkit-details-marker { display: none; }
.cx__confirmar[open] summary { background: var(--wm-fill-secondary); }
.cx__confirmar-caixa { position: absolute; right: 0; top: calc(100% + var(--wm-space-3)); z-index: 20; width: min(22rem, 80vw);
  box-sizing: border-box; padding: var(--wm-space-6); border-radius: var(--wm-radius-lg); background: var(--wm-surface-elevated);
  box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator), var(--wm-shadow-3); }
.cx__confirmar-caixa p { margin: 0 0 var(--wm-space-5); line-height: 1.5; }
.cx__vazio { margin-bottom: var(--wm-space-9); }
.cx__como { max-width: 60rem; padding: var(--wm-space-6) var(--wm-space-7); border-radius: var(--wm-radius-panel);
  background: var(--wm-fill-quaternary); }
.cx__como h2 { margin: 0 0 var(--wm-space-2); font-size: var(--wm-font-size-headline); font-weight: var(--wm-font-weight-semibold); }
.cx__como p { margin: 0 0 var(--wm-space-4); color: var(--wm-label-secondary); line-height: 1.6; }
.cx__url { display: inline-block; padding: var(--wm-space-2) var(--wm-space-4); border-radius: var(--wm-radius-md);
  background: var(--wm-surface-primary); font-size: var(--wm-font-size-subheadline); user-select: all; }

/* ── Paginas internas no mesmo vidro: os paineis do kit (lista de apps, vazio, conectar)
   deixam o cinza opaco e ficam iguais as portas do inicio. Central.css fora de @layer: vence o kit. ── */
.lg .wm-oauth-connection-status__list, .lg .cx__vazio, .lg .cx__como {
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); border-radius: 28px; }
.lg .cx__sub, .lg .cx__como p { color: var(--lg-tinta2); }
.lg .wm-oauth-connection-status__list .wm-oauth-connection-status--row { background: transparent; padding: 18px 22px; }
.lg .wm-oauth-connection-status__list .wm-oauth-connection-status--row + .wm-oauth-connection-status--row {
  box-shadow: inset 0 1px 0 var(--lg-linha); }
.lg .wm-oauth-connection-status__name, .lg .cx__como h2 { color: var(--lg-tinta); }
.lg .wm-oauth-connection-status__icon { width: 44px; height: 44px; border-radius: 14px; background: #fff; }
.lg .cx__como { padding: 24px 26px; }
.lg .cx__url { background: var(--lg-vidro-forte); color: var(--lg-tinta); border: 1px solid var(--lg-linha); }
.lg .cx__confirmar-caixa { background: var(--lg-vidro-forte); backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra-alta); border-radius: 20px; }
.lg .cx__vazio { padding: 40px 24px; }