/*
 * Juniper Analyze — auth screens (sign in / sign up / 2FA).
 * Liquid-glass, light-only, matching the estate. The glass capsule inputs and
 * buttons and the floating gradient mesh are adapted from a 21st.dev
 * glassmorphism auth component, retuned to the Analyze palette.
 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #0b1428;
  background: #e6ecf9;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* floating pastel mesh */
.mesh { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.mesh svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.brandmark {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; gap: 10px;
}
.brandmark .dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #3257ec 0%, #14b8a6 55%, #c81e1e 100%);
  box-shadow: 0 4px 14px -4px rgba(50, 87, 236, .5);
}
.brandmark strong { font-size: 15px; letter-spacing: -.01em; }
.brandmark span { color: #5d6c87; font-size: 13px; }

/* card */
.auth-wrap { position: relative; z-index: 2; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 100%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 26px;
  box-shadow: 0 30px 70px -22px rgba(20,32,70,.38), 0 8px 22px -12px rgba(20,32,70,.2);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  padding: 34px 30px 30px;
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.auth-head p { margin: 0; color: #5d6c87; font-size: 13.5px; line-height: 1.5; }

.step { display: none; animation: rise .34s cubic-bezier(.25,1,.5,1); }
.step.on { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12px; font-weight: 600; color: #5d6c87; margin: 0 0 6px 4px; }

/* glass capsule input */
.glass-input {
  display: flex; align-items: center; gap: 8px;
  border-radius: 14px; padding: 2px 6px 2px 12px;
  background: linear-gradient(-75deg, rgba(255,255,255,.5), rgba(255,255,255,.8), rgba(255,255,255,.5));
  border: 1px solid #d7e2f1;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.8), 0 2px 6px -3px rgba(20,32,70,.18);
  transition: border-color .2s, box-shadow .2s;
}
.glass-input:focus-within { border-color: #bccefb; box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 0 0 3px rgba(50,87,236,.14); }
.glass-input svg { width: 18px; height: 18px; color: #909eb8; flex: 0 0 auto; }
.glass-input input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: #0b1428; padding: 11px 4px 11px 0;
}
.glass-input input::placeholder { color: #909eb8; }
.eye { background: none; border: none; cursor: pointer; color: #909eb8; padding: 6px; display: grid; place-items: center; border-radius: 8px; }
.eye:hover { color: #33405a; }

/* primary glass button */
.gbtn {
  width: 100%; border: none; cursor: pointer; font: inherit; font-weight: 650; font-size: 15px;
  color: #fff; border-radius: 14px; padding: 13px 18px; margin-top: 6px;
  background: linear-gradient(135deg, #3257ec 0%, #4d6bff 100%);
  box-shadow: 0 10px 22px -10px rgba(50,87,236,.7), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s, box-shadow .2s, opacity .2s;
}
.gbtn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(50,87,236,.75); }
.gbtn:active { transform: translateY(0) scale(.99); }
.gbtn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.gbtn.ghost { background: rgba(255,255,255,.7); color: #33405a; box-shadow: inset 0 0 0 1px #d7e2f1; }

.linkbtn { background: none; border: none; cursor: pointer; color: #1f3fd0; font: inherit; font-size: 13px; font-weight: 600; padding: 4px; }
.linkbtn:hover { text-decoration: underline; }
.muted { color: #5d6c87; font-size: 13px; }
.alt { text-align: center; margin-top: 18px; font-size: 13px; color: #5d6c87; }

.msg { display: none; margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.msg.show { display: block; }
.msg.err { background: #fdeded; border: 1px solid #f6c7c7; color: #b3161b; }
.msg.ok  { background: #e6fbf2; border: 1px solid #a9e9cd; color: #026344; }

/* 2FA enrollment */
.enroll-grid { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.qr-box { background: #fff; padding: 12px; border-radius: 16px; border: 1px solid #e8f0fb; box-shadow: 0 6px 16px -10px rgba(20,32,70,.3); }
.qr-box svg { display: block; width: 190px; height: 190px; }
.secret {
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .06em;
  background: #f6f8fd; border: 1px solid #e8f0fb; border-radius: 10px; padding: 9px 12px;
  word-break: break-all; text-align: center; color: #33405a; width: 100%;
}
.enroll-steps { font-size: 13px; color: #5d6c87; line-height: 1.6; margin: 0; padding-left: 18px; }

/* OTP inputs */
.otp { display: flex; gap: 9px; justify-content: center; margin: 6px 0 14px; }
.otp input {
  width: 46px; height: 56px; text-align: center; font-size: 24px; font-weight: 650;
  border-radius: 13px; border: 1px solid #d7e2f1; background: rgba(255,255,255,.7);
  color: #0b1428; outline: none; transition: border-color .15s, box-shadow .15s;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.8);
}
.otp input:focus { border-color: #bccefb; box-shadow: 0 0 0 3px rgba(50,87,236,.16); }

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -3px; }
@keyframes sp { to { transform: rotate(360deg); } }

.foot-note { text-align: center; margin-top: 18px; font-size: 11.5px; color: #909eb8; }

@media (max-width: 440px) {
  .auth-card { padding: 26px 20px 22px; border-radius: 22px; }
  .otp input { width: 40px; height: 50px; font-size: 21px; }
}