/* Lotus Score (js/tools-score.js). Builds on tools.css quiz, panel and kpi styles. */
.ls-sub { margin: -12px 0 20px; color: var(--muted); font-size: 14px; }
.ls-quiz .quiz-opts button > span { display: flex; flex-direction: column; gap: 2px; }
.ls-quiz .quiz-opts button small { font: 400 13px var(--font-body); color: var(--faint); }
.ls-num { max-width: 260px; }
.ls-num input { font-size: 20px; }
.ls-feats { margin-top: 18px; }

.ls-grade { margin: 8px 0 0; font: 500 13px var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.ls-peak { color: #f4f08a; }
.ls-good { color: var(--teal); }
.ls-mid { color: var(--amber); }
.ls-low { color: var(--coral); }
.ls-desc { margin: 0 0 16px; color: #cdd8e8; font-size: 15px; }
.ls-hero .kpis { margin-bottom: 0; }

.ls-radar { width: 100%; height: auto; max-width: 360px; display: block; margin: 0 auto; }
.ls-radar text { font: 500 11px var(--font-body); fill: var(--muted); stroke: none; }
.ls-trend svg { width: 100%; height: auto; display: block; }

.ls-mk .t-hint { font-family: var(--font-mono); font-size: 11px; }
.ls-unit .link-btn { margin-top: 6px; font-size: 12px; color: var(--amber); text-align: left; }
.ls-cov { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.ls-cov b { color: var(--teal); }
.ls-bad { color: var(--coral); min-height: 0; margin: 4px 0 0; }

.score-banner { border-color: rgba(240,168,74,.35); background: linear-gradient(120deg, rgba(240,168,74,.10), rgba(76,195,178,.06)); }
.score-banner .open { color: var(--amber); }
.score-banner:hover { border-color: var(--amber); }

@media (max-width: 560px) {
  .ls-hero .kpis { grid-template-columns: 1fr 1fr; }
}