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

  color: #edf2f7; 
}


.menu {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #2d3748; 
  color: #fff;
  padding: 20px;
  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; 
}

.menu.hidden {
  display: none;
}

.menu .menu-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #63b3ed; 
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 1px solid #4a5568; 
  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;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.menu ul li a:hover {
  color: #63b3ed;
}

.menu-button {
  background-color: #3182ce; 
  color: #edf2f7;
  border: none;
  padding: 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%;
  margin-top: 20px;
}

.menu-button:hover {
  background-color: #2b6cb0; 
}

.footer-text {
  position: absolute; 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: normal;
  color: #a0aec0; 
  text-align: center;
  width: 100%; 
}

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 {
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: #e53e3e;
  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: 16px; /* Increased spacing for a cleaner layout */
}

button.pattern-btn {
  background: #3182ce; /* Brighter Blue for visibility */
  color: #fff;
  border: none; /* Removed border for a cleaner look */
  border-radius: 8px;
  padding: 12px;
  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: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: 10px; /* Space between buttons */
  margin-top: 10px;
  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 #2b6cb0;
    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 */
}
