* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050508;
  font-family: 'Inter', sans-serif;
  color: #e8e8f0;
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(0,255,150,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(0,200,255,0.04) 0%, transparent 50%);
}

.card {
  width: 520px;
  max-width: 95vw;
  background: #0d0d1a;
  border: 1px solid #1a1a2e;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

.logo   { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 4px; color: #444; text-transform: uppercase; margin-bottom: 6px; }
h1      { font-size: 26px; font-weight: 600; margin-bottom: 6px; color: #f0f0ff; }
.desc   { font-size: 14px; color: #555; margin-bottom: 30px; }

/* Input */
.input-wrap { position: relative; margin-bottom: 24px; }
.pw-input {
  width: 100%;
  background: #0a0a15;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 16px 50px 16px 16px;
  color: #e0e0ff;
  font-size: 16px;
  font-family: 'Space Mono', monospace;
  outline: none;
  transition: all 0.3s;
  letter-spacing: 2px;
}
.pw-input:focus { border-color: #333; box-shadow: 0 0 0 3px rgba(0,255,150,0.06); }
.toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  font-size: 18px;
  transition: color 0.2s;
}
.toggle:hover { color: #888; }

/* Strength bars */
.bars   { display: flex; gap: 6px; margin-bottom: 20px; }
.bar    { flex: 1; height: 5px; border-radius: 3px; background: #1a1a1a; transition: all 0.4s ease; }

.strength-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.str-text  { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: color 0.4s; }
.str-score { font-family: 'Space Mono', monospace; font-size: 12px; color: #333; }

/* Criteria grid */
.criteria { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.crit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #0a0a14;
  border: 1px solid #151520;
  font-size: 13px;
  color: #444;
  transition: all 0.3s;
}
.crit.pass { color: #aaa; border-color: #1a2a1a; }
.crit.pass .dot { background: #00ff96; box-shadow: 0 0 8px rgba(0,255,150,0.5); }
.crit .dot { width: 7px; height: 7px; border-radius: 50%; background: #222; flex-shrink: 0; transition: all 0.3s; }

/* Tips */
.tips       { background: #080810; border: 1px solid #181820; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.tips-title { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #333; margin-bottom: 10px; font-weight: 600; }
.tip        { font-size: 13px; color: #404055; margin-bottom: 4px; padding-left: 14px; position: relative; }
.tip::before { content: '→'; position: absolute; left: 0; color: #2a2a40; }

/* Generate button */
.gen-btn {
  width: 100%;
  background: linear-gradient(135deg, #00c875, #00a060);
  border: none;
  border-radius: 12px;
  padding: 14px;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.gen-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,200,120,0.2); }

/* Strength colour states (applied to .bars wrapper) */
.bars.weak   .bar.b1 { background: #ff3a3a; box-shadow: 0 0 8px rgba(255,58,58,0.4); }
.bars.fair   .bar.b1,
.bars.fair   .bar.b2 { background: #ff8c00; box-shadow: 0 0 8px rgba(255,140,0,0.4); }
.bars.good   .bar.b1,
.bars.good   .bar.b2,
.bars.good   .bar.b3 { background: #f0d000; box-shadow: 0 0 8px rgba(240,208,0,0.4); }
.bars.strong .bar    { background: #00ff96; box-shadow: 0 0 8px rgba(0,255,150,0.4); }