/* Cheəck · tela de entrada.
   Paleta e tipografia iguais às do index.html, para que a porta
   de entrada não pareça de outro prédio. */



:root{
  --brand:#0fd07e;
  --brand-deep:#08744b;
  --brand-soft:#e2f9ee;
  --brand-glow:0 0 22px -4px rgba(15,208,126,.55);
  --app-bg:#ebe4d4;
  --card:#fbf8f1;
  --field:#f6f2ea;
  --ink:#182339;
  --ink-soft:#3f4c66;
  --focus:#08744b;
  --ink-faint:#56627a;
  --line:rgba(16,29,58,.13);
  --line-2:rgba(16,29,58,.085);
  --danger:#c02a45;
  --danger-soft:#fbe8ec;
}
[data-theme="dark"]{
  --brand:#19dd8c;
  --brand-deep:#12bd79;
  --brand-soft:rgba(25,221,140,.14);
  --brand-glow:0 0 24px -2px rgba(25,221,140,.5);
  --app-bg:#0a1122;
  --card:#141d33;
  --focus:#19dd8c;
  --field:#0d1729;
  --ink:#eef2f9;
  --ink-soft:#a8b3c9;
  --ink-faint:#8b98b0;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);
  --danger:#ff8098;
  --danger-soft:rgba(255,128,152,.12);
}

/* O navegador esconde [hidden] com display:none, mas regra de autor
   vence a do navegador — .field{display:flex} deixava o campo de nome
   visível na aba Entrar, onde ele não deve aparecer. */
[hidden]{display:none !important;}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--app-bg);
  color:var(--ink);
  font-family:'Spline Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  display:flex;
  justify-content:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(32px + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}

.shell{width:100%;max-width:400px;margin:auto 0;}

/* ---------- o Mestre recebe ---------- */
.greet{text-align:center;margin-bottom:26px;}
.greet .face{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  min-height:92px;
}
/* O Mestre vem em círculo e ganha o brilho; a marca é uma lâmina solta,
   que ficaria estranha dentro de um halo redondo. */
.greet .face.mestre{border-radius:50%;box-shadow:var(--brand-glow);}
/* Marca e palavra andam juntas, na mesma tipografia do app. */
/* ---- marca: logo vetorial (arte/marca-cheeck.svg, traçada da versão que
   o Gustavo ajustou). A palavra usa currentColor, então acompanha o tema;
   o check usa --brand, que já muda entre claro e escuro. ---- */
.mkLogo{display:block;width:auto;height:24px;}
.mkLogo .mk-v{fill:var(--brand);}
.mkLogo .mk-p{fill:currentColor;}
.greet .face.marca .mkLogo{height:58px;color:var(--ink);}
.greet h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 6px;
}
.rec-t{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--ink);margin:0 0 4px;}
.rec-s{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;line-height:1.5;}
.greet p{
  margin:0;
  color:var(--ink-soft);
  font-size:15px;
  max-width:32ch;
  margin-inline:auto;
  text-wrap:pretty;
}
/* slogan em inglês, secundário ao "Cada cheǝck é uma vitória!" */
/* Etiqueta de beta, igual a do app: quem entra ja sabe que o chao
   ainda esta sendo assentado, e a critica chega mais justa. */
.betaTag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border:1px solid var(--brand);border-radius:99px;padding:2px 7px;line-height:1;flex:none;}
.greet .face.marca{gap:10px;}
.aviso-beta{margin:10px auto 0!important;font-size:12px;color:var(--ink-faint)!important;max-width:30ch;line-height:1.5;}
.slogan-en{margin:14px auto 0!important;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)!important;text-align:center;line-height:1.7;text-indent:.16em;}

/* ---------- cartão ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px 22px 24px;
  box-shadow:0 1px 2px rgba(16,29,58,.05), 0 10px 26px -14px rgba(16,29,58,.26);
}

/* ---------- alternância entrar / criar ---------- */
.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  background:var(--field);
  border:1px solid var(--line-2);
  border-radius:11px;
  padding:4px;
  margin:14px 0 20px;
}
.tabs button{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:500;
  color:var(--ink-soft);
  padding:9px 8px;
  border-radius:8px;
  cursor:pointer;
  transition:background .16s, color .16s;
}
.tabs button[aria-pressed="true"]{
  background:var(--card);
  color:var(--ink);
  font-weight:600;
  box-shadow:0 1px 3px rgba(16,29,58,.10);
}
.tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}

/* ---------- campos ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;}
.field label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.field input{
  font:inherit;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px 14px;
  transition:border-color .16s, box-shadow .16s;
}
.field input::placeholder{color:var(--ink-faint);}
.field input:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.hint{font-size:12.5px;color:var(--ink-faint);margin:-8px 0 15px;}

/* ---------- botões ---------- */
.btn{
  width:100%;
  font:inherit;
  font-weight:600;
  border-radius:15px;
  padding:13px 16px;
  cursor:pointer;
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:filter .16s, background .16s, border-color .16s;
}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.btn[disabled]{opacity:.6;cursor:progress;}
.btn-primary{
  background:linear-gradient(135deg,#2ee79b 0%,#12cf7d 48%,#079d67 100%);
  color:#06231a;
  box-shadow:var(--brand-glow);
}
.btn-primary:hover:not([disabled]){filter:brightness(1.05);}
.btn-ghost{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover:not([disabled]){border-color:var(--ink-faint);}
.btn-link{
  appearance:none;
  border:0;
  background:none;
  font:inherit;
  font-size:13.5px;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  padding:8px 4px;
  display:block;
  margin:14px auto 0;
}
.btn-link:hover{color:var(--brand-deep);}
[data-theme="dark"] .btn-link:hover{color:var(--brand);}

/* ---------- divisor ---------- */
.or{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:var(--ink-faint);
  font-size:12.5px;
}
.or::before,.or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

/* ---------- avisos ---------- */
.msg{
  border-radius:11px;
  padding:11px 14px;
  font-size:14px;
  margin-bottom:16px;
  line-height:1.45;
}
.msg[hidden]{display:none;}
.msg.err{background:var(--danger-soft);color:var(--danger);}
.msg.ok{background:var(--brand-soft);color:var(--brand-deep);}
[data-theme="dark"] .msg.ok{color:var(--brand);}

/* ---------- o que o app faz: quem chega sem conta (e quem revisa o
   acesso à agenda do Google) precisa entender isto sem entrar ---------- */
.sobre{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);}
.sobre h2{font-family:'Fraunces',serif;font-weight:600;font-size:16px;
  margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;}
.sobre p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
.sobre ul{margin:0;padding-left:18px;}
.sobre li{margin-bottom:6px;font-size:13px;line-height:1.55;color:var(--ink-soft);}
.sobre strong{color:var(--ink);font-weight:600;}

.foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:22px;
  font-size:12.5px;
  color:var(--ink-faint);
}
.selo{display:inline-flex;opacity:.7;}
.foot.legal{margin-top:8px;font-size:11.5px;}
.foot.legal a{color:var(--ink-faint);text-underline-offset:2px;}
.foot.legal a:hover{color:var(--brand-deep);}
.selo svg{width:15px;height:auto;}

/* CAPTCHA (Turnstile) — some quando o widget está invisível/vazio */
.cap-box{margin:2px 0 12px;min-height:0;}
.cap-box:empty{margin:0;}

/* Medidor de força de senha */
.pw-meter{display:flex;align-items:center;gap:9px;margin:-2px 0 10px;}
.pw-bars{display:flex;gap:4px;flex:1;}
.pw-bars i{flex:1;height:4px;border-radius:3px;background:var(--line);transition:background .2s ease;}
.pw-label{font-size:12px;font-weight:600;color:var(--ink-faint);white-space:nowrap;min-width:64px;text-align:right;}
.pw-meter[data-n="0"] .pw-bars i:nth-child(-n+1),
.pw-meter[data-n="1"] .pw-bars i:nth-child(-n+1){background:var(--danger);}
.pw-meter[data-n="2"] .pw-bars i:nth-child(-n+2){background:#e6a935;}
.pw-meter[data-n="3"] .pw-bars i:nth-child(-n+3){background:var(--brand-deep);}
.pw-meter[data-n="4"] .pw-bars i:nth-child(-n+4){background:var(--brand);}
.pw-meter[data-n="0"] .pw-label,
.pw-meter[data-n="1"] .pw-label{color:var(--danger);}
.pw-meter[data-n="2"] .pw-label{color:#8a5e0c;}
[data-theme="dark"] .pw-meter[data-n="2"] .pw-label{color:#e6a935;}
.pw-meter[data-n="3"] .pw-label,
.pw-meter[data-n="4"] .pw-label{color:var(--brand-deep);}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* v230: o que o navegador desenha sozinho também fala a língua da casa */
::selection{background:var(--brand-soft);color:var(--ink);}
input{caret-color:var(--brand-deep);}
[data-theme="dark"] input{caret-color:var(--brand);}
@media (pointer:coarse){.btn-link{min-height:44px;}}