/* --- General Body and Container Styling --- */
 body {
     font-family: 'Roboto', sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
     background-color: #1a1a2e;
     color: #e0e0e0;
     margin: 0;
     padding: 20px;
     box-sizing: border-box;
     gap: 20px; /* Consistent spacing between major sections */
 }

 /* --- Page Header with Title and User Name --- */
 .page-header {
     width: 100%;
     max-width: 900px;
     text-align: center;
     padding-top: 10px;
 }

 .page-header h1 {
     color: #8affc7;
     margin: 0;
     font-size: 2em;
 }

 .page-header .name-input-group {
     margin-top: 15px;
 }

 .page-header .name-input-group input[type="text"] {
     width: 80%;
     max-width: 300px;
     padding: 10px;
     border: 1px solid #5a5a7a;
     border-radius: 8px;
     background-color: #3a3a5a;
     color: #e0e0e0;
     font-size: 1em;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 }

 .page-header .name-input-group input[type="text"]:focus {
     outline: none;
     border-color: #8affc7;
     box-shadow: 0 0 8px rgba(138, 255, 199, 0.5);
 }

 /* --- Main Controls Container (Sliders + Switches) --- */
 .main-controls-container {
     width: 100%;
     max-width: 900px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     padding: 20px;
     background-color: #2a2a4a;
     border-radius: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     flex-wrap: wrap; /* Allow wrapping on small screens */
     gap: 20px;
 }

 /* --- Sliders Styling --- */
 .sliders-section {
     display: flex;
     flex-direction: column;
     gap: 15px;
     flex-grow: 1; /* Take up available space */
     min-width: 300px;
 }

 .slider-group {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .slider-group label {
     font-weight: 700;
     color: #92e6f2;
     font-size: 1.1em;
 }

 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 12px;
     background: #5a5a7a;
     border-radius: 6px;
     outline: none;
     cursor: pointer;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: #8affc7;
     cursor: grab;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
 }

 .slider-value {
     font-weight: 700;
     color: #f7b731;
 }

 /* --- Toggle Switches Styling --- */
 .controls-section {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 30px;
     flex-wrap: wrap;
 }

 .switch-group {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .switch-group label {
     font-weight: 700;
     color: #92e6f2;
     font-size: 1.1em;
 }

 .toggle-switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
 }

 .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #5a5a7a;
     transition: .4s;
     border-radius: 34px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: #e0e0e0;
     transition: .4s;
     border-radius: 50%;
 }

 input:checked + .slider {
     background-color: #8affc7;
 }

 input:focus + .slider {
     box-shadow: 0 0 1px #8affc7;
 }

 input:checked + .slider:before {
     transform: translateX(26px);
     background-color: #1a1a2e;
 }

 /* --- Graph Area (Canvas) Styling --- */
 .graph-container {
     width: 100%;
     max-width: 900px;
     height: 50vh; /* Fixed height relative to viewport */
     background-color: #3a3a5a;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     position: relative;
     padding: 20px;
 }

#canvas1GRID {
      position: absolute;
         top: 10px;
         left: 2px;
         right: 2px;
         bottom: 10px;
}
#canvas1 {
      position: absolute;
         top: 10px;
         left: 2px;
         right: 2px;
         bottom: 10px;
}
/*
 #myChart {
     position: absolute;
     width: 100%;
     height: 100%;
 }*/

 /* --- Text Area Styling --- */
 .messages-section {
     width: 100%;
     max-width: 900px;
 }

 .messages-section label {
     display: block;
     margin-bottom: 5px;
     font-weight: 700;
     color: #92e6f2;
 }

 .messages-section textarea {
     width: 100%;
     min-height: 80px;
     padding: 10px;
     border: 1px solid #5a5a7a;
     border-radius: 8px;
     background-color: #3a3a5a;
     color: #e0e0e0;
     font-size: 1em;
     resize: vertical;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 }

 /* --- Disabled State for the entire content container --- */
 #main-content.disabled {
     pointer-events: none;
     opacity: 0.5;
 }

 /* --- Media Queries for Responsiveness --- */
 @media (max-width: 768px) {
     .main-controls-container {
         flex-direction: column;
         align-items: center;
     }
     .sliders-section,
     .controls-section {
         width: 100%;
         justify-content: center;
     }
     .slider-group {
         flex-direction: column;
         width: 100%;
     }
     .slider-group label {
         text-align: center;
     }
     .graph-container {
         height: 40vh;
     }
 }

 @media (max-width: 480px) {
     body { padding: 10px; }
     .page-header h1 { font-size: 1.8em; }
     .main-controls-container { padding: 15px; }
     .controls-section { gap: 10px; }
     .graph-container { height: 30vh; }
 }