/* ── SDPal — Auth & Onboarding Styles ── */

/* ── Layout ── */
.auth-page{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  background:var(--bg-base);
  overflow-y:auto;
}
.auth-card{
  width:100%;max-width:440px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  overflow:hidden;
  animation:authCardIn 0.5s var(--ease) both;
}
/* Override phase system inside auth card — natural height, no absolute positioning */
.auth-card .phase-host{min-height:auto !important;flex:none !important;overflow:visible !important;position:relative}
.auth-card .phase{position:relative !important;inset:auto !important;padding:32px 28px}
.auth-card .phase:not(.active){display:none !important}
.auth-card .phase.active{display:flex;flex-direction:column}
@keyframes authCardIn{from{opacity:0;transform:translateY(12px) scale(0.97)}to{opacity:1;transform:none}}

/* ── Logo ── */
.auth-logo-wrap{
  display:flex;align-items:center;justify-content:center;
  padding:28px 0 0;position:relative;
}
.auth-logo{
  width:56px;height:56px;border-radius:var(--r-md);
  position:relative;z-index:1;
  animation:logoEntrance 0.6s var(--ease-spring) both;
}
.auth-logo-glow{
  position:absolute;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,0.25) 0%,transparent 70%);
  animation:logoGlow 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes logoEntrance{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
@keyframes logoGlow{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.8;transform:scale(1.25)}}

/* ── Header ── */
.auth-header{text-align:center;margin-bottom:24px}
.auth-title{font-size:24px;font-weight:800;letter-spacing:-0.03em;color:var(--text-1);margin:0}
.auth-subtitle{font-size:14px;color:var(--text-2);margin-top:6px;line-height:1.5}

/* ── Progress indicator (3 step dots + lines) ── */
.auth-progress{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:24px}
.auth-progress-step{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text-3);
  transition:all 0.4s var(--ease-spring);
  flex-shrink:0;
}
.auth-progress-step.active{
  background:var(--accent);color:var(--text-inv);
  border-color:var(--accent);
  transform:scale(1.12);
  box-shadow:var(--accent-glow-sm);
}
.auth-progress-step.done{
  background:var(--accent);color:var(--text-inv);
  border-color:var(--accent);
}
.auth-progress-step.done svg{animation:checkIn 0.35s var(--ease-spring) both}
.auth-progress-line{
  width:36px;height:2px;
  background:var(--border);
  transition:background 0.4s var(--ease);
  flex-shrink:0;
}
.auth-progress-line.filled{background:var(--accent)}

/* ── Form ── */
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form input{
  font-family:var(--font);font-size:14px;
  color:var(--text-1);
  background:var(--bg-input);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  padding:12px 14px;outline:none;width:100%;
  transition:border-color 0.2s,background 0.2s,box-shadow 0.2s;
  box-sizing:border-box;
}
.auth-form input:focus{
  border-color:var(--border-focus);
  background:var(--bg-input-focus);
  box-shadow:var(--accent-glow-sm);
}
.auth-form input::placeholder{color:var(--text-3)}

/* ── OR Divider ── */
.auth-divider{
  display:flex;align-items:center;gap:12px;margin:4px 0;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.auth-divider span{
  color:var(--text-3);font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
}

/* ── Error ── */
.auth-error{
  background:var(--danger-dim);
  border:1px solid var(--danger-border);
  color:var(--danger);
  padding:10px 14px;border-radius:var(--r-md);
  font-size:13px;line-height:1.4;
  display:none;
}
.auth-error.visible{display:block}
.auth-error.shake{animation:errorShake 0.4s}
@keyframes errorShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ── OTP Inputs ── */
.auth-otp{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.auth-otp input{
  width:48px;height:56px;text-align:center;
  font-size:24px;font-weight:700;
  font-family:var(--font);
  color:var(--text-1);
  background:var(--bg-input);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  outline:none;padding:0;
  transition:all 0.2s var(--ease-spring);
  box-sizing:border-box;
}
.auth-otp input:focus{
  border-color:var(--border-focus);
  box-shadow:var(--accent-glow-sm);
  transform:translateY(-2px);
}
.auth-otp input.filled{
  border-color:var(--accent-mid);
  background:var(--accent-dim);
}

/* ── Grade Pills ── */
.auth-pills{display:flex;gap:8px;flex-wrap:wrap}
.auth-pill{
  padding:10px 20px;border-radius:var(--r-full);
  background:var(--bg-card);
  border:1.5px solid var(--border);
  color:var(--text-2);font-weight:600;font-size:14px;
  cursor:pointer;
  transition:all 0.2s var(--ease-spring);
  font-family:var(--font);
}
.auth-pill:hover{border-color:var(--border-hover);transform:translateY(-1px)}
.auth-pill:active{transform:scale(0.95)}
.auth-pill.active{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--accent);
  transform:scale(1.05);
  box-shadow:var(--accent-glow-sm);
}

/* ── Password Requirements ── */
.auth-pw-reqs{display:flex;flex-direction:column;gap:3px;padding:0 2px;font-size:12px}
.auth-pw-req{color:var(--text-3);transition:color 0.2s}
.auth-pw-req.pass{color:var(--accent)}
.auth-pw-req::before{content:'';display:inline-block;width:14px;margin-right:4px;text-align:center}
.auth-pw-req.pass::before{content:'\2713'}
.auth-pw-req:not(.pass)::before{content:'\2022'}

/* ── Username Status ── */
.auth-username-status{font-size:12px;margin-top:4px;min-height:18px;transition:color 0.2s}

/* ── Branch Autocomplete ── */
.auth-autocomplete{
  position:absolute;top:100%;left:0;right:0;
  max-height:200px;overflow-y:auto;
  background:var(--bg-3);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  z-index:10;margin-top:4px;
  box-shadow:var(--shadow-lg);
  display:none;
}
.auth-autocomplete.open{display:block}
.auth-autocomplete-item{
  padding:10px 14px;cursor:pointer;
  font-size:13px;
  border-bottom:1px solid var(--border-subtle);
  transition:background 0.15s;
}
.auth-autocomplete-item:hover,.auth-autocomplete-item.highlighted{background:var(--bg-card-hover)}
.auth-autocomplete-item:last-child{border-bottom:none}

/* ── Links ── */
.auth-link{color:var(--accent);text-decoration:none;font-weight:600;transition:opacity 0.15s}
.auth-link:hover{opacity:0.8}

/* ── Success Check (SVG draw) ── */
.auth-success-check{width:80px;height:80px;margin:0 auto 20px}
.auth-success-check circle{
  fill:none;stroke:var(--accent);stroke-width:2;
  stroke-dasharray:166;stroke-dashoffset:166;
  animation:checkCircle 0.6s var(--ease) 0.1s forwards;
}
.auth-success-check path{
  fill:none;stroke:var(--accent);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;
  animation:checkStroke 0.4s var(--ease) 0.5s forwards;
}
@keyframes checkCircle{to{stroke-dashoffset:0}}
@keyframes checkStroke{to{stroke-dashoffset:0}}
@keyframes checkIn{from{opacity:0;transform:scale(0) rotate(-45deg)}to{opacity:1;transform:scale(1) rotate(0)}}

/* ── Button Glow Pulse ── */
.auth-btn-glow{position:relative;overflow:hidden}
.auth-btn-glow::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;
  background:var(--accent);opacity:0;z-index:-1;
  animation:btnGlowPulse 2s ease infinite;
}
@keyframes btnGlowPulse{0%,100%{opacity:0.08;transform:scale(1)}50%{opacity:0.2;transform:scale(1.03)}}

/* ── Onboarding ── */
.onboard-screen{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:12px 0;gap:20px;flex:1;
}
.onboard-icon{position:relative;display:flex;align-items:center;justify-content:center}
.onboard-icon img{width:72px;height:72px;border-radius:var(--r-lg);position:relative;z-index:1}
.onboard-icon .auth-logo-glow{width:110px;height:110px}
.onboard-title{font-size:26px;font-weight:800;letter-spacing:-0.03em;color:var(--text-1);margin:0}
.onboard-subtitle{font-size:14px;color:var(--text-2);max-width:300px;line-height:1.6;margin:0}

/* Feature list */
.onboard-features{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.onboard-feature{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--r-lg);
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  text-align:left;
  opacity:0;transform:translateX(-20px);
  animation:featureIn 0.5s var(--ease-spring) forwards;
}
@keyframes featureIn{to{opacity:1;transform:translateX(0)}}
.onboard-feature-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.onboard-feature-name{font-size:14px;font-weight:700;color:var(--text-1)}
.onboard-feature-desc{font-size:12px;color:var(--text-2);margin-top:2px}

/* Tool choice cards */
.onboard-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:320px}
.onboard-card{
  padding:20px 12px;border-radius:var(--r-lg);
  background:var(--bg-card);border:1.5px solid var(--border);
  cursor:pointer;text-align:center;
  transition:all 0.25s var(--ease-spring);
}
.onboard-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.onboard-card:active{transform:scale(0.96)}
.onboard-card.selected{
  border-color:var(--accent);
  background:var(--accent-dim);
  transform:scale(1.04);
  box-shadow:var(--accent-glow-sm);
}
.onboard-card-icon{font-size:28px;margin-bottom:6px}
.onboard-card-label{font-size:13px;font-weight:600;color:var(--text-1)}

/* Celebration */
.onboard-rank-badge{animation:badgeEntrance 0.8s var(--ease-spring) both}
@keyframes badgeEntrance{0%{opacity:0;transform:scale(0) rotate(-20deg)}60%{transform:scale(1.15) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ── Responsive ── */
@media(max-width:480px){
  .auth-page{padding:12px 8px}
  .auth-card .phase{padding:24px 20px}
  .auth-otp input{width:42px;height:50px;font-size:20px}
  .auth-otp{gap:6px}
  .onboard-title{font-size:22px}
  .onboard-cards{gap:8px}
  .auth-progress-step{width:28px;height:28px;font-size:12px}
  .auth-progress-line{width:28px}
}