:root{
      --bg: #0b1220;
      --card: rgba(255,255,255,.06);
      --card-border: rgba(255,255,255,.10);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --primary: #4f8cff;
      --primary-2: #66e3ff;
      --danger: #ff5c7a;
      --input-bg: rgba(255,255,255,.07);
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    body{
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
      color: var(--text);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(900px 500px at 10% 10%, rgba(79,140,255,.35), transparent 55%),
        radial-gradient(700px 450px at 90% 20%, rgba(102,227,255,.25), transparent 60%),
        radial-gradient(700px 500px at 40% 100%, rgba(79,140,255,.15), transparent 60%),
        var(--bg);
    }

    .wrap{
      width: 100%;
      max-width: 420px;
    }

    .card{
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
      backdrop-filter: blur(10px);
    }

    h2{
      margin: 0 0 14px;
      font-size: 1.5rem;
      letter-spacing: .2px;
      text-align: center;
    }

    .error{
      margin: 10px 0 16px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255,92,122,.12);
      border: 1px solid rgba(255,92,122,.28);
      color: var(--danger);
      font-size: .95rem;
      line-height: 1.35;
    }

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

    label{
      font-size: .92rem;
      color: var(--muted);
      margin-bottom: 6px;
      display: block;
    }

    .field{
      display: grid;
      gap: 6px;
    }

    input{
      width: 100%;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: var(--input-bg);
      color: var(--text);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
    }

    input::placeholder{ color: rgba(255,255,255,.45); }

    input:focus{
      border-color: rgba(79,140,255,.75);
      box-shadow: 0 0 0 4px rgba(79,140,255,.18);
    }

    button{
      margin-top: 6px;
      width: 100%;
      padding: 12px 14px;
      border: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: #071022;
      font-weight: 700;
      cursor: pointer;
      transition: transform .06s ease, filter .2s ease;
    }

    button:hover{ filter: brightness(1.05); }
    button:active{ transform: translateY(1px); }
    
    .back-web-ln {
      color: #fff;
      text-decoration: none;
      text-align: center;
      margin: 20px 0px 0px 0px;
      display: block;
      border: 1px solid #fff;
      padding: 10px;
      border-radius: 10px;
    }
    
    .back-web-ln:hover {
      background-color: #fff;
      color: #000;
    }

    /* Responsividade */
    @media (max-width: 480px){
      .card{ padding: 18px; }
      h2{ font-size: 1.35rem; }
    }