:root{
      --bg: linear-gradient(105deg, #ffffff, #f2f2f2, #efeeee, #d9d9d9);
      --title-color: #d4338d; 
      --text-color: #000;
      --muted: #4a4a4a;
      --accent: #6c9cff;
      --danger: #ff6b6b;
      --success: #4cd964;
      --glass: rgba(255,255,255,0.03);
      --card-bg: rgba(255,255,255,0.02);
      --radius: 12px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    html,body{
      height:100%;
      margin:0;
      background: var(--bg);
      color: var(--text-color);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    .container{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:48px 20px;
    }

    .card{
      width:100%;
      max-width:920px;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius: var(--radius);
      padding:28px;
      box-shadow: 0 6px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.03);
    }
    @media (max-width: 700px) { 
        .card, .container { 
            grid-template-columns: 1fr; /* stack columns */ 
            margin-right: -20px; /* adjust spacing */ 
            margin-left: -20px; 
        } }

    .brand{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .brand h1{
      margin:0;
      font-size:28px;
      color: var(--title-color);
      letter-spacing:0.6px;
    }

    .brand p{
      margin:0;
      color:var(--muted);
      line-height:1.5;
    }

    form{
      background: var(--card-bg);
      padding:18px;
      border-radius:10px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

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

    .row{
      display:flex;
      gap:12px;
      align-items:center;
    }

    input[type="text"], input[type="email"], input[type="password"]{
      width:80%;
      padding:12px 14px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.04);
      background: rgba(0,0,0,0.25);
      color:var(--text-color);
      outline:none;
      transition: box-shadow .15s, border-color .15s;
    }

    input:focus{
      box-shadow: 0 0 0 4px rgba(108,156,255,0.08);
      border-color: rgba(108,156,255,0.35);
    }

    .input-with-btn{
      display:flex;
      gap:8px;
      align-items:center;
    }

    button{
      padding:10px 14px;
      border-radius:8px;
      border: none;
      cursor:pointer;
      background: linear-gradient(180deg,var(--accent), #3b7be6);
      color:#fff;
      font-weight:600;
      transition: transform .08s ease, opacity .12s;
    }

    button:active{ transform: translateY(1px); }
    button.secondary{
      background: transparent;
      border:1px solid rgba(255,255,255,0.06);
      color:var(--text-color);
    }

    .verify-btn{
      min-width:110px;
      display:inline-flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      font-size:13px;
    }

    .verify-btn.pending{
      background: linear-gradient(180deg,#444,#333);
      cursor:default;
      opacity:0.9;
    }

    .small{
      font-size:12px;
      color:var(--muted);
    }

    .muted{
      color:var(--muted);
    }

    .flex-between{
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .password-row{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .toggle{
      background:transparent;
      border:1px solid rgba(255,255,255,0.04);
      color:var(--text-color);
      padding:8px 10px;
      border-radius:8px;
      cursor:pointer;
    }

    .meter{
      height:8px;
      background:rgba(255,255,255,0.03);
      border-radius:6px;
      overflow:hidden;
    }

    .meter > i{
      display:block;
      height:100%;
      width:0%;
      background:linear-gradient(90deg,#ff6b6b,#ffd166,#4cd964);
      transition: width .25s ease;
    }

    .terms{
      display:flex;
      gap:10px;
      align-items:flex-start;
      font-size:13px;
      color:var(--muted);
    }

    .socials{
      display:flex;
      gap:8px;
      margin-top:8px;
    }

    .socials button{
      background:transparent;
      border:1px solid rgba(255,255,255,0.04);
      padding:10px;
      border-radius:8px;
      color:var(--text-color);
      min-width:44px;
    }

    .footer-note{
      font-size:12px;
      color:var(--muted);
      margin-top:8px;
    }

    /* Responsive */
    @media (max-width:880px){
      .card{ grid-template-columns: 1fr; }
    }

    /* Accessibility focus */
    button:focus, input:focus { outline: 3px solid rgba(108,156,255,0.12); outline-offset:2px; }

    /* Pending badge */
    .badge{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(255,255,255,0.02);
      color:var(--muted);
      font-size:13px;
      border:1px solid rgba(255,255,255,0.03);
    }

    .hidden{ display:none; }

    /* Button loading spinner */
    @keyframes btn-spin { to { transform: rotate(360deg); } }
    button.loading, .verify-btn.loading {
      position: relative;
      pointer-events: none;
      opacity: 0.85;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    button.loading::after, .verify-btn.loading::after {
      content: '';
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: btn-spin 0.6s linear infinite;
      margin-left: 4px;
    }