.weight-section { background: var(--color-paper, #fffdf9); text-align: center; }
.weight-form, .weight-results { max-width: 760px; margin: 28px auto; }
.weight-form fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.weight-form legend { width: 100%; margin-bottom: 18px; font-weight: 600; }
.weight-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.weight-choice { display: flex; align-items: center; gap: 10px; padding: 17px 20px; border: 1px solid var(--color-line, #ddd); border-radius: 18px; cursor: pointer; background: var(--color-cream, #fbf7f1); }
.weight-choice:has(input:checked) { border-color: var(--color-sage-dark, #667664); background: #eaf0e6; }
.weight-choice:focus-within { outline: 2px solid var(--color-sage-dark, #667664); outline-offset: 3px; }
.weight-choice input { accent-color: var(--color-sage-dark, #667664); width: 18px; height: 18px; flex-shrink: 0; }
.weight-form fieldset:disabled .weight-choice { cursor: default; opacity: .7; }
.weight-section button:disabled { opacity: .65; cursor: default; }
.weight-message { min-height: 1.5em; margin: 18px auto; max-width: 700px; }
.weight-results { text-align: left; }
.weight-results h3 { text-align: center; margin-bottom: 24px; }
.weight-row { margin: 16px 0; }
.weight-row-label { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.weight-bar { height: 10px; background: var(--color-cream, #fbf7f1); border-radius: 10px; overflow: hidden; }
.weight-bar span { display: block; height: 100%; background: var(--color-sage-dark, #667664); border-radius: inherit; }
.weight-total { text-align: center; }
.weight-refresh { background: none; border: 0; font: inherit; color: var(--color-sage-dark, #667664); cursor: pointer; padding: 12px; text-decoration: underline; }
@media (max-width: 520px) { .weight-choice { width: 100%; } .weight-form .button { width: 100%; } }
