:root{
      --brand:#7498C0;
      --brand-600:#5f86b5;
      --bg:#f6f8fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --ring:#cbd5e1;
      --danger:#b91c1c;
      --success:#0f766e;
    }
    /*@media (prefers-color-scheme: dark){
      :root{
        --bg:#0b1220;
        --card:#0f172a;
        --text:#e5e7eb;
        --muted:#94a3b8;
        --ring:#1f2a44;
      }
      .shadow{
        box-shadow: 0 10px 30px rgba(0,0,0,.45);
      }
    }*/
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(116,152,192,.18), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(116,152,192,.15), transparent 60%),
        var(--bg);
      color:var(--text);
      display:grid;
      place-items:center;
      padding:24px;
    }

    .container{
      width:100%;
      max-width: 440px;
    }

    .card{
      background: var(--card);
      border: 1px solid var(--ring);
      border-radius: 16px;
      padding: 28px;
      backdrop-filter: blur(6px);
      position: relative;
    }

    .brand{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      margin-bottom: 16px;
      text-align:center;
    }
    .brand img.logo{
      width:min(220px, 70%);
      height:auto;
      display:block;
    }
    .brand a.badge-link img{
      width:min(220px, 70%);
      height:auto;
      display:block;
      transition: transform .2s ease;
    }
    .brand a.badge-link:hover img{ transform: translateY(-2px) }

    .title{
      margin: 8px 0 6px 0;
      font-size: clamp(22px, 3.5vw, 26px);
      font-weight: 700;
      letter-spacing:.2px;
      color: var(--brand);
    }
    .subtitle{
      margin:0 0 18px 0;
      color: var(--muted);
      font-size: 14px;
    }

    form{
      display:grid;
      gap:14px;
    }

    .field{
      display:grid;
      gap:8px;
    }
    label{
      font-size: 13px;
      color: var(--muted);
    }
    .input{
      appearance:none;
      width:100%;
      border:1px solid var(--ring);
      background: transparent;
      color:var(--text);
      border-radius: 12px;
      padding: 12px 14px;
      font-size:15px;
      outline:none;
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .input::placeholder{ color: #94a3b8 }
    .input:focus{
      border-color: var(--brand);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
      background: color-mix(in srgb, var(--brand) 4%, var(--card));
    }

    .actions{
      display:grid;
      gap:10px;
      margin-top: 4px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      width:100%;
      border:0;
      border-radius:12px;
      padding:12px 16px;
      font-weight:600;
      letter-spacing:.2px;
      cursor:pointer;
      transition: transform .05s ease, box-shadow .18s ease, background-color .18s ease;
      will-change: transform;
    }
    .btn:active{ transform: translateY(1px) }
    .btn-primary{
      background: linear-gradient(180deg, var(--brand), var(--brand-600));
      color:white;
      box-shadow: 0 6px 18px rgba(116,152,192,.35);
    }
    .btn-primary:hover{ filter: brightness(1.05) }
    .btn-ghost{
      background: transparent;
      color: var(--brand);
      border:1px solid color-mix(in srgb, var(--brand) 55%, var(--ring));
    }
    .helper{
      text-align:center;
      margin-top: 8px;
      font-size: 14px;
    }
    .helper a{
      color: var(--brand);
      text-decoration: none;
      border-bottom: 1px dashed color-mix(in srgb, var(--brand) 60%, transparent);
      padding-bottom: 1px;
    }
    .helper a:hover{ opacity:.9 }

    .alert{
      display:flex;
      align-items:flex-start;
      gap:10px;
      border:1px solid color-mix(in srgb, var(--danger) 40%, var(--ring));
      background: color-mix(in srgb, var(--danger) 8%, var(--card));
      color: color-mix(in srgb, var(--danger) 85%, black);
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 14px;
    }
    .alert svg{ flex:0 0 auto; margin-top:2px }

    .shadow{
      box-shadow: 0 10px 30px rgba(116,152,192,.25);
    }

    /* Pequenas melloras responsivas */
    @media (max-width: 420px){
      .card{ padding: 22px }
    }

    /* Accesibilidade: foco claro nos links */
    a:focus-visible, .btn:focus-visible, .input:focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent);
      outline-offset: 2px;
    }