.tools-page { max-width: 960px; margin-inline: auto; }
.tool-panel { display: grid; gap: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 20px; }
.tool-inputs { display: grid; gap: 14px; min-width: 0; }
.tool-inputs label { display: grid; gap: 6px; color: var(--text); font-size: 14px; }
.tool-inputs input, .tool-inputs select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.tool-inputs input:focus-visible, .tool-inputs select:focus-visible, .tools-page button:focus-visible, .tools-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tools-page button { cursor: pointer; font: inherit; font-weight: 700; border: 1px solid var(--gold); }
.tools-page button:disabled { opacity: .45; cursor: default; }
.tool-inputs fieldset { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; min-width: 0; }
.tool-inputs legend { color: var(--gold); font-size: 14px; }
.tool-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tool-actions a { font-size: 14px; }
.tool-result { padding: 16px; border-radius: 10px; background: var(--bg-2); border-top: 3px solid var(--gold); min-width: 0; }
.tool-result h2 { font-size: 15px; margin: 0 0 12px; color: var(--muted); }
.tool-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-metrics div { padding-block: 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.tool-metrics span { color: var(--muted); font-size: 13px; display: block; }
.tool-metrics strong { color: var(--gold-2); font-size: clamp(20px, 3vw, 28px); line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tool-result p { font-size: 13px; overflow-wrap: anywhere; }
#tool-error { color: var(--loss); }
.tool-legs { display: grid; gap: 12px; }
.tool-leg { border: 1px solid var(--line); padding: 12px; border-radius: 8px; display: grid; gap: 10px; }
.tool-leg-head { display: flex; justify-content: space-between; align-items: center; }
.tool-leg-head button { background: transparent; color: var(--muted); border-color: var(--line); padding: 4px 10px; border-radius: 6px; }
.tool-actions .check-label { display: flex; align-items: center; }
.tool-actions input[type=checkbox] { width: 20px; min-height: 20px; accent-color: var(--gold); }
.tools-explanation p { max-width: 65ch; }
.tools-faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 12px 16px; }
.tools-faq summary { cursor: pointer; color: var(--gold-2); font-weight: 700; }
.tools-faq p { margin-bottom: 0; }
.tools-note { margin-top: 28px; font-size: 13px; }
.tool-result table { min-width: 420px; font-size: 13px; }
.tool-result th, .tool-result td { padding: 8px; }
.tool-result .score-grid td { background: color-mix(in srgb, var(--gold) calc(var(--heat) * 1%), var(--panel)); }
.tool-result .won { color: var(--win); }.tool-result .lost { color: var(--loss); }
.tools-page [hidden] { display: none !important; }
.tools-page .legacy-worldcup { margin-top: 20px; min-width: 0; }
.legacy-worldcup { --teal: var(--gold); --upset: var(--loss); }
.foot-links { flex-wrap: wrap; }
.foot-links a { white-space: nowrap; }
@media (min-width: 800px) { .tool-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }.tool-result { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; }.tool-inputs { grid-column: 1; grid-row: 1; }.tool-result { grid-column: 2; grid-row: 1; } }
@media (max-width: 420px) { .tool-panel { padding: 12px; }.tool-metrics { gap: 8px; }.tools-page .btn { padding: 10px 12px; } }
@media print { .tool-inputs, .top, .foot, .tool-actions { display: none; }.tool-panel { display: block; }.tool-result { position: static; max-height: none; } }