:root {
      --primary-color: hsl(0, 70%, 50%);
      --text-color: #ffffff;
      --background-color: hsl(var(--primary-color-hue, 0), 10%, 95%);
      --header-bg: hsl(var(--primary-color-hue, 0), 10%, 95%);
      --text-primary: #333;
      --svg-filter: none;
    }
    [data-theme="dark"] {
      --background-color: #1a1a1a;
      --header-bg: #1a1a1a;
      --text-primary: #e0e0e0;
      --primary-color: hsl(var(--primary-color-hue, 0), 70%, 60%);
      --text-color: #000000;
      --svg-filter: invert(100%) grayscale(100%);
    }
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: var(--background-color);
      color: var(--text-primary);
    }
    .status-header {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      background-color: var(--header-bg);
      color: var(--text-primary);
      padding: 10px;
      border-radius: 5px;
    }
    .title-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #notification-bubble {
      padding: 10px 10px;
      background: lightgreen;
      color: darkgreen;
      border: 3px solid green;
      border-radius: 20px;
      font-size: 1.1em;
      font-weight: bold;
      display: none;
      margin-top: 5px;
      display: flex;
      align-items: center;
    }
    [data-theme="dark"] #notification-bubble.connected {
      background: #228b22;
      border-color: #006400;
      color: #e0e0e0;
    }
    [data-theme="dark"] #notification-bubble.disconnected {
      background: #8b0000;
      border-color: #ff4040;
      color: #e0e0e0;
    }
    .connected#notification-bubble {
      background: lightgreen;
      border: 3px solid green;
    }
    .disconnected#notification-bubble {
      background: lightcoral;
      border: 3px solid red;
    }
    .connected#notification-bubble #dot {
      margin-right: 8px;
      font-size: 1.2em;
      color: green;
    }
    [data-theme="dark"] .connected#notification-bubble #dot {
      margin-right: 8px;
      font-size: 1.2em;
      color: lightgreen;
    }
    [data-theme="dark"] #dot.connected {
      color: #00ff00;
    }
    [data-theme="dark"] #dot.disconnected {
      color: #ff4040;
    }
    .disconnected#notification-bubble #dot {
      color: red;
    }
    #connection-text {
      font-size: 1.1em;
      font-weight: bold;
    }
    #header {
      margin: 20px 0;
      padding: 10px;
      background-color: var(--header-bg);
      border-radius: 5px;
      color: var(--text-primary);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 20px;
    }
    .controls-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-width: 200px;
    }
    .svg-container {
      flex: 0 0 auto;
      height: 20vw;
      max-width: 80vw;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .svg-container img {
      width: 150%;
      height: 150%;
      object-fit: contain;
      filter: var(--svg-filter);
    }
    .section {
      margin-bottom: 2px;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .button_div {
      margin-right: 10px;
    }
    button {
      padding: 8px;
      border: none;
      border-radius: 5px;
      background-color: var(--primary-color);
      color: var(--text-color);
      cursor: pointer;
      transition: opacity 0.2s, background-color 0.2s;
    }
    button:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 45%);
    }
    [data-theme="dark"] button:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 55%);
    }
    button.inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] button.inactive {
      background-color: #555;
    }
    button.active {
      opacity: 1;
      pointer-events: auto;
    }
    #bank_number_selection {
      padding: 8px;
      border: none;
      border-radius: 5px;
      background-color: var(--primary-color);
      color: var(--text-color);
      cursor: pointer;
    }
    #bank_number_selection:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 40%);
    }
    [data-theme="dark"] #bank_number_selection:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 55%);
    }
    #bank_number_selection.inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] #bank_number_selection.inactive {
      background-color: #555;
    }
    #bank_number_selection.active {
      opacity: 1;
      pointer-events: auto;
    }
    input[type="range"] {
      -webkit-appearance: none;
      width: 150px;
      height: 6px;
      border-radius: 5px;
      background: linear-gradient(to right, var(--primary-color, hsl(0, 70%, 50%)) 0%, var(--primary-color, hsl(0, 70%, 50%)) 0%, #ccc 0%, #ccc 100%);
      outline: none;
      transition: opacity 0.2s;
    }
    [data-theme="dark"] input[type="range"] {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 0%, #555 0%, #555 100%);
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
    }
    input[type="range"]::-moz-range-track {
      height: 6px;
      border-radius: 5px;
      background: linear-gradient(to right, var(--primary-color, hsl(0, 70%, 50%)) 0%, var(--primary-color, hsl(0, 70%, 50%)) 0%, #ccc 0%, #ccc 100%);
    }
    [data-theme="dark"] input[type="range"]::-moz-range-track {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 0%, #555 0%, #555 100%);
    }
    input[type="range"]::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
    }
    input[type="range"].inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background: #ccc;
    }
    [data-theme="dark"] input[type="range"].inactive {
      background: #555;
    }
    input[type="range"].active {
      opacity: 1;
      pointer-events: auto;
    }
    input[type="checkbox"].inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
    }
    input[type="checkbox"].active {
      opacity: 1;
      pointer-events: auto;
    }
    select.inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] select.inactive {
      background-color: #555;
    }
    select.active {
      opacity: 1;
      pointer-events: auto;
    }
    input[type="number"].inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] input[type="number"].inactive {
      background-color: #555;
    }
    input[type="number"].active {
      opacity: 1;
      pointer-events: auto;
      background-color: hsl(var(--primary-color-hue, 0), 10%, 95%);
    }
    [data-theme="dark"] input[type="number"].active {
      background-color: #333;
    }
    a {
      color: var(--primary-color);
      text-decoration: none;
    }
    [data-theme="dark"] a {
      color: hsl(var(--primary-color-hue, 0), 70%, 60%);
    }
    a:hover {
      text-decoration: underline;
    }
    details summary:hover {
      color: var(--primary-color);
    }
    input[type="text"][readonly] {
      border: none;
      background: transparent;
      color: var(--text-primary);
    }
    /* Default single-column layout for smartphones */
    #parameters {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    details {
      width: 100%;
      margin: 0;
      padding: 8px;
      border: none;
      border-radius: none;
      box-sizing: border-box;
    }
    /* Three-column grid layout for larger screens */
    @media screen and (min-width: 768px) {
      #parameters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
      }
      details {
        width: 100%;
        max-width: 450px;
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
        overflow-x: auto;
      }
      /* Fallback for older browsers */
      @supports not (display: grid) {
        #parameters {
          display: flex;
          flex-wrap: wrap;
          gap: 30px;
        }
        details {
          flex: 1 1 calc(33.33% - 30px);
          max-width: 400px;
          box-sizing: border-box;
        }
      }
    }
    @media screen and (max-width: 767px) {
      .svg-container {
        max-width: 100%;
        height: 100%;
      }
    }