:root{
      --bg:white;          /* soft pink-beige */
      --text:#1e1e1e;
      --muted:#7b7b7b;
      --line:#d8d0ce;
      --btn:#1f1f1f;
      --btnText:#ffffff;
      --card:#ffffff00;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:white; /* just to make the centered frame pop */
      display:grid;
      place-items:center;
      min-height:100vh;
      padding:20px;
    }

    /* App frame like the reel image (wide) */
    .frame{
      width:min(980px, 100%);
      background:var(--bg);
      border-radius:22px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border:1px solid rgba(255,255,255,.12);
    }

    .layout{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      min-height:520px;
    }

    /* Left illustration panel */
    .art{
      padding:44px 40px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .art-card{
      width:100%;
      height:100%;
      border-radius:14px;
      display:grid;
      place-items:center;
    }

    /* Right form panel */
    .panel{
      padding:44px 44px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .form{
      width:100%;
      max-width:330px;
    }

    h1{
      font-size:28px;
      margin:0 0 18px;
      letter-spacing:-0.4px;
    }
    .label{
      font-size:12px;
      color:var(--muted);
      margin:14px 0 8px;
      display:block;
    }

    .input{
      width:100%;
      height:46px;
      border-radius:10px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.35);
      padding:0 14px;
      outline:none;
      font-size:14px;
    }
    .input:focus{
      border-color:#000000;
      background:rgba(255,255,255,.6);
    }

    .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin:10px 0 16px;
      font-size:12px;
      color:var(--muted);
    }
    .check{
      display:flex;
      align-items:center;
      gap:8px;
      user-select:none;
    }
    .check input{ accent-color:#1f1f1f; }

    .link{
      color:var(--muted);
      text-decoration:none;
    }
    .link:hover{ text-decoration:underline; }

    .btn{
      width:100%;
      height:46px;
      border-radius:999px;
      border:none;
      background:var(--btn);
      color:var(--btnText);
      font-weight:600;
      cursor:pointer;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
    }
    .btn:active{ transform: translateY(1px); }

    .btn-ghost{
      margin-top:10px;
      width:100%;
      height:46px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.28);
      color:var(--text);
      font-weight:600;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }

    .divider{
      margin:18px 0 10px;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent);
    }

    .bottom{
      margin-top:14px;
      font-size:12px;
      color:var(--muted);
      text-align:center;
    }
    .bottom a{ color:var(--text); font-weight:600; text-decoration:none; }
    .bottom a:hover{ text-decoration:underline; }

    /* Responsive: stack like mobile */
    @media (max-width: 820px){
      .layout{ grid-template-columns: 1fr; }
      .art{ padding:34px 24px 10px; }
      .panel{ padding:22px 24px 34px; }
      .frame{ border-radius:18px; }
    }

.pass-wrap{
  position: relative;
}

.pass-wrap .input{
  padding-right: 46px; /* space for the eye */
}

.eye-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .75;
}

.eye-btn:hover{ opacity: 1; }

.eye-icon{
  width: 18px;
  height: 18px;
  display: block;
}