.subtractor-tool {
  max-width: 900px;
  margin: 1em auto;
  padding: 1.5em;
  /* background-color: #202020; */ /* Assuming page background is already dark */
  color: #FFFFFF;
  display: grid; /* Overall grid for sections */
  gap: 1em; /* Gap between major sections like input, options, actions, results */
  border-radius: 8px;
}

.sub-input-row {
  display: flex;
  gap: 1em;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.sub-input-area {
  flex: 1; /* Each takes up equal space */
  min-width: 300px; /* Minimum width before wrapping */
  display: flex;
  flex-direction: column;
}

.subtractor-tool label {
  font-weight: bold;
  margin-bottom: 0.5em;
  display: block;
  color: #FFFFFF;
}

.subtractor-tool textarea {
  width: 100%;
  height: 200px;
  font-family: monospace;
  padding: 0.75em;
  resize: vertical;
  box-sizing: border-box;
  background-color: #2B2B2B;
  color: #FFFFFF;
  border: 1px solid #404040;
  border-radius: 4px;
}

.subtractor-tool textarea::placeholder {
  color: #AAAAAA;
}

/* STYLES FOR OPTIONS AREA */
.sub-options-column {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  gap: 0.75em; /* Space between Sort and TLD filter sections */
  align-items: flex-start; /* Align children to the left */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.sub-options-sort {
  /* Takes full width available in the column flow */
}

.sub-options-sort label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-weight: normal; /* Making sort label normal weight like TLD options for consistency */
}
.sub-options-sort input[type="checkbox"] {
  margin-top: -1px; /* Fine-tune checkbox alignment */
  transform: scale(1.1); /* Optional: slightly larger checkbox */
}


.sub-options-tld-filter {
  width: 100%; /* Make TLD filter take full available width */
  max-width: 500px; /* Optional: constrain max width if desired on wider screens */
}
.sub-options-tld-filter > label strong { /* For the "Filter by TLD:" heading label */
    display: block; /* Ensure it's on its own line */
    margin-bottom: 0.4em;
    color: #FFFFFF; /* Ensure heading is white */
    font-weight: bold;
}

.sub-tld-checkbox-group {
  max-height: 120px; /* Adjusted height */
  overflow-y: auto;
  padding: 0.75em; /* Increased padding */
  border: 1px solid #404040;
  border-radius: 4px;
  background-color: #2B2B2B; /* Consistent with textareas */
}
.sub-tld-checkbox-group label { /* For individual TLD checkbox labels */
  display: flex; /* Align checkbox and text nicely */
  align-items: center;
  margin-bottom: 0.4em;
  font-weight: normal;
  cursor: pointer;
  color: #FFFFFF; /* Ensure TLD option text is white */
  gap: 0.5em; /* Space between checkbox and TLD text */
}
.sub-tld-checkbox-group label:last-child {
  margin-bottom: 0; /* Remove margin from the last TLD option */
}
.sub-tld-checkbox-group input[type="checkbox"] {
  margin: 0; /* Remove default margin */
  transform: scale(1.1); /* Optional: slightly larger checkbox */
  /* Accent color can be used to style the checkbox itself in modern browsers */
  /* accent-color: #2980B9; */ /* Example: Blue checkbox */
}
.sub-tld-placeholder {
  color: #AAAAAA;
  font-style: italic;
  padding: 0.2em;
}
/* END OF STYLES FOR OPTIONS AREA */


.sub-actions-row {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap; /* Allow buttons to wrap */
  margin-top: 0.5em;
}

.subtractor-tool button {
  padding: 0.7em 1.4em;
  cursor: pointer;
  color: #FFFFFF;
  border: none; /* Remove default border */
  border-radius: 4px;
  font-weight: bold;
  transition: opacity 0.2s ease, transform 0.1s ease;
  min-width: 120px; /* Ensure buttons have a decent min width */
}
.subtractor-tool button:hover {
  opacity: 0.85;
}
.subtractor-tool button:active {
  transform: translateY(1px);
}


.sub-button-subtract { background-color: #C0392B; /* Red */ }
.sub-button-copy { background-color: #2980B9; /* Blue */ }
.sub-button-download { background-color: #27AE60; /* Green */ }

.sub-results-row {
  margin-top: 0.5em;
}
.sub-results-row > label strong { /* For the "Result (X lines):" text */
    color: #FFFFFF;
}

/* Popup Notifications */
#sub-popup-notifications-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000; /* High z-index */
  width: 300px; /* Max width for popups */
}

.sub-popup {
  padding: 12px 18px;
  margin-bottom: 10px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 0.9em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  opacity: 0; /* Start hidden */
  transform: translateX(100%); /* Start off-screen */
  animation: subPopupSlideIn 0.5s forwards;
}

@keyframes subPopupSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sub-popup.success { background-color: #27AE60; /* Green */ }
.sub-popup.info    { background-color: #2980B9; /* Blue */ }
.sub-popup.warning { background-color: #F39C12; /* Orange */ }
.sub-popup.error   { background-color: #C0392B; /* Red */ }

/* Admin page specific styles (not directly part of the dark theme for frontend) */
#sub-log-viewer-container textarea {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  color: #333333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sub-input-row,
  .sub-actions-row {
    flex-direction: column; /* Stack these groups vertically on small screens */
  }
  /* .sub-options-column will naturally stack its children, so no change needed here for its flex-direction */
  .sub-input-area {
    min-width: 100%; /* Full width on small screens */
  }
  .subtractor-tool {
    padding: 1em;
  }
  .sub-options-tld-filter {
      max-width: 100%; /* Allow TLD filter to take full width on small screens */
  }
}