/* ═══════════════════════════════════════════════════════════════
   CYNO.GG — Luxury Password Strength Meter
   ═══════════════════════════════════════════════════════════════ */

.password-strength {
  margin-top: 0.75rem;
  display: none;
}

.password-strength.is-visible {
  display: block;
  animation: strengthFadeIn 0.3s ease;
}

@keyframes strengthFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.password-strength-bar {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.06));
  overflow: hidden;
  margin-bottom: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}

.password-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Subtle shimmer on the fill */
.password-strength-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.password-strength-fill:not([data-score="0"])::after {
  opacity: 1;
  animation: shimmerSlide 2s ease-in-out infinite;
}

@keyframes shimmerSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Score levels */
.password-strength-fill[data-score="1"] {
  width: 20%;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.password-strength-fill[data-score="2"] {
  width: 40%;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.password-strength-fill[data-score="3"] {
  width: 60%;
  background: linear-gradient(90deg, #eab308, #ca8a04);
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.3);
}

.password-strength-fill[data-score="4"] {
  width: 80%;
  background: linear-gradient(90deg, #10b981, #059669);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.password-strength-fill[data-score="5"] {
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent),
              0 0 40px color-mix(in srgb, var(--accent) 15%, transparent);
}

.password-strength-text {
  font-family: "Sora", "Manrope", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
  margin-bottom: 0.5rem;
}

.password-strength-text[data-score="1"] {
  color: #ef4444;
}

.password-strength-text[data-score="2"] {
  color: #f59e0b;
}

.password-strength-text[data-score="3"] {
  color: #eab308;
}

.password-strength-text[data-score="4"] {
  color: #10b981;
}

.password-strength-text[data-score="5"] {
  color: var(--accent);
}

/* Luxury requirements panel */
.password-requirements {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg) 40%, transparent), color-mix(in srgb, var(--glass-bg-strong) 30%, transparent));
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 50%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--border-inner);
}

.password-requirement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  color: var(--muted);
  padding: 0.25rem 0;
  transition: color 0.3s ease;
}

.password-requirement.is-met {
  color: var(--status-success);
}

.password-requirement-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--glass-border) 40%, transparent);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.password-requirement.is-met .password-requirement-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
  transform: scale(1.1);
}