/* Shared signup flow styles — used by signup-plan.html, signup-region.html, signup-account.html.
   Extracted per Bug #121 to eliminate CSS duplication across 3 templates.
   Page-specific styles (tier tabs, plan cards, region cards) remain inline. */

@layer base {
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#060b16;color:#e2e8f0;font-family:'Inter',system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
.font-display{font-family:'Chakra Petch',sans-serif;letter-spacing:-0.01em}
::selection{background:rgba(59,130,246,0.3)}

/* Animated gradient orbs */
.orb{position:fixed;border-radius:50%;filter:blur(100px);opacity:0.4;pointer-events:none;will-change:transform;z-index:0}
.orb-1{top:-15%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,#3B82F6 0%,transparent 70%);animation:float1 24s ease-in-out infinite}
.orb-2{bottom:-15%;right:-10%;width:700px;height:700px;background:radial-gradient(circle,#06B6D4 0%,transparent 70%);animation:float2 30s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(100px,80px) scale(1.15)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-100px) scale(1.1)}}

/* Grid overlay */
.grid-overlay{position:fixed;inset:0;background-image:linear-gradient(rgba(59,130,246,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);z-index:0}

/* Pulsing logo glow */
.logo-glow{filter:drop-shadow(0 0 20px rgba(59,130,246,0.4)) drop-shadow(0 0 40px rgba(59,130,246,0.2));animation:logoPulse 4s ease-in-out infinite}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 20px rgba(59,130,246,0.4)) drop-shadow(0 0 40px rgba(59,130,246,0.2))}50%{filter:drop-shadow(0 0 28px rgba(59,130,246,0.6)) drop-shadow(0 0 56px rgba(59,130,246,0.3))}}

/* Entry animation */
.entry{opacity:0;transform:translateY(16px);animation:entry 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
.entry-1{animation-delay:0.05s}
.entry-2{animation-delay:0.12s}
.entry-3{animation-delay:0.19s}
.entry-4{animation-delay:0.26s}
@keyframes entry{to{opacity:1;transform:translateY(0)}}

/* Stepper */
.stepper-item{display:flex;align-items:center;gap:0.6rem}
.stepper-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);color:#64748b;font-weight:700;font-size:0.8rem;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
.stepper-circle.active{background:linear-gradient(135deg,#2563EB,#3B82F6);border-color:#3B82F6;color:#fff;box-shadow:0 0 0 4px rgba(59,130,246,0.12),0 0 20px rgba(59,130,246,0.4)}
.stepper-circle.done{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.4);color:#3B82F6}
.stepper-circle.done span{display:none}
.stepper-circle.done::after{content:'\2713';font-size:1rem}
.stepper-line{flex:0 0 48px;height:2px;background:rgba(255,255,255,0.08);margin:0 0.25rem;position:relative;overflow:hidden}
.stepper-line.active::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#2563EB,#3B82F6);animation:lineFill 0.6s ease forwards}
@keyframes lineFill{from{width:0}to{width:100%}}

/* Form card with animated gradient border */
.form-wrap{position:relative;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(59,130,246,0.5),rgba(6,182,212,0.2),rgba(139,92,246,0.4),rgba(59,130,246,0.5));background-size:300% 300%;animation:borderShift 10s ease infinite}
@keyframes borderShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.form-card{background:rgba(15,22,41,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:15px;padding:2rem}

/* Inputs */
.field label{display:block;font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.5rem}
.field input{width:100%;padding:0.75rem 1rem;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);color:#fff;font-size:0.875rem;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);font-family:inherit}
.field input::placeholder{color:#475569}
.field input:focus{outline:none;background:rgba(255,255,255,0.05);border-color:rgba(59,130,246,0.5);box-shadow:0 0 0 3px rgba(59,130,246,0.1),0 0 24px rgba(59,130,246,0.15)}

/* Shimmer button */
.btn-primary{position:relative;overflow:hidden;width:100%;padding:0.875rem 1rem;border-radius:10px;background:linear-gradient(135deg,#2563EB 0%,#3B82F6 50%,#2563EB 100%);background-size:200% 100%;color:#fff;font-size:0.875rem;font-weight:600;border:none;cursor:pointer;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);box-shadow:0 8px 24px -6px rgba(37,99,235,0.5),0 0 0 1px rgba(59,130,246,0.3) inset;font-family:inherit}
.btn-primary:hover:not(:disabled){background-position:100% 0;transform:translateY(-1px);box-shadow:0 12px 32px -6px rgba(37,99,235,0.6),0 0 0 1px rgba(59,130,246,0.5) inset}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;background:rgba(59,130,246,0.3);box-shadow:none}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.7s}
.btn-primary:hover:not(:disabled)::before{left:100%}
} /* end @layer base */