body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .panel {
    width: 600px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(20,30,40,0.15);
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  
  .control-panel {
    width: 600px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(20,30,40,0.15);
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .needs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }

  .control {
    padding-top: 1.4em;
  }

  .status {
    position: relative;
  }

  .bar-container {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Label sits above the bar */
  .status .label {
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 1.4em;
    color: #3b30b3;
  }

  .bar {
    position: relative;
    height: 2em;
    border-radius: 1em;
    background: #eee;
    overflow: hidden;
    width: 70%;
    margin-left: 1.25em; /* space for overlapping icon */
  }

  .fill {
    height: 100%;
    width: 0%;
    border-radius: 1em;
    transition: width 600ms ease;
  }

  /* Icon circle sits on left, overlapping the bar */
  .status .icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    border: 1px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 2;
    fill: #fff;
  }

  .status .icon i {
    transform: scale(1.4);
  }

  /* Color themes */
  
  .bad  .icon { background: linear-gradient(#ff6b6b,#e64545); }
  .bad  .fill { background: linear-gradient(#ff6b6b,#e64545); }

  .warn .icon { background: linear-gradient(#ffd165,#ffb020);  }
  .warn .fill { background: linear-gradient(#ffd165,#ffb020); }

  .good .icon { background: linear-gradient(#63d66d,#2fa84a); }
  .good .fill { background: linear-gradient(#63d66d,#2fa84a); }

  /* Global Controls Styling */
  .global-controls {
    border-top: 2px solid #e0e0e0;
    padding-top: 1.5em;
    margin-top: 1em;
  }
  
  .global-controls h3 {
    text-align: center;
    margin: 0 0 1em 0;
    color: #3b30b3;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .global-controls .control {
    padding-top: 0;
  }
  
  .global-controls .button-row:first-child button {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    color: white;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3);
  }
  
  .global-controls .button-row:first-child button:hover {
    background: linear-gradient(135deg, #7B1FA2, #6A1B9A);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(156, 39, 176, 0.4);
  }



  /* Control button styling */
.control {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .button-row {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .control button {
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
    min-width: 0;
  }
  
  /* Row 1 buttons - Value setting buttons */
  .button-row:first-child button {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  }
  
  .button-row:first-child button:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
  }
  
  /* Row 2 buttons - Rate control buttons */
  .button-row:last-child button {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
  }
  
  /* Rapid Decay - red */
  .button-row:last-child button:nth-child(1) {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.3);
  }
  
  .button-row:last-child button:nth-child(1):hover {
    background: linear-gradient(135deg, #d32f2f, #c62828);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.4);
  }
  
  /* Decay - orange */
  .button-row:last-child button:nth-child(2) {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    color: white;
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
  }
  
  .button-row:last-child button:nth-child(2):hover {
    background: linear-gradient(135deg, #F57C00, #EF6C00);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4);
  }
  
  /* Stable - blue */
  .button-row:last-child button:nth-child(3) {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
  }
  
  .button-row:last-child button:nth-child(3):hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.4);
  }
  
  /* Gain - light green */
  .button-row:last-child button:nth-child(4) {
    background: linear-gradient(135deg, #8BC34A, #689F38);
    color: white;
    box-shadow: 0 2px 4px rgba(139, 195, 74, 0.3);
  }
  
  .button-row:last-child button:nth-child(4):hover {
    background: linear-gradient(135deg, #689F38, #558B2F);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(139, 195, 74, 0.4);
  }
  
  /* Rapid Gain - dark green */
  .button-row:last-child button:nth-child(5) {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  }
  
  .button-row:last-child button:nth-child(5):hover {
    background: linear-gradient(135deg, #388E3C, #2E7D32);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
  }
  
  /* Active state for selected decay rate */
  .control button.active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .panel, .control-panel {
      width: 95%;
      padding: 0.8em;
    }
    
    .needs-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .control {
      gap: 0.3rem;
    }
    
    .button-row {
      gap: 0.2rem;
    }
    
    .control button {
      padding: 0.2rem 0.3rem;
      font-size: 0.6rem;
    }
    
    .button-row:last-child button {
      font-size: 0.55rem;
      padding: 0.15rem 0.3rem;
    }
    
    .global-controls h3 {
      font-size: 1em;
    }
  }