* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 980px; }
.hero { margin-top: 24px; }
.hero h1 { margin: 10px 0 8px; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.eyebrow { color: #7dd3fc; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; margin-bottom: 6px; }
.lead { opacity: .88; max-width: 680px; }
.panel, .results article {
  padding: 18px;
  margin-top: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(73, 101, 170, 0.28);
}
.form label { display: block; margin-bottom: 8px; font-weight: 700; }
.input-row { display: flex; gap: 10px; }
input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(138, 175, 220, 0.35);
  background: rgba(10, 20, 36, 0.55);
  color: #f5f8ff;
}
.hint, .state { color: #4b5e86; margin-top: 10px; font-weight: 600; }
.hidden { display: none; }
.score-card { display: flex; justify-content: space-between; align-items: center; }
.score { font-size: 3rem; font-weight: 800; color: #1f2f63; }
.score small { font-size: 1rem; color: #4b5e86; margin-left: 6px; }
.verdict-card h3 { margin: 0 0 6px; color: #1f2f63; font-size: 1.15rem; }
.verdict-card p { margin: 0; color: #2f4376; font-weight: 600; line-height: 1.5; }
.subscore { margin-bottom: 14px; }
.row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #243a78; }
.bar { height: 10px; border-radius: 999px; background: rgba(20, 50, 77, .8); overflow: hidden; }
.fill { height: 100%; background: linear-gradient(90deg, #22d3ee, #3b82f6); }
.sub-meta { color: #4b5e86; font-size: .96rem; font-weight: 600; margin: 6px 0 0; }
.quick-wins { margin: 0; padding-left: 20px; }
.quick-wins li { margin-bottom: 8px; color: #243a78; font-weight: 600; }
.bad { color: #fda4af; }
.good { color: #86efac; }
@media (max-width: 720px) {
  .input-row { flex-direction: column; }
  #submitBtn { width: 100%; justify-content: center; }
}