:root{
      --bg:#f7f8fb;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#5b33f0; /* purple */
      --accent-2:#5a36f4;
      --input-border:#e6e7ee;
      --danger:#e11d48;
      --radius:12px;
      --shadow: 0 6px 20px rgba(16,24,40,0.06);
      --card-padding:36px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, var(--bg), #fbfbfe);
      color:#0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:48px 20px;
    }

    /* container to mimic screenshot spacing */
    .wrap{
      width:100%;
      max-width:520px;
      margin-top:36px; /* pushes card down like screenshot */
      display:flex;
      justify-content:center;
    }

    .card{
      width:100%;
      background:var(--card);
      border-radius:14px;
      padding:var(--card-padding);
      box-shadow:var(--shadow);
      border:1px solid rgba(99,102,241,0.06);
    }

    .brand{
      text-align:center;
      margin-bottom:6px;
      font-weight: bold;
      font-size:20px;
      letter-spacing:0.6px;
      color:#0b1220;
    }
    .title{
      text-align:center;
      font-size:28px;
      margin:2px 0 18px;
      font-weight:700;
    }

    form{max-width:480px;margin:0 auto;}
    .field{
      margin-bottom:18px;
    }

    label{
      display:block;
      font-size:13px;
      color:var(--muted);
      margin-bottom:8px;
      font-weight:600;
    }

    .input-wrap{
      position:relative;
    }

    input[type="text"],
    input[type="password"],
    input[type="tel"]{
      width:100%;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid var(--input-border);
      background: #fff;
      outline:none;
      font-size:15px;
      transition: all .15s ease;
      box-shadow: none;
    }

    /* focus */
    input:focus{
      border-color:var(--accent);
      box-shadow: 0 0 0 4px rgba(91,51,240,0.08);
    }

    /* fancy rounded purple inset on focused text like screenshot top input */
    .input-outline{
      border-radius:12px;
      padding:0px;
      border:1px solid transparent;
      transition: box-shadow .15s, border-color .15s;
    }
    .input-outline:focus-within{
      border-color:var(--accent);
      box-shadow: 0 0 0 3px rgba(91,51,240,0.06);
    }

    /* password eye button */
    .eye-btn{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      background:transparent;
      border:0;
      padding:8px;
      border-radius:8px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .eye-btn:focus{outline: none; box-shadow: 0 0 0 3px rgba(91,51,240,0.08)}
    .eye-icon{width:20px;height:20px;opacity:0.7}

    .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }

    .checkbox{
      display:flex;
      align-items:center;
      gap:10px;color:var(--muted);
      font-size:14px;
    }

    /* big purple button */
    .btn{
      width:100%;
      display:inline-block;
      padding:12px 18px;
      border-radius:10px;
      background:linear-gradient(180deg,var(--accent),var(--accent-2));
      color:#fff;
      font-weight:700;
      text-align:center;
      border:0;
      cursor:pointer;
      box-shadow: 0 6px 18px rgba(91,51,240,0.12);
      transition: transform .08s ease;
    }
    .btn:active{transform: translateY(1px)}
    .btn:disabled{opacity:0.6;cursor:not-allowed}
    /* small helper / error */
    .help{
      font-size:13px;color:var(--muted);
    }
    .error{
      color:var(--danger);
      font-size:13px;
      margin-top:6px;
    }

    /* small footer spacing */
    .spacer{height:10px}

    /* responsive */
    @media (max-width:420px){
      body{padding-top:28px;padding-bottom:32px}
      .card{padding:22px}
      .title{font-size:22px}
      .brand{font-size:12px}
    }