/* style.css
 * Identidade visual Óculos do Professor · Lucas Striz — azul-escuro cinematográfico + ciano glow.
 * Compartilhado por login / register / forgot / reset / pending / admin.
 * Tipografia: Chakra Petch (títulos · display) + Sora (corpo).
 * Tokens canônicos em lucas-striz-brand-kit/colors_and_type.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap');

:root{
  /* ===== brand (ciano / azul, glow) ===== */
  --cyan:        #13C2D6;      /* ciano principal — destaques, gradientes */
  --cyan-hi:     #46E6F2;      /* ciano claro — brilho / hover */
  --blue:        #1E5C8C;      /* azul médio */
  --blue-deep:   #0C2A44;      /* azul profundo (depth/sombra) */
  --teal-deep:   #0B3140;      /* azul-petróleo profundo */
  --cyan-glow:   rgba(70,230,242,0.45);

  /* ===== base escura ===== */
  --bg:          #05070D;      /* fundo principal (preto azulado profundo) */
  --bg-elev:     #0C131F;      /* card base / superfícies */
  --surface-2:   #111C2C;      /* superfícies elevadas */
  --white:       #ffffff;
  --soft:        #D7E2F0;      /* texto padrão */
  --muted:       #A9BACE;      /* prata (rótulos) */
  --dim:         #8193A9;      /* texto apagado */
  --line:        rgba(70,230,242,0.14);
  --line-2:      rgba(70,230,242,0.30);

  /* ===== semantic ===== */
  --danger:      #E5544E;      /* vermelho (sinal funcional, não cor de marca) */
  --ok:          #46E6F2;
  --warn:        #ffcb45;

  /* ===== gradientes assinatura ===== */
  --grad-brand:  linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 45%, var(--cyan) 100%);
}

*{box-sizing: border-box; margin: 0; padding: 0;}
html, body { height: 100%; }
body{
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
}

/* Fundo: grade tênue + duas auras ciano nas extremidades */
body::before{
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(70,230,242,0.16), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(30,92,140,0.18), transparent 50%);
}
body::after{
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(70,230,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,230,242,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}

button, a, input { font: inherit; }
a { color: var(--cyan-hi); text-decoration: none; transition: color .12s; }
a:hover { color: var(--cyan); }

/* ============== CARD ============== */
.card{
  position: relative; z-index: 1;
  width: 100%;
  max-width: 460px;
  background:
    linear-gradient(168deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008));
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 40px 32px 32px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 30px 80px -30px rgba(19,194,214,0.40),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ============== BRAND HEADER ============== */
.brand{
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 26px;
}
.brand-logo{
  width: 76px; height: auto;
  display: block;
  filter: drop-shadow(0 0 24px var(--cyan-glow));
  margin-bottom: 10px;
}
/* lockup oficial (marca + nome) — usado nas telas de entrada */
.brand-lockup{
  width: min(230px, 72%); height: auto;
  display: block;
  margin: 0 auto 6px;
  filter: drop-shadow(0 0 26px var(--cyan-glow));
}
.brand-name{
  font-family: 'Chakra Petch', 'Sora', sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  color: var(--cyan-hi);
  text-transform: uppercase;
}

/* ============== TITLES ============== */
.title{
  font-family: 'Chakra Petch', 'Sora', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-align: center;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.subtitle{
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 26px;
  line-height: 1.55;
  font-weight: 400;
}

/* ============== FORM ============== */
.field{
  margin-bottom: 14px;
}
.field label{
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 7px;
  text-transform: uppercase;
}
.field input{
  width: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 400;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input:focus{
  border-color: var(--cyan);
  background: rgba(19,194,214,0.06);
  box-shadow: 0 0 0 3px rgba(19,194,214,0.18);
}
.field input::placeholder{ color: var(--dim); }

/* ============== BUTTONS ============== */
.btn{
  width: 100%;
  margin-top: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--cyan);
  background: var(--grad-brand);
  color: #fff;
  font-family: 'Chakra Petch', 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 28px -8px var(--cyan-glow),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform .08s, box-shadow .15s, filter .15s, opacity .15s;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -8px var(--cyan-glow);
  filter: brightness(1.1);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

.btn-secondary{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  box-shadow: none;
  font-family: 'Sora', sans-serif;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.btn-secondary:hover{
  background: rgba(19,194,214,0.10);
  border-color: var(--cyan);
  box-shadow: none;
  filter: none;
}

/* ============== LINKS ============== */
.foot-link{
  text-align: center;
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 400;
}
.foot-link a { font-weight: 600; }

/* ============== MESSAGES ============== */
.alert{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  display: none;
  font-weight: 400;
}
.alert.show { display: block; }
.alert.error{
  background: rgba(229,84,78,0.08);
  border: 1px solid rgba(229,84,78,0.32);
  color: #f3b4b1;
}
.alert.ok{
  background: rgba(70,230,242,0.08);
  border: 1px solid rgba(70,230,242,0.32);
  color: #b6f0f5;
}

/* ============== INFO BIG (pending) ============== */
.icon-big{
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: rgba(19,194,214,0.10);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px -10px var(--cyan-glow);
}
.icon-big svg { width: 38px; height: 38px; color: var(--cyan-hi); }

/* ===== Responsivo (auditoria): telas de auth no celular ===== */
@media (max-width: 480px){
  body{ padding: 16px; }
  .card{ padding: 30px 20px 24px; border-radius: 20px; }
}