/* Password Strength — tool-specific */
.page { padding: 40px 20px; max-width: 720px; margin: 0 auto; }
.page h1 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.page .subtitle { color: #888; margin-bottom: 20px; font-size: 14px; }

.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
.pw-wrap { display: flex; gap: 8px; }
.pw-wrap input {
  background: #0d0d0d; border: 1px solid #2a2a2a; color: #fff;
  padding: 12px; border-radius: 6px; font-size: 16px;
  font-family: 'SF Mono', monospace; flex: 1;
}
.pw-wrap button {
  background: #0d0d0d; border: 1px solid #2a2a2a; color: #888;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.pw-wrap button:hover { color: #ff4444; border-color: #ff4444; }
.hint { font-size: 12px; color: #666; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.result-block { padding: 16px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px; text-align: center; }
.result-block.highlight { border-color: #ff4444; background: rgba(255, 68, 68, 0.06); }
.result-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.result-value { font-size: 26px; font-weight: 700; color: #fff; font-family: 'SF Mono', monospace; }
.result-sub { font-size: 11px; color: #666; margin-top: 4px; }

.strength {
  display: inline-block; font-size: 13px; font-weight: 600;
  padding: 4px 12px; border-radius: 6px; font-family: -apple-system, sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
}
.strength.veryWeak { background: rgba(255,68,68,0.2); color: #ff4444; }
.strength.weak { background: rgba(255,167,38,0.2); color: #ffa726; }
.strength.fair { background: rgba(255,235,59,0.15); color: #fff176; }
.strength.strong { background: rgba(76,175,80,0.15); color: #66bb6a; }
.strength.veryStrong { background: rgba(76,175,80,0.25); color: #4caf50; font-weight: 700; }

.crack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.crack-block { padding: 14px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 8px; }
.crack-label { font-size: 11px; color: #888; margin-bottom: 6px; }
.crack-time { font-size: 18px; color: #fff; font-family: 'SF Mono', monospace; font-weight: 600; }

.findings { display: flex; flex-direction: column; gap: 6px; }
.finding { font-size: 13px; padding: 8px 12px; border-radius: 6px; }
.finding.warn { background: rgba(255,167,38,0.08); color: #ffa726; border-left: 3px solid #ffa726; }
.finding.bad { background: rgba(255,68,68,0.08); color: #ff6666; border-left: 3px solid #ff4444; }
.finding.ok { background: rgba(76,175,80,0.08); color: #66bb6a; border-left: 3px solid #4caf50; }

@media (max-width: 600px) {
  .page { padding: 24px 12px; }
  .page h1 { font-size: 22px; }
}