@font-face { font-family:'Manrope'; src:url('/fonts/Manrope-Variable.woff2?v=db2fb492bef5') format('woff2'); font-weight:200 800; font-display:swap; }
  @font-face { font-family:'Bricolage Grotesque'; src:url('/fonts/BricolageGrotesque-Variable.woff2?v=bca6823f0b64') format('woff2'); font-weight:200 800; font-display:swap; }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: sm-tela-sai 160ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: sm-tela-entra 280ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes sm-tela-sai { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes sm-tela-entra { from { opacity: 0; transform: translateY(12px); } }
  nav.barra5 { view-transition-name: sm-barra-de-baixo; }
  .lat { view-transition-name: sm-menu-lateral; }
  ::view-transition-group(sm-barra-de-baixo), ::view-transition-group(sm-menu-lateral) { animation-duration: 0s; }
  ::view-transition-group(sm-refeicao-pequeno-almoco), ::view-transition-group(sm-refeicao-almoco), ::view-transition-group(sm-refeicao-lanche), ::view-transition-group(sm-refeicao-jantar) { animation-duration: 300ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  /* O AMBIENTE (Cassio 29/09): ao entrar e ao sair da Comunidade interna, a tela inteira desliza de uma cor para a
     outra -- e o menu lateral, que nas outras passagens fica parado, tambem muda de cor. Mais lento que a passagem
     normal (e rara, e a mudanca de ambiente e o ponto). O tipo «ambiente» poe-no o script de baixo. */
  html:active-view-transition-type(ambiente)::view-transition-old(root) { animation: sm-ambiente-sai 520ms cubic-bezier(.4, 0, .2, 1) both; }
  html:active-view-transition-type(ambiente)::view-transition-new(root) { animation: sm-ambiente-entra 620ms cubic-bezier(.16, 1, .3, 1) both; }
  html:active-view-transition-type(ambiente)::view-transition-group(sm-menu-lateral),
  html:active-view-transition-type(ambiente)::view-transition-group(sm-barra-de-baixo) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  html:active-view-transition-type(ambiente)::view-transition-old(sm-menu-lateral),
  html:active-view-transition-type(ambiente)::view-transition-old(sm-barra-de-baixo) { animation: sm-ambiente-sai 560ms ease both; }
  html:active-view-transition-type(ambiente)::view-transition-new(sm-menu-lateral),
  html:active-view-transition-type(ambiente)::view-transition-new(sm-barra-de-baixo) { animation: sm-ambiente-cor 560ms ease both; }
  @keyframes sm-ambiente-sai { to { opacity: 0; } }
  @keyframes sm-ambiente-entra { from { opacity: 0; transform: scale(.985); } }
  @keyframes sm-ambiente-cor { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }

  :root { --navy:#123C35; --teal:#17685E; --teal-dark:#123C35; --mint:#7FE3CF; --bg:#F7FAF7; --surface:#ffffff; --ink:#123C35; --muted:#6b7d78; --hairline:rgba(18,60,53,.08); }
  * { box-sizing:border-box; }
  body { margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); font-family:'Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Helvetica,Arial,sans-serif; color:var(--ink); }
  .auth-wrap { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; padding-top:calc(24px + env(safe-area-inset-top, 0px)); padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
  .auth-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--hairline); border-radius:20px; padding:32px 28px; box-shadow:0 1px 2px rgba(18,60,53,.05); }
  .auth-mark { width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--mint)); display:flex; align-items:center; justify-content:center; }
  .auth-title { font-family:'Bricolage Grotesque','Manrope',sans-serif; text-align:center; font-size:17px; font-weight:700; margin:0 0 4px; }
  .auth-subtitle { text-align:center; font-size:13px; color:var(--muted); margin:0 0 24px; line-height:1.4; }
  .field { margin-bottom:16px; }
  .field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
  .field input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--hairline); font-size:14.5px; background:#fff; color:var(--ink); font-family:inherit; }
  .field input:focus { outline:none; border-color:var(--teal); }
  .password-field { position:relative; }
  .password-field input { padding-right:44px; }
  .password-toggle-btn { position:absolute; right:2px; top:2px; bottom:2px; width:40px; border:none; background:none; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:10px; padding:0; }
  .password-toggle-btn svg { width:19px; height:19px; }
  .password-toggle-btn:active { transform:scale(.9); }
  .btn-primary { width:100%; padding:13px; border:none; border-radius:12px; background:var(--navy); color:#fff; font-size:14.5px; font-weight:600; font-family:inherit; cursor:pointer; }
  .btn-primary:active { transform:scale(.98); }
  .btn-primary:disabled { opacity:.6; }
  .auth-error { color:#c0563d; font-size:13px; margin-top:14px; text-align:center; display:none; }
  .auth-success { color:var(--teal-dark); font-size:13px; margin-top:14px; text-align:center; display:none; }
  .auth-links { text-align:center; margin-top:20px; font-size:13px; color:var(--muted); }
  .auth-links a { color:var(--teal-dark); text-decoration:none; font-weight:600; cursor:pointer; }
  /* TABLET E DESKTOP (Cassio 26/09, «duas colunas, sem menu»): a marca a esquerda, o cartao de entrar a direita. */
  .auth-marca { display:none; }
  .auth-ajuda { margin:14px 0 0; text-align:center; font-size:12.5px; line-height:1.45; color:var(--muted); }
  .auth-links a:focus-visible, .btn-primary:focus-visible, .password-toggle-btn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
  /* TABLET E DESKTOP (Cassio 30/09, pedido do suporte: as alunas entram pelo computador para imprimir o PDF do plano).
     A marca a esquerda com o app e o que ela vai encontrar; a direita o formulario sem cartao, grande e legivel (40+). */
  @media (min-width:768px) {
    .auth-pagina { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); min-height:100vh; min-height:100dvh; }
    .auth-marca {
      position:relative; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; gap:28px; padding:44px clamp(40px, 5vw, 72px) 48px;
      background:radial-gradient(ellipse 80% 60% at 20% 10%, color-mix(in srgb, var(--mint) 55%, transparent) 0%, transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--mint) 22%, var(--bg)) 0%, var(--bg) 100%);
    }
    .auth-marca svg { height:30px !important; }
    /* O QUADRO DO APP (Cassio 01/10): tres telas direitas, como frames do Figma (o nome por cima), e tres pecas do app a
       flutuar por cima -- a Ana, a fase do ciclo, o jejum. Tudo em % do palco e em cqw, para escalar sem desalinhar. */
    .auth-marca-app { min-height:0; display:flex; align-items:center; justify-content:flex-start; container-type:size; }
    .auth-palco { position:relative; width:min(100cqw, 100cqh * 1.08, 680px); aspect-ratio:1.08; container-type:inline-size; }
    .auth-frame { position:absolute; display:flex; flex-direction:column; gap:1.6cqw; margin:0; }
    .auth-frame figcaption { display:flex; align-items:center; gap:1cqw; font-size:max(10px, 2cqw); font-weight:600; color:var(--muted); letter-spacing:.01em; }
    .auth-frame figcaption::before { content:'#'; font-weight:700; color:color-mix(in srgb, var(--teal) 70%, var(--muted)); }
    .auth-frame img { display:block; width:100%; height:auto; aspect-ratio:402 / 874; border-radius:4.4cqw; border:1cqw solid var(--surface);
      box-shadow:0 3cqw 6cqw color-mix(in srgb, var(--navy) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--navy) 7%, transparent); }
    .auth-frame--centro { left:32%; top:0; width:36%; z-index:2; }
    .auth-frame--centro img { box-shadow:0 5cqw 10cqw color-mix(in srgb, var(--navy) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--navy) 8%, transparent); }
    .auth-frame--esquerda { left:1%; top:10%; width:29%; z-index:1; }
    .auth-frame--direita { right:1%; top:10%; width:29%; z-index:1; }
    .auth-peca { position:absolute; z-index:3; background:var(--surface); border:1px solid color-mix(in srgb, var(--navy) 7%, transparent); border-radius:3.4cqw;
      box-shadow:0 2.6cqw 6cqw color-mix(in srgb, var(--navy) 16%, transparent); color:var(--navy); }
    .auth-peca--ana { left:0; bottom:9%; width:43%; display:flex; gap:2cqw; align-items:flex-start; padding:2.4cqw 2.6cqw; }
    .auth-peca--ana img { width:7.4cqw; height:7.4cqw; flex:none; border-radius:50%; object-fit:cover; }
    .auth-peca--ana b { display:block; font-size:max(10px, 2.2cqw); }
    .auth-peca--ana span { display:block; margin-top:.4cqw; font-size:max(10px, 2.2cqw); line-height:1.35; color:var(--ink); }
    .auth-peca--fase { right:0; top:46%; display:flex; align-items:center; gap:1.4cqw; padding:1.6cqw 2.4cqw 1.6cqw 1.8cqw; border-radius:999px; font-size:max(10px, 2.2cqw); font-weight:700; }
    .auth-peca--fase i { width:2cqw; height:2cqw; border-radius:50%; background:var(--teal); box-shadow:0 0 0 .8cqw color-mix(in srgb, var(--teal) 20%, transparent); }
    .auth-peca--jejum { right:3%; bottom:3%; width:34%; padding:2.2cqw 2.6cqw; }
    .auth-peca--jejum b { display:block; font-size:max(10px, 2.3cqw); }
    .auth-peca--jejum small { display:block; margin-top:.3cqw; font-size:max(9px, 1.8cqw); color:var(--muted); }
    .auth-peca--jejum span { display:block; height:1.2cqw; margin-top:1.6cqw; border-radius:1cqw; background:color-mix(in srgb, var(--teal) 14%, var(--surface)); overflow:hidden; }
    .auth-peca--jejum span::after { content:''; display:block; width:68%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--teal-dark), var(--mint)); }
    .auth-marca-frase { margin:0; font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:400; font-size:clamp(38px, 4.2vw, 58px); line-height:1.02; letter-spacing:-0.04em; color:var(--navy); text-wrap:balance; }
    .auth-marca-lista { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
    .auth-marca-lista li { padding:7px 13px; border-radius:999px; background:#fff; border:1px solid var(--hairline); font-size:13.5px; font-weight:600; color:var(--navy); }
    .auth-wrap { padding:48px clamp(40px, 6vw, 96px); }
    /* o formulario sem cartao: a marca ja esta a esquerda */
    .auth-card { max-width:440px; padding:0; background:none; border:0; box-shadow:none; }
    .auth-mark { display:none; }
    .auth-title { text-align:left; font-size:40px; line-height:1.05; font-weight:500; letter-spacing:-1.4px; color:var(--navy); margin:0 0 10px; }
    .auth-subtitle { text-align:left; font-size:16px; line-height:1.5; margin:0 0 32px; }
    .field { margin-bottom:20px; }
    .field label { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; }
    .field input { height:56px; padding:0 18px; border-radius:14px; font-size:16px; transition:border-color .15s ease, box-shadow .15s ease; }
    .field input:hover { border-color:color-mix(in srgb, var(--teal) 40%, var(--hairline)); }
    .field input:focus { border-color:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent); }
    .password-field input { padding-right:56px; }
    .password-toggle-btn { right:6px; top:6px; bottom:6px; width:44px; }
    .btn-primary { height:56px; margin-top:8px; border-radius:28px; font-size:16px; font-weight:700;
      background:linear-gradient(158deg, var(--navy) 8%, var(--teal-dark) 92%); box-shadow:0 12px 24px color-mix(in srgb, var(--navy) 22%, transparent); transition:transform .15s ease, box-shadow .15s ease; }
    .btn-primary:hover:not(:disabled) { box-shadow:0 14px 28px color-mix(in srgb, var(--navy) 30%, transparent); }
    .auth-error, .auth-success { text-align:left; font-size:14px; }
    .auth-links { text-align:left; margin-top:22px; font-size:15px; }
    .auth-ajuda { text-align:left; font-size:14px; margin-top:28px; padding-top:20px; border-top:1px solid var(--hairline); }
  }
  /* o tablet: sem a imagem do app (nao ha altura para ela), a marca e a frase */
  @media (min-width:768px) and (max-width:1023px) { .auth-marca-app { display:none; } .auth-marca { grid-template-rows:auto 1fr; } .auth-marca-texto { align-self:end; } }
  /* ecras baixos: a lista sai, o app encolhe */
  @media (min-width:768px) and (max-height:760px) { .auth-marca-lista { display:none; } }
  @media (prefers-reduced-motion: reduce) { .field input, .btn-primary { transition:none; } }