:root{ color-scheme:light;
      --bg:#ede8df;--surface:#faf8f4;--surface2:#f4f0e8;--border:rgba(30,28,24,0.10);--border2:rgba(30,28,24,0.16);
      --text:#1a1916;--sub:#6b6760;--muted:#9c9790;--ink:#2d2a26;--side-text:#f0ebe0;--red:#9b3a3a;--radius:10px;--radius-sm:6px; }

    *{ box-sizing:border-box; margin:0; padding:0; }

    body{
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      -webkit-font-smoothing:antialiased;
    }

    .card{
      width:360px;
      max-width:90%;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:0 10px 30px rgba(30,28,24,0.08), 0 2px 8px rgba(30,28,24,0.05);
      padding:32px;
    }

    .brand{
      text-align:center;
      margin-bottom:26px;
    }
    .brand img{
      width:48px;
      height:48px;
      border-radius:12px;
      object-fit:cover;
      display:inline-block;
    }
    .brand h1{
      font-size:19px;
      font-weight:600;
      color:var(--text);
      margin-top:14px;
      letter-spacing:.2px;
    }
    .brand p{
      font-size:13px;
      color:var(--muted);
      margin-top:4px;
    }

    form{ display:flex; flex-direction:column; gap:16px; }

    .field{ display:flex; flex-direction:column; gap:6px; }
    .field label{
      font-size:12.5px;
      font-weight:500;
      color:var(--sub);
      letter-spacing:.2px;
    }

    .input-wrap{ position:relative; display:flex; }
    input[type=text],
    input[type=password]{
      width:100%;
      font-family:inherit;
      font-size:14px;
      color:var(--text);
      background:var(--surface2);
      border:1px solid var(--border2);
      border-radius:var(--radius-sm);
      padding:11px 12px;
      outline:none;
      transition:border-color .15s ease, background .15s ease;
    }
    input[type=text]:focus,
    input[type=password]:focus{
      border-color:var(--ink);
      background:var(--surface);
    }
    input::placeholder{ color:var(--muted); }

    .pw-wrap input{ padding-right:42px; }
    .pw-toggle{
      position:absolute;
      top:0; right:0;
      height:100%;
      width:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:none;
      border:none;
      cursor:pointer;
      color:var(--muted);
      font-size:16px;
      border-radius:0 var(--radius-sm) var(--radius-sm) 0;
      transition:color .15s ease;
    }
    .pw-toggle:hover{ color:var(--sub); }

    button[type=submit]{
      width:100%;
      font-family:inherit;
      font-size:14px;
      font-weight:600;
      letter-spacing:.3px;
      color:var(--side-text);
      background:var(--ink);
      border:none;
      border-radius:var(--radius-sm);
      padding:12px;
      margin-top:4px;
      cursor:pointer;
      transition:opacity .15s ease;
    }
    button[type=submit]:hover{ opacity:.9; }
    button[type=submit]:disabled{ opacity:.6; cursor:default; }

    .err{
      display:none;
      font-size:12.5px;
      color:var(--red);
      background:rgba(155,58,58,0.08);
      border:1px solid rgba(155,58,58,0.20);
      border-radius:var(--radius-sm);
      padding:9px 11px;
      line-height:1.4;
    }
    .err.show{ display:block; }

    /* "Esqueci a senha". O atributo hidden precisa vencer o form{display:flex} acima: sem o
       !important, a regra do autor ganha da do navegador e o formulário escondido aparece. */
    [hidden]{ display:none !important; }
    .step{ display:flex; flex-direction:column; gap:16px; }
    .help{ font-size:12.5px; color:var(--sub); line-height:1.5; }
    .link-btn{
      background:none; border:none; padding:2px 0;
      font-family:inherit; font-size:12.5px; color:var(--sub);
      text-decoration:underline; text-underline-offset:3px;
      cursor:pointer; align-self:center;
    }
    .link-btn:hover{ color:var(--text); }
    .ok{
      display:none;
      font-size:12.5px;
      color:#2f5d3a;
      background:rgba(47,93,58,0.08);
      border:1px solid rgba(47,93,58,0.20);
      border-radius:var(--radius-sm);
      padding:9px 11px;
      line-height:1.4;
    }
    .ok.show{ display:block; }