/* E04 — Refino visual e efeitos (plano em docs/etapas/E04-refino-visual/PLANO_E04.md).
 * Os efeitos entram nos elementos que já existem; cores só pelos tokens (assets/theme.php). Comportamento: motion.js. */

@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ubuntu-500.woff2') format('woff2'); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ubuntu-700.woff2') format('woff2'); }

/* ---------- 1. Moeda no seletor de mês ---------- */
.period-main { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ledger-coin-form { display: contents; }
.ledger-coin { position: relative; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; perspective: 500px; -webkit-tap-highlight-color: transparent; animation: mw-coin-halo 2.6s ease-out infinite; --halo: color-mix(in srgb, var(--cripto-c-accent) 60%, transparent); }
.ledger-coin.is-crypto { --halo: color-mix(in srgb, var(--fiat-c-accent) 55%, transparent); }
@keyframes mw-coin-halo { 0% { box-shadow: 0 0 0 0 var(--halo); } 70% { box-shadow: 0 0 0 11px transparent; } 100% { box-shadow: 0 0 0 11px transparent; } }
.ledger-coin-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; font-weight: 800; transition: transform .75s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-deep-900) 30%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--c-on-color) 14%, transparent), 0 6px 14px -8px var(--c-deep-900); }
/* Nas Contas a moeda mostra ₿ (convite ao Cripto, como o botão aprovado); no Cripto mostra R$. */
.ledger-coin-face.is-crypto { color: var(--cripto-c-accent); font: 700 19px/1 Ubuntu, var(--font-sans, system-ui), sans-serif; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--cripto-c-accent) 42%, transparent), transparent 62%), linear-gradient(150deg, var(--cripto-n-800), var(--cripto-n-900)); }
.ledger-coin-face.is-fiat { color: var(--c-on-color); font-size: 12.5px; transform: rotateY(180deg); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--fiat-c-accent) 55%, transparent), transparent 62%), linear-gradient(150deg, var(--fiat-n-800), var(--fiat-n-900)); }
.ledger-coin.is-crypto .ledger-coin-face.is-crypto { transform: rotateY(180deg); } .ledger-coin.is-crypto .ledger-coin-face.is-fiat { transform: rotateY(0deg); }
.ledger-coin.is-flipping .ledger-coin-face.is-crypto { transform: rotateY(180deg); } .ledger-coin.is-flipping .ledger-coin-face.is-fiat { transform: rotateY(360deg); }
.ledger-coin.is-crypto.is-flipping .ledger-coin-face.is-crypto { transform: rotateY(360deg); } .ledger-coin.is-crypto.is-flipping .ledger-coin-face.is-fiat { transform: rotateY(180deg); }
.ledger-coin.is-trophy .ledger-coin-face { box-shadow: 0 0 0 1.5px var(--c-crypto-gold), 0 0 10px color-mix(in srgb, var(--c-crypto-gold) 55%, transparent); }
.workspace-topbar.has-period-return .period-main { grid-column: 2; grid-row: 1; justify-self: center; }
/* Container do topo: moeda, mês e olho juntos, cada um com seu formato. Discreto, mas presente. */
.workspace-topbar, .workspace-topbar.has-period-return { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto; }
.topbar-cluster { grid-column: 2; display: flex; align-items: center; gap: 6px; min-width: 0; height: 50px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--n-0) 58%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-0) 85%, transparent), 0 8px 20px -16px color-mix(in srgb, var(--c-deep-900) 45%, transparent); }
.topbar-cluster .period-control-group, .workspace-topbar.has-period-return .topbar-cluster .period-control-group { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; }
.topbar-cluster .period-main { display: contents; }
/* A moeda fica por cima da ponta do mês: o mês é mais baixo, se estende por baixo dela e os dois parecem juntos,
 * mas claramente separados (anel na cor do container em volta da moeda). */
.topbar-cluster .period-control-group, .workspace-topbar.has-period-return .topbar-cluster .period-control-group { justify-content: flex-start; }
.topbar-cluster .ledger-coin { z-index: 1; width: 40px; height: 40px; margin-right: -22px; border-radius: 50%; }
.topbar-cluster .ledger-coin::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--c-topbar-ring, color-mix(in srgb, var(--n-0) 58%, var(--n-50))); z-index: -1; }
.workspace-topbar { gap: 14px; }
.topbar-cluster { padding-left: 7px; }
/* A data começa logo depois da moeda; a seta fica no fim do trilho, como um campo de escolha. */
.topbar-cluster .period-trigger { flex: 1 1 auto; justify-content: flex-start; max-width: none; height: 30px; padding: 0 12px 0 30px; font-size: 14px; box-shadow: none; }
.topbar-cluster .period-trigger .period-caret { margin-left: auto; }
.topbar-cluster .period-current-action { width: 30px; min-height: 30px; }
.topbar-cluster-eye { display: flex; flex: 0 0 auto; }
.topbar-cluster .privacy-toggle { width: 38px; height: 38px; box-shadow: none; }
.topbar-cluster .privacy-toggle svg { width: 18px; height: 18px; }
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .topbar-cluster { --c-topbar-ring: color-mix(in srgb, var(--n-0) 6%, var(--c-crypto-bar)); border-color: color-mix(in srgb, var(--c-on-color) 12%, transparent); background: color-mix(in srgb, var(--c-on-color) 6%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-on-color) 8%, transparent); }

/* Telas largas: o olho vai para o canto direito e a moeda com o mês ficam juntos no centro, sem esticar. */
@media (min-width: 760px) {
  .workspace-topbar, .workspace-topbar.has-period-return { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .topbar-cluster { justify-self: center; width: auto; }
  .topbar-cluster .period-trigger { flex: 0 0 auto; min-width: 210px; justify-content: center; padding-right: 16px; }
  .topbar-cluster .period-trigger .period-caret { margin-left: 4px; }
  .topbar-cluster-eye { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); }
  .topbar-cluster .privacy-toggle { width: 44px; height: 44px; }
}

/* Topo e menu de baixo em vidro (Contas e Cripto). Duas camadas: onde ficam os botões, quase sólido; da borda
 * para fora, o vidro vai se abrindo num degradê e embaça o conteúdo que passa por baixo, até sumir. O vidro mora
 * num pseudo-elemento (a barra em si não tem backdrop-filter), para não virar "raiz" do vidro dos filhos. */
.workspace-topbar, .mobile-nav { --bar-solid: var(--n-50); --bar-edge: color-mix(in srgb, var(--n-50) 72%, transparent); --bar-fringe: 26px; }
.workspace-topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.mobile-nav { --bar-solid: var(--c-surface); --bar-edge: color-mix(in srgb, var(--c-surface) 72%, transparent); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: transparent; }
.workspace-topbar::before, .mobile-nav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.workspace-topbar::before { top: 0; bottom: calc(var(--bar-fringe) * -1); background: linear-gradient(180deg, var(--bar-solid) 0%, var(--bar-solid) calc(100% - var(--bar-fringe)), var(--bar-edge) calc(100% - var(--bar-fringe) + 1px), transparent 100%); -webkit-mask-image: linear-gradient(180deg, var(--n-900) calc(100% - var(--bar-fringe)), transparent 100%); mask-image: linear-gradient(180deg, var(--n-900) calc(100% - var(--bar-fringe)), transparent 100%); }
.mobile-nav::before { bottom: 0; top: calc(var(--bar-fringe) * -1); background: linear-gradient(0deg, var(--bar-solid) 0%, var(--bar-solid) calc(100% - var(--bar-fringe)), var(--bar-edge) calc(100% - var(--bar-fringe) + 1px), transparent 100%); -webkit-mask-image: linear-gradient(0deg, var(--n-900) calc(100% - var(--bar-fringe)), transparent 100%); mask-image: linear-gradient(0deg, var(--n-900) calc(100% - var(--bar-fringe)), transparent 100%); }

/* Moeda com o ícone da marca (E04): cada face é o ícone com o símbolo do lado de destino em destaque; o selo ⇄
 * no canto avisa que é a troca. O pulso continua no botão. */
.ledger-coin.is-brand { width: 46px; height: 46px; }
.ledger-coin.is-brand .ledger-coin-face { background: none; box-shadow: none; }
.ledger-coin.is-brand .ledger-coin-face img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--c-deep-900) 30%, transparent)); }
.topbar-cluster .ledger-coin.is-brand { width: 46px; height: 46px; margin-right: -20px; }
.topbar-cluster .ledger-coin.is-brand::before { display: none; }
.ledger-coin-swap { position: absolute; z-index: 2; right: -4px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--n-0); color: var(--cripto-c-accent); box-shadow: 0 0 0 2px var(--c-topbar-ring, var(--n-50)), 0 2px 4px color-mix(in srgb, var(--c-deep-900) 25%, transparent); transform: translateZ(2px); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ledger-coin.is-crypto .ledger-coin-swap { color: var(--fiat-c-accent); }
.ledger-coin-swap svg { width: 11px; height: 11px; stroke-width: 2.4; }
.ledger-coin.is-flipping .ledger-coin-swap { transform: translateZ(2px) rotate(180deg); }
:root[data-mode="cripto"] .ledger-coin-swap { background: var(--c-crypto-bar); }

/* ---------- 2. Vidro das transições (duas camadas) ---------- */
.mw-glass { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); background: color-mix(in srgb, var(--c-deep-900) 16%, transparent); }
.mw-glass.is-second { -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); background: color-mix(in srgb, var(--n-0) 14%, transparent); }
/* Chegando de uma transição: o vidro já cobre antes da primeira pintura (motion_boot.js marca o html). */
html.mw-covered body::after { content: ""; position: fixed; inset: 0; z-index: 2147481999; -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); background: color-mix(in srgb, var(--c-deep-900) 16%, transparent); }
html.mw-covered.mw-ready body::after { display: none; }

/* ---------- 3. Topo que sai ao rolar e volta ao parar ---------- */
.workspace-topbar { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.workspace-topbar.mw-away { transform: translateY(calc(-100% - 6px)); }
.workspace-topbar.mw-back { box-shadow: 0 10px 24px -18px var(--c-deep-900); }

/* ---------- 4. Cartões e ativos que viajam; cartão na mão ---------- */
.mw-trip { position: fixed; z-index: 2147481000; margin: 0; pointer-events: none; box-sizing: border-box; filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--c-deep-900) 22%, transparent)); }
.mw-trip > * { width: 100% !important; height: 100% !important; margin: 0 !important; }
.wallet-stack-item.is-open .wallet-card { animation: mw-float 3.6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes mw-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-.5deg); } 75% { transform: translateY(2px) rotate(.4deg); } }
.wallet-card:active, .crypto-holding-row:active, .crypto-alloc-link:active, .crypto-token-market:active { transform: scale(.985); transition: transform .12s ease; }
.mw-leaving .workspace-content { opacity: .35; transition: opacity .35s ease; }

/* ---------- 5. Efeitos ao salvar ---------- */
.mw-flyer { position: fixed; left: 0; top: 0; z-index: 2147481500; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; pointer-events: none; color: var(--c-on-color); background: var(--c-danger); box-shadow: 0 10px 22px -10px var(--c-danger); }
.mw-flyer.is-in { background: var(--c-success); box-shadow: 0 10px 22px -10px var(--c-success); }
.mw-token-coin { position: fixed; left: 0; top: 0; z-index: 2147481500; display: grid; place-items: center; border-radius: 50%; pointer-events: none; color: var(--c-on-color); font: 700 17px/1 Ubuntu, var(--font-sans, system-ui), sans-serif;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c-crypto-gold) 70%, var(--n-0)), var(--cripto-c-accent) 42%, var(--c-crypto-ember)); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c-deep-900) 25%, transparent), 0 8px 18px -8px var(--c-deep-900); }
.mw-spark { position: fixed; z-index: 2147481400; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; background: var(--cripto-c-accent); }
.mw-spark.is-gold { background: var(--c-crypto-gold); }
.mw-hit { animation: mw-hit .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes mw-hit { 35% { transform: scale(1.025); } }

/* ---------- 6. Alertas que se sentem ---------- */
.crypto-home-loans .crypto-holding-row:has(small.is-expense) { animation: mw-breathe 3.2s ease-in-out infinite; border-radius: 16px; }
@keyframes mw-breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-danger) 80%, transparent), 0 0 18px color-mix(in srgb, var(--c-danger) 30%, transparent); } }
.crypto-ladder-row.is-reached { animation: mw-light-once 1.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mw-light-once { 0% { background: transparent; } 25% { background: color-mix(in srgb, var(--c-success) 22%, transparent); } 100% { background: linear-gradient(90deg, color-mix(in srgb, var(--c-success) 9%, transparent), transparent 70%); } }
.mw-due-today { animation: mw-due 2.6s ease-out infinite; border-radius: 16px; }
@keyframes mw-due { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cripto-c-accent) 50%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 10px transparent; } }

/* ---------- 7. Menu do perfil: o app recua e desliza ---------- */
/* Só no celular: o app recua como um cartão ao lado do menu. No computador fica o efeito de antes (o menu por cima e o
 * vidro cobrindo a tela). Sem a barra de baixo atrás do menu, "Sair" desce para o fim dele. */
@media (max-width: 759px) {
  .workspace-shell-app > .workspace-content, .workspace-shell-app > .workspace-topbar, .workspace-shell-app > .mobile-nav { transition: transform .7s cubic-bezier(.2, .8, .2, 1), border-radius .7s ease, box-shadow .7s ease; }
  .workspace-shell-app:has(.account-drawer.is-open) > .workspace-content { transform: translateX(var(--mw-push-x, calc(min(86vw, 340px) + 12px))) scale(var(--mw-push-s, .86)); transform-origin: left center; background: var(--n-50); }
  .workspace-shell-app:has(.account-drawer.is-open) > .workspace-topbar, .workspace-shell-app:has(.account-drawer.is-open) > .mobile-nav { transform: translateX(var(--mw-push-x, calc(min(86vw, 340px) + 12px))) scale(var(--mw-push-s, .86)); }
  /* Enquanto recuado, o app é um cartão só: topo com cantos de cima, menu com os de baixo (sem a faixa de vidro de fora)
   * e uma moldura com sombra no mesmo lugar, para demarcar a tela. */
  .workspace-shell-app.mw-pushed > .workspace-topbar { clip-path: inset(0 round 26px 26px 0 0); }
  .workspace-shell-app.mw-pushed > .mobile-nav { clip-path: inset(0 round 0 0 26px 26px); }
  .workspace-shell-app.mw-pushed::after { content: ""; position: fixed; inset: 0; z-index: 31; border-radius: 26px; pointer-events: none; transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; opacity: 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-deep-900) 8%, transparent), 0 34px 70px -26px color-mix(in srgb, var(--c-deep-900) 55%, transparent); }
  .workspace-shell-app.mw-pushed:has(.account-drawer.is-open)::after { opacity: 1; transform: translateX(var(--mw-push-x, calc(min(86vw, 340px) + 12px))) scale(var(--mw-push-s, .86)); }
  .workspace-shell-app.mw-pushed .account-drawer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
/* Com o app recuado, o véu não embaça: o cartão do app fica nítido ao lado do menu. */
@media (max-width: 759px) { .workspace-shell-app:has(.account-drawer.is-open) .entry-scrim.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--c-deep-900) 8%, transparent); } }
.account-drawer.is-open > * { animation: mw-cascade .55s cubic-bezier(.2, .8, .2, 1) both; }
.account-drawer.is-open > *:nth-child(2) { animation-delay: .06s; } .account-drawer.is-open > *:nth-child(3) { animation-delay: .12s; } .account-drawer.is-open > *:nth-child(4) { animation-delay: .18s; } .account-drawer.is-open > *:nth-child(5) { animation-delay: .24s; } .account-drawer.is-open > *:nth-child(6) { animation-delay: .3s; }
@keyframes mw-cascade { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ---------- 8. Trilha: o que ainda não foi liberado fica sob vidro ---------- */
.mw-veiled { position: relative; pointer-events: none; user-select: none; }
.mw-veiled > * { filter: blur(7px) saturate(.8); opacity: .75; transition: filter 1.1s ease, opacity 1.1s ease; }
.mw-veiled::after { content: attr(data-veil-label); position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: max-content; max-width: min(86%, 380px); padding: 10px 16px; border-radius: 16px; text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--n-900); background: color-mix(in srgb, var(--n-0) 94%, transparent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-deep-900) 50%, transparent); }
.mw-veiled[data-veil-label=""]::after { display: none; }
.mw-unveil > * { filter: none; opacity: 1; }
.mw-unveil::after { opacity: 0; transition: opacity .8s ease; }

/* ---------- 9. Bloqueio: o cartão azul da foto por cima; o cartão claro dos textos nasce por trás dele, mais estreito
 * (como a moeda sobre o seletor de mês) e sem passar do topo do azul. Por baixo, o app em vidro. ---------- */
body.view-app_lock { background: var(--n-100); }
body.view-app_lock .app-screen { position: relative; isolation: isolate; }
/* O "app por baixo": a silhueta do Início (topo, saldo, dois cartões, lista, menu), sem valores, embaçada. */
body.view-app_lock .app-screen::before { content: ""; position: fixed; inset: -20px; z-index: -2; filter: blur(9px); opacity: 1; animation: mw-glass-in 1.6s ease-out both;
  background:
    radial-gradient(circle at 50% calc(100% - 46px), var(--c-accent) 0 26px, transparent 27px),
    linear-gradient(var(--n-0), var(--n-0)) 0 100% / 100% 96px no-repeat,
    radial-gradient(circle at 86% 470px, color-mix(in srgb, var(--c-success) 70%, transparent) 0 22px, transparent 23px),
    radial-gradient(circle at 39% 470px, color-mix(in srgb, var(--c-danger) 60%, transparent) 0 22px, transparent 23px),
    linear-gradient(var(--n-0), var(--n-0)) 50% 640px / 88% 64px no-repeat,
    linear-gradient(var(--n-0), var(--n-0)) 50% 560px / 88% 64px no-repeat,
    linear-gradient(var(--n-0), var(--n-0)) 7% 380px / 42% 160px no-repeat,
    linear-gradient(var(--n-0), var(--n-0)) 93% 380px / 42% 160px no-repeat,
    linear-gradient(150deg, var(--fiat-n-800), var(--fiat-n-900, var(--c-deep-900))) 50% 130px / 88% 220px no-repeat,
    linear-gradient(var(--n-0), var(--n-0)) 0 0 / 100% 96px no-repeat,
    color-mix(in srgb, var(--n-200) 75%, var(--n-100)); }
/* O vidro: claro e translúcido, deixa ver que há o app por baixo. */
body.view-app_lock .app-screen::after { content: ""; position: fixed; inset: 0; z-index: -1; background: color-mix(in srgb, var(--n-50) 38%, transparent); }
@keyframes mw-glass-in { from { filter: blur(0); opacity: 0; } to { filter: blur(9px); opacity: 1; } }
.app-lock { gap: 0; padding: 0; background: none; box-shadow: none; animation: mw-rise .8s .3s cubic-bezier(.2, .8, .2, 1) both; }
.app-lock .app-lock-card { position: relative; z-index: 1; box-shadow: 0 24px 44px -22px var(--c-deep-900); }
.app-lock .app-lock-facts { margin: -48px 18px 0; padding: 64px 14px 6px; border-radius: 26px 26px 0 0; background: var(--n-0); box-shadow: 0 0 0 1px var(--n-100); }
.app-lock .app-lock-exit { margin: 0 18px; padding: 8px 14px 20px; border-radius: 0 0 26px 26px; background: var(--n-0); box-shadow: 0 1px 0 1px var(--n-100), 0 30px 50px -30px color-mix(in srgb, var(--c-deep-900) 45%, transparent); }
@keyframes mw-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- 10. Lado Cripto: grafite quente no topo e na barra, Ubuntu nos títulos ---------- */
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .workspace-topbar, :root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .mobile-nav { --bar-solid: var(--c-crypto-bar); --bar-edge: color-mix(in srgb, var(--c-crypto-bar-2) 74%, transparent); }
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .workspace-topbar .period-trigger { background: color-mix(in srgb, var(--c-on-color) 9%, transparent); color: var(--c-on-color); border-color: color-mix(in srgb, var(--c-on-color) 14%, transparent); }
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .workspace-topbar .period-caret { color: color-mix(in srgb, var(--c-on-color) 70%, transparent); }
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .workspace-topbar .privacy-toggle { background: color-mix(in srgb, var(--c-on-color) 9%, transparent); color: var(--cripto-c-accent); border-color: color-mix(in srgb, var(--c-on-color) 14%, transparent); }
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .mobile-nav-item { color: color-mix(in srgb, var(--c-on-color) 58%, transparent); }
:root[data-mode="cripto"]:not([data-cripto="amarelo-noite"]) .mobile-nav-item.is-active { color: var(--cripto-c-accent); }
:root[data-mode="cripto"] h1, :root[data-mode="cripto"] .dashboard-section-heading h2, :root[data-mode="cripto"] .crypto-banner strong { font-family: Ubuntu, var(--font-sans, system-ui), sans-serif; letter-spacing: -.2px; }

/* ---------- 12. Menu de vidro (chave em app/visual.php: menu = 'vidro') ----------
   A barra de baixo solta das bordas: fundo translúcido, desfoque do que passa por trás, borda de luz no alto.
   O item ativo fica num container de vidro (ícone e texto juntos), com o ícone na cor de destaque. */
:root[data-menu="vidro"] .mobile-nav { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 64px; padding: 6px; border: 1px solid color-mix(in srgb, var(--n-0) 70%, transparent); border-radius: 26px; background: color-mix(in srgb, var(--c-surface) 86%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-0) 75%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--c-deep-900) 38%, transparent); }
:root[data-menu="vidro"] .mobile-nav::before { display: none; }
:root[data-menu="vidro"] .mobile-nav-item { min-height: 52px; margin: 0 2px; border: 1px solid transparent; border-radius: 19px; }
:root[data-menu="vidro"] .mobile-nav-item, :root[data-menu="vidro"][data-mode="cripto"] .mobile-nav-item { color: var(--c-muted); }
:root[data-menu="vidro"] .mobile-nav-item.is-active, :root[data-menu="vidro"][data-mode="cripto"] .mobile-nav-item.is-active { color: var(--c-accent); background: color-mix(in srgb, var(--n-0) 58%, transparent); border-color: color-mix(in srgb, var(--n-0) 85%, transparent); box-shadow: inset 0 1px 0 var(--n-0), 0 2px 8px -3px color-mix(in srgb, var(--c-deep-900) 18%, transparent); }
:root[data-menu="vidro"] .entry-trigger { margin-top: -26px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-surface) 80%, transparent), 0 10px 24px var(--c-shadow); }
:root[data-menu="vidro"] .workspace-shell-app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
/* Amarelo-noite: amarelo puro some em texto pequeno sobre o fundo claro; os rótulos usam o amarelo escuro. */
:root[data-mode="cripto"][data-cripto="amarelo-noite"] .eyebrow, :root[data-mode="cripto"][data-cripto="amarelo-noite"] .eyebrow a, :root[data-mode="cripto"][data-cripto="amarelo-noite"] .dashboard-section-heading > a { color: var(--c-crypto-ember); }
@media (min-width: 900px) { :root[data-menu="vidro"] .mobile-nav { right: 0; left: 0; width: min(560px, calc(100% - 24px)); margin: 0 auto; } }

/* ---------- 11. Meta do Bitcoin: marcos e cerimônia ---------- */
.mw-badge { position: fixed; left: 50%; top: 88px; z-index: 2147481600; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 13.5px; color: var(--cripto-n-900); background: linear-gradient(135deg, var(--c-crypto-gold), var(--cripto-c-accent)); box-shadow: 0 12px 26px -12px var(--cripto-n-900); animation: mw-badge 3.2s ease both; pointer-events: none; }
@keyframes mw-badge { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.mw-ceremony { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--c-on-color); background: var(--cripto-n-900); opacity: 0; transition: opacity .9s ease; }
.mw-ceremony.is-on { opacity: 1; }
.mw-ceremony svg { position: absolute; width: 220px; height: 220px; transform: rotate(-90deg); }
.mw-ceremony circle { fill: none; stroke: var(--cripto-c-accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 628.3; stroke-dashoffset: 628.3; }
.mw-ceremony .mw-cer-stage { position: relative; display: grid; place-items: center; width: 220px; height: 220px; }
.mw-ceremony .mw-cer-coin { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; color: var(--c-on-color); font: 700 72px/1 Ubuntu, var(--font-sans, system-ui), sans-serif;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c-crypto-gold) 75%, var(--n-0)), var(--cripto-c-accent) 38%, var(--c-crypto-ember) 72%); box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--c-deep-900) 22%, transparent), 0 30px 60px color-mix(in srgb, var(--c-deep-900) 60%, transparent); }
.mw-ceremony .mw-cer-shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--c-on-color) 55%, transparent) 50%, transparent 60%); transform: translateX(-100%); }
.mw-ceremony .mw-cer-qty { margin: 18px 0 0; font: 700 34px/1 Ubuntu, var(--font-sans, system-ui), sans-serif; font-variant-numeric: tabular-nums; }
.mw-ceremony .mw-cer-qty small { font-size: 16px; color: var(--cripto-c-accent); letter-spacing: 2px; }
.mw-ceremony .mw-cer-line { margin: 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-on-color) 55%, transparent); }
.mw-ceremony button { margin-top: 18px; padding: 10px 26px; border: 1px solid color-mix(in srgb, var(--c-on-color) 22%, transparent); border-radius: 999px; background: transparent; color: var(--c-on-color); font-weight: 700; }

/* ---------- 12. Entrada da tela: os blocos sobem em sequência ---------- */
.mw-assemble > *:not([class*="-layer"]):not([class*="sheet"]):not(.entry-scrim):not(.account-drawer) { animation: mw-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.mw-assemble > *:nth-child(2) { animation-delay: .06s; } .mw-assemble > *:nth-child(3) { animation-delay: .12s; } .mw-assemble > *:nth-child(4) { animation-delay: .18s; } .mw-assemble > *:nth-child(5) { animation-delay: .24s; } .mw-assemble > *:nth-child(6) { animation-delay: .3s; } .mw-assemble > *:nth-child(n+7) { animation-delay: .36s; }
.mw-slide-next > *:not([class*="-layer"]):not([class*="sheet"]):not(.entry-scrim):not(.account-drawer) { animation: mw-from-right .75s cubic-bezier(.2, .8, .2, 1) both; } .mw-slide-prev > *:not([class*="-layer"]):not([class*="sheet"]):not(.entry-scrim):not(.account-drawer) { animation: mw-from-left .75s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mw-from-right { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes mw-from-left { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
.app-brand.mw-brand-in { animation: mw-rise .9s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .ledger-coin, .wallet-stack-item.is-open .wallet-card, .crypto-home-loans .crypto-holding-row, .mw-due-today, .crypto-ladder-row.is-reached { animation: none !important; }
  .mw-assemble > *, .mw-slide-next > *, .mw-slide-prev > *, .account-drawer.is-open > *, .app-lock { animation: none !important; }
  .workspace-shell-app > .workspace-content, .workspace-shell-app > .workspace-topbar, .workspace-shell-app > .mobile-nav, .workspace-topbar { transition: none !important; }
}
.mw-chars { display: inline; white-space: nowrap; }
.mw-chars > span { display: inline-block; white-space: pre; }

/* Navegação comum (sem efeito próprio): o conteúdo esmaece rápido ao sair e o da próxima tela sobe de leve.
 * Só "backwards": no fim a animação não segura o transform (o menu do perfil precisa dele). */
html.mw-soft-out :is(.workspace-content, .app-content) { opacity: 0; transition: opacity .15s ease-in; }
/* O conteúdo em si só esmaece (transform nele faria os painéis fixos se montarem dentro dele); quem sobe são os blocos,
 * nunca as camadas fixas (painéis, seletores, véus). */
html.mw-soft-in :is(.workspace-content, .app-content) { animation: mw-fade-in .34s ease-out backwards; }
html.mw-soft-in :is(.workspace-content, .app-content) > *:not([class*="-layer"]):not([class*="sheet"]):not(.entry-scrim):not(.account-drawer) { animation: mw-soft-in .34s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes mw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mw-soft-in { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.mw-soft-in :is(.workspace-content, .app-content) { animation: none; } }

/* Logo ↔ cartão de marca em viagem (motion.js, morphTrip): fixo na tela, tudo posicionado à mão para o tamanho
 * poder ir de logo a cartão sem o conteúdo pular; a logo termina exatamente onde fica no cartão real. */
.mw-morph { position: fixed; z-index: 2147481000; margin: 0; min-height: 0 !important; padding: 0 !important; box-sizing: border-box; pointer-events: none; }
.mw-morph .mw-logo-card-logo { position: absolute; left: 50%; margin-left: -39px; top: 22px; }
.mw-morph .mw-logo-card-text { position: absolute; top: 110px; left: 12px; right: 12px; }
.mw-morph .mw-logo-card-foot { position: absolute; left: 20px; right: 20px; bottom: 16px; width: auto; }

/* Cerimônia de 1 BTC com o ícone da marca (o mesmo do seletor) no centro, com brilho dourado. */
.mw-ceremony .mw-cer-coin.is-brand { width: 156px; height: 143px; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.mw-ceremony .mw-cer-coin.is-brand img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c-crypto-gold) 45%, transparent)) drop-shadow(0 28px 40px color-mix(in srgb, var(--c-deep-900) 65%, transparent)); }
/* O fio dourado de quem chegou a 1 BTC, contornando o ícone da marca. */
.ledger-coin.is-brand.is-trophy .ledger-coin-face { box-shadow: none; }
.ledger-coin.is-brand.is-trophy .ledger-coin-face img { filter: drop-shadow(0 0 1.2px var(--c-crypto-gold)) drop-shadow(0 0 1.2px var(--c-crypto-gold)) drop-shadow(0 0 7px color-mix(in srgb, var(--c-crypto-gold) 60%, transparent)); }

/* Pendências: atraso em vermelho (marca na lateral e um pulso curto ao abrir); vencimento de hoje pulsa em laranja. */
.mw-overdue { position: relative; }
.mw-overdue::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--c-danger); animation: mw-late-bar .6s var(--mw-delay, 0ms) cubic-bezier(.2, .8, .2, 1) both; }
.mw-overdue { animation: mw-late 1.8s var(--mw-delay, 0ms) ease-out 3; }
@keyframes mw-late-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mw-late { 0% { background-color: color-mix(in srgb, var(--c-danger) 0%, transparent); } 35% { background-color: color-mix(in srgb, var(--c-danger) 9%, transparent); } 100% { background-color: color-mix(in srgb, var(--c-danger) 0%, transparent); } }
.mw-overdue-card { animation: mw-late-card 2.2s .8s ease-out 3; }
@keyframes mw-late-card { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-danger) 45%, transparent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .mw-overdue, .mw-overdue::before, .mw-overdue-card { animation: none !important; } }
/* Cerimônia com a logo do Bitcoin (meta em BTC) ou a moeda de $ (meta em dólar). */
.mw-ceremony .mw-cer-coin.is-logo { overflow: visible; background: none; box-shadow: 0 0 40px color-mix(in srgb, var(--c-crypto-gold) 35%, transparent), 0 30px 60px color-mix(in srgb, var(--c-deep-900) 60%, transparent); }
.mw-ceremony .mw-cer-coin.is-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.mw-ceremony .mw-cer-coin.is-dollar { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c-success) 45%, var(--n-0)), var(--c-success) 50%, color-mix(in srgb, var(--c-success) 65%, var(--c-deep-900)) 85%); }
/* Festa da cerimônia: raios de luz e confete (cores pelos tokens). */
.mw-ceremony .mw-cer-rays { position: absolute; inset: -120px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c-crypto-gold) 22%, transparent) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask-image: radial-gradient(circle, var(--n-900) 18%, transparent 68%); mask-image: radial-gradient(circle, var(--n-900) 18%, transparent 68%); }
.mw-ceremony .mw-cer-stage { isolation: isolate; }
.mw-confetti { position: fixed; left: 0; top: 0; z-index: 2; width: 10px; height: 16px; margin: -8px 0 0 -5px; box-shadow: 0 0 6px color-mix(in srgb, var(--c-crypto-gold) 40%, transparent); border-radius: 2px; pointer-events: none; background: var(--c-crypto-gold); }
.mw-confetti.is-round { width: 11px; height: 11px; border-radius: 50%; }
.mw-confetti.is-c1 { background: var(--cripto-c-accent); } .mw-confetti.is-c2 { background: var(--c-success); }
.mw-confetti.is-c3 { background: var(--n-0); } .mw-confetti.is-c4 { background: var(--c-crypto-ember); }
/* "Hoje": voltar ao mês atual, com ícone de retorno e rótulo (o calendário sozinho não dizia a função). */
.topbar-cluster .period-current-action { width: auto; min-height: 30px; gap: 4px; padding: 0 10px 0 8px; }
.topbar-cluster .period-current-action .wallet-icon { width: 14px; height: 14px; }
.topbar-cluster .period-trigger { white-space: nowrap; min-width: 0; } .topbar-cluster .period-current-action { flex: 0 0 auto; }
@media (max-width: 400px) { .topbar-cluster .period-current-action span { display: none; } .topbar-cluster .period-current-action { padding: 0 8px; } }

/* ---------- Trilha do novo usuário: entrada, passo concluído e revelação ---------- */
.trail-about > *, .trail-body > .trail-head, .trail-step { animation: mw-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.trail-about > *:nth-child(2) { animation-delay: .08s; } .trail-about > *:nth-child(3) { animation-delay: .16s; } .trail-about > *:nth-child(4) { animation-delay: .26s; } .trail-about > *:nth-child(5) { animation-delay: .4s; } .trail-about > *:nth-child(6) { animation-delay: .5s; }
.trail-step:nth-child(1) { animation-delay: .1s; } .trail-step:nth-child(2) { animation-delay: .2s; } .trail-step:nth-child(3) { animation-delay: .3s; }
.trail-step.is-current .trail-talk { animation: trail-talk .7s .55s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 0 0; }
.trail-step.is-current .trail-action { animation: mw-rise .6s .85s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes trail-talk { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
/* Passo recém-concluído: o nó "carimba" o check e a linha desce até o próximo. */
.trail-step.is-just-done .trail-node { animation: trail-pop .9s .2s cubic-bezier(.2, 1.4, .3, 1) both; }
.trail-step.is-just-done::before { transform-origin: 50% 0; animation: trail-line .8s .7s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes trail-pop { 0% { transform: scale(.4); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 60%, transparent); } 60% { transform: scale(1.18); } 100% { transform: scale(1); box-shadow: 0 0 0 18px transparent; } }
@keyframes trail-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Seção revelada: um contorno de luz passa enquanto o vidro se desfaz. */
.mw-reveal-glow { animation: mw-reveal-glow 1.8s ease-out both; border-radius: 22px; }
@keyframes mw-reveal-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 46px color-mix(in srgb, var(--c-accent) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.mw-badge.is-trail { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
.mw-confetti.is-top { z-index: 2147483001; }
@media (prefers-reduced-motion: reduce) { .trail-about > *, .trail-body > .trail-head, .trail-step, .trail-talk, .trail-action, .trail-node, .trail-step::before, .trail-guide::after, .mw-reveal-glow { animation: none !important; } }
.mw-badge.is-trail { color: var(--c-on-color); background: linear-gradient(135deg, var(--c-success), color-mix(in srgb, var(--c-success) 70%, var(--c-deep-900))); font-size: 14.5px; padding: 10px 18px; }
.mw-badge.is-trail { width: max-content; max-width: 90vw; text-align: center; }

/* Botão pronto (E04): brilho que atravessa o botão e um halo suave quando o formulário já pode ser enviado. */
.btn-primary.is-ready { overflow: hidden; animation: ready-halo 2.4s ease-in-out infinite; }
.btn-primary.is-ready::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--c-on-color) 38%, transparent) 50%, transparent 65%); transform: translateX(-120%); animation: ready-sheen 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ready-sheen { 0%, 35% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
@keyframes ready-halo { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-deep-900) 0%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--c-deep-900) 45%, transparent); transform: translateY(0); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-deep-900) 9%, transparent), 0 16px 28px -14px color-mix(in srgb, var(--c-deep-900) 55%, transparent); transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .btn-primary.is-ready, .btn-primary.is-ready::after { animation: none; } .btn-primary.is-ready { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-deep-900) 14%, transparent); } }
/* Cerimônia (E08): a marca do Minha Wallet abre a cena. "Nós conseguimos." */
.mw-ceremony .mw-cer-us { display: grid; justify-items: center; gap: 10px; margin: 0 0 6px; font: 700 22px/1.2 Ubuntu, var(--font-sans, system-ui), sans-serif; color: var(--c-on-color); }
.mw-ceremony .mw-cer-us img { width: 54px; height: auto; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--c-deep-900) 60%, transparent)); }
/* Celular: o seletor de mês ocupa só o tamanho do conteúdo, centrado, em vez de esticar entre o avatar e a borda. */
@media (max-width: 640px) {
  .topbar-cluster { justify-self: center; width: auto; max-width: 100%; height: 44px; }
  .topbar-cluster .period-control-group, .workspace-topbar.has-period-return .topbar-cluster .period-control-group { flex: 0 1 auto; }
  .topbar-cluster .period-trigger { flex: 0 1 auto; padding: 0 10px 0 28px; }
  .topbar-cluster .period-trigger .period-caret { margin-left: 6px; }
  .topbar-cluster .ledger-coin { width: 36px; height: 36px; }
  .topbar-cluster .privacy-toggle { width: 34px; height: 34px; }
}
/* Computador: o olho fica à esquerda do "i" de relato, que ocupa o canto direito. */
@media (min-width: 760px) { .topbar-cluster-eye { right: 72px; } }
/* De vez em quando a moeda mostra o outro lado e volta, para lembrar que ela troca Contas e Cripto (motion.js). */
.ledger-coin.is-peek .ledger-coin-face.is-crypto { transform: rotateY(180deg); } .ledger-coin.is-peek .ledger-coin-face.is-fiat { transform: rotateY(360deg); }
.ledger-coin.is-crypto.is-peek .ledger-coin-face.is-crypto { transform: rotateY(360deg); } .ledger-coin.is-crypto.is-peek .ledger-coin-face.is-fiat { transform: rotateY(180deg); }

/* ---------- 13. Rolagem da página (assets/js/page_scroll.js), no modelo do Mercado (market.css) ----------
   Voltar ao topo (E12): o botão redondo saiu; o "Topo" fica no começo do menu de seções (.nav-top, cheio na cor do
   lado e pulsando de leve). Chegada na seção: o mesmo anel. */
.workspace-content [id] { scroll-margin-top: calc(84px + env(safe-area-inset-top)); }
.workspace-content [id].is-arrived { border-radius: var(--radius-card, 20px); animation: wallet-arrive 1.5s ease-out; }
@keyframes wallet-arrive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c-accent) 0%, transparent); } }

/* ---------- 14. Menu das seções da tela (wallet_section_nav), o mesmo do Mercado (.mkt-nav) ----------
   Fixo no alto ao rolar, com fundo de vidro igual ao do topo; anda junto com o topo (some e volta com ele, por
   page_scroll.js). No celular, faixa de ponta a ponta; em telas maiores, cantos arredondados. */
.section-nav { position: sticky; top: 74px; z-index: 12; display: flex; gap: 8px; margin: 14px -16px 8px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: color-mix(in srgb, var(--n-50) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: top .45s cubic-bezier(.2, .8, .2, 1); }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav[hidden] { display: none; }
.section-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--n-200); font-size: 13.5px; font-weight: 650; color: var(--n-600); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.section-nav a:hover, .section-nav a:focus-visible { color: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.section-nav a.is-current { background: var(--c-accent); color: var(--c-on-accent, var(--c-on-color)); box-shadow: none; }
/* "Topo" no começo do menu (E12; page_scroll.js): cheio na cor do lado (azul nas Contas, amarelo no Cripto) e o pulso só nele. */
:is(.section-nav, .mkt-nav) .nav-top { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 99px; background: var(--c-accent); color: var(--c-on-accent, var(--c-on-color)); font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; box-shadow: 0 8px 18px -10px var(--c-accent); -webkit-tap-highlight-color: transparent; }
:is(.section-nav, .mkt-nav) .nav-top svg { width: 15px; height: 15px; }
:is(.section-nav, .mkt-nav) .nav-top::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: nav-top-pulse 2.8s ease-out infinite; pointer-events: none; }
:is(.section-nav, .mkt-nav) .nav-top:active { transform: scale(.96); }
@keyframes nav-top-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-accent) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { :is(.section-nav, .mkt-nav) .nav-top::after { animation: none; } }
.section-nav a:active { transform: scale(.96); }
@media (min-width: 900px) { .section-nav { --nav-gap: 10px; margin-inline: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-border) 78%, transparent), 0 10px 24px -20px var(--c-deep-900); } }
@media (prefers-reduced-motion: reduce) { .workspace-content [id].is-arrived { animation: none; } .section-nav { transition: none; } }

/* Abertura do app instalado (motion.js): fundo na cor do ícone desde a primeira pintura, a moeda gira e voa ao topo. */
html.mw-intro body::before { content: ""; position: fixed; inset: 0; z-index: 2147482500; background: var(--c-splash); transition: opacity .3s ease; }
html.mw-intro-out body::before { opacity: 0; }
.mw-intro-coin { position: fixed; z-index: 2147482600; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; perspective: 600px; pointer-events: none; opacity: 0; }
.mw-intro-coin.is-on { opacity: 1; }
.mw-intro-coin.is-gone { transition: opacity .18s ease; opacity: 0; }
.mw-intro-coin img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--c-deep-900) 22%, transparent)); }

/* Modo leve (aparelho modesto, motion_boot.js): sem desfoque (o que mais pesa no celular), sem animações que ficam
   rodando sem parar e com a chegada das telas mais curta. Os efeitos continuam, só mais simples. */
html.mw-lite *, html.mw-lite *::before, html.mw-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.mw-lite .mw-glass, html.mw-lite.mw-covered body::after { background: color-mix(in srgb, var(--n-50) 78%, transparent); }
html.mw-lite .mw-glass.is-second { background: color-mix(in srgb, var(--n-50) 40%, transparent); }
html.mw-lite .mw-intro-coin img { filter: none; }
html.mw-lite :is(.ledger-coin, .wallet-stack-item.is-open .wallet-card, .mw-due-today, .btn-primary.is-ready, .crypto-home-loans .crypto-holding-row) { animation-iteration-count: 1 !important; }
html.mw-lite .mw-assemble > * { animation-duration: .4s !important; }
html.mw-lite .mw-assemble > *:nth-child(n) { animation-delay: 0s !important; }
/* Topo (e o Atualizar do Mercado) presos no começo do menu de seções (Darlan, 28/10): as seções passam por baixo. */
:is(.section-nav, .mkt-nav) .nav-pin { position: sticky; left: 0; z-index: 2; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding-right: 10px; background: linear-gradient(90deg, var(--n-50) calc(100% - 10px), transparent); }
/* cobre a margem da faixa à esquerda, para nenhuma seção aparecer antes do Topo */
:is(.section-nav, .mkt-nav) .nav-pin::before { content: ""; position: absolute; top: -6px; bottom: -6px; right: 100%; width: 24px; background: var(--n-50); }

/* Abertura nova (E13): a constelação no centro, sobre o fundo da abertura; depois o logo (.mw-intro-coin.is-logo). */
.mw-intro-cons { position: fixed; z-index: 2147482600; left: 50%; top: 50%; width: 300px; height: 290px; margin: -145px 0 0 -150px; pointer-events: none; color: var(--c-accent); opacity: 0; }
.mw-intro-cons.is-on { opacity: 1; }
.mw-intro-cons .cons-tagline { background: var(--c-splash); }
.mw-intro-cons.is-on .cons-piece { animation: mw-cons-drop .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.mw-intro-cons.is-on .cons-piece.is-chart { animation-delay: .15s; } .mw-intro-cons.is-on .cons-piece.is-crypto { animation-delay: .3s; }
.mw-intro-cons.is-on :is(.cons-orbit, .cons-sats) { animation: mw-cons-fade .6s ease .5s both, cons-spin 120s linear infinite; }
.mw-intro-cons.is-on .cons-orbit.is-inner { animation: mw-cons-fade .6s ease .5s both; }
.mw-intro-cons.is-on .cons-tagline { animation: mw-cons-fade .5s ease 1.1s both; }
.mw-intro-cons.is-merge .cons-piece { transition: translate .4s cubic-bezier(.6, 0, .4, 1), scale .4s, opacity .4s; scale: .5; opacity: 0; }
.mw-intro-cons.is-merge .cons-piece.is-fiat { translate: 38px 0; } .mw-intro-cons.is-merge .cons-piece.is-crypto { translate: -38px 0; } .mw-intro-cons.is-merge .cons-piece.is-chart { translate: 0 18px; }
.mw-intro-cons.is-merge :is(.cons-orbit, .cons-sats, .cons-tagline) { transition: opacity .3s; opacity: 0; }
.mw-intro-cons.is-lite .cons-piece { box-shadow: none; }
.mw-intro-coin.is-logo { width: 132px; height: 132px; margin: -66px 0 0 -66px; }
.mw-intro-coin.is-logo.is-on { animation: mw-logo-in .4s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes mw-cons-drop { from { opacity: 0; translate: 0 -36px; scale: .8; } }
@keyframes mw-cons-fade { from { opacity: 0; } }
@keyframes mw-logo-in { from { opacity: 0; scale: .6; } }
.mw-intro-coin.is-coin { width: 112px; height: 112px; margin: -56px 0 0 -56px; perspective: 600px; opacity: 1; }