body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem 0; }
  .bg-deco { position:fixed; inset:0; z-index:0; overflow:hidden;
    background: radial-gradient(ellipse at 80% 20%, rgba(62,207,207,.06) 0%, transparent 55%),
                radial-gradient(ellipse at 10% 80%, rgba(201,168,76,.07) 0%, transparent 55%); }
  .bg-grid { position:absolute; inset:0;
    background-image: linear-gradient(var(--border) 1px, transparent 1px),
                      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 40px 40px; opacity:.25; }
  .bg-orb1 { position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle, rgba(62,207,207,.09) 0%, transparent 70%);
    top:-150px; right:-100px; animation:float 9s ease-in-out infinite; }
  .bg-orb2 { position:absolute; width:350px; height:350px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
    bottom:-100px; left:-80px; animation:float 11s ease-in-out infinite reverse; }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

  .signup-wrap { position:relative; z-index:1; width:100%; max-width:500px; padding:1rem; animation:fadeUp .45s ease both; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

  .signup-card {
    background:var(--card); border:1px solid var(--border); border-radius:24px;
    padding:2.25rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.07);
  }

  .signup-logo { text-align:center; margin-bottom:1.75rem; }
  .signup-logo .logo-icon {
    width:88px; height:88px;
    display:block; margin:0 auto .5rem;
    object-fit:contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  }
  .signup-logo h1 { font-size:1.4rem; color:var(--gold); font-family:'Playfair Display',serif; }
  .signup-logo p  { font-size:.78rem; color:var(--text3); letter-spacing:.05em; text-transform:uppercase; }

  /* Steps */
  .steps { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:1.75rem; }
  .step-dot {
    width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center; font-size:.72rem; font-weight:700;
    border:2px solid var(--border); color:var(--text3); transition:all .25s;
  }
  .step-dot.active { background:var(--gold); border-color:var(--gold); color:#000; }
  .step-dot.done   { background:var(--green); border-color:var(--green); color:#000; }
  .step-line { flex:1; height:2px; background:var(--border); max-width:50px; border-radius:1px; transition:background .3s; }
  .step-line.done { background:var(--green); }

  /* Role selector */
  .role-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; }
  .role-btn {
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
    padding:.9rem .5rem; background:var(--bg3); border:2px solid var(--border);
    border-radius:var(--radius); cursor:pointer; transition:all var(--transition);
    font-family:'DM Sans',sans-serif;
  }
  .role-btn:hover { border-color:var(--gold); }
  .role-btn.active { border-color:var(--gold); background:var(--gold-dim); }
  .role-btn .ri { font-size:1.6rem; }
  .role-btn .rn { font-size:.82rem; font-weight:700; color:var(--text2); }
  .role-btn .rd { font-size:.68rem; color:var(--text3); text-align:center; line-height:1.3; }
  .role-btn.active .rn { color:var(--gold); }

  /* Form fields */
  .fields { display:flex; flex-direction:column; gap:.95rem; }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
  @media(max-width:480px){ .row2{grid-template-columns:1fr;} }
  .input-wrap { position:relative; }
  .ii { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--text3); pointer-events:none; }
  .input-wrap .input { padding-left:2.3rem; }
  .eye { position:absolute; right:.9rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text3); cursor:pointer; font-size:.9rem; padding:.2rem; }
  .eye:hover { color:var(--text); }

  /* Strength bar */
  .sbar { display:flex; gap:.25rem; margin-top:.35rem; }
  .sseg { flex:1; height:4px; border-radius:2px; background:var(--border); transition:background .3s; }
  .slabel { font-size:.72rem; color:var(--text3); margin-top:.2rem; }

  /* Conditional fields */
  .field-hidden { display:none !important; }
  .field-show   { display:flex !important; flex-direction:column; gap:.5rem; }

  /* Info box */
  .info-box {
    background:var(--bg3); border:1px solid var(--border);
    border-radius:var(--radius); padding:.75rem 1rem;
    font-size:.78rem; color:var(--text3); display:flex; gap:.5rem; align-items:flex-start;
  }

  /* Confirm summary */
  .summary {
    background:var(--bg3); border:1px solid var(--border);
    border-radius:var(--radius); padding:1rem; margin-bottom:1.25rem;
    display:flex; flex-direction:column; gap:.6rem;
  }
  .summary-row { display:flex; justify-content:space-between; font-size:.84rem; }
  .summary-row span:first-child { color:var(--text3); }
  .summary-row span:last-child  { font-weight:600; }

  /* Checkbox */
  .check-row { display:flex; align-items:flex-start; gap:.65rem; font-size:.82rem; color:var(--text2); cursor:pointer; }
  .check-row input { accent-color:var(--gold); width:16px; height:16px; flex-shrink:0; margin-top:.1rem; }

  /* Error */
  .err-msg {
    background:rgba(224,82,82,.1); border:1px solid rgba(224,82,82,.3);
    border-radius:var(--radius); padding:.6rem 1rem; font-size:.82rem; color:var(--red); display:none;
  }
  .err-msg.show { display:block; }

  /* Admin badge */
  .admin-banner {
    background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.3);
    border-radius:var(--radius); padding:.65rem 1rem;
    font-size:.82rem; color:#c084fc; display:none;
    align-items:center; gap:.5rem;
  }

  .login-link { text-align:center; margin-top:1.25rem; font-size:.83rem; color:var(--text3); }
  .login-link a { color:var(--gold); font-weight:600; }

  @keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }