.scores-main { max-width: 900px; }
.scores-main .hero h1 { font-size: clamp(36px,6vw,58px); }
.score-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.score-picker a { flex: 1; text-align: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--green); font-size: 17px; text-decoration: none; }
.score-select { display: block; color: var(--muted); font-size: 16px; margin-top: 22px; }
.score-select select { display: block; width: 100%; font-size: 16px; min-height: 52px; margin-top: 10px; }
.score-extra > summary { cursor: pointer; list-style: none; }
.score-extra > summary::-webkit-details-marker { display: none; }
.score-extra > summary h2 { font: 400 27px Georgia,serif; margin: 8px 0; }
.score-extra > summary span { color: var(--green); font-size: 14px; }
.score-method { margin-top: 20px; border-top: 1px solid var(--line); }
.score-method p, .score-method li { font-size: 16px; line-height: 1.6; color: var(--muted); }
.score-method a { color: var(--green); }
.score-card { margin-bottom: 24px; scroll-margin-top: 20px; }
.score-fields { display: grid; gap: 18px; }
.score-card .field > span { font-size: 16px; }
.score-card select { width: 100%; min-height: 52px; font-size: 16px; }
.score-time { display: block; margin: 20px 0; }
.score-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.score-actions .calculate-button { flex: 1; justify-content: center; }
.score-actions .route-button { margin: 0; min-height: 52px; font-size: 16px; }
.score-check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; margin-top: 22px; }
.score-check input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--green); }
.score-result { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #0a211c; overflow-wrap: anywhere; }
.score-result h3 { font: 400 30px Georgia,serif; margin: 0 0 10px; }
.score-result p, .score-note, .score-reference p, .score-safety p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.score-result p { margin: 8px 0 0; }
.score-reference { border-top: 1px solid var(--line); padding-top: 18px; }
.score-reference summary { cursor: pointer; font-size: 16px; line-height: 1.5; }
.score-reference a { color: var(--green); font-size: 16px; }
.score-table-wrap { overflow-x: auto; margin-top: 16px; }
.score-reference table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; }
.score-reference th, .score-reference td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.score-reference th { min-width: 100px; }
.score-reference td { color: var(--muted); }
.score-reference caption { text-align: left; margin-bottom: 10px; color: var(--green); }
.score-safety { padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.score-safety h2 { font: 400 25px Georgia,serif; }
.score-card :focus-visible, .score-picker a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@media(max-width:600px) { .score-picker { display: none; } .score-result { padding: 16px; } .score-actions .route-button { flex: 0 0 auto; width: auto; } .score-card select { padding-left: 10px; padding-right: 24px; } }