/* Password Checker — compact, consistent CSS */

:root{
  --bg1:#0b1220;
  --bg2:#0f172a;
  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.18);
  --blue:#60a5fa;
  --blue2:#3b82f6;
  --green:#34d399;
  --cyan:#22d3ee;
  --text:#eaf6ff;
  --muted: rgba(234,246,255,.72);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(ellipse at 70% 20%, rgba(96,165,250,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(52,211,153,.22) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #0b1220 70%, #0f172a 100%);
  overflow-x:hidden;
}

/* Floating background particles (pure CSS) */
.particles{ position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.75; }
.particle{ position:absolute; border-radius:50%; background: rgba(96,165,250,.20); filter: blur(.3px); animation: float 7s ease-in-out infinite; }
.p1{ width:10px; height:10px; left:12%; top:18%; animation-duration:9s; background:rgba(34,211,238,.18); }
.p2{ width:6px; height:6px; left:28%; top:62%; animation-duration:8s; background:rgba(96,165,250,.18); }
.p3{ width:14px; height:14px; left:70%; top:26%; animation-duration:11s; background:rgba(52,211,153,.16); }
.p4{ width:8px; height:8px; left:82%; top:70%; animation-duration:10s; background:rgba(59,130,246,.16); }
.p5{ width:4px; height:4px; left:55%; top:45%; animation-duration:6s; background:rgba(96,165,250,.22); }
@keyframes float{ 0%,100%{ transform: translateY(0) translateX(0); } 50%{ transform: translateY(-18px) translateX(10px); } }

/* Layout */
.main-content{ min-height: 80vh; display:flex; align-items:center; justify-content:center; padding:44px 0; }

/* Sections anchor spacing */
#analyzer,#generator,#about{ scroll-margin-top:92px; }

/* Card (glass) */
.analyzer-card{
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:28px 22px;
  border-radius:26px;
  border:1px solid var(--border);
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(96,165,250,.30), transparent 55%),
    radial-gradient(700px 240px at 95% 10%, rgba(52,211,153,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  box-shadow:
    0 28px 90px rgba(59,130,246,.20),
    0 14px 40px rgba(52,211,153,.10),
    0 1px 14px rgba(255,255,255,.12);
  position:relative;
  overflow:hidden;
}
.analyzer-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(540px 210px at 20% 10%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(520px 220px at 90% 30%, rgba(52,211,153,.18), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.analyzer-card > *{ position:relative; z-index:1; }

.hero-header{ padding-top:6px; }
.hero-title{ font-size: clamp(1.7rem, 2.2vw + 1rem, 2.4rem); font-weight:800; letter-spacing:.2px; }
.hero-subtitle{ color: var(--muted); margin: 6px 0 0; }
.hero-icon{ width:76px; height:76px; margin:0 auto; }
.hero-icon svg{ width:100%; height:100%; }

/* Navbar */
.navbar{ background: rgba(255,255,255,.02) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.navbar .navbar-brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.navbar .nav-link{ color: rgba(234,246,255,.78); font-weight:600; }
.navbar .nav-link:hover{ color: var(--text); }
.navbar .nav-link.active{ color: var(--blue); }
.logo-icon{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background: rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.22); border-radius:12px; }

/* Input group */
.input-wrapper{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
}

#password{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:1.5px solid rgba(96,165,250,.35);
  background: rgba(255,255,255,.10);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(59,130,246,.10);
}
#password::placeholder{ color: rgba(234,246,255,.6); }
#password:focus{
  outline:none;
  border-color: rgba(52,211,153,.85);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 18px 40px rgba(59,130,246,.18);
  background: rgba(255,255,255,.14);
}

.input-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
}
.input-toggle:hover{ border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.12); }

/* Buttons */
.btn-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; }
@media (max-width:420px){ .btn-grid{ grid-template-columns: 1fr; } }

.btn-primary{
  border:none;
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  letter-spacing:.2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--cyan) 40%, var(--blue2) 100%) !important;
  box-shadow: 0 0 26px rgba(52,211,153,.18), 0 0 18px rgba(59,130,246,.16);
}
.btn-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }

.btn-secondary{
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(96,165,250,.35);
  background: rgba(96,165,250,.10) !important;
  color: var(--blue) !important;
}
.btn-secondary:hover{ border-color: rgba(52,211,153,.65); background: rgba(52,211,153,.10) !important; color: var(--text) !important; }

/* Strength meter */
.strength-meter{ margin-top:18px; }
.progress{ height:14px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; overflow:hidden; box-shadow: 0 1px 12px rgba(59,130,246,.10); position:relative; }
.progress-fill{ height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, rgba(52,211,153,1) 0%, rgba(34,211,238,1) 45%, rgba(59,130,246,1) 100%); transition: width .55s cubic-bezier(.77,0,.18,1), background .2s ease; display:block; }
.strength-labels{ display:flex; justify-content:space-between; margin-top:8px; }
.strength-labels .label{ font-size:.9rem; color: rgba(234,246,255,.65); font-weight:700; }


/* Result panel */
#result{
  margin-top:16px;
  min-height:28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.2px;
  color: rgba(186,230,253,.95);
  text-shadow: 0 1px 10px rgba(34,211,238,.10);
}

/* Footer */
.footer{
  margin-top:auto;
  padding:20px 0;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.footer-content{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer a{ color: rgba(96,165,250,.95); text-decoration:none; font-weight:700; }
.footer a:hover{ color: #a7f3d0; }

/* Mobile tweaks */
@media (max-width: 992px){ .main-content{ padding:28px 0; } .analyzer-card{ padding:22px 16px; border-radius:22px; } }