body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;

  color: #edf2f7; /* Light Text */
}


/* Main Menu Styling */
.menu {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #2d3748; /* Darker shade for contrast */
  color: #fff;
      padding: 10px 16px;             /* 20 px ? 10 px */  
    max-height: none;            /* never taller than 80 % of the screen height */
    overflow-y: auto;            /* adds a scrollbar only when really needed    */
  border-radius: 20px;
  width: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border: none;
  display: none;
  transition: all 0.3s ease-in-out; /* Smooth transition for showing/hiding menu */
}

.menu.hidden {
  display: none;
}

.menu .menu-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #63b3ed; /* Accent color for header */
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 1px solid #4a5568; /* Subtle divider for sections */
  padding-bottom: 10px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  margin: 15px 0;
}

.menu ul li a {
  text-decoration: none;
  color: #edf2f7; /* Maintain light color */
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.menu ul li a:hover {
  color: #63b3ed; /* Light blue on hover */
}

.menu-button {
  background-color: #3182ce; /* Blue button color */
  color: #edf2f7;
  border: none;
      margin-top: 8px;            /* was 20px                                   */
    padding: 8px 12px;           /* was 10px 15px                              */
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  text-align: center;
  display: block;
  width: 100%;
}

.menu-button:hover {
  background-color: #2b6cb0; /* Darken button on hover */
}

.footer-text {
  position: absolute; /* Absolute positioning relative to the main menu container */
  bottom: 5px; /* Adjust the distance from the bottom of the menu */
  left: 50%; /* Position from the left edge of the container */
  transform: translateX(-50%); /* Center horizontally */
  font-size: 0.8rem;
  font-weight: normal;
  color: #a0aec0; /* Lighter text color for footer */
  text-align: center;
  width: 100%; /* Ensure the text spans the full width */
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 15px 0;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Button Styling */
button {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: #e53e3e; /* Green */
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

button:hover {
  background: #f12727; /* Darker Green */
  transform: scale(1.03);
}

button:active {
  background: #681a1a; /* Even Darker Green */
  transform: scale(1);
}

/* Patterns Grid */
.patterns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* Increased spacing for a cleaner layout */
padding: 10px;
}

button.pattern-btn {
margin-top: 20px;
  background: #3182ce; /* Brighter Blue for visibility */
  color: #fff;
  border: none; /* Removed border for a cleaner look */
  border-radius: 8px;
  padding: 10px;
  transition: background 0.3s ease, transform 0.3s ease; /* Smooth color and scale transition */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow for more emphasis */
}

button.pattern-btn:hover {
  background: #2c5282; /* Slightly darker blue */
  transform: scale(1.05); /* Hover scale effect for interactivity */
}

button.pattern-btn.active {
  background: #48bb78; /* Green for selected pattern */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); /* More prominent shadow for active state */
}

/* Shadows and Edges */
button:hover, .menu {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

button.pattern-btn,
button.signal-btn{
    padding: 8px;
    font-size: .85rem;
}

button:active {
  box-shadow: none;
}

/* Hide extra containers initially */
#patterns-container,
#extras-container {
  display: none;
}

/* Container styling for pattern and extras menus */
#patterns-container, #extras-container {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  background: #2d3748; /* Darker Background for contrast */
  color: #edf2f7; /* Light Text */
  padding: 25px;
  border-radius: 20px;
  width: 320px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  border: none; /* Removed border for a modern look */
  transition: all 0.3s ease-in-out; /* Smooth transition for visibility changes */
}

#extras-container {
  left: 400px; /* Positioned to the right of patterns-container */
}

/* Extras List Styling */
.extras-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: #48bb78 #2d3748; /* Green Thumb on Dark Background */
}

.extras-list::-webkit-scrollbar {
  width: 8px;
}

.extras-list::-webkit-scrollbar-thumb {
  background-color: #48bb78; /* Green Thumb */
  border-radius: 8px;
}

.extras-list::-webkit-scrollbar-track {
  background-color: #2d3748; /* Dark Track */
}

/* Styled Checkboxes */
.extras-list label {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  background: #2d3748; /* Dark Background */
  border-radius: 10px;
  color: #cbd5e0; /* Light Text */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Increased shadow for better emphasis */
}

.extras-list label:hover {
  background: #4a5568; /* Slightly Lighter Dark */
  transform: scale(1.03); /* Subtle scale effect */
}

.extras-list input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #48bb78; /* Green Border */
  border-radius: 4px;
  background: #2d3748; /* Dark Background */
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.extras-list input[type="checkbox"]:checked {
  background: #48bb78; /* Green Background */
  border-color: #38a169; /* Darker Green Border */
}

#static-extras {
  background: #2c5282; /* Blue Background */
  color: #fff; /* White Text */
  border: 2px solid #2b6cb0; /* Border Color */
  border-radius: 8px; /* Rounded corners */
  padding: 12px; /* Padding for button */
  font-size: 1rem; /* Font size */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor */
  transition: background 0.3s ease, transform 0.2s ease; /* Smooth transitions */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

#static-extras:hover {
  background: #2b6cb0; /* Darker Blue on hover */
  transform: scale(1.03); /* Slight scaling effect */
}

#static-extras:active {
  background: #1a365d; /* Even Darker Blue on click */
  transform: scale(1); /* Reset scaling */
}


/* Static Extras Container Styling */
#static-extras-container {
  position: fixed;
  top: 50%;
  left: 20px; /* Align with other left-side containers */
  transform: translateY(-50%);
  background: #2d3748; /* Match other containers */
  color: #edf2f7; /* Light text for visibility */
  padding: 25px;
  border-radius: 20px;
  width: 320px; /* Consistent width with other menus */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); /* Consistent shadow */
  border: none;
  transition: all 0.3s ease-in-out; /* Smooth transitions */
  display: none; /* Hidden by default */
}

#static-extras-container .header {
  font-size: 1.5rem;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

#static-extras-container .attached-equipment {
  max-height: 260px; /* Adjust height for better scrolling */
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: #48bb78 #2d3748; /* Green thumb on dark track */
}

#static-extras-container .attached-equipment::-webkit-scrollbar {
  width: 8px;
}

#static-extras-container .attached-equipment::-webkit-scrollbar-thumb {
  background-color: #48bb78; /* Green thumb */
  border-radius: 8px;
}

#static-extras-container .attached-equipment::-webkit-scrollbar-track {
  background-color: #2d3748; /* Dark track */
}

/* Close Button */
#close-static-extras-container {
  width: 100%;
  margin-top: 20px; /* Add spacing above */
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: #e53e3e; /* Red for attention */
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

#close-static-extras-container:hover {
  background: #c53030; /* Darker red on hover */
  transform: scale(1.03);
}


/* Attached Equipment Items */
.attached-equipment .attached-item {
  margin: 10px 0;
  padding: 15px;
  background: #2d3748; /* Dark Gray-Blue */
  color: #edf2f7; /* Light Text */
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Softer shadow for less emphasis compared to buttons */
}

.attached-equipment .attached-item:hover {
  background: #4a5568; /* Slightly lighter Gray-Blue */
  transform: scale(1.04);
}

/* Scrollable Attached Equipment List */
.attached-equipment {
  max-height: 260px; /* Adjust height to allow more items */
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: #48bb78 #2d3748; /* Green Thumb on Dark Background */
}


/* Updated CSS for selected styling across containers */
.attached-equipment .attached-item.selected {
  background-color: #10b981; /* Green background for selected */
  color: #ffffff; /* White text */
  font-weight: bold;
  border: 2px solid #4ade80; /* Border for emphasis */
}

.patterns-container .pattern-btn.selected,
#static-extras-container .attached-item.selected {
  background-color: #10b981; /* Green background for selected */
  color: #ffffff; /* White text */
  font-weight: bold;
  border: 2px solid #4ade80; /* Border for emphasis */
}



.attached-equipment::-webkit-scrollbar {
  width: 8px;
}

.attached-equipment::-webkit-scrollbar-thumb {
  background-color: #48bb78; /* Green Thumb */
  border-radius: 8px;
}

.attached-equipment::-webkit-scrollbar-track {
  background-color: #2d3748; /* Dark Track */
}


/* Close Button */
.close-button {
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: #e53e3e; /* Red */
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.close-button:hover {
  background: #c53030; /* Darker Red */
  transform: scale(1.03);
}

.close-button:active {
  background: #9b2c2c;
  transform: scale(1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .menu, #patterns-container, #extras-container {
      width: 90%;
      left: 5%;
      right: 5%;
  }

  #extras-container {
      left: 5%;
      top: 350px;
  }
}


/* Plugins Section Styling */
.plugins {
  margin-top: 20px;
  text-align: center;
}

.plugins h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.plugin-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Space between checkboxes */
  font-size: 0.9rem;
  color: #cbd5e0; /* Light Text */
}

.plugin-options label {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between text and checkbox */
  cursor: pointer; /* Make the whole label clickable */
}

.plugin-options input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #48bb78; /* Green Border */
  border-radius: 4px;
  background: #2d3748; /* Dark Background */
  cursor: pointer;
  transition: all 0.3s ease;
}

.plugin-options input[type="checkbox"]:checked {
  background: #48bb78; /* Green Background */
  border-color: #38a169; /* Darker Green Border */
}

/* Plugin Buttons Styling */
.plugin-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two buttons per row */
  gap: 6px; /* Space between buttons */
  justify-items: center; /* Center-align buttons */
}

.plugin-buttons button {
  flex: 1;
  padding: 12px;
  font-size: 0.9rem;
  border-radius: 8px;
  background: #2c5282; /* Blue Background */
  color: #fff;
  border: 2px solid #2b6cb0; /* Border Color */
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%; /* Full-width buttons */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.plugin-buttons button:hover {
  background: #2b6cb0; /* Darker Blue */
  transform: scale(1.03); /* Slight scaling effect */
}

.plugin-buttons button:active {
  background: #1a365d; /* Even Darker Blue */
  transform: scale(1); /* Reset scaling */
}


#notification-container {
    position: fixed;
    top: 20%;
    right: 20px;
    z-index: 1000;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification {
    background-color: #1a202c; /* Dark background */
    color: #10b981; /* Green text */
    border-left: 4px solid #10b981; /* Green accent */
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}


.pattern-edit {
    width: 100%;
    border: 2px solid #2c5282; /* Match the default button border */
    padding: 10px; /* Slightly larger for consistency with buttons */
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    box-sizing: border-box;
    border-radius: 12px; /* Match the button's border radius */
    background-color: #1a202c; /* Match button background */
    color: #edf2f7; /* Match text color */
    transition: all 0.3s ease; /* Smooth transition */
}

.pattern-edit:focus {
    outline: none; /* Remove default outline */
    border: 2px solid #2b6cb0; /* Blue focus border */
    background-color: #2c5282; /* Slightly darker blue for focus */
    color: #ffffff; /* Text becomes brighter */
    box-shadow: 0 0 10px rgba(43, 108, 176, 0.5); /* Add glow effect */
}

.pattern-edit::placeholder {
    color: #a0aec0; /* Subtle placeholder text color */
    font-style: italic; /* Optional placeholder style */
}


#camera-mode {
    background-color: #2c5282;
    color: #edf2f7;
    border: 2px solid #c53030
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    margin-top: 10px; /* Add spacing between the buttons */
    transition: all 0.3s ease;
}

#camera-mode:hover {
    background-color: #2b6cb0;
    color: #ffffff;
}

#signals-setup-container {
  position: fixed;
  top: 50%;
  left: 20px; /* Position on the left */
  transform: translateY(-50%);
  background: #2d3748; /* Darker Background for contrast */
  color: #edf2f7; /* Light Text */
  padding: 25px;
  border-radius: 20px;
  width: 320px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  border: none; /* Removed border for a modern look */
  transition: all 0.3s ease-in-out; /* Smooth transition for visibility changes */
}


/* Save / Load Bar */
.preset-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.preset-buttons button {
    background: linear-gradient(to right, #48bb78, #38a169); /* subtle gradient */
    border: none;
    padding: 12px 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.preset-buttons button:hover {
    background: #2f855a;
    transform: translateY(-1px);
}


/* Dialog Overlay */
.dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.dialog.hidden {
    display: none;
}

.dialog-body {
    background: #1e2533;
    padding: 24px 28px;
    border-radius: 14px;
    width: 320px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dialog-body input {
    width: 90%;
    margin: 14px 0;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #4299e1;
    background: #2d3748;
    color: #fff;
    font-size: 0.95rem;
}

.dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.dialog-actions button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #4299e1;
    color: #fff;
    font-weight: bold;
    transition: background 0.2s ease;
}

.dialog-actions button:hover {
    background: #3182ce;
}


/* Preset List Rows */
.preset-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #2d3748;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.preset-row:hover {
    background: #3b475b;
}

.preset-row .big {
    font-weight: 700;
    margin-bottom: 6px;
    cursor: pointer;
    color: #edf2f7;
}

.preset-row .preset-name {
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e2e8f0;
}

.preset-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.preset-actions button {
    flex: 1 1 45%;
    padding: 6px 0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
    border: none;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.preset-actions .load { background: #38a169; }
.preset-actions .ovr  { background: #3182ce; }
.preset-actions .ren  { background: #3182ce; }
.preset-actions .del  { background: #e53e3e; }

.preset-actions button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ----------------------------------
   PRESET LIST – vertical scrollbar
   ----------------------------------*/
#presets-container{
right: 20%;
        width: 400px;
    max-height: 72vh;
    padding: 22px 26px;
    overflow-y: auto;
    mask-image: linear-gradient(#000 90%, transparent); /* fade-out */
    max-height: 60vh;
    overflow-y: auto;   /* vertical scroll only when needed  */
    overflow-x: hidden; /* never show a horizontal scrollbar */

    /* new scrollbar look (Firefox & WebKit/Blink) */
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: #48bb78 #2d3748;            /* thumb / track */
}

#presets-container::-webkit-scrollbar{           /* Chrome/Edge/Safari */
    width: 15px;                                  /* thin bar */
right: 20px;
}
#presets-container::-webkit-scrollbar-thumb{
    background: #48bb78;                         /* green thumb */
    border-radius: 8px;
}
#presets-container::-webkit-scrollbar-track{
    background: #2d3748;                         /* dark track */
border-radius: 8px;

}

/* modal “Save preset” prompt                       */
/* (the .dialog overlay is already full-screen;     */
/*  we just make sure the box itself is centred)    */
#preset-dialog{
    right: auto;            /* cancel any stray “right:20px” */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2200;          /* a hair above #presets-container */
}

/* When overlays are up, make the background inert */
.menu.locked {
    pointer-events: none;
    filter: grayscale(1) opacity(.55);
}