/* Moldura + formulário compartilhados entre as telas públicas de auth do
   Painel (Login + Redefinir Senha): reset, fundo com foto Ken Burns, moldura
   de iPhone, status bar, topbar/back, hero e o formulário em vidro.
   Carregado via <link> ANTES do <style> de cada página — a entrada animada
   (fadeUp/@keyframes/reduced-motion) só existe no Login hoje, então fica nele
   como adição local (mesma seletor, só a propriedade animation), sem afetar
   o Redefinir Senha. */
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:radial-gradient(120% 90% at 50% 0%, #1a1611 0%, #100d0a 60%, #050403 100%);
  font-family:var(--sans);display:flex;align-items:center;justify-content:center;
  min-height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;
}
#fit{transform-origin:center center;}
.phone{
  position:relative;width:var(--screen-w);height:var(--screen-h);
  background:#0b0907;border-radius:56px;padding:13px;
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 40px 80px -28px rgba(0,0,0,.7),inset 0 0 0 2px #2c2620;
}
.screen{
  position:relative;width:100%;height:100%;background:var(--charcoal);
  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;}

/* ---------- FOTO DE FUNDO com zoom Ken Burns (assets/barbeiro.webp) ---------- */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--charcoal);}
.bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:15% center;
  animation:kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns{0%{transform:scale(1);}100%{transform:scale(1.15);}}
/* vinheta para legibilidade do formulário */
.bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.22) 0%, rgba(0,0,0,.40) 40%,
    rgba(18,18,18,.95) 82%, rgba(18,18,18,1) 100%);
}
.statusbar,.topbar,.hero,.sheet{position:relative;z-index:2;}

/* ---------- status bar (claro, sobre a foto) ---------- */
.statusbar{
  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:rgba(255,255,255,.96);letter-spacing:.2px;
}
.statusbar .glyphs{display:flex;align-items:center;gap:7px;}
.statusbar svg{display:block;}

/* ---------- top bar (voltar) ---------- */
.topbar{flex:none;display:flex;align-items:center;padding:6px 18px 0;}
.back{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.86);text-decoration:none;padding:14px 12px 14px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);transition:.2s;
}
.back:hover{background:rgba(255,255,255,.18);color:#fff;}
.back:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.back svg{width:16px;height:16px;}

/* ---------- hero (eyebrow + headline sobre a foto) ---------- */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:0 34px 4px;}
.eyebrow{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.34em;
  color:var(--gold);text-transform:uppercase;
}
.headline{
  font-family:var(--serif);font-weight:400;color:#fff;font-size:36px;line-height:1.05;
  letter-spacing:-.3px;margin:10px 0 0;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.headline em{font-style:italic;color:var(--gold);font-weight:400;}
.lede{
  margin:12px 0 0;color:rgba(255,255,255,.80);font-size:13.5px;line-height:1.5;font-weight:400;max-width:28ch;
}

/* ---------- formulário em vidro sobre a foto ---------- */
.sheet{flex:none;padding:18px 30px calc(22px + env(safe-area-inset-bottom));}
.form{display:flex;flex-direction:column;gap:14px;text-align:left;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:10px;font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.6);text-transform:uppercase;padding-left:3px;}
.control{position:relative;display:flex;align-items:center;}
.control .lead-ic{position:absolute;left:15px;width:17px;height:17px;color:rgba(255,255,255,.5);pointer-events:none;}
.input{
  width:100%;height:54px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:0 16px 0 44px;font-family:var(--sans);font-size:15px;font-weight:400;color:#fff;
  transition:border-color .2s, background .2s, box-shadow .2s;-webkit-appearance:none;appearance:none;
}
.input::placeholder{color:rgba(255,255,255,.42);font-weight:400;}
.input:hover{border-color:rgba(255,255,255,.22);}
.input:focus{outline:none;border-color:color-mix(in srgb, var(--gold) 55%, transparent);background:rgba(255,255,255,.10);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);}
.peek{position:absolute;right:5px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;border-radius:11px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:.2s;}
.peek:hover{color:#fff;background:rgba(255,255,255,.08);}
.peek:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.peek svg{width:19px;height:19px;}
.input.has-peek{padding-right:50px;}

.error-msg{display:none;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--danger);padding-left:3px;}
.error-msg svg{width:13px;height:13px;flex:none;}
.field.invalid .error-msg{display:flex;}
.field.invalid .input{border-color:color-mix(in srgb, var(--danger) 70%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);}

.cta{
  position:relative;width:100%;height:58px;border:none;cursor:pointer;border-radius:14px;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.14em;
  color:var(--gold-ink);text-transform:uppercase;margin-top:6px;
  background:var(--gold);
  box-shadow:0 4px 0 var(--gold-deep),0 14px 22px -14px color-mix(in srgb, var(--gold-deep) 75%, transparent);
  transition:transform .07s ease, box-shadow .07s ease, filter .2s ease;
}
.cta .cta-arrow{width:18px;height:18px;color:var(--gold-ink);transition:transform .2s ease;}
.cta:hover{filter:brightness(1.05);}
.cta:hover .cta-arrow{transform:translateX(3px);}
.cta:active{transform:translateY(4px);box-shadow:none;}
.cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.cta[aria-busy="true"]{pointer-events:none;filter:saturate(.85) brightness(.98);}
.cta[aria-busy="true"] .cta-arrow{display:none;}

.hint{font-size:11px;color:rgba(255,255,255,.45);font-weight:400;text-align:center;line-height:1.5;letter-spacing:.04em;max-width:34ch;margin:16px auto 0;}
.hint b{color:var(--gold);font-weight:600;}
.home-indicator{width:134px;height:5px;border-radius:3px;background:rgba(255,255,255,.9);opacity:.5;margin:14px auto 0;}

/* ---- Modo tela-cheia em celular real: remove a moldura de iPhone ---- */
@media (max-width:480px), (pointer:coarse){
  body{display:block;overflow-y:auto;min-height:100dvh;background:var(--charcoal);}
  #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;}
  .hero{min-height:46vh;}
}