/* Painéis GPF: preto e branco, com a pílula em tudo que se toca (veja DESIGN.md). O tema segue o do aparelho. */
:root{
  color-scheme:light;
  --ink:#000000;
  --on-ink:#ffffff;
  --body:#5e5e5e;
  --mute:#757575;
  --canvas:#ffffff;
  --canvas-soft:#efefef;
  --pressed:#e2e2e2;
  --danger:#c62828;
  --danger-soft:#fdecea;
  --logo-filter:none;

  --radius:16px;
  --pill:999px;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ink:#ffffff;
    --on-ink:#000000;
    --body:#b3b3b3;
    --mute:#8f8f8f;
    --canvas:#000000;
    --canvas-soft:#1c1c1c;
    --pressed:#2e2e2e;
    --danger:#ff6b6b;
    --danger-soft:#2a1414;
    --logo-filter:invert(1);
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--canvas); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
main, .topo{ width:100%; max-width:560px; margin:0 auto; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* Toque de app: sem marca azul ao tocar nem seleção de texto nos cabeçalhos e cartões. */
a, button, label{ -webkit-tap-highlight-color:transparent; }
.topo, .titulo-secao, .painel, .opcao{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

.pular{ position:absolute; left:12px; top:-60px; z-index:10; min-height:44px; display:inline-flex; align-items:center; padding:10px 20px; border-radius:var(--pill); background:var(--ink); color:var(--on-ink); font-weight:600; text-decoration:none; }
.pular:focus{ top:12px; }

.topo{ display:flex; align-items:center; gap:12px; min-height:56px; margin-bottom:20px; }
.marca{ width:36px; height:36px; filter:var(--logo-filter); }
.topo h1{ font-size:17px; font-weight:700; line-height:22px; margin-right:auto; }
.topo .btn-icone{ margin-left:0; } /* engrenagem e Sair ficam juntas à direita */
.btn-icone{
  margin-left:auto; flex-shrink:0; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--canvas-soft); border:0; border-radius:var(--pill); color:var(--ink); cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
@media (hover: hover){ .btn-icone:hover{ background:var(--pressed); } }
.btn-icone:active{ background:var(--pressed); transform:scale(.94); }

/* "Use como aplicativo": o único bloco invertido da tela. */
.instalar{ padding:20px; margin-bottom:32px; border-radius:var(--radius); background:var(--ink); color:var(--on-ink); }
.instalar-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.instalar-botoes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.instalar .btn-ghost{ background:var(--on-ink); color:var(--ink); }
@media (hover: hover){ .instalar .btn-ghost:hover{ opacity:.88; } }
.instalar .btn-ghost:active{ opacity:.8; transform:scale(.97); }
.instalar .link{ color:var(--on-ink); }
.btn-app{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.instalar .apoio{ margin:12px 0 0; color:inherit; opacity:.75; }
.passos{ margin:16px 0 4px; padding-left:22px; font-size:15px; line-height:22px; display:flex; flex-direction:column; gap:8px; }
.passos b{ font-weight:600; }
.ico-compartilhar{ vertical-align:-3px; }
.baixar-titulo{ font-size:17px; font-weight:600; line-height:22px; letter-spacing:0; }

/* Aviso de painel novo: janela por cima da tela, com o fundo escurecido. Só sai no X (ou Esc) ou ao adicionar. */
html.com-aviso{ overflow:hidden; }
.novidades{
  width:min(420px, calc(100% - 32px)); margin:auto; padding:0; border:0; overflow:visible;
  background:transparent; color:var(--ink);
}
.novidades-caixa{
  position:relative; max-height:calc(100dvh - 32px); overflow:hidden auto; border-radius:var(--radius);
  background:var(--canvas); box-shadow:0 0 0 2px var(--ink), 0 24px 64px rgba(0,0,0,.45);
}
.novidades::backdrop{ background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.novidades[open]::backdrop{ animation:fundo-entra .35s ease-out; }

/* Chegada: um portal gira no meio da tela e o aviso sai de dentro dele. Os anéis são brancos porque o fundo
   escurecido é preto nos dois temas. */
.portal-chegada{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.portal-chegada span{ position:absolute; left:-150px; top:-150px; width:300px; height:300px; border-radius:50%; opacity:0; }
.portal-chegada span:nth-child(1){ border:3px dashed #fff; }
.portal-chegada span:nth-child(2){ border:7px solid; border-color:#fff transparent #fff transparent; }
.portal-chegada span:nth-child(3){ border:2px solid rgba(255,255,255,.55); }
.portal-chegada span:nth-child(4){ background:#fff; }
.novidades.esperando .novidades-caixa{ visibility:hidden; }
.novidades.esperando .portal-chegada span{ animation:portal-surge .7s cubic-bezier(.16,1,.3,1) both, portal-espera 3.2s .7s linear infinite; }
.novidades.esperando .portal-chegada span:nth-child(2){ animation:portal-surge .7s .06s cubic-bezier(.16,1,.3,1) both, portal-espera-contra 2.4s .76s linear infinite; }
.novidades.esperando .portal-chegada span:nth-child(3){ animation:portal-surge .7s .12s cubic-bezier(.16,1,.3,1) both, portal-respira 1.8s .82s ease-in-out infinite; }
.novidades.esperando .portal-chegada span:nth-child(4){ animation:portal-luz 1.8s .5s ease-in-out infinite both; }
.novidades.saindo .portal-chegada span{ animation:portal-gira 1s cubic-bezier(.16,1,.3,1) both; }
.novidades.saindo .portal-chegada span:nth-child(2){ animation-name:portal-gira-contra; }
.novidades.saindo .portal-chegada span:nth-child(4){ animation:portal-clarao .8s ease-out both; }
.novidades.saindo .novidades-caixa{ animation:sai-do-portal .75s .15s cubic-bezier(.16,1,.3,1) both; }
@keyframes portal-surge{ from{ opacity:0; transform:scale(0) rotate(-180deg); } to{ opacity:1; transform:scale(.7) rotate(0); } }
@keyframes portal-espera{ from{ opacity:1; transform:scale(.7) rotate(0); } to{ opacity:1; transform:scale(.7) rotate(360deg); } }
@keyframes portal-espera-contra{ from{ opacity:1; transform:scale(.7) rotate(0); } to{ opacity:1; transform:scale(.7) rotate(-360deg); } }
@keyframes portal-respira{ 0%,100%{ opacity:1; transform:scale(.7); } 50%{ opacity:.5; transform:scale(.78); } }
@keyframes portal-luz{ 0%,100%{ opacity:.12; transform:scale(.42); } 50%{ opacity:.22; transform:scale(.5); } }

/* Botão Abrir no meio do portal; some quando o aviso sai. */
.btn-abrir{
  position:absolute; left:0; top:0; transform:translate(-50%, -50%); min-width:132px; min-height:56px; padding:14px 28px;
  border:0; border-radius:var(--pill); background:#fff; color:#000; font:inherit; font-size:18px; font-weight:800; cursor:pointer; pointer-events:auto;
  box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:abrir-pulsa 1.6s .8s ease-out infinite;
}
.btn-abrir:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
@media (hover: hover){ .btn-abrir:hover{ background:#e2e2e2; } }
.btn-abrir:active{ transform:translate(-50%, -50%) scale(.95); }
.portal-dica{ position:absolute; left:0; top:132px; transform:translateX(-50%); white-space:nowrap; color:#fff; font-size:17px; font-weight:700; }
.novidades:not(.esperando) .btn-abrir, .novidades:not(.esperando) .portal-dica{ display:none; }
@keyframes abrir-pulsa{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); } 100%{ box-shadow:0 0 0 22px rgba(255,255,255,0); } }
@keyframes portal-gira{
  0%{ opacity:0; transform:scale(0) rotate(0); }
  30%{ opacity:1; transform:scale(.45) rotate(200deg); }
  60%{ opacity:1; transform:scale(.8) rotate(380deg); }
  100%{ opacity:0; transform:scale(1.9) rotate(560deg); }
}
@keyframes portal-gira-contra{
  0%{ opacity:0; transform:scale(0) rotate(0); }
  30%{ opacity:1; transform:scale(.4) rotate(-220deg); }
  60%{ opacity:1; transform:scale(.75) rotate(-400deg); }
  100%{ opacity:0; transform:scale(1.7) rotate(-560deg); }
}
@keyframes portal-clarao{ 0%{ opacity:0; transform:scale(0); } 25%{ opacity:.9; transform:scale(.18); } 100%{ opacity:0; transform:scale(.9); } }
@keyframes sai-do-portal{
  0%{ opacity:0; clip-path:circle(0 at 50% 50%); transform:scale(.25) rotate(-14deg); }
  55%{ opacity:1; clip-path:circle(60% at 50% 50%); }
  100%{ opacity:1; clip-path:circle(150% at 50% 50%); transform:none; }
}
.novidades.fechando{ animation:aviso-sai .22s ease-in forwards; }
.novidades.fechando::backdrop{ animation:fundo-sai .22s ease-in forwards; }
@keyframes aviso-sai{ to{ opacity:0; transform:scale(.94); } }
@keyframes fundo-entra{ from{ opacity:0; } }
@keyframes fundo-sai{ to{ opacity:0; } }

.novidades-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 16px 20px 20px; background:var(--ink); color:var(--on-ink); }
.novidades-titulo{ font-size:30px; font-weight:900; line-height:32px; letter-spacing:-.02em; }
.btn-fechar{ margin:-4px -4px 0 0; background:var(--on-ink); color:var(--ink); }
@media (hover: hover){ .btn-fechar:hover{ background:var(--on-ink); opacity:.85; } }
.btn-fechar:focus-visible{ outline-color:var(--on-ink); }
.lista-novidades{ list-style:none; padding:4px 20px 8px; }
.novidades-rodape{ padding:0 20px 20px; }
.novidades-rodape:has(.btn-todos[hidden]){ display:none; }
.btn-todos{ width:100%; min-height:56px; font-size:18px; font-weight:800; }
.novidades.varios .novidade .btn-adicionar{ background:var(--canvas-soft); color:var(--ink); }
@media (hover: hover){ .novidades.varios .novidade .btn-adicionar:hover{ background:var(--pressed); opacity:1; } }
.novidade{ display:grid; grid-template-columns:56px 1fr; align-items:center; column-gap:14px; row-gap:14px; padding:16px 0; }
.novidade + .novidade{ border-top:1px solid var(--canvas-soft); }
.novidade .btn, .novidade .adicionado{ grid-column:1 / -1; }
.novidade .btn{ width:100%; min-height:52px; font-size:17px; }
.novidade .btn:disabled{ cursor:default; opacity:.6; }
.adicionado{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:52px; border-radius:var(--pill); background:var(--canvas-soft); font-size:16px; font-weight:600; color:var(--ink); }

/* O portal: anéis que se abrem em volta da logo ao adicionar. */
.portal{ position:relative; display:flex; align-items:center; justify-content:center; width:56px; height:56px; }
.portal .painel-logo{ width:56px; height:56px; border-radius:16px; position:relative; z-index:1; }
.portal::before, .portal::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:3px solid var(--ink); opacity:0; pointer-events:none; }
.abrindo .portal::before{ animation:anel .8s var(--atraso, 0s) cubic-bezier(.15,.7,.3,1); }
.abrindo .portal::after{ animation:anel .8s calc(var(--atraso, 0s) + .18s) cubic-bezier(.15,.7,.3,1); }
.abrindo .portal .painel-logo{ animation:logo-portal .9s var(--atraso, 0s) cubic-bezier(.3,.7,.2,1); }
@keyframes anel{ 0%{ opacity:.9; transform:scale(.6); } 100%{ opacity:0; transform:scale(2.6); } }
@keyframes logo-portal{ 0%{ transform:none; } 40%{ transform:rotate(-200deg) scale(.55); border-radius:50%; } 100%{ transform:rotate(-360deg) scale(1); } }

/* O painel adicionado surge na lista de dentro de um círculo que se abre a partir da logo. */
.surgindo .painel{ animation:surge .85s calc(var(--atraso, 0s) + .1s) cubic-bezier(.2,.8,.2,1) backwards, destaque 1.8s calc(var(--atraso, 0s) + .95s) ease-out; }
@keyframes surge{ from{ clip-path:circle(0 at 40px 50%); transform:scale(.96); } to{ clip-path:circle(150% at 40px 50%); transform:none; } }
@keyframes destaque{ 0%{ box-shadow:0 0 0 3px var(--ink); } 100%{ box-shadow:0 0 0 12px transparent; } }

/* Entrar: Microsoft como caminho principal; e-mail e senha logo abaixo, para quem recebeu convite. */
.entrar h2{ margin-bottom:8px; }
.btn-microsoft{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; font-size:17px; }
.divisor{ display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--body); font-size:14px; }
.divisor::before, .divisor::after{ content:""; flex:1; height:1px; background:var(--canvas-soft); }
.form-entrar{ display:flex; flex-direction:column; gap:16px; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo-rotulo{ font-size:15px; font-weight:600; }
.campo input{
  width:100%; min-height:52px; padding:12px 16px; border:0; border-radius:var(--radius);
  background:var(--canvas-soft); color:var(--ink); font:inherit; font-size:16px;
  transition:box-shadow .15s ease;
}
.campo input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
.campo-senha{ position:relative; display:block; }
.campo-senha input{ padding-right:56px; }
.campo-senha input::-ms-reveal, .campo-senha input::-ms-clear{ display:none; }
.btn-olho{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:40px;
  display:flex; align-items:center; justify-content:center; border:0; border-radius:var(--pill);
  background:none; color:var(--body); cursor:pointer; transition:background .15s ease, box-shadow .15s ease;
}
@media (hover: hover){ .btn-olho:hover{ background:var(--pressed); box-shadow:inset 0 0 0 2px var(--ink); } }
.btn-olho:focus-visible{ outline:none; background:var(--pressed); box-shadow:inset 0 0 0 2px var(--ink); }
.btn-entrar{ width:100%; margin-top:4px; }
.btn:disabled, .btn-ghost:disabled{ opacity:.6; cursor:default; }
.aviso-entrar{ margin-bottom:16px; padding:12px 16px; border-radius:var(--radius); background:var(--danger-soft); color:var(--danger); font-size:15px; font-weight:600; }

/* Voltar ao portal: o túnel ao contrário. A tela nasce da logo do painel de onde a pessoa veio e se assenta. */
html.voltando{ overflow:hidden; }
html.voltando body > *:not(.tunel){
  transform-origin:var(--origem-x) var(--origem-y);
  animation:solto 1s cubic-bezier(.15,.65,.45,1) both;
}
@keyframes solto{
  0%{ transform:scale(2.6) rotate(8deg); filter:blur(10px); opacity:0; }
  65%{ transform:scale(.97) rotate(-1deg); filter:none; opacity:1; }
  100%{ transform:none; }
}
.tunel.volta{ animation:tunel-fundo-volta 1s ease-out forwards; }
@keyframes tunel-fundo-volta{ 0%{ background:#000; } 40%{ background:rgba(0,0,0,.85); } 100%{ background:rgba(0,0,0,0); } }
.tunel.volta span{ animation-name:tunel-anel-volta; animation-timing-function:cubic-bezier(0,.4,.5,1); }
@keyframes tunel-anel-volta{ 0%{ opacity:0; transform:scale(28) rotate(220deg); } 75%{ opacity:.9; } 100%{ opacity:0; transform:scale(.2) rotate(0); } }
.tunel.volta img{ animation:tunel-logo-volta 1s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes tunel-logo-volta{
  0%{ transform:scale(0) rotate(-540deg); border-radius:50%; opacity:0; }
  60%{ transform:scale(1.4) rotate(20deg); border-radius:50%; opacity:1; }
  100%{ transform:none; opacity:0; }
}

/* Entrar num painel: a tela é puxada para a logo tocada e some num túnel de anéis, como passar para outro mundo. */
html.entrando{ overflow:hidden; }
html.entrando body > *:not(.tunel){
  transform-origin:var(--origem-x) var(--origem-y);
  animation:puxado .95s cubic-bezier(.55,0,.85,.35) forwards;
}
@keyframes puxado{
  0%{ transform:none; filter:none; opacity:1; }
  35%{ transform:scale(.96) rotate(-1deg); }
  100%{ transform:scale(2.6) rotate(8deg); filter:blur(10px); opacity:0; }
}
.tunel{ position:fixed; inset:0; z-index:50; pointer-events:none; overflow:hidden; animation:tunel-fundo .95s ease-in forwards; }
@keyframes tunel-fundo{ 0%{ background:rgba(0,0,0,0); } 60%{ background:rgba(0,0,0,.85); } 100%{ background:#000; } }
.tunel span{
  position:absolute; left:var(--x); top:var(--y); width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  border:2px solid #fff; opacity:0; animation:tunel-anel .7s cubic-bezier(.5,0,1,.6) both;
}
.tunel span:nth-child(2){ animation-delay:.1s; border-style:dashed; }
.tunel span:nth-child(3){ animation-delay:.2s; border-width:4px; }
.tunel span:nth-child(4){ animation-delay:.3s; }
.tunel span:nth-child(5){ animation-delay:.4s; border-width:6px; border-color:#fff transparent; }
@keyframes tunel-anel{ 0%{ opacity:0; transform:scale(.2) rotate(0); } 25%{ opacity:.9; } 100%{ opacity:0; transform:scale(28) rotate(220deg); } }
.tunel img{
  position:absolute; left:var(--x); top:var(--y); width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:12px;
  animation:tunel-logo .95s cubic-bezier(.6,0,.8,.3) forwards;
}
@keyframes tunel-logo{
  0%{ transform:none; }
  40%{ transform:scale(1.4) rotate(-20deg); border-radius:50%; }
  100%{ transform:scale(0) rotate(540deg); border-radius:50%; opacity:0; }
}

.titulo-secao{ margin-bottom:16px; }
h2{ font-size:28px; font-weight:700; line-height:34px; letter-spacing:0; }
#tela-escolha h2{ margin-bottom:8px; }
.apoio{ font-size:15px; line-height:22px; color:var(--body); margin-bottom:24px; }

.lista-paineis{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.painel{
  display:flex; align-items:center; gap:16px; min-height:76px; padding:14px 16px;
  background:var(--canvas-soft); border-radius:var(--radius);
  color:var(--ink); text-decoration:none; -webkit-user-drag:none;
  transition:background .15s ease, transform .1s ease;
}
/* No toque, o celular também aplica o :hover; o efeito fica só para quem usa mouse. */
@media (hover: hover){ .painel:hover{ background:var(--pressed); } }
.painel:active{ background:var(--pressed); transform:scale(.98); }
.painel-logo{ flex-shrink:0; width:48px; height:48px; border-radius:12px; -webkit-user-drag:none; }
/* No escuro, a logo de fundo escuro (MOC) ganha um contorno leve para não sumir no cartão. */
@media (prefers-color-scheme: dark){ .painel-logo{ box-shadow:0 0 0 1px rgba(255,255,255,.14); } }
.opcao .painel-logo{ width:40px; height:40px; border-radius:10px; }
.painel-texto, .opcao-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.painel-nome{ font-size:17px; font-weight:600; line-height:22px; }
.painel-resumo{ font-size:14px; line-height:20px; color:var(--body); }
.seta{ flex-shrink:0; color:var(--ink); }

fieldset{ border:0; display:flex; flex-direction:column; gap:12px; }
.opcao{
  display:flex; align-items:center; gap:14px; min-height:64px; padding:16px; cursor:pointer;
  background:var(--canvas-soft); border-radius:var(--radius);
  transition:background .15s ease, box-shadow .15s ease;
}
@media (hover: hover){ .opcao:hover{ background:var(--pressed); } }
.opcao:has(input:checked){ box-shadow:inset 0 0 0 2px var(--ink); }
.opcao input{ width:22px; height:22px; flex-shrink:0; accent-color:var(--ink); cursor:pointer; }

.erro{ margin-top:12px; padding:12px 16px; border-radius:var(--radius); background:var(--danger-soft); color:var(--danger); font-size:15px; font-weight:600; }
.acoes{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }

.btn, .btn-ghost{
  min-height:48px; padding:12px 24px; border:0; border-radius:var(--pill); font:inherit; font-size:16px; font-weight:600; line-height:20px; cursor:pointer;
  transition:background .15s ease, opacity .15s ease, transform .1s ease;
}
.btn{ background:var(--ink); color:var(--on-ink); }
@media (hover: hover){ .btn:hover{ opacity:.85; } }
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-ghost{ background:var(--canvas-soft); color:var(--ink); }
@media (hover: hover){ .btn-ghost:hover{ background:var(--pressed); } }
.btn-ghost:active{ background:var(--pressed); transform:scale(.97); }
.link{
  min-height:44px; padding:0 2px; background:none; border:0; font:inherit; font-size:15px; font-weight:600;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

@media (max-width: 420px){
  .acoes .btn, .acoes .btn-ghost{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after, ::backdrop{ transition:none !important; animation:none !important; }
}