:root {
  --primary-color: #457b9d;
  --secondary-color: #fff;
  --text-color: #ababab;
  --border-color: #252525;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --font-family: 'Inter', sans-serif;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  margin: 0;
  background-color: var(--secondary-color);
  line-height: 1.4;
  font-size: 75%;
}

/* Container utama */
.container {
  display: flex; /* Keep flex */
  flex-direction: column; /* Keep column */
  height: 100vh; /* Use viewport height */
  max-height: 1200px; /* Apply max height */
  box-sizing: border-box;
  overflow: hidden; /* Prevent body scroll */
}

/* Main Content Area (Editor Row + Thumbnails) */
.main-content-area {
  display: flex;
  flex-direction: column; /* Stack editor row and thumbnails vertically */
  flex-grow: 1; /* Take up available vertical space */
  overflow-y: auto; /* Allow this area to scroll vertically if needed */
  overflow-x: hidden; /* Prevent horizontal scroll */
  position: relative;
}

/* Editor Row (Controls + Canvases) */
.editor-row {
  display: flex;
  flex-direction: row; /* Controls and Canvases side-by-side */
  flex-grow: 1; /* Take available vertical space within main-content-area */
  min-height: 0; /* Prevent flex items from overflowing */
  overflow: hidden; /* Hide overflow */
}

/* Media query for mobile devices */
/* @media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .controls {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
  
  .canvas-container {
    padding: 10px;
  }
  
  #canvas {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 4/5;
  }
  
  .edit-panel {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    background: white;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  
  #imagePanel img {
    max-width: 80px;
  }
}

/* Touch-specific styles */
/* @media (hover: none) and (pointer: coarse) {
  .element {
    touch-action: none;
  }
  
  .resize-handle,
  .rotate-handle,
  .delete-btn {
    width: 40px;
    height: 40px;
  }
  
  .element.active {
    outline: 3px solid blue;
  }
} */

/* Panel kontrol di sebelah kiri */
.controls {
  width: 280px; /* Slightly wider */
  padding: 20px; /* Slightly reduce padding */
  box-sizing: border-box;
  border-right: 1px solid var(--border-color);
  background-color:var(--secondary-color);
  display: flex;
  flex-direction: column;
  gap: 0; /* Reduce spacing between control groups */
  flex-shrink: 0; /* Prevent controls from shrinking */
  overflow-y: auto; /* Allow controls to scroll if content overflows */
  height: 100%; /* Make controls take full height of editor-row */
  /* align-items: center; */ /* Removed - No longer centering all items */
}

.controls h1 {
  font-size: 1.5em;
  margin-bottom: 5px;
  color: var(--primary-color);
}

.controls p {
  font-size: 0.9em;
  color: #666;
  margin-top: 0;
  margin-bottom: 10px; /* Reduce bottom margin */
}

.controls label {
  font-weight: 500;
  margin-bottom: 3px; /* Reduce space below labels */
  display: block; /* Ensure labels are on their own line */
}

.controls hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 15px 0; /* Reduce vertical margin for hr */
}

/* Panel gambar */
#imagePanel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Reduce gap */
  margin-top: 5px; /* Reduce top margin */
}

#imagePanel img {
  width: 100%;
  max-width: 80px; /* Slightly smaller thumbnails */
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px; /* Rounded corners */
  transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#imagePanel img:hover {
  border-color: var(--primary-color);
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Panel kanvas di sebelah kanan */
.canvas-container {
  flex: 1;
  padding: 0 30px; /* More padding */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--secondary-color); /* Match body background */
}

/* Kanvas utama */
#canvas {
  width: 400px;
  height: 500px;
  border: none; /* Remove border */
  position: relative;
  overflow: hidden;
  background-color: #fff; /* White background for canvas */
  box-shadow: 0 4px 15px var(--shadow-color); /* Add shadow */
  border-radius: 8px; /* Rounded corners */
}

/* Container for URL input and canvases scroll area */
#allCanvasesContainer {
  display: flex;
  flex-direction: column; /* Stack URL input and canvases vertically */
  justify-content: flex-start; /* Align items to the top */
  align-items: center; /* Center horizontally */
  flex-grow: 1;
  padding: 20px; /* Revert to simpler padding */
  overflow-y: auto; /* Allow vertical scrolling if needed */
  background-color: var(--secondary-color);
  min-width: 0;
  /* height: 100%; */ /* Keep height removed */
  box-sizing: border-box;
}

/* URL input group styles (now in main area) */
.url-input-group {
  display: flex;
  flex-direction: row;
  align-items: center; /* Center label, input, button */
  width: 80%; /* Adjust width */
  max-width: 500px; /* Max width for larger screens */
  padding: 10px 0; /* Further reduced vertical padding */
  margin-top: 0; /* Rely on container padding */
  margin-bottom: 0px; /* Restore slightly more space below */
  flex-shrink: 0; /* Prevent shrinking */
}

.url-input-group input[type="text"] {
  flex: 1; /* Allow input to take available space */
  margin-right: 10px; /* Space between input and button */
  min-width: 200px; /* Set a minimum width for the input */
}

.url-input-group #fetchDataBtn {
  flex-shrink: 0; /* Prevent button from shrinking */
  width: 100px; /* Set a fixed width for the button */
}

/* Wrapper for horizontally scrolling canvases */
.canvases-scroll-area {
  display: flex;
  flex-direction: row; /* Arrange canvases horizontally */
  gap: 30px; /* Space between canvas instances */
  width: 100%; /* Take full width */
  overflow-x: auto; /* Allow HORIZONTAL scrolling */
  overflow-y: hidden; /* Hide vertical scrollbar */
  align-items: flex-start; /* Align instances to the top */
  padding: 10px 0; /* Reduced padding */
  /* min-height: 450px; */ /* Keep min-height removed */
  flex-grow: 1; /* Restore flex-grow */
}

/* Adjust padding inside the canvas container
#allCanvasesContainer > .canvas-instance:first-child {
  /* Maybe add padding-top if needed 
}*/

/* Individual canvas instance wrapper */
.canvas-instance {
  display: flex; /* Use flex to arrange canvas and button vertically */
  flex-direction: column;
  align-items: center; /* Center canvas and button horizontally */
  gap: 15px; /* Space between canvas and download button */
  /* border: 3px solid transparent; */ /* Removing border for active state for now */
  /* padding: 5px; */
  /* border-radius: 12px; */
  transition: transform 0.2s ease; /* Add slight scale effect on hover maybe */
  flex-shrink: 0; /* Prevent instances from shrinking */
}

/* Styling for the Add Canvas button container (now outside canvas container) */
.add-canvas-container {
  display: flex;
  flex-direction: column; /* Stack vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  padding: 30px 20px; /* Match container padding */
  box-sizing: border-box;
  flex-shrink: 0; /* Don't shrink */
  width: 150px; /* Fixed width for the button column */
  border-left: 1px solid var(--border-color); /* Separator */
  border-right: 1px solid var(--border-color); /* Separator */
  background-color: #fff; /* White background */
}

#addCanvasBtn {
  /* Reset styles from previous attempt */
  margin: 0;
  width: 100%; /* Full width of its container */
  height: auto;
  padding: 15px 10px; /* Adjust padding */
  font-size: 1em; /* Adjust font size */
  background-color: #6c757d; /* Keep grey background */
  /* Add text wrapping if needed */
  white-space: normal;
  line-height: 1.3;
}
#addCanvasBtn:hover {
  background-color: #5a6268;
}


/* Add a subtle hover effect */
.canvas-instance:not(.active-canvas-instance):hover {
   transform: scale(1.02);
}


.canvas-instance.active-canvas-instance .canvas {
  /* Maybe add a more prominent shadow or outline to the canvas itself when active */
   box-shadow: 0 0px 3px rgba(74, 144, 226, 0.4) /* Blue shadow for active */
}

/* Styles for the actual canvas div inside the instance */
.canvas {
  width: 400px; /* Keep fixed size */
  height: 500px;
  border: none;
  position: relative;
  overflow: hidden;
  background-color: #fbfbfb;
  box-shadow: 0 4px 15px var(--shadow-color);
  cursor: pointer; /* Indicate canvas area is clickable for activation */
  transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Download button styling */
.instance-actions {
  width: 100%; /* Take full width of the instance area */
  text-align: center; /* Center the button */
}

.instance-actions .downloadBtn {
  /* Use standard button styles or customize */
  padding: 8px 20px;
  font-size: 0.9em;
}


/* Wrapper tiap elemen */
.element {
  position: absolute;
  user-select: none;
  min-width: 50px;
  /* min-height: 50px; */
}

/* Konten di dalam wrapper */
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Tombol resize: diposisikan absolut di dalam body sehingga tidak terpotong oleh overflow kanvas */
.resize-handle,
.rotate-handle,
.delete-btn {
  position: absolute;
  width: 24px; /* Smaller handles */
  height: 24px;
  background: var(--primary-color);
  border: 1px solid white; /* White border for contrast */
  border-radius: 50%;
  z-index: 1000;
  touch-action: none;
  display: flex; /* Use flex for centering icon/text */
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  text-align: center;
}

.resize-handle {
  cursor: se-resize;
  right: -12px; /* Adjust position */
  bottom: -12px;
}
/* Add simple icon for resize */
/*.resize-handle::before {
  content: '↔'; /* Simple resize symbol
  font-size: 12px;
  transform: rotate(45deg);
}*/


.rotate-handle {
  cursor: pointer;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%); /* Center horizontally */
  font-size: 14px; /* Adjust icon size */
}
/* Add rotate icon */
/*.rotate-handle::before {
  content: '↻'; /* Rotate symbol
}*/

.delete-btn {
  cursor: pointer;
  left: -12px;
  top: -12px;
  background: #e74c3c; /* Red for delete */
  font-size: 14px; /* Adjust icon size */
}
/* Add delete icon */
.delete-btn::before {
  content: '×'; /* Close symbol */
  font-weight: bold;
}
.autoTextInserted {
  z-index: 1000;
}

.element.active {
  outline: 2px dashed var(--primary-color); /* Use primary color for outline */
}

.element.active .resize-handle,
.element.active .rotate-handle,
.element.active .delete-btn {
  display: flex; /* Keep display: flex for handles */
}

/* Adjust handle visibility based on parent instance being active *and* element being active */
.canvas-instance.active-canvas-instance .element.active .resize-handle,
.canvas-instance.active-canvas-instance .element.active .rotate-handle,
.canvas-instance.active-canvas-instance .element.active .delete-btn,
.canvas-instance.active-canvas-instance .element.active .move-button { /* Added move-button */
  display: flex; /* Show handles only on active element within active canvas */
}


/* Move button style (ensure it exists) */
.move-button {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  border: 1px solid white;
  border-radius: 50%;
  z-index: 1000;
  touch-action: none;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: move;
  font-size: 14px;
  padding: 0;
}
/*.move-button::before {
    content: '✥'; /* Move symbol
}*/


/* Hide original move button if it still exists with old class */
.element button.move-btn {
  display: none; /* Ensure old button is hidden */
  /* position: absolute; */ /* Remove positioning if hiding */
  /* left: 50%; */
  /* bottom: -15px; */
  /* transform: translateX(5px); */ /* Add spacing from rotate button */
  /* z-index: 1000; */
}

/* Action buttons container */
.action-buttons {
  padding: 15px 25px; /* Match controls padding */
  text-align: center;
  background-color: #fff;
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: 0;
  z-index: 900;
  /* This class is now only on the Add Canvas container */
  position: static; /* Reset sticky positioning */
  padding: 0; /* Reset padding */
  border: none; /* Reset border */
  background-color: transparent; /* Reset background */
  /* display: flex; */ /* Reset display */
  /* gap: 10px; */
  /* justify-content: center; */
  /* background-color: var(--secondary-color); */
  /* border-top: none; */
  /* padding: 10px 25px; */
}
/* #addCanvasBtn { */
  /* background-color: #6c757d; */ /* Style moved to .add-canvas-container #addCanvasBtn */
/* } */
/* #addCanvasBtn:hover { */
  /* background-color: #5a6268; */
/* } */


/* Styling tambahan untuk input teks dan textarea */
/* Modern Form Styles */
input[type="text"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 10px 12px; /* More padding */
  margin-bottom: 8px; /* Reduce space below inputs */
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 0.95em;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* =========================
   Loader Overlay (Floating)
   ========================= */
#loaderModal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#loaderModal.active {
  opacity: 1;
  pointer-events: all;
}


.loader-spinner {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 5px solid #eee;
  border-top: 5px solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 18px;
}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* Modal Overlay & Box */
.modal-overlay, .modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 32px 24px 24px 24px;
  min-width: 320px;
  max-width: 95vw;
  width: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: modalPopIn 0.18s cubic-bezier(.4,1.4,.6,1) both;
}

.modal-content {
  max-width: 65vw; /* Set max-width for modal content */
  width: auto; /* Allow width to adjust based on content and max-width */
  background: #111;
}

@keyframes modalPopIn {
  0% { transform: scale(0.92) translateY(30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}
.modal-close-btn:hover {
  color: #e74c3c;
}
.create-post-btn {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: background 0.18s;
}
.create-post-btn:hover {
  background-color: #357abd;
}
#modalLoader {
  color: var(--primary-color);
  font-size: 1em;
  margin-top: 8px;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); /* Subtle focus ring */
}

textarea.text-input {
  resize: vertical;
  min-height: 80px; /* Minimum height for textarea */
}

/* Modern Button Styles */
button {
  padding: 10px 15px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.95em;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease;
  display: inline-block; /* Ensure buttons behave predictably */
  margin-right: 5px; /* Spacing between buttons if inline */
  margin-bottom: 5px; /* Add bottom margin for spacing */
}
.delete-button{
  padding: 0 5px;
  background: red;
}
button:hover {
  background-color: #3a7bc8; /* Darker shade on hover */
}

button:active {
  transform: scale(0.98); /* Slight press effect */
}

/* Specific button adjustments */
#fetchDataBtn, #addTextBtn, #addTextareaBtn {
  width: 100%; /* Make main action buttons full width */
  margin-top: 3px; /* Reduce top margin */
}

input[type="file"] {
  border: 1px dashed var(--border-color); /* Dashed border for file input */
  padding: 15px;
  text-align: center;
}
input[type="file"]::file-selector-button { /* Style the internal button */
  padding: 8px 12px;
  background-color: #e0e0e0;
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.2s ease;
}
input[type="file"]:hover::file-selector-button {
  background-color: #d0d0d0;
}


.download-container {
  padding: 20px; /* Add padding around download button */
  text-align: center;
  background-color: #fff; /* Give it a background */
  border-top: 1px solid var(--border-color); /* Separator line */
  position: sticky; /* Keep it visible if controls scroll */
  bottom: 0;
  /* Removed - Now in .action-buttons */
}


/* Edit Panel Styles */
.edit-panel { /* Now using class selector */
  position: absolute; /* Position relative to canvas-container */
  top: 505px; /* Position below the canvas (adjust as needed) */
  width: 400px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 8px 12px; /* Adjust padding */
  border-radius: 6px;
  box-shadow: 0 3px 8px var(--shadow-color);
  z-index: 1000;
  display: flex;
  gap: 8px; /* Adjust gap */
  align-items: center; /* Align items vertically */
}

/* Styles for the new color picker group */
.color-picker-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

/* Style for the label acting as the button */
.color-picker-label {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #eee;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.color-picker-label:hover {
  background-color: #ddd;
}

.color-picker-label .icon {
  font-size: 1.2em;
  font-weight: bold;
}

.color-picker-label .label-text {
  font-size: 0.9em;
}


/* Use class selectors for controls inside edit panel */
.edit-panel .fontFamily,
.edit-panel .fontSize,
.edit-panel .textColor,
.edit-panel .textBgColor,
.edit-panel .bgOpacity,
.edit-panel .boldText {
  padding: 6px 8px; /* Consistent padding */
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.9em;
  margin: 0; /* Reset margin */
  display: inline-block; /* Make elements display inline */
  width: 68px;
}

.edit-panel .textColor,
.edit-panel .textBgColor, .edit-panel .elementBgColor { /* Style color inputs */
  width: 30px;
  height: 30px;
  padding: 2px;
  border: none;
  cursor: pointer;
  position: absolute;
  opacity: 0;
}

.edit-panel .bgOpacity { /* Style range input */
  height: 5px;
  cursor: pointer;
  padding: 0; /* Remove padding for range */
}

.edit-panel .boldText { /* Style button */
  font-weight: bold;
  cursor: pointer;
  background-color: #eee;
  color: var(--text-color);
  width: 32px;
}
.edit-panel .boldText:hover {
  background-color: #ddd;
}

.edit-panel label { /* Style labels within panel */
  font-size: 0.85em;
  color: #555;
  display: inline-block; /* Make labels display inline */
}
.opacity-control {
  display: inline-flex;
  flex-direction: column;
  width: 75px;
  align-items: center;
}

.opacity-control label {
  font-size: 12px;
}

.opacity-control .bgOpacity {
  width: 100%;
}

/* Hide original resize/rotate/move buttons inside element (redundant but safe) */
.element button.move-btn,
.element button.rotate-btn {
  display: none;
}

.editable-text:focus {
    outline: 2px dashed var(--primary-color); /* Use primary color for focus */
}

.toggle-controls {
  display: none; /* Keep hidden on desktop */
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: 1001;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 50%; /* Make it circular */
  cursor: pointer;
  box-shadow: 0 2px 5px var(--shadow-color);
  font-size: 1.2em;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

/* Loader Style */
#loader {
  color: var(--primary-color);
  font-weight: 500;
  text-align: center;
  padding: 10px;
}


/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  /* Adjust container height for mobile */
  .container {
    height: auto; /* Allow height to adjust to content */
    min-height: 100vh; /* Ensure it still takes at least full screen */
    max-height: none; /* Remove max-height */
  }

  .main-content-area {
    flex-direction: column; /* Stack editor row and thumbnails vertically on mobile */
    overflow: hidden; /* Prevent this area itself from scrolling */
    /* Remove height calculation from here */
  }

  .editor-row {
    flex-direction: column; /* Stack controls and canvases vertically */
    /* overflow: visible; */
    overflow-y: auto; /* Allow this row to scroll */
    height: calc(100vh - 80px); /* Apply height calculation here */
    flex-grow: 1; /* Ensure it tries to take available space */
  }

  .controls {
    height: auto; /* Reset height */
    /* Keep fixed positioning logic for mobile */
    position: fixed;
    left: -280px; /* Match new width */
    top: 0;
    height: 100vh;
    width: 280px; /* Match new width */
    background: white;
    transition: left 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 2px 0 5px var(--shadow-color);
    border-right: none; /* Remove border on mobile */
    padding-top: 60px; /* Space for toggle button */
  }

  .controls.open {
    left: 0;
  }

  /* Toggle button */
  .toggle-controls {
    display: flex; /* Show on mobile */
  }

  .canvas-container {
    width: 100%;
    padding: 15px; /* Adjust padding */
    margin-top: 0; /* Remove margin, handled by controls padding */
    align-items: flex-start; /* Align canvas to top */
  }

  /* Adjust canvas container on mobile - remove outer padding */

  /* Adjust canvas size on mobile */
  .canvas {
    width: 300px; /* Smaller fixed size for mobile */
    height: 375px; /* Maintain aspect ratio */
    /* max-width: 90vw; */ /* Alternative: use viewport width */
    /* height: auto; */
    /* aspect-ratio: 4 / 5; */
    margin: 0 auto;
  }

   /* Adjust all canvases container on mobile */
   #allCanvasesContainer {
     padding: 15px;
     justify-content: flex-start; /* Align items to top on mobile */
     /* Keep align-items: center; */
     overflow: hidden; /* Keep hidden */
     min-height: auto; /* Reset min-height */
     height: auto; /* Let content determine height */
     flex-grow: 1; /* Allow it to take space */
   }

   /* Adjust URL input group on mobile */
   .url-input-group {
     width: 95%; /* Wider on mobile */
     margin-bottom: 20px; /* Reduce margin */
   }

   /* Adjust canvases scroll area on mobile */
   .canvases-scroll-area {
     gap: 20px;
     padding: 10px 0;
     min-height: 400px; /* Adjust min height */
   }

    /* Adjust add canvas container on mobile - This class is no longer used */
   /* .add-canvas-container { ... } */

   /* Adjust Add Slide button within thumbnail container */
   .thumbnail-container #addCanvasBtn {
     padding: 10px 15px;
     font-size: 0.95em;
     width: auto; /* Auto width on mobile */
   }


   /* Adjust canvas instance on mobile */
   .canvas-instance {
     gap: 10px; /* Reduce gap */
   }

  .edit-panel {
    position: fixed; /* Fixed position on mobile */
    bottom: 10px; /* Position at the bottom */
    top: auto;
    left: 10px;
    right: 10px;
    transform: none; /* Reset transform */
    width: auto; /* Adjust width based on content */
    max-width: calc(100% - 20px); /* Max width */
    justify-content: center; /* Center items */
    flex-wrap: wrap; /* Allow wrapping */
  }

  #imagePanel img {
    max-width: 60px; /* Smaller thumbnails on mobile */
  }

  /* Make handles slightly larger for touch */
  .resize-handle,
  .rotate-handle,
  .delete-btn {
    width: 28px;
    height: 28px;
  }
  .resize-handle { right: -14px; bottom: -14px; }
  .rotate-handle { bottom: -14px; }
  .delete-btn { left: -14px; top: -14px; }
  } /* Closing brace for @media screen and (max-width: 768px) */

/* Thumbnail Navigation Styles */
.thumbnail-container {
  display: flex;
  align-items: center; /* Vertically align items */
  justify-content: center; /* Center thumbnails horizontally */
  padding: 15px 0; /* Vertical padding only */
  border-top: 1px solid var(--border-color);
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  gap: 15px; /* Space between thumbnails and button */
  width: 100%; /* Span full width */
  margin-top: 10px; /* Keep reduced space above the thumbnail bar */
  /* z-index: 950; */ /* Likely not needed */
  /* box-shadow: 0 -2px 5px var(--shadow-color); */ /* Removed shadow */
  flex-shrink: 0; /* Prevent thumbnail bar from shrinking */
  box-sizing: border-box; /* Include padding in width calculation */
}

.thumbnail {
  flex-shrink: 0; /* Prevent thumbnails from shrinking */
  width: 80px; /* Fixed width */
  height: 60px; /* Fixed height */
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  color: #555;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.thumbnail:hover {
  border-color: var(--primary-color);
}

.thumbnail.active-thumbnail {
  border-color: var(--primary-color);
  background-color: #e9f2fc; /* Light blue background for active */
  font-weight: 500;
  color: var(--primary-color);
  border-width: 2px;
}

/* Add Slide Button Styles */
.add-slide-btn {
  flex-shrink: 0; /* Prevent shrinking */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px; /* Match thumbnail width */
  height: 60px; /* Match thumbnail height */
  background-color: transparent; /* Transparent background */
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 5px; /* Add some padding */
  box-sizing: border-box;
}

.add-slide-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background-color: transparent; /* Ensure background doesn't change on hover */
}

.add-slide-btn .plus-icon {
  font-size: 1.8em; /* Larger plus icon */
  line-height: 1; /* Adjust line height */
}

.add-slide-btn .add-slide-text {
  font-size: 0.75em; /* Smaller text */
  margin-top: 4px; /* Space between icon and text */
  line-height: 1;
}

/* Override previous #addCanvasBtn styles */
#addCanvasBtn {
  /* Reset styles that might conflict */
  margin: 0;
  width: auto; /* Let the .add-slide-btn class control width */
  height: auto; /* Let the .add-slide-btn class control height */
  padding: 0; /* Let the .add-slide-btn class control padding */
  font-size: inherit; /* Inherit from parent or .add-slide-btn */
  background-color: transparent; /* Ensure transparent */
  white-space: normal;
  line-height: inherit;
  border: none; /* Remove default button border */
  color: inherit; /* Inherit color */
}
#addCanvasBtn:hover {
  background-color: transparent; /* Ensure transparent on hover */
}

/* Adjustments for mobile thumbnail bar */
@media screen and (max-width: 768px) {
  .thumbnail-container {
    padding: 10px 0; /* Vertical padding only */
    gap: 10px; /* Reduce gap */
    margin-top: 15px; /* Adjust margin */
    /* justify-content: center; */ /* Already set above */
    /* width: 100%; */ /* Already set above */
    flex-shrink: 0; /* Ensure it doesn't shrink */
  }

  .thumbnail {
    width: 70px;
    height: 50px;
    font-size: 0.75em;
  }

  .add-slide-btn {
    width: 70px;
    height: 50px;
  }

  .add-slide-btn .plus-icon {
    font-size: 1.6em;
  }

  .add-slide-btn .add-slide-text {
    font-size: 0.7em;
  }
}

/* Header Styles */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--secondary-color); /* Light grey background */
  border-bottom: 1px solid var(--border-color); /* Subtle border at the bottom */
}

.site-title {
  font-size: 24px;
  font-weight: bold;
  color: #333; /* Dark grey color */
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px; /* Space between menu items */
}

.site-nav li {
  display: inline;
}

.site-nav a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 500;
  transition: color 0.3s ease;
}

.site-nav a:hover {
  color: #000; /* Darker color on hover */
}

/* =========================
   Dark Mode Theme
   ========================= */
[data-theme="dark"] {
  --primary-color: #90caf9;
  --secondary-color: #181a1b;
  --text-color: #e0e0e0;
  --border-color: #333;
  --shadow-color: rgba(0,0,0,0.7);
  --font-family: 'Inter', sans-serif;
}

[data-theme="dark"] body,
[data-theme="dark"] .controls,
[data-theme="dark"] .canvas-container,
[data-theme="dark"] .add-canvas-container,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .action-buttons,
[data-theme="dark"] .download-container,
[data-theme="dark"] .edit-panel,
[data-theme="dark"] .site-header,
[data-theme="dark"] .thumbnail,
[data-theme="dark"] .thumbnail.active-thumbnail,
[data-theme="dark"] .add-slide-btn {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .canvas,
[data-theme="dark"] #canvas {
  background-color: #23272a !important;
  box-shadow: 0 4px 15px var(--shadow-color);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #23272a;
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] button,
[data-theme="dark"] .create-post-btn {
  background-color: var(--primary-color);
  color: #181a1b;
}

[data-theme="dark"] .modal-box {
  background: #23272a;
  color: var(--text-color);
}

[data-theme="dark"] .controls h1,
[data-theme="dark"] .site-title {
  color: var(--primary-color);
}

/* Template Modal Styles */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 4 columns, responsive */
  gap: 15px; /* Space between template options */
  margin-top: 20px;
}

.template-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.1s ease;
  background-color: var(--secondary-color); /* Use secondary color for background */
}

.template-option:hover {
  border-color: var(--primary-color);
  transform: scale(1.03);
}

.template-option img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color); /* Add a subtle border to images */
}

.template-option span {
  font-size: 0.9em;
  color: var(--text-color); /* Use text color for label */
  text-align: center;
}

/* Dark mode adjustments for template options */
[data-theme="dark"] .template-option {
  background-color: #23272a !important; /* Darker background for dark mode */
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .template-option img {
   border-color: var(--border-color) !important;
}

[data-theme="dark"] .template-option span {
  color: var(--text-color) !important;
}
[data-theme="dark"] .modal-content {
  background-color: #111;
}