/* Base */
  body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

  /* Card look */
  .glass { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); }
  .soft { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

  /* Rounded + border */
  .rounded-xl { border-radius: 0.75rem; }
  .rounded-2xl { border-radius: 1rem; }
  .chip { border: 1px solid rgba(0,0,0,0.08); }

  /* Text colors */
  .text-slate-900 { color: #0f172a; }
  .text-slate-800 { color: #1e293b; }
  .text-slate-700 { color: #334155; }
  .text-slate-600 { color: #475569; }
  .text-slate-500 { color: #64748b; }

  /* Buttons */
  button { cursor: pointer; transition: background 0.2s, transform 0.1s; }
  button:hover { transform: translateY(-1px); }
  .bg-slate-900 { background: #0f172a; }
  .bg-white { background: #fff; }
  .text-white { color: #fff; }
  .soft:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); }

        /* Inputs with gradient glow */
input, select, textarea {
  border: 2px solid transparent;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-image:
    linear-gradient(#fff, #fff),                /* inner background */
    linear-gradient(90deg, #8b5cf6, #3b82f6); /* outer gradient border */
  transition: box-shadow .3s ease, border-color .3s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow:
  -2px -2px 6px 1px rgba(139, 92, 246, 0.5),  /* softer purple top-left */
   2px  2px 8px 2px rgba(59, 130, 246, 0.5);  /* softer blue bottom-right */
    
}
        
  /* Theme variables */
  :root{
    --ink:        #0f172a;
    --progA:      hsl(220 90% 56%);
    --progB:      hsl(260 90% 56%);
    --tab-on:     #f5f7fb;
    --tab-border: rgba(15,23,42,.12);
  }

  /* Progress bar (animated gradient) */
  #suBar{
    background: linear-gradient(90deg, var(--progA), var(--progB));
    transition: width .4s ease, background .6s ease;
  }
  .progress>i{
    background: linear-gradient(90deg, var(--progA), var(--progB));
    transition: transform .4s ease, background .6s ease;
  }

  /* --- Signup gradient hero --- */
  .signup-hero{ position: relative; padding: 5rem 1rem 3rem; overflow: hidden; min-height: 100vh; }
  .signup-hero .signup-bg{
    position: absolute; inset: -20% -10% -10% -10%;
      
       background:
    radial-gradient(70% 60% at 85% 20%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(45deg, #8b5cf6, #3b82f6); /* purple → blue */
      
        /* ---
    background:
      radial-gradient(70% 60% at 85% 20%, rgba(255,255,255,.35), transparent 60%),
      linear-gradient(5deg, #ff6a88 0%, #ff8e53 50%, #ffa559 100%);
       --- */
      
    filter: blur(20px);
    transform: scale(1.1);
    z-index: 0;
  }
  .signup-hero .signup-messages{
    position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 2; text-align: center; pointer-events: none;
  }
        
        
  .signup-hero .signup-messages .msg{
    position: absolute; left: 50%; transform: translateX(-50%);
    color: #fff; font-weight: 700; letter-spacing: .2px;
    text-shadow: 0 2px 18px rgba(0,0,0,.25); opacity: 0; transition: opacity .6s ease;
    font-size: clamp(.9rem, 2vw, 1.1rem); white-space: nowrap;
  }
  .signup-hero .signup-messages .msg.active { opacity: 1; }
  .signup-hero .signup-inner{ position: relative; z-index: 1; }
  .signup-hero::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(120% 75% at 50% 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.08) 100%);
    pointer-events:none;
  }

        
        
        

        
        
        
        
/* === Gradient outline for key inputs (email, name, password) === */
#suForm input[type="email"],
#suForm input[type="text"],
#suForm input[type="password"] {
  border: 2px solid transparent;
  border-radius: 0.75rem; /* matches rounded-xl */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--progA), var(--progB)) border-box;
  transition: background .2s ease, border-color .2s ease;
}

/* Focus state: keep gradient border, just a subtle glow */
#suForm input[type="email"]:focus,
#suForm input[type="text"]:focus,
#suForm input[type="password"]:focus {
  outline: none;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--progA), var(--progB)) border-box;
  box-shadow: 0 0 6px rgba(123, 97, 255, 0.25); /* soft glow matching gradient */
}
        
        /* Override the black focus frame + chip border on signup inputs */
#suForm input:focus,
#suForm select:focus,
#suForm textarea:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* .chip adds a 1px gray border—neutralize it for our gradient look */
#suForm input.chip,
#suForm select.chip,
#suForm textarea.chip {
  border-color: transparent !important;
}

/* Keep the gradient outline (normal + focus) */
#suForm input[type="email"],
#suForm input[type="text"],
#suForm input[type="password"]{
  border: 2px solid transparent;
  border-radius: 0.75rem;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--progA), var(--progB)) border-box;
}

#suForm input[type="email"]:focus,
#suForm input[type="text"]:focus,
#suForm input[type="password"]:focus{
  outline: none;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--progA), var(--progB)) border-box;
  /* optional subtle glow; remove if you want zero glow */
  box-shadow: 0 0 6px rgba(123,97,255,.22);
}
      
        
        
        
:root{
  --a: hsl(220 90% 56%);
  --b: hsl(260 90% 56%);
  --rail: linear-gradient(90deg, var(--a), var(--b));
}

#suStepbar .sb-wrap{
  position: relative;
  height: 32px;
  display: grid;
  align-items: center;
}

#suStepbar .sb-rail{
  position:absolute; inset:0;
  border-radius:9999px;
  background: var(--rail);
  opacity:.14;
  filter: blur(6px);
}

#suStepbar .sb-bar{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  border-radius:9999px;
  background: var(--rail);
  opacity:.28;
  transition: width .35s ease;
}

#suStepbar .sb-dots{
  position: relative;
  display:flex; gap:10px; justify-content:center;
}

#suStepbar .sb-dot{
  width:22px; height:22px; line-height:22px;
  border-radius:9999px;
  font-size:11px; font-weight:700;
  color:#475569; background:#fff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  transition: transform .15s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}
#suStepbar .sb-dot:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(2,6,23,.08); }

#suStepbar .sb-dot.is-active{
  color:#fff; background: var(--rail); border-color: transparent;
  box-shadow: 0 6px 16px rgba(2,6,23,.12);
}