.auth-page{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    padding:24px;
  }
  /* style.css define body{display:flex} pro layout do app principal
     (sidebar + conteúdo lado a lado) — aqui isso empurrava o card de
     login pra esquerda em vez de centralizar. Anula só nesta página. */
  body{display:block; overflow:auto;}
  .auth-card{
    width:100%; max-width:360px;
  }
  .auth-logo{
    display:flex; justify-content:center; margin-bottom:20px;
  }
  .auth-title{
    text-align:center;
    font-family:var(--font-serif);
    font-size:23px; font-weight:500;
    color:var(--ink);
    margin:0 0 6px;
  }
  .auth-subtitle{
    text-align:center;
    font-size:14px;
    color:var(--ink-soft);
    margin:0 0 28px;
    line-height:1.5;
  }
  .auth-oauth-btn{
    width:100%; height:42px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--bg-raised);
    border:1px solid var(--border-strong);
    border-radius:10px;
    font-size:14.5px; font-weight:500;
    color:var(--ink);
    text-decoration:none;
    cursor:pointer;
    margin-bottom:10px;
    transition:background .12s ease, border-color .12s ease;
  }
  .auth-oauth-btn:hover{background:var(--bg-hover); border-color:var(--ink-faint);}
  .auth-divider{
    display:flex; align-items:center; gap:12px;
    margin:20px 0;
  }
  .auth-divider .line{flex:1; height:1px; background:var(--border);}
  .auth-divider span{font-size:12px; color:var(--ink-faint);}
  .auth-field{margin-bottom:16px;}
  .auth-field label{
    display:block;
    font-size:13px; color:var(--ink-soft);
    margin-bottom:6px;
  }
  .auth-field input{
    width:100%; height:42px;
    border:1px solid var(--border-strong);
    border-radius:10px;
    background:var(--bg-input);
    color:var(--ink);
    padding:0 14px;
    font-size:14.5px;
    font-family:var(--font-ui);
    outline:none;
    transition:border-color .12s ease, box-shadow .12s ease;
  }
  .auth-pw-wrap{position:relative;}
  .auth-pw-wrap input{padding-right:44px;}
  .auth-pw-toggle{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer;
    color:var(--ink-faint);
    border-radius:8px;
    transition:background .12s ease, color .12s ease;
  }
  .auth-pw-toggle:hover{background:var(--bg-hover); color:var(--ink-soft);}
  .auth-field input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .auth-field .field-error{
    display:none;
    font-size:12.5px; color:var(--danger);
    margin-top:6px;
  }
  .auth-field.has-error input{border-color:var(--danger);}
  .auth-field.has-error .field-error{display:block;}
  .auth-back{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13.5px; color:var(--ink-soft);
    background:none; border:none; cursor:pointer;
    padding:0; margin-bottom:18px;
  }
  .auth-banner-error{
    background:#FBEAEA;
    border:1px solid #E9B4AE;
    color:var(--danger);
    font-size:13px;
    padding:10px 14px;
    border-radius:10px;
    margin-bottom:20px;
    line-height:1.4;
  }
  :root[data-theme="dark"] .auth-banner-error{background:#3A2420; border-color:#5C332C;}
  .auth-back:hover{color:var(--ink);}
  .auth-submit{
    width:100%; height:42px;
    background:var(--accent);
    color:#fff;
    border:none; border-radius:10px;
    font-size:14.5px; font-weight:600;
    cursor:pointer;
    transition:background .12s ease, transform .1s ease;
  }
  .auth-submit:hover{background:var(--accent-dark);}
  .auth-submit:active{transform:scale(.98);}
  .auth-submit:disabled{background:var(--accent-soft); color:var(--accent); cursor:default;}
  .auth-legal{
    text-align:center;
    font-size:12px; color:var(--ink-faint);
    line-height:1.6;
    margin:24px 0 0;
  }
  .auth-legal a{color:var(--ink-soft);}
  .auth-switch{
    text-align:center;
    font-size:13.5px; color:var(--ink-soft);
    margin:22px 0 0;
  }
  .auth-switch a{color:var(--accent); font-weight:600; text-decoration:none;}
  .auth-switch a:hover{text-decoration:underline;}
  .auth-step{display:none;}
  .auth-step.active{display:block;}

  /* Código de verificação (6 dígitos) — usado em /recover/, mesma
     lógica do login por código do Claude.ai: uma caixa por dígito,
     foco avança sozinho, cola o código inteiro de uma vez também. */
  .auth-otp-row{
    display:flex; gap:8px; justify-content:center;
    margin-bottom:6px;
  }
  .auth-otp-digit{
    width:44px; height:52px;
    text-align:center;
    font-size:20px; font-weight:600;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    border:1px solid var(--border-strong);
    border-radius:10px;
    background:var(--bg-input);
    color:var(--ink);
    outline:none;
    transition:border-color .12s ease, box-shadow .12s ease;
  }
  .auth-otp-digit:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .auth-otp-row.has-error .auth-otp-digit{border-color:var(--danger);}
  .auth-resend{
    text-align:center;
    font-size:13px; color:var(--ink-soft);
    margin:16px 0 0;
  }
  .auth-resend button{
    background:none; border:none;
    color:var(--accent); font-weight:600;
    cursor:pointer; padding:0; font-size:13px;
  }
  .auth-resend button:hover{text-decoration:underline;}
  .auth-resend button:disabled{
    color:var(--ink-faint); cursor:default; text-decoration:none;
  }