/* =========================================================================
   Guidelyze · Login / Register
   Reusa tokens de assets/css/tokens/livro.css
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100dvh;
  background:radial-gradient(ellipse at 50% 0%, var(--paper-warm), var(--paper) 60%);
  color:var(--fg);font-family:var(--font-body);
  font-size:var(--text-md);line-height:var(--lead-relaxed);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

.auth{
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-6);
  padding:var(--space-8) var(--pad-x);
}

.auth__card{
  width:100%;max-width:400px;
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8);
  box-shadow:var(--shadow-lift);text-align:center;
}
.auth__logo{height:30px;width:auto;margin:0 auto var(--space-6)}

.auth__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;margin:0 0 var(--space-2)}
.auth__sub{font-size:var(--text-base);color:var(--fg-soft);margin:0 0 var(--space-7)}

.field{margin-bottom:var(--space-4);text-align:left}
.field label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--fg-soft);margin-bottom:var(--space-2)}
.field input{
  width:100%;padding:13px 15px;border-radius:var(--radius-md);
  border:1.5px solid var(--line);background:var(--paper);
  font-family:inherit;font-size:var(--text-md);color:var(--fg);
}
.field input:focus{outline:none;border-color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 28px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-md);font-weight:600;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn--primary{background:var(--accent);color:var(--paper);box-shadow:0 6px 20px rgba(92,143,122,0.28)}
.btn--primary:hover:not(:disabled){background:var(--accent-deep)}
.btn--block{width:100%;margin-top:var(--space-2)}

.auth__error{
  background:rgba(176,122,111,0.12);color:var(--alert-error);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);margin:0 0 var(--space-4);text-align:left;
}
.auth__status{font-size:var(--text-sm);color:var(--accent-deep);margin:var(--space-4) 0 0}

.auth__toggle{font-size:var(--text-sm);color:var(--fg-soft);margin:var(--space-6) 0 0}
.auth__toggle a{color:var(--accent-deep);font-weight:600;text-decoration:none}
.auth__toggle a:hover{text-decoration:underline}

/* ---- Modo demo (bypass de login pra apresentação) ---- */
.auth__demo{
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px dashed var(--line);
  text-align:center;
}
.auth__demo-tag{
  display:inline-block;
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--fg-softer);font-weight:600;
  background:var(--bg-alt);padding:3px 10px;border-radius:var(--radius-pill);
  margin-bottom:var(--space-3);
}
.auth__demo-desc{
  font-size:var(--text-sm);color:var(--fg-softer);
  margin:0 0 var(--space-3);
}

.auth__foot{font-size:var(--text-xs);color:var(--fg-softer)}