:root {
  --bg: #f4f7ff;
  --panel: #ffffff;
  --text: #14213d;
  --muted: #60708f;
  --accent: #2563eb;
  --border: #dfe8ff;
  --shadow: 0 24px 70px rgba(20, 33, 61, 0.08);
}

body {
  margin: 0 !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%) !important;
  color: var(--text) !important;
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
}

.checker-card {
  width: min(620px, 100%) !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow) !important;
  padding: 28px !important;
}

h1 {
  margin-top: 0 !important;
  font-size: 1.7rem !important;
}

p {
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

input {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  font-size: 1rem !important;
  margin-top: 8px !important;
}

.meter-track {
  width: 100% !important;
  height: 14px !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  background: #e8f0ff !important;
  overflow: hidden !important;
}

.meter-fill {
  width: 0% !important;
  height: 100% !important;
  background: var(--accent) !important;
  border-radius: 999px !important;
  transition: width 0.25s ease, background 0.25s ease !important;
}

.meter-fill.strength-weak {
  background: #ef4444 !important;
}

.meter-fill.strength-moderate {
  background: #f59e0b !important;
}

.meter-fill.strength-strong {
  background: #10b981 !important;
}

.strength-text {
  display: inline-block !important;
  margin-top: 12px !important;
  font-weight: 700 !important;
}

.strength-text.strength-weak {
  color: #ef4444 !important;
}

.strength-text.strength-moderate {
  color: #f59e0b !important;
}

.strength-text.strength-strong {
  color: #10b981 !important;
}

.strength-text.strength-empty {
  color: var(--muted) !important;
}

meter {
  display: none !important;
}

.results {
  margin-top: 14px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

#strength-feedback {
  margin-top: 14px !important;
  padding-left: 18px !important;
  color: var(--muted) !important;
}

#strength-feedback li {
  margin-bottom: 8px !important;
}

.site-footer {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--border) !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: 0.95rem !important;
}

.site-footer p {
  margin: 4px 0 !important;
}

.links {
  margin-top: 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.links a {
  text-decoration: none !important;
  color: var(--accent) !important;
  background: #eff6ff !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}