.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
  label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: #555; }
  .label-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
  }
  .icon-label { width: 16px; height: 16px; flex-shrink: 0; color: #5c6b7a; opacity: 0.92; }
  #metric { width: 215px; }
  #graphType { width: 225px; }
  #diffFrequency { width: 210px; }
  #smoothingSlider { width: 120px; }
  #diffControls {
    display: none; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  }
  #diffControls.is-visible { display: flex; }
  #diffControls .tw-trigger-wrap { min-width: 220px; }
  #timeWindowWrap.is-hidden { display: none !important; }
  input, select {
    background: var(--color-input-bg); border: 1px solid #ccc; color: #111;
    padding: 6px 8px; font-family: monospace; font-size: 0.85rem; border-radius: 3px;
  }
  input:focus, select:focus { outline: 1px solid #888; border-color: #888; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none; background: transparent;
    border: none; padding: 0; height: 20px; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    background: #d0cdc8; border-radius: 2px; height: 4px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    background: #777; border-radius: 50%; margin-top: -5px;
  }
  input[type="range"]::-moz-range-track { background: #d0cdc8; border-radius: 2px; height: 4px; }
  input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; background: #777; border-radius: 50%; border: none;
  }
  input[type="range"]:focus { outline: none; }
  input[type="range"]:focus-visible {
    outline: 2px solid #888;
    outline-offset: 2px;
  }
  #selection-panel { margin-bottom: 20px; flex-shrink: 0; }
  #selection-panel fieldset {
    border: 1px solid var(--color-border-soft); border-radius: 8px; padding: 12px 16px; background: #f8f6f2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  #selection-panel legend { font-size: 0.75rem; color: #555; padding: 0 6px; }
  .legend-with-icon {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .legend-with-icon svg { width: 14px; height: 14px; color: #5c6b7a; }
  #series-quick-select {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
  }
  .quick-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .quick-row.hidden { display: none !important; }
  .quick-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-surface-muted); border: 1px solid var(--color-border); color: #333;
    padding: 5px 12px; font-family: monospace; font-size: 0.78rem;
    border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
  }
  .quick-btn:hover { background: #dedad2; }
  .quick-btn-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    opacity: 0.92;
  }
  .quick-btn.quick-hot {
    background: linear-gradient(135deg, #fff8f8 0%, #fdeeee 100%);
    border-color: #e8b4b4; color: #9b2c2c;
  }
  .quick-btn.quick-hot:hover { background: #fcd9d9; border-color: #d69a9a; }
  .quick-btn.quick-cold {
    background: linear-gradient(135deg, #f8fbff 0%, #e8f0fc 100%);
    border-color: #9bb8e0; color: #1a4d8c;
  }
  .quick-btn.quick-cold:hover { background: #dce8f8; border-color: #7a9fd0; }
  #smoothing-label { display: none; }
  #smoothing-label.is-visible { display: flex; }
  .slider-row { display: flex; align-items: center; gap: 8px; }
  header, .controls { flex-shrink: 0; }