:root{
    --bg-1:#c9d6ee;
    --bg-2:#e7ecf7;
    --ink:#1c2033;
    --muted:#8892a6;
    --line:#e4e7f0;
    --accent:#7cb342;
    --accent-dark:#7cb342;
    --panel:#f4f7fd;
    --white:#ffffff;
    --font-display:'Poppins', -apple-system, sans-serif;
    --font-body:'Inter', -apple-system, sans-serif;
  }
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; font-family:var(--font-body); }

  body{
    min-height:100vh;
    background:
      linear-gradient(135deg, rgba(201,214,238,0.88) 0%, rgba(231,236,247,0.9) 55%, rgba(247,245,239,0.92) 100%),
      url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1740&auto=format&fit=crop') center/cover no-repeat fixed;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 18px;
    position:relative;
    overflow-x:hidden;
  }

  /* ambient blobs */
  .blob{
    position:fixed;
    border-radius:50%;
    filter:blur(0px);
    z-index:0;
    opacity:0.55;
    animation:float 10s ease-in-out infinite;
  }
  .blob.b1{ width:340px; height:340px; background:radial-gradient(circle at 30% 30%, #a9bde3, transparent 70%); top:-90px; left:-90px; animation-duration:12s; }
  .blob.b2{ width:260px; height:260px; background:radial-gradient(circle at 60% 40%, #ffd9ad, transparent 70%); bottom:-60px; right:-60px; animation-duration:14s; animation-delay:1s; }
  .blob.b3{ width:180px; height:180px; background:radial-gradient(circle at 50% 50%, #cfe0c9, transparent 70%); top:40%; right:4%; animation-duration:16s; animation-delay:2s; }
  @keyframes float{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(18px,-22px) scale(1.06); }
  }

  .kicker{
    position:relative;
    z-index:1;
    text-align:center;
    margin-bottom:28px;
    animation:fadeDown 0.7s ease both;
  }
  .kicker h2{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(26px,4vw,40px);
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  .kicker h2 span{ color:var(--accent); }

  @keyframes fadeDown{ from{opacity:0; transform:translateY(-16px);} to{opacity:1; transform:translateY(0);} }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
  @keyframes popIn{ from{opacity:0; transform:scale(0.94);} to{opacity:1; transform:scale(1);} }

  /* ---------- Card ---------- */
  .card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1024px;
    background:var(--white);
    border-radius:24px;
    box-shadow:0 30px 70px rgba(28,32,51,0.18), 0 4px 14px rgba(28,32,51,0.06);
    display:flex;
    overflow:hidden;
    animation:popIn 0.7s cubic-bezier(.16,1,.3,1) both 0.15s;
  }

  .form-side{
    flex:1 1 54%;
    padding:44px 46px 38px;
    display:flex;
    flex-direction:column;
  }

  .logo-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
    animation:fadeDown 0.6s ease both;
  }
  .logo-header img{
    width:46px; height:46px;
    object-fit:contain;
    flex-shrink:0;
  }
  .logo-header .lh-text{ line-height:1.25; }
  .logo-header .lh-name{
    font-family:var(--font-display);
    font-weight:700;
    font-size:13.5px;
    color:var(--ink);
  }
  .logo-header .lh-sub{
    font-size:10.5px;
    letter-spacing:0.04em;
    color:var(--muted);
    text-transform:uppercase;
  }

  .form-side h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:25px;
    color:var(--ink);
    margin-bottom:6px;
  }
  .form-side .sub{
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:22px;
  }

  /* tab switcher */
  .tabs{
    display:flex;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:11px;
    padding:4px;
    margin-bottom:24px;
    position:relative;
  }
  .tabs button{
    flex:1;
    border:none;
    background:transparent;
    padding:10px;
    font-size:13.5px;
    font-weight:600;
    color:var(--muted);
    border-radius:8px;
    cursor:pointer;
    position:relative;
    z-index:1;
    transition:color 0.25s;
    font-family:var(--font-body);
  }
  .tabs button.active{ color:var(--ink); }
  .tabs .thumb{
    position:absolute;
    top:4px; left:4px;
    width:calc(50% - 4px);
    height:calc(100% - 8px);
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(28,32,51,0.1);
    transition:transform 0.32s cubic-bezier(.4,.15,.2,1);
  }
  .tabs .thumb.to-right{ transform:translateX(100%); }

  .panels{ position:relative; }
  .panel{ display:none; animation:panelIn 0.4s ease both; }
  .panel.active{ display:flex; flex-direction:column; }
  @keyframes panelIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .back-link{
    display:flex; align-items:center; gap:7px;
    background:none; border:none;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    font-family:var(--font-body);
    cursor:pointer;
    padding:0 0 20px;
    transition:color 0.2s;
  }
  .back-link:hover{ color:var(--accent-dark); }

  .forgot-sent{
    text-align:center;
    padding:10px 4px 4px;
    animation:panelIn 0.4s ease both;
  }
  .forgot-sent .sent-icon{
    width:56px; height:56px;
    border-radius:50%;
    background:rgba(95,185,138,0.12);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
  }
  .forgot-sent h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    color:var(--ink);
    margin-bottom:8px;
  }
  .forgot-sent p{
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:22px;
  }
  .forgot-sent strong{ color:var(--ink); }
  .forgot-sent .btn{
    background:transparent;
    color:var(--accent-dark);
    border:1.5px solid var(--line);
    box-shadow:none;
  }
  .forgot-sent .btn:hover{ background:var(--panel); transform:none; box-shadow:none; }

  form{ display:flex; flex-direction:column; gap:16px; }

  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .field label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:6px;
  }
  .field input,
  .field select{
    width:100%;
    padding:11.5px 13px;
    border:1.5px solid var(--line);
    border-radius:9px;
    font-size:13.5px;
    color:var(--ink);
    font-family:var(--font-body);
    background:var(--panel);
    outline:none;
    transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .field input::placeholder{ color:#a9afc1; }
  .field input:focus,
  .field select:focus{
    border-color:var(--accent);
    background:#fff;
    box-shadow:0 0 0 4px rgba(240,153,77,0.15);
  }

  .field.err input{ border-color:#e0577a; box-shadow:0 0 0 4px rgba(224,87,122,0.12); }
  .field .msg{ font-size:11px; color:#e0577a; margin-top:4px; min-height:14px; }

  /* gender pills */
  .gender-group{ display:flex; gap:10px; }
  .gender-pill{
    flex:1;
    position:relative;
  }
  .gender-pill input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
  .gender-pill label{
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:10.5px 8px;
    border:1.5px solid var(--line);
    border-radius:9px;
    font-size:13px;
    font-weight:500;
    color:var(--muted);
    background:var(--panel);
    cursor:pointer;
    transition:all 0.2s;
    margin:0;
  }
  .gender-pill input:checked + label{
    border-color:var(--accent);
    background:#cfe0c9a3;
    color:var(--accent-dark);
    font-weight:600;
  }
  .gender-pill label svg{ width:15px; height:15px; }

  /* password strength */
  .strength{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:6px; }
  .strength-bar{ height:100%; width:0%; background:linear-gradient(90deg,#e0577a,#f0c770,#5fb98a); transition:width 0.3s ease; }

  .row-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12.5px;
    color:var(--muted);
    margin-top:-4px;
  }
  .row-between a{ color:var(--accent-dark); text-decoration:none; font-weight:600; }
  .row-between a:hover{ text-decoration:underline; }
  .row-between .check{ display:flex; align-items:center; gap:6px; }
  .row-between .check input{ accent-color:var(--accent); }

  .terms{
    display:flex; align-items:flex-start; gap:9px;
    font-size:12px; color:var(--muted);
    line-height:1.5;
  }
  .terms input{ margin-top:2px; accent-color:var(--accent); }
  .terms a{ color:var(--accent-dark); font-weight:600; text-decoration:none; }
  .terms a:hover{ text-decoration:underline; }

  .btn{
    margin-top:2px;
    padding:14px;
    border:none;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s;
    box-shadow:0 10px 24px #7cb34247;
  }
  .btn:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 10px 24px #7cb34247; }
  .btn:active{ transform:translateY(0); }
  .btn::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:translateX(-120%);
  }
  .btn:hover::after{ animation:sheen 0.8s ease; }
  @keyframes sheen{ to{ transform:translateX(120%); } }

  .switch{
    text-align:center;
    font-size:13px;
    color:var(--muted);
    margin-top:16px;
  }
  .switch a{ color:var(--accent-dark); font-weight:700; text-decoration:none; }
  .switch a:hover{ text-decoration:underline; }

  /* ---------- Illustration side ---------- */
  .art-side{
    flex:1 1 46%;
    position:relative;
    background:
      linear-gradient(180deg, rgba(20,24,42,0.15) 0%, rgba(15,18,34,0.55) 100%),
      url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=1587&auto=format&fit=crop') center/cover no-repeat;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
  }

  .float-badge{
    position:absolute;
    width:46px; height:46px;
    border-radius:14px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(28,32,51,0.14);
    animation:bob 4.5s ease-in-out infinite;
    z-index:2;
  }
  .float-badge.check{ top:14%; right:16%; animation-delay:0s; }
  .float-badge.star{ bottom:26%; left:10%; animation-delay:1.2s; background:var(--accent); }
  .float-badge.heart{ top:46%; right:6%; animation-delay:2.1s; }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

  .art-copy{
    position:absolute;
    top:34px; left:0; right:0;
    text-align:center;
    z-index:2;
  }
  .art-copy h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    color:#ffffff;
    padding:0 30px;
    text-shadow:0 2px 12px rgba(0,0,0,0.35);
  }
  .art-copy p{
    font-size:12.5px;
    color:rgba(255,255,255,0.85);
    margin-top:6px;
    padding:0 40px;
    text-shadow:0 2px 10px rgba(0,0,0,0.3);
  }

  /* responsive */
  @media (max-width:820px){
    .card{ flex-direction:column-reverse; max-width:460px; }
    .art-side{ min-height:220px; }
    .form-side{ padding:34px 26px 30px; }
    .grid-2{ grid-template-columns:1fr; }
    .art-copy{ position:static; padding-top:18px; }
    .float-badge{ display:none; }
  }