/* Moldura compartilhada pelas Telas 1-7 (fluxo do cliente): reset, fundo,
   moldura de iPhone, status bar, topbar/back "padrão" (Telas 3/4/5/7) e a
   animação .reveal "padrão" (Telas 2/3/4/5).
   Este arquivo é carregado via <link> ANTES do <style> de cada página — então
   quando uma página precisa de uma versão diferente (Tela 1 e 2 têm topbar/back
   próprios; Tela 1 tem .reveal com timing próprio), a regra local da página
   sobrescreve normalmente pela ordem de cascata, sem !important. */
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:radial-gradient(120% 90% at 50% 0%, #efeae1 0%, #e4ddd0 55%, #d7cdbb 100%);
  font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- iPhone shell ---------- */
#fit{transform-origin:center center;}
.phone{
  position:relative;width:var(--screen-w);height:var(--screen-h);
  background:#16130f;border-radius:56px;padding:13px;
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 40px 80px -28px rgba(40,30,12,.55),inset 0 0 0 2px #2c2620;
}
.screen{
  position:relative;width:100%;height:100%;
  background:var(--cream);border-radius:44px;overflow:hidden;
  display:flex;flex-direction:column;
}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:34px;background:#0b0907;border-radius:20px;z-index:40;}

/* ---------- status bar ---------- */
.statusbar{
  position:relative;z-index:30;height:54px;flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 30px 6px;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:.2px;
}
.statusbar .glyphs{display:flex;align-items:center;gap:7px;}
.statusbar svg{display:block;}

/* ---------- top bar (voltar + título centralizado) — Telas 3/4/5/7 ---------- */
.topbar{
  position:relative;z-index:30;flex:none;height:46px;
  display:flex;align-items:center;justify-content:center;padding:2px 22px 0;
}
.topbar .title{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);letter-spacing:.005em;}
.back{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--ink);
  text-decoration:none;transition:color .2s, background .2s;
}
.back:hover{color:var(--accent-deep);background:rgba(255,255,255,.5);}
.back svg{width:20px;height:20px;}

/* ---------- entrance reveal — Telas 2/3/4/5 ---------- */
.reveal{opacity:0;animation:reveal .8s cubic-bezier(.2,.7,.15,1) both;}
@keyframes reveal{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.reveal{animation:none!important;opacity:1!important;transform:none!important;}}

/* ---- Modo tela-cheia em celular real: remove a moldura de iPhone do mockup ---- */
@media (max-width:480px), (pointer:coarse){
  body{display:block;overflow-y:auto;min-height:100dvh;background:#EFE9DD;}
  #fit{transform:none!important;width:100%;}
  .phone{width:100vw;min-height:100dvh;height:auto;border-radius:0;padding:0;background:transparent;box-shadow:none;}
  .screen{width:100%;height:auto;min-height:100dvh;border-radius:0;overflow:visible;padding-top:env(safe-area-inset-top);}
  .island,.statusbar{display:none!important;}
}