:root{
      --gold:#D4AF37;
      --gold2:#B8962E;
      --bg1:#0B1020;
      --bg2:#0F172A;
      --text:#E5E7EB;
      --muted:#9CA3AF;
    }
    *{ box-sizing:border-box; }

    body{
      min-height:100vh;
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 10% 10%, rgba(212,175,55,0.18), transparent 60%),
        radial-gradient(900px 600px at 90% 20%, rgba(212,175,55,0.12), transparent 55%),
        linear-gradient(135deg, var(--bg1), var(--bg2));
      overflow-x:hidden;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .bg-pattern{
      position:fixed; inset:0;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity:.22;
      pointer-events:none;
      z-index:0;
    }

    .blob{
      position:fixed;
      width:420px; height:420px;
      filter: blur(60px);
      opacity:.28;
      z-index:0;
      pointer-events:none;
      background: radial-gradient(circle, rgba(212,175,55,0.9), rgba(212,175,55,0));
      animation: floaty 10s ease-in-out infinite;
    }
    .blob.b1{ top:-120px; left:-120px; }
    .blob.b2{ bottom:-140px; right:-120px; animation-delay:-3s; opacity:.22; }
    @keyframes floaty{
      0%,100%{ transform: translate(0,0) scale(1); }
      50%{ transform: translate(30px, -25px) scale(1.05); }
    }

    .page-wrap{
      position:relative; z-index:1;
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:32px 14px;
    }

    .split-card{
      width:100%;
      max-width:1080px;
      min-height:620px;
      border-radius:26px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(12px);
      box-shadow: 0 28px 90px rgba(0,0,0,0.55);
    }

    .split-grid{
      display:grid;
      grid-template-columns: 1.15fr 1fr;
      min-height:620px;
    }

    /* LEFT IMAGE */
    .left-panel{
      position:relative;
      overflow:hidden;
      background:#0b1020;
    }
    .left-panel img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform: scale(1.03);
    }
    .left-panel::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(11,16,32,0.25), rgba(11,16,32,0.92)),
        radial-gradient(700px 500px at 30% 40%, rgba(212,175,55,0.16), transparent 60%);
    }

    .left-badge{
      position:absolute;
      left:18px; bottom:18px;
      z-index:2;
      padding:14px 16px;
      border-radius:16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      backdrop-filter: blur(10px);
      max-width: 80%;
    }
    .left-badge h4{
      margin:0 0 4px;
      font-size:18px;
      font-weight:800;
      letter-spacing:.2px;
    }
    .left-badge p{
      margin:0;
      font-size:13px;
      color: rgba(229,231,235,0.80);
      line-height:1.4;
    }
    .gold{ color:var(--gold); }

    /* RIGHT */
    .right-panel{
      padding:34px 28px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .logo-center{
      display:flex;
      justify-content:center;
      margin-bottom:16px;
    }
    .logo-center img{
      width:86px;
      height:86px;
      object-fit:contain;
      /* border-radius:50%; */
      /* padding:10px; */
      /* background: rgba(255,255,255,0.06); */
      /* border: 1px solid rgba(255,255,255,0.16); */
      /* box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 6px rgba(212,175,55,0.07); */
    }

    .form-head{
      text-align:center;
      margin-bottom:18px;
    }
    .form-head h2{
      margin:0 0 6px;
      font-size:28px;
      font-weight:900;
      letter-spacing:.2px;
    }
    .form-head p{
      margin:0;
      color: var(--muted);
      font-size:14px;
    }

    .field{ margin-bottom:14px; }
    .label{
      font-size:13px;
      color: rgba(229,231,235,0.90);
      margin-bottom:6px;
      display:block;
    }
    .input-wrap{ position:relative; }
    .icon-left{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      color: rgba(212,175,55,0.9);
      font-size:14px;
      pointer-events:none;
    }

    .control{
      width:100%;
      height:52px;
      border-radius:14px;
      padding: 0 56px 0 42px;
      background: rgba(10,14,26,0.55);
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--text);
      outline:none;
      transition: .25s ease;
    }
    .control::placeholder{ color: rgba(156,163,175,0.75); }
    .control:focus{
      border-color: rgba(212,175,55,0.55);
      box-shadow: 0 0 0 4px rgba(212,175,55,0.12);
      background: rgba(10,14,26,0.72);
    }

    .toggle-pass{
      position:absolute;
      right:10px;
      top:50%;
      transform:translateY(-50%);
      width:40px;
      height:40px;
      border-radius:12px;
      border:1px solid rgba(212,175,55,0.28);
      background: rgba(212,175,55,0.08);
      color: rgba(212,175,55,0.95);
      display:flex;
      align-items:center;
      justify-content:center;
      transition: .25s ease;
    }
    .toggle-pass:hover{
      background: rgba(212,175,55,0.16);
      border-color: rgba(212,175,55,0.55);
      box-shadow: 0 10px 24px rgba(212,175,55,0.22);
      transform: translateY(-50%) scale(1.04);
    }
    .toggle-pass:active{
      transform: translateY(-50%) scale(0.98);
    }

    .meta{
      display:flex;
      justify-content:flex-start;
      align-items:center;
      gap:10px;
      font-size:13px;
      margin: 8px 0 16px;
      color: rgba(229,231,235,0.75);
    }

    .btn-gold{
      position:relative;
      width:100%;
      height:52px;
      border-radius:30px;
      font-weight:800;
      letter-spacing:.8px;
      text-transform:uppercase;
      color:#111;
      border:none;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      overflow:hidden;
      transition: all .35s ease;
      box-shadow:
        0 12px 28px rgba(212,175,55,0.42),
        inset 0 0 0 1px rgba(255,255,255,0.25);
    }
    .btn-gold::before{
      content:"";
      position:absolute;
      top:0; left:-75%;
      width:50%;
      height:100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.60), transparent);
      transition:.6s;
    }
    .btn-gold:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 38px rgba(212,175,55,0.62);
    }
    .btn-gold:hover::before{ left:125%; }
    .btn-gold:active{ transform: translateY(0); }

    .footer-link{
      margin-top:14px;
      text-align:center;
      font-size:13px;
      color: rgba(229,231,235,0.70);
    }
    .footer-link a{
      color: rgba(212,175,55,0.95);
      text-decoration:none;
    }
    .footer-link a:hover{ text-decoration:underline; }

    @media (max-width: 991px){
      .split-grid{ grid-template-columns: 1fr; }
      .split-card{ max-width:520px; min-height:auto; }
      .left-panel{ min-height:260px; }
      .right-panel{ padding:28px 18px; }
    }