/* Ensure html and body take full height */
html, body {
  min-height: 100vh; /* Use viewport height */
  margin: 0;
  padding: 0;
  /* Slightly off-white for a softer look */
  background-color: #f8f9fa; /* Base color, might be overridden */
  /* Subtle gradient for depth */
  /* Default background-image moved to JS options */
  color: #212529; /* Default text color */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  transition: background 0.4s ease, color 0.3s ease; /* Transition the whole background property */
}

/* Apply dynamic background properties directly to body */
body {
    background-size: cover; /* Scale images/patterns nicely */
    background-repeat: repeat; /* Default for patterns */
    /* REMOVE background-attachment: fixed; Temporarily */
}

* {
  font-weight: 600; /* Slightly bolder default */
  box-sizing: border-box; /* Better layout control */
  outline-offset: 4px; /* Offset focus rings slightly */
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* Config Buttons (Settings, Edit Layout) */
.config-btn {
  position: fixed;
  top: 25px; /* Adjusted top */
  right: 25px; /* Base position for the rightmost button */
  width: 45px; /* Slightly smaller */
  height: 45px;
  border-radius: 12px; /* Less rounded */
  border: 1px solid #dee2e6; /* Subtle border */
  background: #ffffff; /* Brighter background */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Softer shadow */
  color: #495057; /* Darker gray icon */
  font-size: 1.3em; /* Adjusted icon size */
  cursor: pointer;
  z-index: 1001;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.config-btn:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly larger shadow on hover */
   background-color: #f1f3f5; /* Slight background change */
   border-color: #ced4da;
}

/* Position existing buttons */
#edit-layout-button {
    right: 80px;
}
#undo-button {
    right: 135px;
}
/* Position NEW Add button */
#add-new-button-top {
    right: 190px; /* Position left of undo (135 + 45 + 10) */
}

.config-btn i {
    background: transparent;
}

/* Style for the edit layout button when active */
#edit-layout-button.edit-active {
  background-color: #e9ecef;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  border-color: #adb5bd;
  color: #007bff; /* Use an accent color */
}

/* Dark theme for active edit layout button */
body.dark-theme #edit-layout-button.edit-active {
  background-color: #495057;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  border-color: #6c757d;
  color: #58a6ff; /* Accent color for dark mode */
}

/* Modal Base */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.55); /* Slightly darker overlay */
  backdrop-filter: blur(4px); /* Increased blur */
  /* Animation for modal appearance */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Prevent interaction when hidden */
}

/* Modal Content Styling */
.modal-content {
  background-color: #ffffff;
  margin: 10% auto;
  padding: 25px 30px 30px 30px; /* Slightly adjust padding */
  border-radius: 10px; /* Slightly more rounded */
  width: 90%;
  max-width: 480px; /* Increase max-width slightly */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Softer shadow */
  position: relative;
  transform: translateY(-20px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Modal Content Visible State */
.modal.modal-visible .modal-content {
    transform: translateY(0);
}

.close-button {
  color: #6c757d; /* Gray close button */
  position: absolute; /* Position absolutely */
  top: 10px;
  right: 15px;
  font-size: 1.8rem; /* Larger */
  font-weight: bold;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  transition: color 0.2s ease;
}

.close-button:hover,
.close-button:focus {
  color: #000000;
}

.modal-content h2 {
    background: transparent;
    margin-top: 0;
    margin-bottom: 25px; /* More space below heading */
    color: #343a40; /* Darker heading */
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    transition: color 0.3s ease;
}

/* Theme Switch */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  background: transparent;
  padding: 10px 0; /* Add some padding */
  margin-bottom: 15px; /* Space below */
}

.theme-switch-wrapper span {
    margin-left: 15px; /* More space */
    background: transparent;
    color: #495057;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Smaller switch */
  height: 28px;
  background: transparent;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ced4da; /* Gray background */
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Smaller handle */
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Add shadow to handle */
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff; /* Accent color */
}

input:checked + .slider:before {
  transform: translateX(22px); /* Adjust translation distance */
}

.slider.round {
  border-radius: 28px; /* Match height */
}

.slider.round:before {
  border-radius: 50%;
}

/* Focus state for theme switch */
.theme-switch input:focus-visible + .slider {
    outline: 2px solid var(--focus-ring-color, #0d6efd);
    outline-offset: 2px;
}

/* --- Button Container & General Button Styling --- */
/* Default: Fixed Layout (Flexbox Wrap) */
.button-container {
  display: flex; /* Default to flex */
  flex-wrap: wrap; /* Default wrap */
  justify-content: center; /* Default center */
  padding: 25px 15px;
  gap: 20px;
}

/* Add specific class for dynamic layout */
body.layout-mode-dynamic .button-container {
  display: grid; /* Use Grid only when dynamic */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-items: center;
  /* Remove flex properties */
  flex-wrap: unset;
  justify-content: stretch; /* Changed from unset, likely okay */
  /* Rows will now size based on content height */
}

.inner {
  position: relative;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  /* Let the .Btn inside determine size */
  width: auto;
  height: auto;
  cursor: pointer;
  color: #495057;
  /* Removed transform and zoom */
  transition: none;
  display: block;
}

body.layout-mode-dynamic .inner {
  width: 100%;
  height: 100%; /* Let inner fill the grid cell (now auto height) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.Btn {
  padding: 10px 5px;
  border: none;
  /* Use JS-controlled variables for size */
  width: var(--button-current-width);
  height: var(--button-current-height);
  margin: 0;
  /* Remove width/height transition, apply specific ones if needed */
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-elevation-low-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #495057;
  overflow: hidden;
  box-sizing: border-box;
}

body.layout-mode-dynamic .Btn {
  width: 100%; /* Fill grid cell width */
  height: var(--button-current-height); /* USE VARIABLE for height */
}

.Btn i {
  font-size: var(--icon-current-size); /* Use JS variable */
  background: transparent;
  color: inherit;
  transition: color 0.2s ease, transform 0.2s ease, font-size 0.1s ease; /* Add font-size transition */
  margin-bottom: 5px;
  margin-top: 0;
  flex-shrink: 0;
}

.Btn img {
  width: var(--img-current-size); /* Use JS variable */
  height: var(--img-current-size); /* Use JS variable */
  object-fit: contain;
  background: transparent;
  margin-bottom: 5px;
  margin-top: 0;
  transition: transform 0.2s ease, width 0.1s ease, height 0.1s ease; /* Add size transition */
  flex-shrink: 0;
}

.button-url {
    font-size: var(--url-current-font-size); /* Use JS variable */
    color: #495057;
    background: transparent;
    text-align: center;
    max-width: 95%;
    overflow-wrap: break-word;
    word-break: break-all;
    line-height: 1.2;
    font-weight: 500;
    transition: color 0.2s ease, font-size 0.1s ease; /* Add font-size transition */
    padding: 0 5px;
    flex-shrink: 0;
}

.Btn:hover {
  box-shadow: var(--shadow-elevation-medium-light); /* Apply medium shadow on hover */
  background-color: #fdfdff; /* Keep slight background change */
}

.Btn:hover i,
.Btn:hover img {
    transform: scale(1.05); /* Keep subtle scale */
}

.Btn:active {
    transform: scale(0.98) translateY(0px); /* REMOVED var(--button-scale) from transform */
    box-shadow: var(--shadow-elevation-high-light); /* Apply high shadow (or inset?) when active */
    background-color: #f0f2f5;
}

/* --- Style for Buttons with Links --- */
.Btn.has-link {
    /* Remove specific border for links, rely on icon/text */
    /* Slightly thicker border for links? */
    /* border-width: 1.5px; */
    /* background-color: #f0f6ff; /* Subtle background tint */
}

.Btn.has-link:hover {
    /* background-color: #e6f0ff; */
}

/* Remove the old text demo styles */
/* #text, #text2, #text3 related styles removed */
.scale, #text, #text2, #text3, #text:hover, #text2:hover, #text3:hover {
    display: none;
}

/* --- Dark Theme Styles --- */
html.dark-theme,
body.dark-theme {
    background-color: #212529; /* Dark background */
    background-image: linear-gradient(to bottom, #2b3035, #212529); /* Dark gradient */
    color: #e9ecef; /* Light text */
}

body.dark-theme .config-btn {
    background: #343a40; /* Darker element background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-color: #495057; /* Darker border */
    color: #adb5bd; /* Lighter gray icon */
}

body.dark-theme .config-btn:hover {
    background-color: #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 2px 0 0 rgba(255, 255, 255, 0.1);
    border-color: #6c757d;
}

body.dark-theme .modal-content {
    background-color: #343a40;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    color: #f8f9fa; /* Light text in modal */
}

body.dark-theme .modal-content h2 {
    color: #f8f9fa;
}

body.dark-theme .theme-switch-wrapper span {
    color: #ced4da;
}

body.dark-theme .close-button {
    color: #adb5bd;
}

body.dark-theme .close-button:hover {
    color: #f8f9fa;
}

body.dark-theme .slider {
    background-color: #495057;
}

body.dark-theme input:checked + .slider {
    background-color: #58a6ff; /* Dark theme accent */
}

body.dark-theme .Btn {
    background: #343a40;
    border: none;
    box-shadow: var(--shadow-elevation-low-dark);
    color: #ced4da;
    /* width is now 100% */
}

body.dark-theme .Btn:hover {
    background-color: #495057;
    box-shadow: var(--shadow-elevation-medium-dark); /* Apply medium dark shadow */
}

body.dark-theme .Btn:active {
    transform: scale(0.98) translateY(0px); /* REMOVED var(--button-scale) from transform */
    background-color: #2c3136; /* Slightly lighter dark on active */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.dark-theme .button-url {
    color: #e9ecef; /* Brighter text for contrast */
}

body.dark-theme .Btn.has-link {
    /* Remove specific border for links */
    /* background-color: #2c3e50; /* Subtle dark background tint */
}

body.dark-theme .Btn.has-link:hover {
    /* background-color: #e6f0ff; */
}

/* --- Link Modal Specific Styles --- */

.link-modal-content label,
.link-modal-content input[type="checkbox"],
.link-modal-content .inline-label {
    background: transparent;
    color: inherit; /* Inherit color from modal content */
    font-size: 0.95rem;
}

.link-modal-content .form-group {
    margin-bottom: 20px; /* More space between form groups */
    background: transparent;
}

.link-modal-content .form-group label:not(.inline-label) {
    display: block;
    margin-bottom: 8px; /* Space between label and input */
    font-weight: 600;
}

.link-modal-content .form-group input[type="url"],
.link-modal-content .form-group input[type="text"] {
    width: 100%;
    padding: 10px 12px; /* More padding */
    border: 1px solid #ced4da; /* Standard border */
    border-radius: 6px; /* Slightly less rounded */
    background-color: #f8f9fa; /* Very light background */
    color: #495057;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.link-modal-content .form-group input[type="url"]:focus,
.link-modal-content .form-group input[type="text"]:focus {
    border-color: #80bdff; /* Accent color border on focus */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring */
}

.link-modal-content .form-group .inline-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.link-modal-content .form-group input[type="checkbox"] {
    margin-right: 10px;
    width: 1em;
    height: 1em;
    opacity: 1;
    cursor: pointer;
}

.modal-buttons {
    text-align: right;
    margin-top: 25px;
    background: transparent;
    display: flex; /* Use flexbox for button spacing */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Space between buttons */
}

.modal-btn {
    padding: 8px 18px; /* Adjusted padding */
    margin-left: 0; /* Remove margin, use gap */
    border: 1px solid transparent; /* Base border */
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.save-btn {
    background-color: #007bff; /* Primary blue */
    color: white;
    border-color: #007bff;
}
.save-btn:hover { background-color: #0056b3; border-color: #0056b3; }

.remove-btn {
    background-color: #dc3545; /* Red */
    color: white;
    border-color: #dc3545;
}
.remove-btn:hover { background-color: #c82333; border-color: #bd2130; }

.cancel-btn {
    background-color: #f8f9fa; /* Light gray */
    color: #495057;
    border-color: #ced4da;
}
.cancel-btn:hover { background-color: #e2e6ea; border-color: #dae0e5;}

/* Dark theme for link modal inputs/buttons */
body.dark-theme .link-modal-content .form-group input[type="url"],
body.dark-theme .link-modal-content .form-group input[type="text"] {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}
body.dark-theme .link-modal-content .form-group input[type="url"]:focus,
body.dark-theme .link-modal-content .form-group input[type="text"]:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

body.dark-theme .link-modal-content label,
body.dark-theme .link-modal-content .inline-label {
    color: #ced4da;
}

body.dark-theme .save-btn { background-color: #58a6ff; color: #212529; border-color: #58a6ff; }
body.dark-theme .save-btn:hover { background-color: #8ec1ff; border-color: #8ec1ff; }
body.dark-theme .remove-btn { background-color: #e06c75; color: #212529; border-color: #e06c75;}
body.dark-theme .remove-btn:hover { background-color: #f0848d; border-color: #f0848d;}
body.dark-theme .cancel-btn { background-color: #495057; color: #f8f9fa; border-color: #6c757d; }
body.dark-theme .cancel-btn:hover { background-color: #5a6268; border-color: #545b62; }

/* Style for danger buttons */
.danger-btn {
    background-color: #dc3545; /* Red */
    color: white;
    border-color: #dc3545;
}
.danger-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Tooltip Styles (Hold to Edit / URL on Hover) */
/* Tooltip using ::after pseudo-element */
.inner::after {
  content: attr(data-tooltip); /* Get content from data-tooltip */
  position: absolute;
  bottom: calc(100% + 8px); /* Increased gap */
  left: 50%;
  transform: translateX(-50%);
  background-color: #343a40; /* Dark background */
  color: #f8f9fa; /* Light text */
  padding: 6px 10px; /* Increased padding */
  border-radius: 4px; /* Rounded corners */
  font-size: 0.8em; /* Slightly larger font */
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none; /* Don't interfere with mouse */
 
  /* Fade-in effect */
  visibility: hidden; 
  opacity: 0; 
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out; /* Faster transition, remove transform */
  transform: translateX(-50%); /* Only horizontal centering */
}

/* Tooltip Visible on Hover */
.inner:hover::after {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s; /* Shorter delay */
}

/* --- Styles for Edit Mode --- */
.edit-mode .Btn {
  cursor: grab;
}

.edit-mode .Btn:active {
  cursor: grabbing;
}

/* Remove Button Icon Styling */
.remove-btn-icon {
  display: none;
  position: absolute;
   /* Use JS variable for size-dependent positioning */
  top: calc(var(--remove-icon-current-size) / -2.2);
  right: calc(var(--remove-icon-current-size) / -2.2);
  width: var(--remove-icon-current-size);
  height: var(--remove-icon-current-size);
  background-color: #dc3545; /* Red */
  color: white;
  border: 2px solid #ffffff; /* Add white border to pop */
  border-radius: 50%;
  cursor: pointer;
  z-index: 10; /* Increase z-index above button */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: background-color 0.2s ease, transform 0.2s ease, width 0.1s ease, height 0.1s ease, top 0.1s ease, right 0.1s ease; /* Add transitions */
}

.remove-btn-icon svg {
  display: block;
  width: 55%;
  height: 55%;
  stroke: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.remove-btn-icon:hover {
  background-color: #3b82f6;
}

/* Show remove icon in edit mode */
.edit-mode .inner .remove-btn-icon {
  display: block;
}

/* Dark theme remove icon border */
body.dark-theme .remove-btn-icon {
    border-color: #343a40;
}

/* Add Button Placeholder Default Style */
#add-button-placeholder {
    display: none; /* Hide by default */
    /* Ensure it fits in the grid/flex layout correctly */
    width: var(--button-current-width); /* Match button width in fixed mode */
    height: var(--button-current-height); /* Match button height in fixed mode */
}

/* Show in Edit Mode */
.edit-mode #add-button-placeholder {
    display: flex; /* Show when edit mode is active */
     /* Adjust width/height for dynamic grid if necessary */
}
body.layout-mode-dynamic .edit-mode #add-button-placeholder {
    width: 100%; /* Take full grid cell width */
    height: 100%; /* Take full grid cell height */
}

/* --- Responsive Adjustments --- */

/* Medium Screens / Tablets (e.g., <= 768px) */
@media (max-width: 768px) {
    .config-btn {
        top: 15px; /* Closer to edge */
        right: 15px;
        width: 42px; /* Slightly smaller */
        height: 42px;
        font-size: 1.2em;
    }

    #edit-layout-button {
        right: 67px; /* Adjust spacing (15 + 42 + 10) */
    }

    #undo-button {
        right: 119px; /* Adjust spacing (67 + 42 + 10) */
    }

    /* Adjust modal margins for smaller screens */
    .modal-content {
        margin: 15% auto; /* Less top margin */
        padding: 25px; /* Slightly less padding */
        max-width: 90%; /* Allow it to use more width */
    }

    /* Reduce gap between buttons slightly */
    .button-container {
        gap: 15px;
        padding: 20px 10px; /* Adjust padding */
    }

     /* Adjust base size for dynamic grid on smaller screens */
     body.layout-mode-dynamic .button-container {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Smaller min width */
    }

    /* Force Add button to be visible on mobile */
    #add-button-placeholder {
        display: flex !important; /* Override default 'none' and potentially edit mode 'flex' if edit mode was off */
        order: 99; /* Optional: Try to push it to the end */
    }

     /* Ensure placeholder size matches buttons on mobile */
     body.layout-mode-dynamic #add-button-placeholder {
        /* Height is controlled by grid row in dynamic mode, width is 100% */
         height: var(--button-current-height); /* Explicitly match button height */
         width: auto; /* Allow grid to size width based on minmax */
         min-width: 90px; /* Match button min-width on smallest screens */
     }
     body:not(.layout-mode-dynamic) #add-button-placeholder {
         /* Fixed mode uses explicit size */
         width: var(--button-current-width);
         height: var(--button-current-height);
     }

    /* Hide paste hint on smaller screens (already exists)*/
    #paste-hint {
        display: none;
    }
}

/* Small Screens / Phones (e.g., <= 480px) */
@media (max-width: 480px) {
     html {
        font-size: 95%; /* Slightly reduce base font size */
     }

    .config-btn {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.1em;
    }

    #edit-layout-button {
        right: 60px; /* Adjust spacing (10 + 40 + 10) */
    }

    #undo-button {
        right: 110px; /* Adjust spacing (60 + 40 + 10) */
    }

     /* Modal uses almost full width */
    .modal-content {
        margin: 20% auto;
        padding: 20px 15px;
        max-width: 94%;
    }
     .modal-content h2 {
        font-size: 1.3rem;
        margin-bottom: 20px;
     }

     /* Further reduce gap */
    .button-container {
        gap: 10px;
        padding: 15px 5px;
    }

    /* Adjust button padding on small screens */
    .Btn {
        padding: 8px 3px; /* Less vertical padding */
    }
    .Btn i, .Btn img {
        margin-bottom: 3px; /* Less space below icon */
    }


     /* Further adjust base size for dynamic grid */
     body.layout-mode-dynamic .button-container {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Even smaller min width */
    }

    #paste-hint {
        font-size: 0.85em;
        padding: 5px 0 0 0;
        margin-bottom: 10px;
    }
}

/* Placeholder Styles */
.placeholder {
  /* Use JS-controlled variables for size in fixed mode */
  width: var(--button-current-width);
  height: var(--button-current-height);
  margin: 0;
  border-radius: 8px;
  background-color: rgba(108, 117, 125, 0.1);
  border: 2px dashed #adb5bd;
  box-sizing: border-box;
  flex-shrink: 0;
  /* Add transition for smoother size changes */
   transition: width 0.1s ease, height 0.1s ease;
}

body.layout-mode-dynamic .placeholder {
  width: 100%; /* Fill grid cell */
  /* Height should match grid row height */
  height: var(--button-current-height); /* USE VARIABLE for height */
  min-width: 120px;
  grid-column: auto;
  grid-row: auto;
  /* Transition doesn't apply same way here */
  transition: none;
}

/* Dragging Style */
.dragging {
  opacity: 0.8;
  position: absolute !important;
  z-index: 1000;
  pointer-events: none;
  cursor: grabbing !important;
  transition: none !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  background-color: #ffffff;
}

body.dark-theme .dragging {
    background-color: #343a40;
}

/* Optional: Add some styling for the new setting */
.layout-mode-selector .layout-options {
    display: flex;
    gap: 15px; /* Space between radio options */
    flex-grow: 1;
    justify-content: flex-start; /* Align to start */
}

.layout-mode-selector label {
    display: inline-flex; /* Align radio and text */
    align-items: center;
    cursor: pointer;
    margin-right: 0; /* Remove default margin if any */
    flex-basis: auto; /* Override default label basis */
    font-weight: 500; /* Slightly lighter weight for options */
}

.layout-mode-selector input[type="radio"] {
    margin-right: 5px;
}

body.dark-theme .layout-mode-selector label {
    color: #ced4da;
}

/* --- Settings Section Styles (Icon Size Slider etc.) --- */
.setting-item {
    margin-top: 18px; /* Consistent top margin */
    padding-top: 18px; /* Consistent top padding */
    border-top: 1px solid #e9ecef; /* Separator */
    display: flex;
    align-items: center; /* Vertically align items */
    background: transparent;
    flex-wrap: wrap;
    gap: 10px 15px; /* Add vertical/horizontal gap */
}

.setting-item:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.setting-item label:first-child { /* Target the main label for each setting */
    flex-shrink: 0;
    color: #495057;
    font-size: 0.95rem;
    font-weight: 600;
    padding-top: 5px; /* Add slight padding for alignment with controls */
    padding-bottom: 5px;
}

.setting-item input[type="range"] {
    flex-grow: 1;
    margin-right: 15px;
    cursor: pointer;
    height: 5px; /* Slimmer track */
    background: #dee2e6; /* Track background */
    border-radius: 5px;
    appearance: none; /* Override default */
    -webkit-appearance: none;
}
/* Style the thumb */
.setting-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; /* Slightly larger thumb */
  height: 18px;
  background: #0d6efd; /* Bootstrap blue */
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.setting-item input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #0d6efd;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}

.setting-item span#button-scale-value {
    min-width: 3.5em; /* Ensure space for value */
    text-align: right;
    background: #e9ecef; /* Give value a background */
    color: #495057;
    padding: 2px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums; /* Ensure consistent character width */
    font-size: 0.9rem;
    font-weight: 500;
}

/* Reset Button Style */
.reset-btn {
    margin-left: 10px;
    padding: 3px 8px; /* Slightly more padding */
    font-size: 0.75em; /* Smaller reset button text */
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    color: #495057;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.reset-btn:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

/* Focus state for reset button */
.reset-btn:focus-visible {
    outline: 2px solid var(--focus-ring-color, #0d6efd);
    outline-offset: 1px;
    border-color: #0d6efd;
}

/* Dark theme for Settings */
body.dark-theme .setting-item {
    border-top-color: #495057;
}
body.dark-theme .setting-item label:first-child {
    color: #ced4da;
}
body.dark-theme .setting-item input[type="range"] {
    background: #495057;
}
body.dark-theme .setting-item input[type="range"]::-webkit-slider-thumb {
  background: #3b82f6; /* Brighter blue for dark */
}
body.dark-theme .setting-item input[type="range"]::-moz-range-thumb {
  background: #3b82f6;
}
body.dark-theme .setting-item input[type="range"]:hover::-webkit-slider-thumb {
    background: #60a5fa;
}
body.dark-theme .setting-item input[type="range"]:hover::-moz-range-thumb {
    background: #60a5fa;
}
body.dark-theme .reset-btn {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}
body.dark-theme .reset-btn:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
body.dark-theme .reset-btn:focus-visible {
    outline-color: var(--focus-ring-color-dark, #3b82f6);
    border-color: #3b82f6;
}

/* Root variables for scaling */
:root {
    --focus-ring-color: #0d6efd;       /* Default focus color (blue) */
    --focus-ring-color-dark: #3b82f6;  /* Dark mode focus color */
    --shadow-color-light: 220deg 30% 40%; /* Slightly desaturated blueish tint for light mode */
    --shadow-elevation-low-light: /* Resting state - Light */
        0.2px 0.4px 0.5px hsl(var(--shadow-color-light) / 0.15),
        0.4px 0.8px 1px -0.8px hsl(var(--shadow-color-light) / 0.2),
        1px 1.9px 2.4px -1.7px hsl(var(--shadow-color-light) / 0.25);
    --shadow-elevation-medium-light: /* Hover state - Light (Softer) */
        0.2px 0.4px 0.5px hsl(var(--shadow-color-light) / 0.16),
        0.8px 1.5px 1.9px -0.5px hsl(var(--shadow-color-light) / 0.20),
        2.0px 3.8px 4.8px -1.0px hsl(var(--shadow-color-light) / 0.25),
        4.5px 8.6px 10.8px -1.5px hsl(var(--shadow-color-light) / 0.30);
    --shadow-elevation-high-light: /* Active state - Light (subtler, maybe slight inset) */
        0.1px 0.2px 0.3px hsl(var(--shadow-color-light) / 0.2),
        0.3px 0.6px 0.8px -1.2px hsl(var(--shadow-color-light) / 0.25),
        0.7px 1.3px 1.7px -2.5px hsl(var(--shadow-color-light) / 0.3);

    /* Dark Theme Shadows */
    --shadow-color-dark: 220deg 30% 75%; /* Lighter, desaturated blueish tint for dark mode */
    --shadow-elevation-low-dark: /* Resting state - Dark */
        0.2px 0.4px 0.5px hsl(var(--shadow-color-dark) / 0.18),
        0.4px 0.8px 1px -0.8px hsl(var(--shadow-color-dark) / 0.23),
        1px 1.9px 2.4px -1.7px hsl(var(--shadow-color-dark) / 0.28);
    --shadow-elevation-medium-dark: /* Hover state - Dark (Softer) */
        0.2px 0.4px 0.5px hsl(var(--shadow-color-dark) / 0.20),
        0.8px 1.5px 1.9px -0.5px hsl(var(--shadow-color-dark) / 0.25),
        2.0px 3.8px 4.8px -1.0px hsl(var(--shadow-color-dark) / 0.30),
        4.5px 8.6px 10.8px -1.5px hsl(var(--shadow-color-dark) / 0.35);
    --shadow-elevation-high-dark: /* Active state - Dark */
        0.1px 0.2px 0.3px hsl(var(--shadow-color-dark) / 0.25),
        0.3px 0.6px 0.8px -1.2px hsl(var(--shadow-color-dark) / 0.3),
        0.7px 1.3px 1.7px -2.5px hsl(var(--shadow-color-dark) / 0.35);

    /* Base Sizes (remain the same) */
    --button-base-width: 130px;
    --button-base-height: 80px;
    --button-base-icon-size: 3.0em;
    --button-base-url-font-size: 0.75em;
    --button-base-img-size: 32px;
    --remove-icon-base-size: 22px;

    /* Variables to be set by JS */
    --button-current-width: var(--button-base-width);
    --button-current-height: var(--button-base-height);
    --icon-current-size: var(--button-base-icon-size);
    --url-current-font-size: var(--button-base-url-font-size);
    --img-current-size: var(--button-base-img-size);
    --remove-icon-current-size: var(--remove-icon-base-size);
    --body-text-color-light: #212529;
    --body-text-color-dark: #e9ecef;
    --body-text-color: var(--body-text-color-light); /* Default to light */
    /* Define size for favicon background based on image size */
    --favicon-bg-size: calc(var(--img-current-size) + 12px); /* Image size + padding */
    --favicon-bg-radius: 10px; /* Adjust as desired */
    --square-button-base-min-grid-column-width: 65px; /* Renamed and kept value */
    --square-grid-min-width: var(--square-button-base-min-grid-column-width); /* Renamed variable */
}

/* Hint for Paste URL */
#paste-hint {
    text-align: center;
    padding: 10px 0 0 0; /* Only padding top */
    font-size: 0.9em; /* Slightly larger hint */
    color: #6c757d; /* Gray */
    margin-bottom: 15px;
}

body.dark-theme #paste-hint {
    color: #adb5bd; /* Lighter gray */
}

/* Add focus-visible state for buttons */
.Btn:focus-visible {
   outline: 2px solid var(--focus-ring-color, #0d6efd);
   outline-offset: 2px;
   box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); /* Optional: add outer glow */
}

body.dark-theme .Btn:active {
    transform: scale(0.98) translateY(0px);
    background-color: #2c3136;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.dark-theme .Btn.has-link:hover {
    /* transform: translateX(-50%) translateY(0); Removed this, likely error */
}

/* Dark theme focus-visible state */
body.dark-theme .Btn:focus-visible {
    outline-color: var(--focus-ring-color-dark, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Focus state for slider */
.setting-item input[type="range"]:focus-visible::-webkit-slider-thumb {
   box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3);
}
.setting-item input[type="range"]:focus-visible::-moz-range-thumb {
   box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3);
}

/* Dark theme tooltip */
body.dark-theme .inner::after {
    background-color: #e9ecef; /* Light background */
    color: #212529; /* Dark text */
}

/* --- Styles for Edit Mode --- */
.edit-mode .button-container {
    /* Add visual cues for edit mode */
    background-color: rgba(0, 123, 255, 0.05); /* Subtle blue tint */
    border: 1px dashed var(--focus-ring-color, #0d6efd); /* Dashed border */
    border-radius: 8px;
    padding: calc(25px - 1px) calc(15px - 1px); /* Adjust padding for border */
}

body.dark-theme .edit-mode .button-container {
    background-color: rgba(59, 130, 246, 0.1); /* Subtle blue tint for dark */
    border-color: var(--focus-ring-color-dark, #3b82f6);
}

body.dark-theme .setting-item input[type="range"]:focus-visible::-moz-range-thumb {
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}
 
body.dark-theme .reset-btn {
    background-color: #495057;
}

/* Modal */
.modal.modal-visible { /* Increased specificity */
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Allow interaction when visible */
}

/* Background Selector Styles */
.background-selector .background-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
    justify-content: flex-start; /* Align options to the start */
}

.background-option {
    display: inline-flex; /* Change from block/default to inline-flex */
    align-items: center; /* Vertically align radio/preview if needed */
    justify-content: center; /* Horizontally center radio/preview if needed */
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    padding: 2px;
    transition: border-color 0.2s ease;
    position: relative;
    flex-grow: 0; /* Keep this */
    flex-shrink: 0; /* Keep this */
    /* Remove explicit width/height if label should just wrap preview */
}

.background-option input[type="radio"] {
    /* Hide the actual radio button */
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.background-option .preview {
    display: block; /* Keep as block */
    width: 45px;
    height: 32px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease;
}

.background-option input[type="radio"]:checked + .preview {
    /* Style the preview of the checked option */
}

.background-option input[type="radio"]:checked {
    /* Style the label of the checked option */
}

/* Checkmark overlay for selected background */
.background-option input[type="radio"]:checked::after {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 5 Free'; /* Ensure correct font */
    font-weight: 900; /* Use solid style weight */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.1em;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); /* Make checkmark pop */
    pointer-events: none; /* Don't interfere with clicks */
}

.background-option:hover {
     border-color: #adb5bd; /* Subtle hover indication */
}

.background-option input[type="radio"]:focus-visible + .preview {
    outline: 2px solid var(--focus-ring-color, #0d6efd);
    outline-offset: 1px;
}

body.dark-theme .background-option {
     border-color: transparent;
}
body.dark-theme .background-option input[type="radio"]:checked {
}

/* Dark theme checkmark */
body.dark-theme .background-option input[type="radio"]:checked::after {
     color: #e9ecef; /* Lighter checkmark */
     text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); 
}

body.dark-theme .background-option:hover {
     border-color: #495057;
}
body.dark-theme .background-option .preview {
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-theme .background-option input[type="radio"]:focus-visible + .preview {
    outline-color: var(--focus-ring-color-dark, #3b82f6);
}

/* Developer Options specific styles */
.developer-options {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #adb5bd;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.developer-options label {
     flex-basis: 100px;
     margin-right: 10px;
     padding-bottom: 0;
}

.developer-options .modal-btn {
     margin-left: 0;
     flex-grow: 1;
     flex-basis: 0;
     min-width: 100px;
}
.developer-options .danger-btn {
    margin-left: auto;
    flex-grow: 0;
}

/* Dark theme adjustments */
body.dark-theme .developer-options {
     border-top-color: #6c757d;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .layout-options {
        gap: 10px 15px;
        justify-content: flex-start;
    }
    .background-options {
        justify-content: flex-start;
    }

    .developer-options {
        justify-content: center;
        gap: 8px;
    }
     .developer-options label {
         flex-basis: 100%;
         margin-right: 0;
         margin-bottom: 8px;
         text-align: center;
     }
     .developer-options .modal-btn {
         flex-grow: 1;
         text-align: center;
         flex-basis: 45%;
         min-width: 0;
     }
     .developer-options .danger-btn {
         margin-left: 0;
         flex-basis: 100%;
         margin-top: 5px;
      }
}

/* --- Styles for Square Layout Mode --- */

body.layout-mode-square .button-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--square-grid-min-width), 1fr));
  justify-items: center;
  flex-wrap: unset;
  justify-content: unset;
  gap: 4px; /* <<< Further reduced gap */
}

body.layout-mode-square .inner {
  /* Make inner fill the grid cell */
  width: 100%; /* Changed from var(--button-current-width) */
  height: 100%; /* Changed from var(--button-current-height) */
  display: flex;
  background: transparent;
  box-shadow: none;
  /* Add align/justify needed to center the Btn inside */
  align-items: center;
  justify-content: center;
}

body.layout-mode-square .Btn {
  /* Btn should now respect its content size + padding, */
  /* but not necessarily fill 100% if inner is centering it. */
  /* Let's keep width/height using variables for now */
  width: var(--button-current-width);
  height: var(--button-current-height);
  /* If the above doesn't work, try removing width/height here */
  /* width: auto; */
  /* height: auto; */

  background: transparent;
  box-shadow: none;
  padding: 8px 1px 5px 1px; /* Keep reduced padding */
  justify-content: flex-start;
  align-items: center;
  color: var(--body-text-color);
  overflow: hidden;
  /* Ensure flex properties from base .Btn are present if needed */
  display: flex; 
  flex-direction: column;
  box-sizing: border-box;
}

/* Style for the default FontAwesome icon when no favicon */
body.layout-mode-square .Btn i {
  font-size: var(--icon-current-size);
  text-align: center;
  width: var(--favicon-bg-size);
  flex-shrink: 0;
  margin-bottom: 0; /* Remove bottom margin */
}


/* Styles for Favicon Background */
body.layout-mode-square .favicon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--favicon-bg-size);
  height: var(--favicon-bg-size);
  background-color: #fff;
  border-radius: var(--favicon-bg-radius);
  margin-bottom: 0; /* Remove bottom margin */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Adjustments for img inside the background */
body.layout-mode-square .Btn img {
  /* Remove direct margin */
  margin-bottom: 0;
  /* Make image fill the container */
  width: 100%;  /* Fill container width */
  height: 100%; /* Fill container height */
  /* Remove max limits */
  /* max-width: 80%; */
  /* max-height: 80%; */
  object-fit: cover; /* Cover the area, potentially cropping */
  /* Remove explicit border-radius if bg has it */
}

body.layout-mode-square .button-url {
    color: var(--body-text-color);
    font-size: calc(var(--url-current-font-size) * 0.9);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    /* Adjust max-width slightly */
    max-width: calc(var(--button-current-width) - 2px); /* Reduce based on new padding */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 10px;
    padding: 0 1px; /* Reduced L/R padding from 2px to 1px */
}

/* Adjustments for placeholder */
/* Ensure default fixed placeholder uses variables too */
.placeholder { /* Base placeholder style */
  width: var(--button-current-width);
  height: var(--button-current-height);
  /* ... other base styles: margin, border-radius, etc. ... */
  margin: 0;
  border-radius: 8px;
  background-color: rgba(108, 117, 125, 0.1);
  border: 2px dashed #adb5bd;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: width 0.1s ease, height 0.1s ease;
}
body.layout-mode-square .placeholder {
     width: var(--button-current-width); /* Use current width */
     height: var(--button-current-height); /* Use current height */
     min-width: var(--square-grid-min-width); /* Use renamed variable */
     /* Keep other necessary placeholder styles */
     margin: 0;
     border-radius: 8px;
     background-color: rgba(108, 117, 125, 0.1);
     border: 2px dashed #adb5bd;
     box-sizing: border-box;
     flex-shrink: 0;
     transition: none;
}


/* --- Responsive Adjustments --- */

/* Medium Screens / Tablets */
@media (max-width: 768px) {
    /* ... existing rules ... */
    /* Adjust square grid */
    body.layout-mode-square .button-container {
        gap: 4px; /* <<< Keep very reduced gap */
    }
     /* ... existing rules ... */
}
/* Small Screens / Phones */
@media (max-width: 480px) {
    /* ... existing rules ... */
     /* Adjust square grid */
    body.layout-mode-square .button-container {
        gap: 5px; /* <<< Slightly larger than desktop, but still small */
    }
    /* ... existing rules ... */
      body.layout-mode-square .favicon-bg {
         /* Remove bottom margin adjustment if done above */
         /* margin-bottom: 3px; */
      }
       /* Adjust default icon padding/margin on mobile */
      body.layout-mode-square .Btn i {
        /* Remove padding/margin adjustments if done above */
        /* padding-top: 8px; */
        /* padding-bottom: 8px; */
        /* margin-bottom: 4px; */
      }
      body.layout-mode-square .button-url {
          padding: 0 1px; /* Further reduce L/R padding */
          margin-top: 8px; /* Slightly less margin on small screens */
      }
}

/* Specific adjustments for layout/background option containers */
.layout-options, .background-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px; /* Increased horizontal gap for layout options */
    flex-grow: 1;
    justify-content: flex-start;
    padding-left: 5px;
    align-items: center; /* Vertically align items in the row */
}

.background-options {
    padding-top: 5px;
    gap: 8px; /* Slightly smaller gap for background previews */
}

/* Ensure consistent preview size */
.background-option .preview {
    display: block;
    width: 45px; /* Adjust size slightly if needed */
    height: 32px; /* Adjust size slightly if needed */
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease; /* Add subtle scale on hover */
}
.background-option:hover .preview {
    transform: scale(1.05);
}