.score-dialog,.score-toolbar,.score-comparison { --score-blue:#175ddc; --score-ink:#172033; --score-muted:#596579; --score-surface:#fff; --score-soft:#f4f7fb; --score-line:#dce3ed; color:var(--score-ink); }
html.theme-dark .score-dialog,html.theme-dark .score-toolbar,html.theme-dark .score-comparison { --score-blue:#8ab6ff; --score-ink:#edf3fc; --score-muted:#b0bed2; --score-surface:#151d2b; --score-soft:#1e293b; --score-line:#344156; }
[data-score-toolbar] { margin:20px 0; }
.score-toolbar { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border:1px solid var(--score-line);border-radius:18px;background:var(--score-surface);animation:score-appear .24s ease both; }
.score-toolbar p { margin:6px 0 0;font-size:16px;line-height:1.5;font-weight:650; }
.score-eyebrow { color:var(--score-muted);font-size:12px;letter-spacing:.08em;font-weight:650; }
.score-toolbar-foot { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px;color:#596579;font-size:13px;line-height:1.6; }
html.theme-dark .score-toolbar-foot { color:#b0bed2; }
.score-toolbar-foot label { display:flex;gap:8px;align-items:center;cursor:pointer;min-height:28px; }
.score-toolbar-foot [hidden],.score-dialog [hidden] { display:none!important; }
.score-toolbar-foot input,.score-mybest input { accent-color:#175ddc;width:18px;height:18px; }
.score-button,.score-close { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--score-line);border-radius:12px;background:var(--score-surface);color:var(--score-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;flex-shrink:0; }
.score-button:hover,.score-close:hover { background:var(--score-soft);border-color:var(--score-blue);transform:translateY(-1px); }
.score-button:active,.score-close:active { transform:scale(.97); }
.score-button:focus-visible,.score-close:focus-visible,.score-dialog input:focus-visible,.score-dialog select:focus-visible,.score-toolbar-foot input:focus-visible { outline:2px solid var(--score-blue);outline-offset:3px; }
.score-primary { background:#175ddc;color:#fff;border-color:#175ddc; }
.score-primary:hover { background:#104cb8;color:#fff; }
.score-secondary { color:var(--score-muted); }
.score-icon { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7; }
.score-dialog { width:min(650px,calc(100vw - 32px));max-width:650px;max-height:calc(100dvh - 40px);margin:auto;padding:0;border:1px solid var(--score-line);border-radius:24px;background:var(--score-surface);box-shadow:0 28px 100px #07142b4d;overflow:hidden; }
.score-dialog::backdrop { background:#06122975;backdrop-filter:blur(5px);animation:score-backdrop .22s ease both; }
.score-dialog[open] { animation:score-appear .24s cubic-bezier(.2,.8,.2,1) both; }
.score-dialog.is-closing { animation:score-disappear .16s ease both; }
.score-dialog.is-closing::backdrop { animation:score-backdrop-out .16s ease both; }
.score-dialog form { display:flex;flex-direction:column;max-height:calc(100dvh - 42px); }
.score-dialog-head { display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:26px 28px 20px;border-bottom:1px solid var(--score-line);flex-shrink:0; }
.score-dialog h2 { margin:8px 0;font-size:25px;line-height:1.35;letter-spacing:-.03em; }
.score-dialog h2:focus { outline:none; }
.score-dialog-head p { margin:0;color:var(--score-muted);font-size:14px;line-height:1.6; }
.score-close { min-width:44px;padding:10px;border:0; }
.score-dialog-body { overflow-y:auto;padding:22px 28px;overscroll-behavior:contain; }
.score-section { padding:0;margin:0 0 22px;border:0;min-width:0;animation:score-appear .2s ease both; }
.score-section legend { margin-bottom:12px;padding:0;font-size:15px;font-weight:700; }
.score-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.score-option { position:relative;display:flex;align-items:flex-start;gap:8px;padding:14px 10px;border:1px solid var(--score-line);border-radius:14px;cursor:pointer;min-height:76px;transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.score-option:hover { transform:translateY(-1px);border-color:var(--score-blue); }
.score-option:has(input:checked) { border-color:var(--score-blue);background:var(--score-soft);box-shadow:inset 0 0 0 1px var(--score-blue); }
.score-option input { margin:3px 0 0;accent-color:#175ddc;flex-shrink:0; }
.score-option b { font-size:14px;display:block;line-height:1.5; }
.score-option small { display:block;font-size:11px;line-height:1.5;color:var(--score-muted);margin-top:3px; }
.score-fields { display:grid;gap:12px;margin:16px 0 0; }
.score-fields label { display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;min-width:0; }
.score-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.score-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.score-scores { grid-template-columns:repeat(5,minmax(0,1fr)); }
.score-fields input:not([type=checkbox]),.score-fields select { display:block;width:100%;min-width:0;box-sizing:border-box;min-height:44px;border:1px solid var(--score-line);border-radius:10px;background:var(--score-surface);color:var(--score-ink);padding:10px;font:inherit;font-size:14px;transition:border-color .18s,box-shadow .18s; }
.score-fields input::placeholder { color:var(--score-muted);font-weight:400; }
.score-fields label.score-mybest { flex-direction:row;align-items:center;gap:8px;min-height:44px;align-self:end; }
.score-help { color:var(--score-muted);font-size:12px;line-height:1.8;margin:12px 0 0; }
.score-error { color:#bd2736;padding:12px;border-radius:10px;background:#fff0f0;font-size:14px;line-height:1.6; }
html.theme-dark .score-error { color:#ffafb5;background:#3a1e27; }
.score-dialog-actions { display:flex;justify-content:space-between;gap:12px;padding:18px 28px;border-top:1px solid var(--score-line);background:var(--score-surface);flex-shrink:0; }
.score-comparison { margin:24px 0;padding:24px;border:1px solid var(--score-line);border-radius:18px;background:var(--score-surface);animation:score-appear .24s ease both; }
.score-comparison h2 { margin:6px 0 0;font-size:20px;line-height:1.5; }
.score-pass .score-comparison-head h2 { color:var(--score-blue); }
.score-part { margin-top:20px;padding-top:16px;border-top:1px solid var(--score-line); }
.score-part h3 { margin:0 0 8px;font-size:16px; }
.score-part p { font-size:14px;line-height:1.7;margin:8px 0; }
.score-part a { color:var(--score-blue);font-size:13px; }
.score-table-wrap { overflow-x:auto;margin:12px 0; }
.score-table-wrap table { width:100%;border-collapse:collapse;font-size:13px; }
.score-table-wrap th,.score-table-wrap td { padding:12px 8px;text-align:left;border-bottom:1px solid var(--score-line);white-space:nowrap; }
.score-table-wrap thead { background:var(--score-soft); }
.score-row-verdict { font-size:12px;line-height:1.5;color:#596579; }
.score-row-pass { color:#175ddc; }
/* The shared site skin has body-qualified form/heading rules. Keep this
 * component's semantic palette and touch targets stronger than that skin. */
body.site-visual .score-dialog,body.site-visual .score-toolbar,body.site-visual .score-comparison { background:var(--score-surface);color:var(--score-ink); }
body.site-visual .score-dialog .score-dialog-head,body.site-visual .score-dialog .score-dialog-body { background:var(--score-surface); }
body.site-visual .score-dialog h2,body.site-visual .score-dialog legend,body.site-visual .score-dialog label,body.site-visual .score-dialog .score-option b,body.site-visual .score-toolbar p,body.site-visual .score-comparison h3,body.site-visual .score-part p { color:var(--score-ink); }
body.site-visual .score-dialog .score-eyebrow,body.site-visual .score-dialog .score-dialog-head p,body.site-visual .score-dialog .score-option small,body.site-visual .score-dialog .score-help,body.site-visual .score-comparison .score-help { color:var(--score-muted); }
body.site-visual .score-dialog .score-fields input:not([type=checkbox]),body.site-visual .score-dialog .score-fields select { width:100%;min-height:44px;height:auto;padding:10px;border:1px solid var(--score-line);border-radius:10px;background:var(--score-surface);color:var(--score-ink); }
body.site-visual .score-dialog .score-fields select { appearance:none;-webkit-appearance:none;height:44px;padding-right:30px; }
.score-fields label:has(select) { position:relative; }
.score-select-caret { position:absolute;right:10px;bottom:12px;width:19px;height:19px;color:var(--score-muted);pointer-events:none; }
body.site-visual .score-dialog .score-fields input[type=number] { appearance:textfield;-moz-appearance:textfield; }
body.site-visual .score-dialog input[type=number]::-webkit-inner-spin-button,body.site-visual .score-dialog input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
body.site-visual .score-comparison .score-comparison-head h2 { color:var(--score-ink); }
body.site-visual .score-pass .score-comparison-head h2 { color:var(--score-blue); }
html.theme-dark .score-row-verdict { color:#b0bed2; }
html.theme-dark .score-row-pass { color:#8ab6ff; }
@keyframes score-appear { from { opacity:0;transform:translateY(10px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes score-disappear { to { opacity:0;transform:translateY(6px) scale(.985); } }
@keyframes score-backdrop { from { opacity:0; } to { opacity:1; } }
@keyframes score-backdrop-out { to { opacity:0; } }
@media(max-width:600px) {
 .score-toolbar { padding:16px;gap:12px;align-items:flex-start; }
 .score-toolbar p { font-size:14px; }
 .score-toolbar .score-button { padding:10px 12px;font-size:13px; }
 .score-dialog { border-radius:20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px); }
 .score-dialog form { max-height:calc(100dvh - 26px); }
 .score-dialog-head { padding:20px 18px 16px; }
 .score-dialog h2 { font-size:23px; }
 .score-dialog-body { padding:18px; }
 .score-dialog-actions { padding:16px 18px; }
 .score-scores { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .score-scores label:first-child { grid-column:1/-1; }
 .score-option { padding:12px 8px;gap:6px; }
 .score-option small { font-size:10px; }
 .score-two { grid-template-columns:1fr; }
 .score-comparison { padding:18px; }
}
@media(prefers-reduced-motion:reduce) {
 .score-dialog,.score-dialog::backdrop,.score-toolbar,.score-section,.score-comparison { animation:none!important; }
 .score-dialog *,.score-toolbar * { transition:none!important; }
 .score-button:hover,.score-option:hover,.score-button:active { transform:none; }
}