.shortlist { max-width: 940px; margin-inline:auto; width:100%; }
.shortlist [hidden] { display:none!important; }
.shortlist-steps { display:flex; gap:10px; padding:0; list-style:none; margin:24px 0; }
.shortlist-steps li { flex:1; padding:12px 8px; border-bottom:3px solid #d8ddea; color:#526078; }
.shortlist-steps [aria-current] { border-color:#4555bd; color:#26378c; font-weight:700; }
.shortlist-inputs { display:grid; gap:12px; margin:20px 0; }
.shortlist-input-row { display:flex; align-items:center; gap:12px; }
.shortlist-input-row label { flex:1; display:flex; align-items:center; gap:12px; font-weight:700; }
.shortlist input[type=text], .shortlist textarea, .shortlist select { padding:12px; border:1px solid #aeb8ce; border-radius:9px; width:100%; min-width:0; background:#fff; color:#17233d; }
.shortlist-input-row label span { white-space:nowrap; }
.shortlist button { min-height:44px; }
.shortlist button:focus-visible, .shortlist input:focus-visible, .shortlist select:focus-visible, .shortlist summary:focus-visible { outline:3px solid #bd8500; outline-offset:3px; }
.shortlist-input-row button, .shortlist-summary button { border:0; background:transparent; color:#344aa9; text-decoration:underline; padding:8px; }
.shortlist-paste { margin:20px 0; }
.shortlist-paste textarea { display:block; margin:10px 0; }
.shortlist-options { display:flex; gap:12px; margin:20px 0; }
.shortlist-options label { flex:1; display:flex; align-items:center; justify-content:center; gap:12px; }
.shortlist-options label, .shortlist-modes label { border:2px solid #d8ddea; border-radius:12px; padding:18px; cursor:pointer; background:#fff; }
.shortlist label:has(input:checked) { background:#f0f2ff; border-color:#4555bd; }
.shortlist label:has(input:disabled) { opacity:.5; }
.shortlist input[type=radio], .shortlist input[type=checkbox] { width:20px; height:20px; flex-shrink:0; accent-color:#4555bd; }
.shortlist-modes { display:grid; gap:12px; }
.shortlist-modes label { display:flex; align-items:start; gap:14px; }
.shortlist-modes strong, .shortlist-modes span span { display:block; }
.shortlist-modes span span { margin-top:6px; color:#53617a; }
.shortlist small { display:inline-block; font-size:.8rem; color:#344aa9; }
.shortlist [data-custom-options] { padding:18px 0; }
.shortlist-footer { position:sticky; bottom:10px; background:#f7f8ff; border:1px solid #d8ddea; border-radius:12px; padding:16px; margin-top:24px; z-index:2; box-shadow:0 4px 18px #1b254013; }
.shortlist-summary { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.shortlist-summary span { flex-basis:100%; font-weight:700; }
.shortlist-navigation { display:flex; gap:12px; margin-top:10px; }
.shortlist-navigation .analyze-button { flex:1; border:0; }
.shortlist [data-shortlist-error] { color:#a62929; margin-top:16px; }
.shortlist-result-card { margin:16px 0; border:1px solid #d8ddea; border-radius:12px; padding:20px; }
.shortlist-result-card:first-of-type { border:2px solid #4555bd; }
.shortlist-result-card .recommend-balls { flex-wrap:wrap; margin:16px 0; }
.shortlist-result-card details { margin:12px 0; }
.shortlist [data-saved-options] { background:#f7f8ff; padding:16px; margin-top:12px; max-height:320px; overflow:auto; }
.shortlist [data-saved-options] label { display:flex; align-items:center; gap:12px; padding:10px 0; }
@media(max-width:540px) { .shortlist-input-row { gap:4px; } .shortlist-input-row label { gap:6px; } .shortlist-options label { padding:14px 6px; } .shortlist-steps { font-size:.85rem; gap:4px; } .shortlist-footer { bottom:0; padding:12px; } }