.scorecard {
  background: var(--paper, var(--ground));
  border: 1px solid var(--rule, rgba(30, 42, 43,.12));
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(30, 42, 43,.08);
  max-width: 520px;
  margin: 0 auto;
}
.scorecard-progress { background: rgba(30, 42, 43,.08); border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: .75rem; }
.scorecard-progress-fill { display: block; height: 100%; background: var(--accent); }
.scorecard-step-count { font: 500 .8rem var(--font-ui); color: var(--mute, var(--ink-2)); margin: 0 0 1rem; letter-spacing: .04em; text-transform: uppercase; }
.scorecard-body h2 { font: 700 1.4rem/1.2 var(--font-display); margin: 0 0 .5rem; }
.scorecard-hint { font: 400 .92rem/1.5 var(--font-ui); color: var(--ink, var(--ink)); opacity: .8; margin: 0 0 1.25rem; }
.scorecard-options { display: grid; gap: .5rem; }
.scorecard-opt {
  display: block; width: 100%; text-align: left;
  background: rgba(255,255,255,.6);
  border: 1.5px solid var(--rule, rgba(30, 42, 43,.15));
  border-radius: 8px;
  padding: .75rem 1rem;
  font: 500 .9rem var(--font-ui);
  color: var(--ink, var(--ink));
  cursor: pointer;
}
.scorecard-opt:hover { border-color: var(--accent); background: rgba(217, 83, 43,.08); }
.scorecard-opt:focus-visible { border-color: var(--accent); background: rgba(217, 83, 43,.08); outline: 2px solid var(--ink, var(--ink)); outline-offset: 2px; }
.score-display { text-align: center; margin: 1.5rem 0; }
.score-circle {
  display: inline-flex; align-items: baseline; justify-content: center;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  margin: 0 auto 1rem;
  position: relative;
}
.score-num { font: 800 4rem/1 var(--font-display); }
.score-of { font: 500 1rem var(--font-ui); opacity: .85; margin-left: .25rem; }
.score-label { font: 700 1.1rem var(--font-ui); margin: 0; }
.scorecard-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.scorecard-trust { font: 400 .75rem var(--font-ui); color: var(--ink-2); opacity: 1; margin: 1.25rem 0 0; text-align: center; }
.faq { border-bottom: 1px solid rgba(30, 42, 43,.12); padding: .5rem 0; }
.faq summary { font: 600 1rem var(--font-ui); cursor: pointer; padding: .35rem 0; }
.faq p { margin: .35rem 0 .75rem; font: 400 .95rem/1.5 var(--font-ui); opacity: .85; }