body { font-family: sans-serif; margin: 0; padding: 0.8em; background-color: #f4f4f9; font-size: 14px; }
    table { border-collapse: collapse; width: 100%; background-color: #fff; }
    th, td { border: 1px solid #ddd; text-align: left; padding: 4px 6px; }
    tr:hover td { background-color: #f5f5f5; }
    tr.selected-row td { background-color: #e0e8f7; font-weight: bold; }
    tbody tr { cursor: pointer; }
    thead th { 
      cursor: pointer; 
      background-color: #e9e9f3; 
      position: sticky; 
      top: 0; 
      z-index: 2;
    }
    th:hover { background-color: #d8d8e0; }
    .sort-asc::after { content: " \25B2"; }
    .sort-desc::after { content: " \25BC"; }
    details {
        padding: 0.8em 1.2em;
        margin-bottom: 1em;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f9f9f9;
    }
    summary { font-weight: bold; font-size: 1.1em; cursor: pointer; padding-bottom: 0.5em;}
    .controls-container { padding-top: 0.8em; }
    .slider-group { margin-bottom: 0.5em; display: flex; align-items: center; flex-wrap: wrap; }
    .slider-group label { flex-basis: 200px; font-weight: bold; font-size: 13px;}
    .slider-group input[type="range"] { flex-grow: 1; margin: 0 0.8em; }
    .slider-group .value-display { min-width: 30px; font-weight: bold; text-align: right; }
    #total-weight { font-weight: bold; }
    .note { margin-top: 0.5em; color: #555; font-style: italic; font-size: 12px; }
    .numeric { text-align: right; }