/* ============================================================================
   style_auth.css — shared look for login / signup / access-denied pages
   Matches the coommit.com landing aesthetic: pure black, dot-grid texture,
   floating light particles, soft purple glow, minimal premium typography.
   ============================================================================ */

.auth-v2 {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "DM Sans", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #e9e7ff;
  background: #05060a;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fine dot grid covering everything — exactly matches the landing.
   Two layers of dots offset from each other for an organic texture. */
.auth-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(rgba(165, 180, 252, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(165, 180, 252, 0.03) 1px, transparent 1px);
  background-size: 32px 32px, 96px 96px;
  background-position: 0 0, 16px 16px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 40%, transparent 95%);
}

/* Ambient purple glow that slowly drifts — adds life without distracting. */
.auth-v2::after {
  content: "";
  position: fixed;
  top: -20%;
  left: 30%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.18) 0%, rgba(99, 102, 241, 0.08) 35%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: auth-glow-drift 18s ease-in-out infinite alternate;
}

@keyframes auth-glow-drift {
  0%   { transform: translate(-10%, -5%) scale(1);    opacity: 0.9; }
  50%  { transform: translate(15%, 10%)  scale(1.08); opacity: 1;   }
  100% { transform: translate(-15%, 8%)  scale(1.05); opacity: 0.85;}
}

/* Floating particles layer — small dots that drift slowly and fade. */
.auth-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.auth-particles .p {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a5b4fc;
  box-shadow: 0 0 8px rgba(165, 180, 252, 0.5);
  opacity: 0;
  will-change: transform, opacity;
}
/* 20 particles with staggered animations for organic motion */
.auth-particles .p:nth-child(1)  { left: 8%;  top: 20%; animation: auth-p1 14s ease-in-out 0s    infinite; }
.auth-particles .p:nth-child(2)  { left: 85%; top: 65%; animation: auth-p2 18s ease-in-out 1.5s  infinite; }
.auth-particles .p:nth-child(3)  { left: 22%; top: 78%; animation: auth-p1 16s ease-in-out 3s    infinite; }
.auth-particles .p:nth-child(4)  { left: 65%; top: 15%; animation: auth-p2 20s ease-in-out 0.8s  infinite; }
.auth-particles .p:nth-child(5)  { left: 12%; top: 55%; animation: auth-p1 22s ease-in-out 2.2s  infinite; }
.auth-particles .p:nth-child(6)  { left: 92%; top: 30%; animation: auth-p2 15s ease-in-out 4s    infinite; }
.auth-particles .p:nth-child(7)  { left: 45%; top: 88%; animation: auth-p1 19s ease-in-out 1s    infinite; }
.auth-particles .p:nth-child(8)  { left: 75%; top: 48%; animation: auth-p2 17s ease-in-out 2.8s  infinite; }
.auth-particles .p:nth-child(9)  { left: 35%; top: 25%; animation: auth-p1 21s ease-in-out 5s    infinite; }
.auth-particles .p:nth-child(10) { left: 58%; top: 72%; animation: auth-p2 16s ease-in-out 3.5s  infinite; }
.auth-particles .p:nth-child(11) { left: 5%;  top: 42%; animation: auth-p1 23s ease-in-out 6s    infinite; }
.auth-particles .p:nth-child(12) { left: 95%; top: 82%; animation: auth-p2 14s ease-in-out 0.3s  infinite; }
.auth-particles .p:nth-child(13) { left: 28%; top: 8%;  animation: auth-p1 20s ease-in-out 4.5s  infinite; }
.auth-particles .p:nth-child(14) { left: 50%; top: 35%; animation: auth-p2 18s ease-in-out 2s    infinite; }
.auth-particles .p:nth-child(15) { left: 72%; top: 92%; animation: auth-p1 15s ease-in-out 5.5s  infinite; }
.auth-particles .p:nth-child(16) { left: 18%; top: 68%; animation: auth-p2 22s ease-in-out 1.2s  infinite; }
.auth-particles .p:nth-child(17) { left: 88%; top: 12%; animation: auth-p1 17s ease-in-out 3.8s  infinite; }
.auth-particles .p:nth-child(18) { left: 40%; top: 60%; animation: auth-p2 19s ease-in-out 0.5s  infinite; }
.auth-particles .p:nth-child(19) { left: 62%; top: 5%;  animation: auth-p1 24s ease-in-out 2.5s  infinite; }
.auth-particles .p:nth-child(20) { left: 2%;  top: 90%; animation: auth-p2 16s ease-in-out 4.2s  infinite; }

@keyframes auth-p1 {
  0%, 100% { transform: translate(0, 0);      opacity: 0; }
  15%      {                                  opacity: 0.7; }
  50%      { transform: translate(40px, -60px); opacity: 0.9; }
  85%      {                                  opacity: 0.5; }
}
@keyframes auth-p2 {
  0%, 100% { transform: translate(0, 0);      opacity: 0; }
  15%      {                                  opacity: 0.6; }
  50%      { transform: translate(-50px, 40px); opacity: 0.85; }
  85%      {                                  opacity: 0.4; }
}

/* The card — subtle glass, barely there, lets the background breathe through.
   Minimal border, generous padding. */
.auth-v2 .auth-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: rgba(14, 13, 24, 0.62);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(165, 180, 252, 0.10);
  border-radius: 20px;
  padding: 44px 36px 34px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  animation: auth-card-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.auth-v2 .auth-head {
  text-align: center;
  margin-bottom: 28px;
}
.auth-v2 .auth-head .logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.auth-v2 .auth-head .logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(139, 92, 246, 0.3));
}
.auth-v2 .auth-head h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.25;
}
.auth-v2 .auth-head h1 .accent {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-v2 .auth-head p {
  font-size: 13.5px;
  color: #8a8aa0;
  line-height: 1.55;
  margin: 0;
}
.auth-v2 .auth-head p strong {
  color: #c4c0e3;
  font-weight: 500;
}

/* Form elements */
.auth-v2 .form-group {
  margin-bottom: 16px;
}
.auth-v2 .form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #a8a3c4;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.auth-v2 .form-input {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 14px; /* right padding reserves space for browser autofill icon */
  background: rgba(22, 20, 40, 0.7);
  border: 1px solid rgba(165, 180, 252, 0.14);
  border-radius: 10px;
  color: #f3f2fb;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.auth-v2 .form-input::placeholder {
  color: #5a5774;
}
/* Override Chrome's yellow autofill background with our dark theme */
.auth-v2 .form-input:-webkit-autofill,
.auth-v2 .form-input:-webkit-autofill:hover,
.auth-v2 .form-input:-webkit-autofill:focus,
.auth-v2 .form-input:-webkit-autofill:active {
  -webkit-text-fill-color: #f3f2fb;
  -webkit-box-shadow: 0 0 0 1000px rgba(30, 26, 56, 0.85) inset;
  caret-color: #f3f2fb;
  transition: background-color 9999s ease-out;
}
.auth-v2 .form-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(30, 26, 56, 0.8);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.auth-v2 .form-input[readonly] {
  background: rgba(99, 102, 241, 0.08);
  cursor: not-allowed;
  color: #c4c0e3;
}
.auth-v2 .form-hint {
  font-size: 11px;
  color: #6a6587;
  margin: 6px 0 0;
}

/* Primary + secondary buttons share these baseline shape rules so they
   line up perfectly when stacked. Only background / border / color differ. */
.auth-v2 .btn-primary,
.auth-v2 .btn-secondary {
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.auth-v2 .btn-primary {
  background: linear-gradient(180deg, #6366f1 0%, #5457e0 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 4px 14px rgba(99, 102, 241, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.auth-v2 .btn-primary:hover {
  background: linear-gradient(180deg, #7073f3 0%, #5c5fe6 100%);
  box-shadow:
    0 6px 20px rgba(99, 102, 241, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.auth-v2 .btn-primary:active { transform: translateY(1px); }
.auth-v2 .btn-primary:disabled { opacity: 0.6; cursor: wait; }
.auth-v2 .btn-secondary {
  background: transparent;
  color: #c4c0e3;
  border: 1px solid rgba(165, 180, 252, 0.22);
}
.auth-v2 .btn-secondary:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(165, 180, 252, 0.4);
  color: #e9e7ff;
}

/* OAuth buttons */
.auth-v2 .oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.auth-v2 .btn-oauth {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: rgba(22, 20, 40, 0.5);
  border: 1px solid rgba(165, 180, 252, 0.14);
  border-radius: 10px;
  color: #e9e7ff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.auth-v2 .btn-oauth:hover {
  background: rgba(30, 26, 56, 0.7);
  border-color: rgba(165, 180, 252, 0.3);
}

.auth-v2 .auth-divider {
  text-align: center;
  margin: 22px 0;
  position: relative;
  color: #5a5774;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.auth-v2 .auth-divider::before,
.auth-v2 .auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165, 180, 252, 0.15));
}
.auth-v2 .auth-divider::before { left: 0; }
.auth-v2 .auth-divider::after  { right: 0; background: linear-gradient(270deg, transparent, rgba(165, 180, 252, 0.15)); }

/* Status messages */
.auth-v2 .auth-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 20px;
}
.auth-v2 .auth-success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: #86efac;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 20px;
}
.auth-v2 .auth-info {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 20px;
}

/* Footer link */
.auth-v2 .auth-footer {
  text-align: center;
  margin-top: 26px;
  font-size: 13px;
  color: #7a7595;
}
.auth-v2 .auth-footer a {
  color: #a5b4fc;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.auth-v2 .auth-footer a:hover { color: #c4b5fd; }

/* Lock icon circle for access-denied pages */
.auth-v2 .status-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.28) 0%, rgba(99, 102, 241, 0.12) 55%, transparent 80%);
}
.auth-v2 .status-icon svg {
  width: 30px;
  height: 30px;
  stroke: #a5b4fc;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stacked CTAs on access-denied */
.auth-v2 .cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-v2 .cta-stack form { margin: 0; }

/* Reduced motion: kill particles + glow drift for users who prefer that */
@media (prefers-reduced-motion: reduce) {
  .auth-v2::after,
  .auth-particles .p { animation: none !important; }
}