:root{
      --card-radius: 18px;
      --input-radius: 10px;
      --accent-1: #3fb6ff;
      --accent-2: #8b4cff;
      --shadow: 0 18px 30px rgba(24,39,75,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
      --soft-shadow: 0 10px 18px rgba(24,39,75,0.08);
    }

    *{box-sizing:border-box}

    body{
      min-height:100vh;
      margin:0;
      font-family:"Poppins",system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg,#8fd7ff 0%, #a69df0 60%, #c9b8f2 100%);
      padding:40px; 
    }

    .back-button {
      position: absolute;
      top: 20px;
      left: 20px;
      background: linear-gradient(45deg,#3498db,#2980b9);
      color: white;
      font-size: 13px;
      padding: 6px 14px;
      border-radius: 20px;
      text-decoration: none;
    }

    .card{
      width: min(760px, 86vw);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
      border-radius: var(--card-radius);
      padding: 44px 56px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:visible;
    }

    h1{
      font-size:34px;
      margin:0 0 28px 0;
      text-align:center;
      color:#1f2b3a;
      letter-spacing:0.2px;
      font-weight:700;
    }

    .form{
      max-width:520px;
      margin: 0 auto;
    }

    .field{
      background: #fff;
      border-radius: var(--input-radius);
      padding:12px 18px;
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:18px;
      box-shadow: var(--soft-shadow);
      border:1px solid rgba(34,60,80,0.06);
    }

    .field .label{
      min-width:140px;
      color:#6b7788;
      font-weight:600;
      font-size:14px;
      padding-left:6px;
    }

    .field input{
      border: none;
      outline: none;
      flex:1;
      font-size:15px;
      color:#223049;
      background:transparent;
      padding:8px 6px;
    }

    .field input::placeholder{ 
      color:#b9c2cf; 
      font-weight:500;
    }

    .helper{
      display:flex;
      justify-content:flex-end;
      margin-top:-6px;
      margin-bottom:18px;
     
    }

    .helper a{
      color:#1f7ad6;
      text-decoration:none;
      font-size:14px;
      font-weight:600;
    }

    .helper a:hover{ text-decoration:underline; }

    .btn{
      display:block;
      width:220px;
      margin:12px auto 0;
      padding:14px 18px;
      text-align:center;
      border-radius:14px;
      font-weight:700;
      font-size:18px;
      color:white;
      border:none;
      cursor:pointer;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      box-shadow: 0 10px 24px rgba(99,66,235,0.14), inset 0 -2px 0 rgba(0,0,0,0.06);
    }

    .foot{
      text-align:center;
      margin-top:20px;
      color:#5d6471;
      font-size:14px;
    }

    .foot a{
      color:#6c2eff;
      font-weight:700;
      text-decoration:none;
      margin-left:6px;
    }

    .field:focus-within{
      box-shadow: 0 12px 28px rgba(34,60,80,0.08), 0 0 0 4px rgba(63,182,255,0.06);
      border-color: rgba(63,182,255,0.35);
    }

    @media (max-width:560px){
      .card{ padding:28px 20px; }
      .field .label{ display:none; }
      .field{ padding:10px 14px; gap:10px; }
      .btn{ width:100%; }
    }