/* src/index.css */

/* Both Inconsolata and Urbanist are now loaded from Google Fonts in index.html for better performance */

/* --- Existing body styles --- */
body {
  margin: 0;
  /* --- APPLY THE FONT --- */
  /* Use the name defined above, add fallbacks */
  font-family: 'Inconsolata', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* --- Apply theme background from App.css or here --- */
  /* background-color: #f8fafc; */
}

code {
  /* Optionally apply specifically to code tags if different needed */
  font-family: 'Inconsolata', monospace;
}

/* --- Other existing global styles --- */

/* Hide cursor when edge preview is active - only within ReactFlow canvas */
body.edge-preview-active .react-flow,
body.edge-preview-active .react-flow *,
body.edge-preview-active .react-flow__pane,
body.edge-preview-active .react-flow__renderer,
body.edge-preview-active .react-flow__zoompane {
  cursor: none !important;
}

/* Restore cursor for modals and overlays when edge preview is active */
body.edge-preview-active [aria-modal='true'],
body.edge-preview-active [aria-modal='true'] *,
body.edge-preview-active [role='dialog'],
body.edge-preview-active [role='dialog'] * {
  cursor: auto !important;
}

/* MainApp/MainComponents/OngoingRequestsPanel.module.css */
.OngoingRequestsPanel_panelContainer__37b\+H {
  /* MODIFIED: Changed from fixed positioning to relative */
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.OngoingRequestsPanel_iconContainer__unVD8 {
  background-color: var(--node-bg);
  color: var(--node-text-on-dark-bg);
  border-radius: 20%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--node-border);
  position: relative;
  transition: transform 0.2s ease;
}

.OngoingRequestsPanel_iconContainer__unVD8:hover {
  transform: scale(1.1);
}

.OngoingRequestsPanel_requestCount__LZUJn {
  position: absolute;
  top: -4px;
  right: -4px;
  /* background-color: var(--node-border-selected); */
  background-color: #5b00ff;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.OngoingRequestsPanel_gridContainer__fYO-F {
  /* MODIFIED: Positioned absolutely to appear above the icon */
  position: absolute;
  bottom: 100%; /* Places the bottom of the grid at the top of the container */
  margin-bottom: 10px; /* Adds a gap between the grid and the icon */

  background-color: rgba(44, 44, 46, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-gap: 8px;
  gap: 8px;
  width: -webkit-max-content;
  width: max-content;
  max-height: 144px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for the grid */
.OngoingRequestsPanel_gridContainer__fYO-F::-webkit-scrollbar {
  width: 5px;
}
.OngoingRequestsPanel_gridContainer__fYO-F::-webkit-scrollbar-track {
  background: transparent;
}
.OngoingRequestsPanel_gridContainer__fYO-F::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}

/* Animation for the grid to appear upwards */
.OngoingRequestsPanel_gridContainer__fYO-F {
  transform: translateY(15px) scale(0.9);
  transform-origin: bottom center;
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s ease-out;
  pointer-events: none;
}

.OngoingRequestsPanel_panelContainer__37b\+H.OngoingRequestsPanel_open__oNvfT .OngoingRequestsPanel_gridContainer__fYO-F {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.OngoingRequestsPanel_gridCell__ooEzP {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.OngoingRequestsPanel_gridCell__ooEzP:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #fff;
  box-shadow: 0 0 10px var(--hover-color, #fff); /* Glow effect */
}

.OngoingRequestsPanel_gridCell__ooEzP img {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* src/nodes/InputNode.module.css */
@keyframes InputNode_scaleInNode__QYFSG {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}
/* --- Base Node Styling --- */
/* Styles for the main container of the input node */
.InputNode_nodeBase__Zm1RG {
  /* Green color scheme for InputNode */
  --input-node-bg: #f0fdf4; /* green-50 */
  --input-node-border: #86efac; /* green-300 */
  --input-node-border-selected: #22c55e; /* green-500 */
  --input-node-text: #14532d; /* green-900 */
  --input-node-label-text: #16a34a; /* green-600 */
  --input-node-icon-bg: #dcfce7; /* green-100 */
  --input-node-icon-color: #15803d; /* green-700 */
  --input-node-button-bg: #22c55e; /* green-500 */
  --input-node-button-bg-hover: #16a34a; /* green-600 */
  --input-node-button-text: #f0fdf4; /* green-50 */
  --input-node-textarea-bg: #f6fef9; /* Lighter green */
  --input-node-textarea-border: #bbf7d0; /* green-200 */
  --input-node-connected-data-bg: #dcfce7; /* green-100 */
  --input-node-loading-text: var(--input-node-label-text);
  --input-node-error-text: #ef4444; /* red-500 */

  /* Token counter variables */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */

  /* Image input indicator variables */
  --image-input-bg: #ecfdf5; /* green-50 */
  --image-input-border: #10b981; /* emerald-500 */
  --image-input-text: #065f46; /* emerald-800 */
  --image-input-icon: #059669; /* emerald-600 */
  --image-input-compatible: #059669; /* emerald-600 */
  --image-input-incompatible: #dc2626; /* red-600 */

  /* Modal variables */
  --input-node-modal-bg: var(--input-node-bg);
  --input-node-modal-text: var(--input-node-text);
  --input-node-modal-border: var(--input-node-border);
  --input-node-modal-textarea-bg: var(--input-node-textarea-bg);
  --input-node-modal-textarea-border: var(--input-node-textarea-border);
  --input-node-modal-textarea-text: var(--input-node-text);
  --input-node-modal-button-bg: var(--input-node-button-bg);
  --input-node-modal-button-text: var(--input-node-button-text);
  --input-node-modal-button-hover: var(--input-node-button-bg-hover);
  --input-node-modal-cancel-bg: var(--input-node-label-text);
  --input-node-modal-cancel-text: var(--input-node-bg);
  --input-node-modal-cancel-hover: var(--input-node-text);

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Layout and Box Model */
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid var(--input-node-border);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Colors and Typography */
  background-color: var(--input-node-bg);
  color: var(--input-node-text);
  font-family: 'Inconsolata', monospace; /* Or your preferred font */

  /* Positioning Context */
  position: relative; /* Crucial: Establishes positioning context for absolute children like .floatingIcon */

  /* Transitions */
  transition: border-color 0.2s ease-in-out;
  animation: InputNode_scaleInNode__QYFSG 0.3s ease-out;
}

/* --- High Contrast Dark Theme --- */
body.high-contrast .InputNode_nodeBase__Zm1RG {
  --input-node-bg: #111827; /* gray-900 */
  --input-node-border: #047857; /* emerald-700 */
  --input-node-border-selected: #059669; /* emerald-600 */
  --input-node-text: #f9fafb; /* gray-50 */
  --input-node-label-text: #6ee7b7; /* emerald-300 */
  --input-node-icon-bg: #1f2937; /* gray-800 */
  --input-node-icon-color: #a7f3d0; /* emerald-200 */
  --input-node-button-bg: #047857; /* emerald-700 */
  --input-node-button-bg-hover: #059669; /* emerald-600 */
  --input-node-button-text: #f9fafb; /* gray-50 */
  --input-node-textarea-bg: #1f2937; /* gray-800 */
  --input-node-textarea-border: #4b5563; /* gray-600 */
  --input-node-connected-data-bg: #374151; /* gray-700 */

  /* High contrast image input colors */
  --image-input-bg: #0f1b0f;
  --image-input-border: #047857;
  --image-input-text: #a7f3d0;
  --image-input-icon: #6ee7b7;
  --image-input-compatible: #6ee7b7;
  --image-input-incompatible: #fca5a5;
}

body.no-node-animation .InputNode_nodeBase__Zm1RG {
  animation: none;
}

/* --- Selected Node State --- */
/* Overrides when the node is selected in React Flow */
.react-flow__node.selected .InputNode_nodeBase__Zm1RG {
  border-color: var(--input-node-border-selected);
  box-shadow: 0 0 0 1px var(--input-node-border-selected); /* Enhanced selection outline */
}

/* --- Floating Icon Styling --- */
/* Styles the icon positioned outside the top-left corner */
.InputNode_floatingIcon__v7IPx {
  /* Positioning */

  /* Appearance */
  background-color: #e2fbe8;
  color: var(--input-node-icon-color);
  border-radius: 20%; /* Makes the background circular */
  border: 1px solid var(--input-node-border); /* Optional: Matches node border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Optional: Adds depth */

  /* Size and Alignment */
  width: 28px; /* Adjust size as needed */
  height: 28px; /* Adjust size as needed */
  padding: 0px; /* Adjust padding inside the icon background */
  display: flex; /* Needed for centering the icon inside */
  justify-content: center;
  align-items: center;
}

/* --- Node Header --- */
/* Contains elements at the top of the node (excluding floating icon) */
.InputNode_nodeHeader__vGrAT {
  display: flex;
  justify-content: space-between; /* Pushes buttons to the right */
  align-items: center; /* Vertically aligns items */
  min-height: 28px; /* Ensures consistent header height */
  width: 100%;
  position: absolute;
  top: -30px; /* Negative value moves it above the nodeBase top edge */
  left: -0px; /* Negative value moves it left of the nodeBase left edge */
  z-index: 10; /* Ensures it renders above the node border/content */
}

/* --- Header Buttons --- */
/* Styles the wrapper and individual buttons in the header */
.InputNode_buttonsWrapper__Qh\+Ts {
  display: flex;
  gap: 5px; /* Space between buttons */
}

.InputNode_buttonsWrapper__Qh\+Ts button {
  /* Appearance */
  width: 26px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Typography */
  font-size: 0.6rem; /* Smaller font size for buttons */
  font-weight: 800;
  font-family: 'Inconsolata', monospace; /* Monospace font for buttons */

  /* Transitions and States */
  transition: background-color 0.2s ease;
  margin: 0; /* Reset default margin */
}

.InputNode_buttonsWrapper__Qh\+Ts button svg {
  width: 10px;
  height: 10px;
}

.InputNode_buttonsWrapper__Qh\+Ts button img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.InputNode_buttonsWrapper__Qh\+Ts button:hover {
  background-color: var(--input-node-button-bg-hover);
}

.InputNode_buttonsWrapper__Qh\+Ts button:disabled {
  background-color: var(
    --input-node-label-text
  ); /* Different bg for disabled */
  color: var(--input-node-bg); /* Contrasting text for disabled */
  cursor: not-allowed;
  opacity: 0.6;
}

/* NEW: Active state for the cloud toggle */
.InputNode_buttonsWrapper__Qh\+Ts .InputNode_cloudActive__ID4\+s {
  background-color: var(--input-node-border-selected);
  color: white; /* Make icon white for contrast */
  box-shadow: 0 0 8px var(--input-node-border-selected);
}

/* NEW: Active state for the isolate toggle */
.InputNode_buttonsWrapper__Qh\+Ts .InputNode_isolateActive__JpQb3 {
  background-color: #f59e0b; /* amber-500 - indicates locked/isolated state */
  color: white;
  box-shadow: 0 0 8px #f59e0b;
}

/* --- Node Content Area --- */
/* Styles the main content section holding the textarea, etc. */
.InputNode_nodeContent__nFHMi {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
}

/* --- Textarea Styling --- */
/* Styles the main prompt input textarea */
/* Experimental: Same background as node, no border (like SchemaChildNode) */
.InputNode_nodeContent__nFHMi textarea {
  /* Box Model */
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  padding-bottom: 36px; /* Space for floating footer */
  border: none; /* No stroke - matches outer background */
  border-radius: 4px;
  flex: 1 1;
  min-height: 0;
  resize: none; /* Disable resize since it fills the space */
  box-sizing: border-box;

  /* Colors and Typography */
  background-color: var(--input-node-bg); /* Same as node background */
  color: var(--input-node-text);
  font-family: 'Inconsolata', monospace; /* Monospace for code/prompt */
}

/* --- Connected Data Display --- */
/* Styles the area showing data from connected upstream nodes */
.InputNode_connectedData__iyucl {
  margin-top: 5px;
  padding: 5px;
  font-size: smaller;
  max-height: 50px; /* Limit height and allow scrolling */
  overflow-y: auto;
  background: var(--input-node-connected-data-bg);
  border-radius: 3px;
  border: 1px solid var(--input-node-textarea-border);
  color: var(--input-node-label-text);
  word-break: break-all; /* Prevent long strings from overflowing */
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.InputNode_connectedData__iyucl strong {
  color: var(--input-node-text); /* Make the label stand out */
  margin-right: 4px;
}

.InputNode_coinIcon__RvoBr {
  width: 14px;
  height: 14px;
  /* filter: brightness(0) invert(1); White by default for dark mode */
  opacity: 0.9;
  transition:
    filter 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  filter: brightness(0) invert(0);
  opacity: 0.6;
  /* filter: drop-shadow(0 0 2px rgba(256,256,256,0.5)); */
}

/* --- Loading/Error States --- */
/* Styles for text indicating loading or error messages */
.InputNode_loading__Uvx9F,
.InputNode_error__rbkjp {
  font-size: smaller;
  margin: 5px 0 0 0;
  font-family: 'Inconsolata', monospace;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.InputNode_loading__Uvx9F {
  color: var(--input-node-loading-text);
}

.InputNode_error__rbkjp {
  color: var(--input-node-error-text);
  font-weight: bold;
}

/* --- Token Counter Styling --- */
/* Styles the token counter positioned at the bottom of the node */
.InputNode_tokenCounter__uu3lR {
  position: absolute;
  bottom: -38px; /* Position below the node */
  left: 0;
  right: 0;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.InputNode_tokenInfo__2FjjA {
  display: flex;
  align-items: center;
  gap: 8px;
}

.InputNode_creditInfo__U7cDJ {
  display: flex;
  align-items: center;
  gap: 4px;
}

.InputNode_tokenCount__gur7w {
  color: var(--token-counter-text);
  font-weight: 600;
  font-size: 0.65rem;
}

.InputNode_modelName__HpEmg {
  color: var(--node-label-text);
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  padding: 1px 6px;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.InputNode_estimatedCost__5UqnY {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1); /* green with transparency */
  padding: 1px 4px;
  border-radius: 3px;
}

.InputNode_estimatedCredits__v81Mb {
  color: var(--token-counter-cost-text);
  font-size: 0.6rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1); /* blue with transparency */
  padding: 1px 4px;
  border-radius: 3px;
}

.InputNode_creditInfoIcon__aXtSl {
  color: var(--token-counter-text);
  font-size: 0.6rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.InputNode_creditInfoIcon__aXtSl:hover {
  opacity: 1;
  color: var(--input-node-border-selected);
}

.InputNode_tokenWarning__bwHT\+ {
  color: var(--token-counter-warning-text);
  background-color: var(--token-counter-warning);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom: -50px; /* Position below the main counter when warning appears */
  left: 0;
  right: 0;
}

/* --- Modal Styling --- */
/* General styles for the modal overlay and content box */
/* These might be defined globally or scoped if needed */
.InputNode_modalOverlay__wzxLO {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Ensure modal is on top */
}

.InputNode_modalContent__e27RH {
  /* Box Model and Appearance */
  background: var(--input-node-modal-bg);
  color: var(--input-node-modal-text);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--input-node-modal-border);
  width: 90%;
  max-width: 600px; /* Limit maximum width */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* Specific Content Styling */
  /* Styles for elements specifically inside the modal */
}

.InputNode_modalContent__e27RH h3 {
  margin-top: 0;
  color: var(--input-node-modal-text); /* Use modal text color */
  margin-bottom: 15px; /* Space below heading */
}

.InputNode_modalContent__e27RH textarea {
  /* Modal-specific textarea styles */
  width: calc(100% - 16px); /* Account for padding */
  background-color: var(--input-node-modal-textarea-bg);
  color: var(--input-node-modal-textarea-text);
  border: 1px solid var(--input-node-modal-textarea-border);
  font-family: 'Inconsolata', monospace;
  font-size: 13px;
  padding: 8px;
  border-radius: 4px;
  /* rows attribute controls height, but can set min-height too */
}

/* --- Modal Actions/Buttons --- */
/* Styles for the button container at the bottom of the modal */
.InputNode_modalActions__WKJ7N {
  text-align: right; /* Aligns buttons to the right by default */
  margin-top: 15px;
  display: flex;
  justify-content: flex-end; /* Explicitly align items to the end */
  gap: 10px; /* Space between modal buttons */
}

.InputNode_modalActions__WKJ7N button {
  /* Appearance */
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* Typography */
  font-size: 0.75rem;

  /* Colors and Transitions */
  background-color: var(--input-node-modal-button-bg);
  color: var(--input-node-modal-button-text);
  transition: background-color 0.2s ease;
  margin: 0; /* Reset default margin */
}

.InputNode_modalActions__WKJ7N button:hover {
  background-color: var(--input-node-modal-button-hover);
}

/* Specific style for the cancel button */
.InputNode_modalActions__WKJ7N button.InputNode_cancelButton__d3x8V {
  background: var(--input-node-modal-cancel-bg);
  color: var(--input-node-modal-cancel-text);
}

.InputNode_modalActions__WKJ7N button.InputNode_cancelButton__d3x8V:hover {
  background: var(--input-node-modal-cancel-hover);
}

/* Model Selector Modal */
.InputNode_modelList__-9i4m {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.InputNode_modelList__-9i4m button {
  padding: 10px;
  border: 1px solid var(--input-node-border);
  background-color: var(--input-node-bg);
  color: var(--input-node-text);
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}

.InputNode_modelList__-9i4m button:hover {
  background-color: var(--input-node-icon-bg);
}

.InputNode_modelList__-9i4m button.InputNode_selected__Mthay {
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  border-color: var(--input-node-button-bg-hover);
}

/* src/nodes/InputNode.module.css */
/* ... (keep all existing styles from the previous response) ... */

/* Model Selector Modal Grid and Enhanced Button Styles */
.InputNode_modelGrid__3L0vu {
  /* Changed from modelList to modelGrid */
  display: grid;
  /* Creates a responsive grid with columns between 150px and 1fr wide */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px; /* Increased spacing */
  max-height: 400px;
  overflow-y: auto;
  padding: 5px; /* Add some padding around the grid */
}

.InputNode_categoryHeader__JSrCg {
  /* Existing style for category header */
  font-size: 1.1em;
  font-weight: bold;
  color: var(-node-text);
  margin-top: 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--input-node-border);
  padding-bottom: 5px;
}

/* Style to make category header span full width in the grid */
.InputNode_categoryHeaderFullWidth__z8Oma {
  grid-column: 1 / -1; /* Makes the header span all columns */
  font-size: 1.1em;
  font-weight: bold;
  color: var(-node-text);
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--input-node-border);
}
.InputNode_categoryHeaderFullWidth__z8Oma:first-of-type {
  margin-top: 0; /* Remove top margin for the very first category header */
}

.InputNode_modelButton__Be9HE {
  padding: 10px 12px; /* Adjust padding */
  border: 1px solid var(--input-node-border);
  background-color: var(--input-node-bg);
  color: var(--input-node-text);
  cursor: pointer;
  border-radius: 6px; /* Slightly more rounded */
  text-align: left;
  display: flex; /* For aligning items inside the button */
  justify-content: space-between;
  align-items: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease; /* Smooth transitions */
  min-height: 60px; /* Ensure buttons have some height for content */
}

.InputNode_modelButton__Be9HE:hover {
  background-color: var(--input-node-icon-bg);
  border-color: var(
    --input-node-border-selected
  ); /* Highlight border on hover */
}

.InputNode_modelButton__Be9HE.InputNode_selected__Mthay {
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  border-color: var(--input-node-button-bg-hover);
}

.InputNode_modelInfo__PAdQl {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow model info to take available space */
  margin-right: 8px; /* Space before info icon */
}

.InputNode_modelName__HpEmg {
  font-weight: bold;
  font-size: 0.95em; /* Adjust as needed */
  display: flex;
  align-items: center;
}

.InputNode_modelDescription__OQu\+V {
  font-size: 0.8em; /* Smaller for description */
  color: var(--input-node-label-text);
  margin-top: 3px;
  /* Hide description from button face, it will be shown in alert */
  display: none;
}

.InputNode_costIndicator__8a3ZM {
  margin-left: 8px;
  font-size: 0.9em;
  color: var(--input-node-label-text); /* Or a specific color for cost */
  font-weight: bold;
}

.InputNode_modelButton__Be9HE.InputNode_selected__Mthay .InputNode_costIndicator__8a3ZM {
  color: var(--input-node-button-text); /* Ensure visibility on selected bg */
  opacity: 0.8;
}

.InputNode_infoIcon__unvze {
  font-size: 1.1em; /* Adjust icon size */
  color: var(--input-node-label-text);
  cursor: pointer;
  margin-left: auto; /* Pushes icon to the right if modelInfo doesn't fill space */
  padding: 5px; /* Make it easier to click */
  border-radius: 50%;
  transition: color 0.2s ease;
}

.InputNode_infoIcon__unvze:hover {
  color: var(--input-node-border-selected);
}

.InputNode_modelButton__Be9HE.InputNode_selected__Mthay .InputNode_infoIcon__unvze {
  color: var(--input-node-button-text); /* Ensure visibility on selected bg */
  opacity: 0.8;
}

.InputNode_deprecatedBadge__ZwP0o {
  background-color: var(--input-node-error-text);
  color: white;
  padding: 2px 6px; /* Adjust padding */
  border-radius: 4px;
  font-size: 0.75em; /* Adjust size */
  margin-left: 8px; /* Space from model name/cost */
  align-self: center; /* Align with other text in .modelName */
}

/* Ensure modal content has enough space for the grid */
.InputNode_modalContent__e27RH .InputNode_modelGrid__3L0vu {
  /* If .modalContent is a class on the Modal's inner div */
  min-width: 400px; /* Example: ensure modal is wide enough for a couple of items */
}

.InputNode_schemaIcon__iLrf4 {
  filter: brightness(0) invert(1); /* Default to white */
}

.InputNode_schemaIconBlack__XS-5O {
  filter: brightness(0) invert(0); /* Black for normal contrast */
}

/* Image input indicator styling - standardized across all nodes */
.InputNode_imageInputIndicator__ZNKhQ {
  font-size: 0.8rem;
  color: var(--input-node-border-selected);
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin: 4px 0;
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.InputNode_imageIcon__jhmyl {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.InputNode_compatibilityIndicator__oqOMY {
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: auto;
}

.InputNode_imageDetails__7zF2C {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.InputNode_imageType__4dSLz {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: normal;
}

.InputNode_compatible__4hcel {
  border-color: #10b981 !important; /* green */
  background-color: #d1fae5 !important; /* light green */
  color: #065f46 !important; /* dark green */
}

.InputNode_incompatible__K6YJY {
  border-color: #f59e0b !important; /* amber */
  background-color: #fef3c7 !important; /* light amber */
  color: #92400e !important; /* dark amber */
}

.InputNode_requirementText__Dq4BQ {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: normal;
  margin-top: 2px;
}

.InputNode_imageTimestamp__6lrnA {
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: normal;
}

/* Handle Wrapper and Icons */
.InputNode_handleWrapper__C4BhD {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.InputNode_handleWrapper__C4BhD > * {
  pointer-events: auto;
}

.InputNode_handle__--8kG {
  width: 12px;
  height: 12px;
  background-color: var(--input-node-border-selected);
  border: 2px solid var(--input-node-bg);
  border-radius: 50%;
}

.InputNode_handleIcon__cUzBL {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--input-node-icon-bg);
  border: 1px solid var(--input-node-textarea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--input-node-icon-color);
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Show handle icons on node hover */
.InputNode_nodeBase__Zm1RG:hover .InputNode_handleIcon__cUzBL {
  opacity: 1;
  transform: scale(1);
}

/* Output handle icon - when data is available */
.InputNode_handleIconConnected__mTOTN {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
}

/* Input handle icon - when data is connected, background pulses */
.InputNode_inputHandleIconConnected__LQ5Dk {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  animation: InputNode_iconPulse__CdKDB 2s ease-in-out infinite;
}

/* When isolated, show orange/muted background without animation */
.InputNode_inputHandleIconIsolated__-n0XH {
  background-color: rgba(245, 158, 11, 0.5) !important;
  border-color: #f59e0b !important;
  animation: none;
}

@keyframes InputNode_iconPulse__CdKDB {
  0%,
  100% {
    background-color: var(--input-node-icon-bg);
  }
  50% {
    background-color: #22c55e;
  }
}

@keyframes InputNode_pulse__J4f7F {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

body.high-contrast .InputNode_handle__--8kG {
  background-color: var(--input-node-border-selected);
  border-color: var(--input-node-bg);
}

body.high-contrast .InputNode_handleIcon__cUzBL {
  background-color: var(--input-node-icon-bg);
  border-color: var(--input-node-textarea-border);
  color: var(--input-node-icon-color);
}

body.high-contrast .InputNode_inputHandleIconConnected__LQ5Dk {
  animation: InputNode_iconPulseHighContrast__Acp9r 2s ease-in-out infinite;
}

body.high-contrast .InputNode_inputHandleIconIsolated__-n0XH {
  background-color: rgba(251, 191, 36, 0.5) !important;
  border-color: #fbbf24 !important;
}

body.high-contrast .InputNode_handleIconConnected__mTOTN {
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
}

@keyframes InputNode_iconPulseHighContrast__Acp9r {
  0%,
  100% {
    background-color: var(--input-node-icon-bg);
  }
  50% {
    background-color: #4ade80;
  }
}

/* Schema Status and Regenerate Button */
.InputNode_schemaStatus__3k4W3 {
  margin-top: 8px;
  padding: 8px;
  background-color: var(--input-node-icon-bg);
  border: 1px solid var(--input-node-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.InputNode_schemaStatusText__8QW23 {
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  color: var(--input-node-label-text);
  margin: 0;
  text-align: center;
}

.InputNode_regenerateButton__PACz9 {
  padding: 6px 10px;
  border: none;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.InputNode_regenerateButton__PACz9:hover:not(:disabled) {
  background-color: var(--input-node-button-bg-hover);
  transform: translateY(-1px);
}

.InputNode_regenerateButton__PACz9:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes InputNode_spin__QItVW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.InputNode_spinning__de0Dk {
  animation: InputNode_spin__QItVW 1s linear infinite;
}

/* ================================== */
/* Two-Frame UI Design Styles         */
/* ================================== */

/* Container for both frames - using overflow hidden for reveal effect */
.InputNode_framesContainer__efdmO {
  position: relative;
  width: 100%;
  height: 180px; /* Fixed height to prevent shrinking */
  overflow: hidden;
  border-radius: 6px;
}

/* Collapsed State */
.InputNode_nodeCollapsed__t\+sd1 {
  min-width: 280px;
  max-width: 350px;
  width: 280px; /* Fixed width to prevent size changes */
  padding: 12px;
}

/* Expanded State */
.InputNode_nodeExpanded__\+vVh\+ {
  min-width: 280px;
  max-width: 350px;
  width: 280px; /* Fixed width to prevent size changes */
  padding: 12px; /* Same as collapsed to prevent shrinking */
}

/* Frame 1: Collapsed View - Slides out to left */
.InputNode_collapsedFrame__DtgeL {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for output preview */
.InputNode_collapsedFrame__DtgeL.InputNode_hasOutputPreview__P8DoG {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.InputNode_nodeExpanded__\+vVh\+ .InputNode_collapsedFrame__DtgeL {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.InputNode_collapsedIconsRow__z9lZ9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.InputNode_collapsedIconsRow__z9lZ9.InputNode_hasOutput__3gNi\+ {
  gap: 6px;
}

.InputNode_collapsedIcon__l5wFD {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.InputNode_hasOutput__3gNi\+ .InputNode_collapsedIcon__l5wFD {
  width: 40px;
  height: 40px;
}

.InputNode_collapsedIcon__l5wFD img {
  /* Light green tint for dark mode (default) */
  filter: brightness(0) saturate(100%) invert(85%) sepia(25%) saturate(500%)
    hue-rotate(85deg) brightness(95%) contrast(90%);
  transition: filter 0.2s ease;
}

/* Dark green tint for light mode */
body:not(.high-contrast) .InputNode_collapsedIcon__l5wFD img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(500%)
    hue-rotate(100deg) brightness(95%) contrast(90%);
}

.InputNode_collapsedIcon__l5wFD:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.InputNode_statusIndicators__FUdUw {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.InputNode_statusItem__QudVE {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.InputNode_statusIcon__bViUI {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--input-node-textarea-border);
}

.InputNode_statusActive__UOnG6 {
  background-color: transparent;
  color: var(--input-node-border-selected);
  border-color: var(--input-node-border-selected);
}

.InputNode_statusInactive__AHDUM {
  background-color: transparent;
  color: var(--input-node-label-text);
  opacity: 0.4;
}

.InputNode_statusOutputActive__tVOB0 {
  background-color: transparent;
  color: #3b82f6; /* blue-500 */
  border-color: #3b82f6; /* blue-500 */
}

.InputNode_statusRequired__MT6Oi {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444; /* red-500 */
}

.InputNode_statusCheck__tc0XN {
  color: var(--input-node-border-selected);
}

.InputNode_statusCheckOutput__BniLg {
  color: #3b82f6; /* blue-500 */
}

.InputNode_statusWarning__1beAA {
  color: #ef4444; /* red-500 */
}

.InputNode_collapsedLoading__Yezkr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.InputNode_outputPreview__i4UCo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.InputNode_outputPreviewHeader__P-q7k {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  width: 100%;
}

.InputNode_schemaPropertyTag__RNoZE {
  font-size: 0.6rem;
  padding: 2px 6px;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  border-radius: 3px;
  font-family: 'Inconsolata', monospace;
}

.InputNode_schemaPropertyMore__9k\+ux {
  font-size: 0.6rem;
  padding: 2px 6px;
  background-color: var(--input-node-label-text);
  color: var(--input-node-bg);
  border-radius: 3px;
  font-family: 'Inconsolata', monospace;
}

.InputNode_ghostLines__1RgrP {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.InputNode_ghostLine__73jjO {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--input-node-textarea-border) 0%,
    var(--input-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.InputNode_ghostLine__73jjO:nth-child(2) {
  width: 75%;
}

.InputNode_ghostLine__73jjO:nth-child(3) {
  width: 50%;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.InputNode_expandedFrame__f2eww {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* Expanded header - positioned outside the node at top, centered */
.InputNode_expandedHeader__km1wo {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.InputNode_nodeExpanded__\+vVh\+ .InputNode_expandedHeader__km1wo {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s; /* Slight delay after slide starts */
}

/* Header Credits - styled like floating buttons, 2.5x width */
.InputNode_headerCredits__GxXat {
  width: 65px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--input-node-textarea-border);
  background-color: var(--input-node-bg);
  color: var(--input-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s ease;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.InputNode_headerCredits__GxXat:hover {
  background-color: var(--input-node-icon-bg);
  border-color: var(--input-node-border);
}

.InputNode_headerCoinIcon__gDzZ0 {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  /* Black tint for light mode visibility */
  filter: brightness(0) invert(0);
}

/* White tint for dark mode visibility */
body.high-contrast .InputNode_headerCoinIcon__gDzZ0 {
  filter: brightness(0) invert(1);
}

.InputNode_headerCreditsText__dYGGv {
  color: var(--token-counter-cost-text);
}

.InputNode_headerFreeModel__kScj2 {
  color: var(--input-node-label-text);
}

/* High contrast theme for header credits */
body.high-contrast .InputNode_headerCredits__GxXat {
  background-color: var(--input-node-bg);
  border-color: var(--input-node-textarea-border);
}

body.high-contrast .InputNode_headerCreditsText__dYGGv {
  color: var(--input-node-label-text);
}

/* Floating Message Bar - positioned outside node at bottom */
.InputNode_floatingMessageBar__h2u99 {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

/* Animate message bar in when expanded */
.InputNode_nodeExpanded__\+vVh\+ .InputNode_floatingMessageBar__h2u99 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Error message style */
.InputNode_messageError__\+\+\+kS {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

/* Warning message style */
.InputNode_messageWarning__JdUTa {
  background-color: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

/* Info message style */
.InputNode_messageInfo__pfF-O {
  background-color: rgba(59, 130, 246, 0.15);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

/* Success message style */
.InputNode_messageSuccess__2J\+\+w {
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  color: #22c55e;
}

.InputNode_messageText__mCSlv {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Stacked message bar for multiple errors */
.InputNode_messageStacked__ZoTNS {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  bottom: auto;
  top: 100%;
  margin-top: 8px;
}

.InputNode_messageStackedItem__So-Je {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 5px;
  color: #ef4444;
}

.InputNode_messageStackedItem__So-Je .InputNode_messageText__mCSlv {
  flex: 1 1;
  font-size: 0.7rem;
}

/* High contrast theme for message bar */
body.high-contrast .InputNode_messageError__\+\+\+kS {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

body.high-contrast .InputNode_messageWarning__JdUTa {
  background-color: rgba(253, 186, 116, 0.2);
  border-color: #fdba74;
  color: #fdba74;
}

body.high-contrast .InputNode_messageInfo__pfF-O {
  background-color: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
  color: #60a5fa;
}

body.high-contrast .InputNode_messageSuccess__2J\+\+w {
  background-color: rgba(74, 222, 128, 0.2);
  border-color: #4ade80;
  color: #4ade80;
}

/* Footer Controls - Floating bar inside node at bottom */
.InputNode_expandedFooter__auaI4 {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

/* Token counter in expanded footer - inline style */
.InputNode_expandedFooter__auaI4 .InputNode_tokenCounter__uu3lR {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  font-size: 0.65rem;
}

.InputNode_footerControls__jmI-X {
  display: flex;
  align-items: center;
  gap: 4px;
}

.InputNode_helpButton__1NJLa {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--input-node-textarea-border);
  background-color: var(--input-node-textarea-bg);
  color: var(--input-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.InputNode_helpButton__1NJLa:hover {
  background-color: var(--input-node-icon-bg);
  border-color: var(--input-node-border);
  color: var(--input-node-border-selected);
}

.InputNode_pinButton__K-35a {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--input-node-textarea-border);
  background-color: var(--input-node-textarea-bg);
  color: var(--input-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.InputNode_pinButton__K-35a:hover {
  background-color: var(--input-node-icon-bg);
  border-color: var(--input-node-border);
}

.InputNode_pinActive__OWcX4 {
  background-color: var(--input-node-button-bg) !important;
  color: var(--input-node-button-text) !important;
  border-color: var(--input-node-border-selected) !important;
}

.InputNode_goButton__1B92O {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
}

.InputNode_goButton__1B92O:hover:not(:disabled) {
  background-color: var(--input-node-button-bg-hover);
  transform: scale(1.02);
}

.InputNode_goButton__1B92O:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Free model label */
.InputNode_freeModel__tzWZi {
  color: var(--input-node-label-text);
  font-size: 0.6rem;
  font-weight: 600;
}

/* High Contrast dark theme adjustments for two-frame UI */
body.high-contrast .InputNode_statusActive__UOnG6 {
  background-color: var(--input-node-button-bg);
  border-color: var(--input-node-border-selected);
}

body.high-contrast .InputNode_statusActive__UOnG6 {
  color: var(--input-node-label-text);
}

body.high-contrast .InputNode_statusRequired__MT6Oi {
  color: #fca5a5; /* red-300 - brighter for high contrast */
  border-color: #fca5a5;
}

body.high-contrast .InputNode_statusWarning__1beAA {
  color: #fca5a5; /* red-300 */
}

body.high-contrast .InputNode_statusOutputActive__tVOB0 {
  color: #60a5fa;
}

body.high-contrast .InputNode_statusCheck__tc0XN {
  color: var(--input-node-label-text);
}

body.high-contrast .InputNode_statusCheckOutput__BniLg {
  color: #60a5fa;
}

body.high-contrast .InputNode_collapsedIcon__l5wFD {
  background-color: transparent;
  border: none;
}

body.high-contrast .InputNode_outputPreview__i4UCo {
  background-color: transparent;
  border: none;
}

body.high-contrast .InputNode_schemaPropertyTag__RNoZE {
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
}

body.high-contrast .InputNode_helpButton__1NJLa {
  background-color: var(--input-node-textarea-bg);
  border-color: var(--input-node-textarea-border);
  color: var(--input-node-label-text);
}

body.high-contrast .InputNode_helpButton__1NJLa:hover {
  color: var(--input-node-border-selected);
}

body.high-contrast .InputNode_pinButton__K-35a {
  background-color: var(--input-node-textarea-bg);
  border-color: var(--input-node-textarea-border);
  color: var(--input-node-label-text);
}

body.high-contrast .InputNode_pinActive__OWcX4 {
  background-color: var(--input-node-button-bg) !important;
  color: var(--input-node-button-text) !important;
}

/* Token counter text - lighter for dark mode */
body.high-contrast .InputNode_tokenCount__gur7w {
  color: #e5e7eb; /* gray-200 - light text for dark mode */
}

/* src/components/Modal.module.css */
.Modal_modalOverlay__yucgq {
  position: fixed; /* Cover the whole viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(
    17,
    24,
    39,
    0.8
  ); /* Default Web Style: Dark semi-transparent overlay */
  display: flex;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  z-index: 1050; /* High z-index to be on top of page content */
  -webkit-backdrop-filter: blur(4px); /* Safari */
  backdrop-filter: blur(4px); /* Default Blur effect for Web */
  opacity: 0; /* Start hidden for transition */
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

/* Electron Specific Overrides for Performance */
body.is-electron .Modal_modalOverlay__yucgq {
  background-color: rgba(11, 15, 25, 0.95); /* Darker, more opaque overlay */
  backdrop-filter: none; /* Disable expensive blur on Electron */
  -webkit-backdrop-filter: none;
}

.Modal_modalOverlay__yucgq.Modal_open__b9XZI {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

.Modal_modalContent__aCKXR {
  background-color: rgba(17, 24, 39, 0.95);
  color: #f9fafb;
  padding: 25px 30px;
  border-radius: 12px;
  border: 1px solid #374151;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.3),
    0 8px 10px -6px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 650px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative; /* Needed for z-index to apply */
  z-index: 2; /* Above particles */

  opacity: 0;
  transform: translateY(-25px) scale(0.93);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.Modal_modalOverlay__yucgq.Modal_open__b9XZI .Modal_modalContent__aCKXR {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.Modal_closeButton__96R5D {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  z-index: 3; /* Ensure close button is above other modal content if overlapping */
}
.Modal_closeButton__96R5D:hover {
  color: var(--node-error-text);
}

.Modal_modalContent__aCKXR::-webkit-scrollbar {
  width: 6px;
}
.Modal_modalContent__aCKXR::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}
.Modal_modalContent__aCKXR::-webkit-scrollbar-thumb {
  background-color: var(--node-textarea-border);
  border-radius: 10px;
}

/* --- Particle Background Styles --- */
.Modal_particleContainer__rgxCK {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* z-index relative to parent (.modalOverlay) stacking context */
  z-index: 1; /* Above overlay's direct background, below modalContent */
  pointer-events: none;
}

.Modal_particle__\+XdP1 {
  position: absolute;
  opacity: 0;
  animation-name: Modal_popInOut__CLCnd;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes Modal_popInOut__CLCnd {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Pastel Tint Filters for SVGs */
.Modal_pastelFilter1__CmDt7 {
  /* Light Blue-ish */
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}

.Modal_pastelFilter2__vxLiv {
  /* Light Pink-ish */
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}

.Modal_pastelFilter3__3TeZR {
  /* Light Green-ish */
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}

.Modal_pastelFilter4__7jWkc {
  /* Light Yellow-ish / Orange-ish */
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}

.Modal_pastelFilter5__Tq1Ky {
  /* Light Purple-ish */
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

/* src/components/SchemaBuilder.module.css */
.SchemaBuilder_builderContainer__K7QYd {
  padding: 15px;
  background-color: var(--node-textarea-bg); /* Use a slightly different bg */
  border-radius: 8px;
  border: 1px solid var(--node-textarea-border);
  max-height: 60vh; /* Limit height within modal */
  overflow-y: auto;
  margin-bottom: 15px; /* Space before actions */
}

.SchemaBuilder_nested__rOdrT {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--node-border);
  border-radius: 6px;
  background-color: rgba(
    0,
    0,
    0,
    0.02
  ); /* Slightly darker bg for nested sections */
}

.SchemaBuilder_fieldList__qRXtD {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between field blocks */
}

.SchemaBuilder_fieldBlock__Cicu6 {
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  border-radius: 6px;
  padding: 15px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* Icon, Controls, Remove Button */
  /* Updated rows to accommodate Required toggle */
  grid-template-rows: auto auto auto auto; /* Adjust if needed */
  grid-gap: 8px 15px;
  gap: 8px 15px; /* Row gap, Column gap */
  align-items: start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.SchemaBuilder_fieldIcon__C\+S7U {
  grid-column: 1 / 2;
  grid-row: 1 / 4; /* Span more rows if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--node-icon-color);
  background-color: var(--node-icon-bg);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  margin-top: 5px; /* Align roughly with first input */
}
.SchemaBuilder_fieldIcon__C\+S7U svg {
  width: 18px;
  height: 18px;
}

.SchemaBuilder_fieldControls__pG01n {
  grid-column: 2 / 3;
  grid-row: 1 / 5; /* Span all rows */
  display: flex;
  flex-direction: column;
  gap: 10px; /* Increased gap between control rows */
}

.SchemaBuilder_fieldRow__eVFYh {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Styles for Required Row --- */
.SchemaBuilder_requiredRow__5YYbk {
  flex-direction: row; /* Place checkbox and label side-by-side */
  align-items: center;
  margin-top: 4px; /* Add some space above */
}

.SchemaBuilder_requiredRow__5YYbk input[type='checkbox'] {
  margin: 0; /* Reset margin */
  width: 16px; /* Checkbox size */
  height: 16px;
  cursor: pointer;
  accent-color: var(--node-border-selected); /* Use theme color */
}

.SchemaBuilder_requiredRow__5YYbk label {
  margin: 0 0 0 6px; /* Space label from checkbox, remove bottom margin */
  font-weight: 500; /* Normal weight */
  cursor: pointer;
}
/* --- End Required Row Styles --- */

.SchemaBuilder_fieldRow__eVFYh label {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  color: var(--node-label-text);
}

.SchemaBuilder_fieldRow__eVFYh input:not([type="checkbox"]), 
.SchemaBuilder_fieldRow__eVFYh textarea {
  font-family: 'Inconsolata', monospace;
  padding: 6px 10px;
  border: 1px solid var(--node-textarea-border);
  border-radius: 4px;
  background-color: var(--node-bg);
  color: var(--node-text);
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}
.SchemaBuilder_fieldRow__eVFYh select {
  padding: 6px 10px;
  border: 1px solid var(--node-textarea-border);
  border-radius: 4px;
  background-color: var(--node-bg);
  color: var(--node-text);
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

.SchemaBuilder_removeButton__kL1xE {
  grid-column: 3 / 4;
  grid-row: 1 / 2; /* Place in top right */
  background: none;
  border: none;
  color: var(--node-error-text);
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  padding: 5px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.SchemaBuilder_removeButton__kL1xE:hover {
  opacity: 1;
}
.SchemaBuilder_removeButton__kL1xE svg {
  width: 16px;
  height: 16px;
}

.SchemaBuilder_addButtonContainer__x6Nar {
  margin-top: 15px;
  text-align: center;
}

.SchemaBuilder_addButton__DRZ6h {
  padding: 8px 15px;
  border: none;
  background-color: var(--node-button-bg); /* Use node button variable */
  color: var(--node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inconsolata', monospace;
}
.SchemaBuilder_addButton__DRZ6h:hover {
  background-color: var(--node-button-bg-hover);
}

/* Scrollbar styling */
.SchemaBuilder_builderContainer__K7QYd::-webkit-scrollbar {
  width: 6px;
}
.SchemaBuilder_builderContainer__K7QYd::-webkit-scrollbar-track {
  background: transparent;
}
.SchemaBuilder_builderContainer__K7QYd::-webkit-scrollbar-thumb {
  background-color: var(--node-textarea-border);
  border-radius: 10px;
  border: 2px solid var(--node-textarea-bg);
}

.SchemaBuilder_nestedBuilder__p3Qzn {
  margin-top: 10px;
  padding-left: 15px;
  border-left: 2px solid var(--node-textarea-border);
}

/* New style for Array item label */
.SchemaBuilder_arrayItemLabel__lW\+hR {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--node-label-text);
  margin-bottom: 5px;
  display: block;
}

/* src/components/Modal3.module.css */

/* --- Main Overlay and Background --- */
.Modal3_modalOverlay__M-70r {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

/* Electron Specific Overrides for Performance */
body.is-electron .Modal3_modalOverlay__M-70r {
  background-color: rgba(11, 15, 25, 0.95); /* Darker, more opaque overlay */
  backdrop-filter: none; /* Disable expensive blur on Electron */
  -webkit-backdrop-filter: none;
}

.Modal3_modalOverlay__M-70r.Modal3_open__pXT4l {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

/* --- New: Main Content Wrapper --- */
.Modal3_modalContentWrapper__mTBGR {
  display: flex; /* Key for side-by-side layout */
  gap: 20px; /* Space between the two containers */
  width: 90%;
  max-width: 80vw; /* Wider max-width for two panels */
  min-height: 50vh; /* Minimum height of 40% viewport height */
  max-height: 85vh;
  position: relative;
  z-index: 2;
  margin: 0 auto; /* Center horizontally with equal margins */
  opacity: 0;
  transform: translateY(-25px) scale(0.93);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.Modal3_modalOverlay__M-70r.Modal3_open__pXT4l .Modal3_modalContentWrapper__mTBGR {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- New: Styling for Each Side Container --- */
.Modal3_sideContainer__6Azkc {
  flex: 1 1; /* Each container takes up equal space */
  background-color: rgba(17, 24, 39, 0.95);
  color: #e5e7eb; /* Always use light text */
  padding: 25px 30px;
  border-radius: 12px;
  border: 1px solid #374151; /* Always use dark theme border */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  overflow-y: auto; /* Each container scrolls independently */
  overflow-x: hidden;
  display: flex;
  flex-direction: column; /* Content inside flows top-to-bottom */
  overscroll-behavior: contain; /* Prevent scroll chaining to parent/body */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS/Electron */
}

/* Custom Scrollbar for side containers */
.Modal3_sideContainer__6Azkc::-webkit-scrollbar {
  width: 6px;
}
.Modal3_sideContainer__6Azkc::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}
.Modal3_sideContainer__6Azkc::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* Always use dark theme scrollbar */
  border-radius: 10px;
}

/* --- Particle Background Styles (Identical to Modal.js) --- */
.Modal3_particleContainer__Tmxrq {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.Modal3_particle__nQEKg {
  position: absolute;
  opacity: 0;
  animation-name: Modal3_popInOut__ms1eR;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes Modal3_popInOut__ms1eR {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* --- Filter Styles (Identical to Modal.js) --- */
.Modal3_pastelFilter1__c2j4z {
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}
.Modal3_pastelFilter2__zl\+Jf {
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}
.Modal3_pastelFilter3__2Rmzw {
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}
.Modal3_pastelFilter4__7Ccfb {
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}
.Modal3_pastelFilter5__abm2I {
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 768px) {
  .Modal3_modalOverlay__M-70r {
    padding: 10px; /* Add padding to prevent edge cutoff */
  }

  .Modal3_modalContentWrapper__mTBGR {
    flex-direction: column; /* Stack vertically on mobile */
    width: calc(100vw - 20px); /* Full width minus padding */
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px); /* Full height minus padding */
    gap: 0; /* Remove gap between containers */
    margin: 0; /* Remove any default margins */
  }

  /* Hide the left panel on mobile to maximize space for the form */
  .Modal3_sideContainer__6Azkc:first-child {
    display: none;
  }

  /* Make the right panel (form) take full width and height */
  .Modal3_sideContainer__6Azkc:last-child {
    flex: 1 1;
    width: 100%;
    max-width: 100%;
    padding: 15px;
    border-radius: 8px;
    min-height: auto; /* Allow content to determine height */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  /* Improve form elements for mobile */
  .Modal3_sideContainer__6Azkc input,
  .Modal3_sideContainer__6Azkc textarea,
  .Modal3_sideContainer__6Azkc select {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px;
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .Modal3_sideContainer__6Azkc button {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 6px;
    min-height: 44px; /* Touch-friendly minimum height */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Improve spacing for mobile forms */
  .Modal3_sideContainer__6Azkc h2,
  .Modal3_sideContainer__6Azkc h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .Modal3_modalOverlay__M-70r {
    padding: 5px; /* Reduce padding on very small screens */
  }

  .Modal3_modalContentWrapper__mTBGR {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
  }

  .Modal3_sideContainer__6Azkc:last-child {
    padding: 12px;
  }

  .Modal3_sideContainer__6Azkc h2,
  .Modal3_sideContainer__6Azkc h3 {
    font-size: 1.3rem;
  }
}

/* UniversalTextEditor.module.css */

.UniversalTextEditor_leftPanel__UNlXF {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.UniversalTextEditor_rightPanel__ydE1A {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20px;
  border-left: 1px solid #374151;
}

.UniversalTextEditor_editorHeader__qFp96 {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid #374151;
}

.UniversalTextEditor_editorHeader__qFp96 h3 {
  margin: 0 0 15px 0;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  font-size: 1.2rem;
}

.UniversalTextEditor_editorToolbar__0xLaZ {
  display: flex;
  gap: 5px;
  align-items: center;
}

.UniversalTextEditor_toolbarButton__XVLbq {
  background: #374151;
  border: none;
  color: #9ca3af;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.UniversalTextEditor_toolbarButton__XVLbq:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.UniversalTextEditor_toolbarDivider__BnGYw {
  width: 1px;
  height: 20px;
  background: #4b5563;
  margin: 0 5px;
}

.UniversalTextEditor_editorContainer__uGL2H {
  flex: 1 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.UniversalTextEditor_textEditor__wyhrO {
  flex: 1 1;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 15px;
  resize: none;
  outline: none;
  min-height: 400px;
}

.UniversalTextEditor_textEditor__wyhrO:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.UniversalTextEditor_textEditor__wyhrO::placeholder {
  color: #6b7280;
}

.UniversalTextEditor_editorFooter__KZt0M {
  padding: 10px 20px 20px 20px;
  border-top: 1px solid #374151;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.UniversalTextEditor_textStats__VomDN {
  display: flex;
  gap: 20px;
  color: #6b7280;
  font-size: 12px;
  font-family: 'Inconsolata', monospace;
}

.UniversalTextEditor_actionButtons__NOMZf {
  display: flex;
  gap: 10px;
}

.UniversalTextEditor_cancelButton__FuEdV,
.UniversalTextEditor_saveButton__3qdr8 {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.UniversalTextEditor_cancelButton__FuEdV {
  background: #374151;
  color: #9ca3af;
}

.UniversalTextEditor_cancelButton__FuEdV:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.UniversalTextEditor_saveButton__3qdr8 {
  background: #3b82f6;
  color: #ffffff;
}

.UniversalTextEditor_saveButton__3qdr8:hover {
  background: #2563eb;
}

.UniversalTextEditor_closeButton__mkSlC {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #6b7280;
  color: #ffffff;
}

.UniversalTextEditor_closeButton__mkSlC:hover {
  background: #4b5563;
}

.UniversalTextEditor_readOnlyEditor__BUYiC {
  background: #111827 !important;
  color: #9ca3af !important;
  cursor: default;
}

.UniversalTextEditor_readOnlyEditor__BUYiC:focus {
  border-color: #374151 !important;
  box-shadow: none !important;
}

.UniversalTextEditor_settingsHeader__GtDbf {
  padding: 20px 0 10px 0;
  border-bottom: 1px solid #374151;
}

.UniversalTextEditor_settingsHeader__GtDbf h3 {
  margin: 0;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  font-size: 1.2rem;
}

.UniversalTextEditor_settingsContent__v37GS {
  flex: 1 1;
  padding: 20px 0;
  overflow-y: auto;
}

.UniversalTextEditor_settingSection__E3ZFq {
  margin-bottom: 30px;
}

.UniversalTextEditor_settingSection__E3ZFq h4 {
  margin: 0 0 15px 0;
  color: #d1d5db;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 600;
}

.UniversalTextEditor_settingRow__pBMea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #374151;
}

.UniversalTextEditor_settingLabel__qxJRM {
  color: #9ca3af;
  font-size: 14px;
  font-family: 'Inconsolata', monospace;
}

.UniversalTextEditor_settingValue__RGXQ8 {
  color: #e5e7eb;
  font-size: 14px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
}

.UniversalTextEditor_modelSelector__rYD4P {
  margin-bottom: 10px;
}

.UniversalTextEditor_modelSelect__Y5PNq {
  width: 100%;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #e5e7eb;
  padding: 8px 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.UniversalTextEditor_modelSelect__Y5PNq:focus {
  border-color: #3b82f6;
}

.UniversalTextEditor_modelSelect__Y5PNq option {
  background: #1f2937;
  color: #e5e7eb;
}

.UniversalTextEditor_modelDescription__QYudI {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

.UniversalTextEditor_modelCount__RAulg {
  color: #9ca3af;
  font-weight: 500;
}

.UniversalTextEditor_formatPresets__h\+EsV {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.UniversalTextEditor_presetButton__K4mY1 {
  background: #374151;
  border: none;
  color: #9ca3af;
  padding: 12px 15px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inconsolata', monospace;
  font-size: 13px;
  transition: all 0.2s ease;
  line-height: 1.3;
}

.UniversalTextEditor_presetButton__K4mY1:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.UniversalTextEditor_displayOptions__UbmLC {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.UniversalTextEditor_displayOption__vuMWQ {
  background: #374151;
  border: none;
  color: #9ca3af;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  flex: 1 1;
  text-align: center;
}

.UniversalTextEditor_displayOption__vuMWQ:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.UniversalTextEditor_displayOption__vuMWQ.UniversalTextEditor_active__wHqlr {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 600;
}

.UniversalTextEditor_themeOptions__WxJEB {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 10px;
}

.UniversalTextEditor_themeOption__S\+5Yg {
  background: #374151;
  border: none;
  color: #9ca3af;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.UniversalTextEditor_themeOption__S\+5Yg:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.UniversalTextEditor_themeOption__S\+5Yg.UniversalTextEditor_active__wHqlr {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 600;
}

.UniversalTextEditor_themePreview__ZuiON {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: 'Inconsolata', monospace;
}

.UniversalTextEditor_themeLight__\+lyYP {
  background: #f9fafb !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

.UniversalTextEditor_themeLight__\+lyYP:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

.UniversalTextEditor_themeTerminal__0BR1\+ {
  background: #000000 !important;
  color: #00ff00 !important;
  border-color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
}

.UniversalTextEditor_themeTerminal__0BR1\+:focus {
  border-color: #00ff00 !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2) !important;
}

.UniversalTextEditor_themeContrast__99WS1 {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  font-weight: 600 !important;
}

.UniversalTextEditor_themeContrast__99WS1:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .UniversalTextEditor_editorToolbar__0xLaZ {
    flex-wrap: wrap;
    gap: 3px;
  }

  .UniversalTextEditor_toolbarButton__XVLbq {
    padding: 6px 8px;
    font-size: 12px;
  }

  .UniversalTextEditor_textEditor__wyhrO {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .UniversalTextEditor_leftPanel__UNlXF,
  .UniversalTextEditor_rightPanel__ydE1A {
    padding: 10px;
  }

  .UniversalTextEditor_editorHeader__qFp96,
  .UniversalTextEditor_editorFooter__KZt0M {
    padding: 15px;
  }

  .UniversalTextEditor_textEditor__wyhrO {
    min-height: 300px;
  }

  .UniversalTextEditor_actionButtons__NOMZf {
    flex-direction: column;
    width: 100%;
  }

  .UniversalTextEditor_cancelButton__FuEdV,
  .UniversalTextEditor_saveButton__3qdr8 {
    width: 100%;
    justify-content: center;
  }
}

/* src/MainApp/ModalContent/UniversalModalSelector.module.css */

/* --- Universal Modal Selector Styles --- */
/* Consistent dark mode styling for all modal selectors */

.UniversalModalSelector_modalContent__5U9h4 {
  padding: 20px;
  color: #f9fafb; /* Force dark mode text */
  min-width: 500px;
  max-width: 800px;
  /* background: #1f2937; Force dark mode background */
  border-radius: 8px;
  /* border: 1px solid #374151; Force dark mode border */
  overflow: hidden;
}

.UniversalModalSelector_modalTitle__Q1q83 {
  margin: 0 0 20px 0;
  color: #e5e7eb !important; /* Force light text for title */
  font-family: 'Inconsolata', monospace;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: left;
  border-bottom: none;
  background: transparent;
}

.UniversalModalSelector_optionsGrid__rK9ci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.05); /* Subtle background for grid area */
  border-radius: 8px;
}

/* Custom Scrollbar */
.UniversalModalSelector_optionsGrid__rK9ci::-webkit-scrollbar {
  width: 6px;
}
.UniversalModalSelector_optionsGrid__rK9ci::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}
.UniversalModalSelector_optionsGrid__rK9ci::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* Dark theme scrollbar */
  border-radius: 10px;
}

.UniversalModalSelector_categoryHeader__KQ0gV {
  grid-column: 1 / -1;
  font-size: 1.2rem;
  font-weight: 600;
  color: #9ca3af; /* Force muted text for categories */
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #374151; /* Force dark mode border */
  font-family: 'Inconsolata', monospace;
}
.UniversalModalSelector_categoryHeader__KQ0gV:first-of-type {
  margin-top: 0;
}

.UniversalModalSelector_optionButton__swGLF {
  padding: 12px 15px;
  border: 1px solid #374151; /* Force dark mode border */
  background-color: #1f2937; /* Force dark mode background */
  color: #f9fafb; /* Force dark mode text */
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease-in-out;
  min-height: 65px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.UniversalModalSelector_optionButton__swGLF:hover {
  border-color: #3b82f6; /* Force blue hover border */
  background-color: #374151; /* Slightly lighter on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH {
  background: #3b82f6; /* Force blue selection background */
  color: #ffffff; /* White text on blue background */
  border-color: #3b82f6; /* Force blue border */
}

.UniversalModalSelector_providerIconContainer__1HJxl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 2px;
}

.UniversalModalSelector_providerIcon__pOlLp {
  font-size: 1.4rem;
  color: #9ca3af;
}

.UniversalModalSelector_providerLogo__1hxm8 {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}

/* Specific sizing for different provider logos */
.UniversalModalSelector_providerLogo__1hxm8[alt='OpenAI'] {
  width: 24px;
  height: 24px;
}

.UniversalModalSelector_providerLogo__1hxm8[alt='Novita AI'] {
  width: 30px;
  height: 30px;
}

.UniversalModalSelector_providerLogo__1hxm8[alt='AI/ML API'] {
  width: 30px;
  height: 30px;
}

.UniversalModalSelector_novitaIcon__lTfdy,
.UniversalModalSelector_aimlIcon__WPeYw,
.UniversalModalSelector_unknownIcon__wIZr\+ {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
  color: #ffffff;
}

.UniversalModalSelector_novitaIcon__lTfdy {
  background-color: #8b5cf6; /* Purple for Novita */
}

.UniversalModalSelector_aimlIcon__WPeYw {
  background-color: #10b981; /* Green for AI/ML */
}

.UniversalModalSelector_unknownIcon__wIZr\+ {
  background-color: #6b7280; /* Gray for unknown */
}

.UniversalModalSelector_optionInfo__Zu2GI {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
}

.UniversalModalSelector_optionName__062Oi {
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
  font-family: 'Inconsolata', monospace;
  color: inherit;
}

.UniversalModalSelector_optionSubtitle__zKqce {
  font-size: 0.85rem;
  color: #9ca3af; /* Force muted text for subtitles */
  margin-top: 4px;
  font-style: italic;
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_optionSubtitle__zKqce {
  color: rgba(255, 255, 255, 0.8); /* Lighter on selected */
}

.UniversalModalSelector_costIndicator__4S0Gp {
  margin-left: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
  color: #10b981; /* Green for cost indicators */
}

.UniversalModalSelector_infoIcon__LdaCj {
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
  color: #9ca3af; /* Force muted color for info icon */
}

.UniversalModalSelector_infoIcon__LdaCj:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #3b82f6; /* Blue on hover */
}

.UniversalModalSelector_ioIndicators__PAhSA {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  align-items: center;
}

.UniversalModalSelector_ioGroup__ioAWN {
  display: flex;
  align-items: center;
  gap: 3px;
}

.UniversalModalSelector_ioLabel__7egm0 {
  font-size: 0.6rem;
  font-weight: 600;
  color: #9ca3af;
  min-width: 10px;
}

.UniversalModalSelector_ioIcons__yk0L6 {
  display: flex;
  gap: 4px;
}

.UniversalModalSelector_ioIcon__-j9bx {
  display: flex;
  align-items: center;
}

.UniversalModalSelector_typeIcon__xGUU2 {
  font-size: 0.6rem;
  color: #9ca3af;
}

.UniversalModalSelector_pricingContainer__RFy2k {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
}

.UniversalModalSelector_pricingText__TRjf4 {
  font-size: 0.6rem;
  color: #10b981; /* Green for pricing */
  font-weight: 500;
}

.UniversalModalSelector_pricingChevron__mpMeX {
  font-size: 0.6rem;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s ease;
}

.UniversalModalSelector_pricingChevron__mpMeX:hover {
  color: #3b82f6;
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_ioLabel__7egm0,
.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_typeIcon__xGUU2,
.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_pricingText__TRjf4,
.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_pricingChevron__mpMeX {
  color: rgba(255, 255, 255, 0.9);
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_infoIcon__LdaCj,
.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_costIndicator__4S0Gp {
  color: #ffffff; /* White icons/text on selected button */
  opacity: 1;
}

.UniversalModalSelector_deprecatedBadge__pyDH4 {
  background-color: #ef4444; /* Force red for deprecated badge */
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: bold;
  font-family: 'Inconsolata', monospace;
  margin-left: 10px;
}

.UniversalModalSelector_modalFooter__Bcx-B {
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid #374151; /* Force dark mode border */
  background: transparent;
}

.UniversalModalSelector_closeButton__WhoQB {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background-color: #6b7280; /* Force dark gray background */
  color: #f9fafb; /* Force light text */
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 500;
}

.UniversalModalSelector_closeButton__WhoQB:hover {
  background-color: #4b5563; /* Darker gray on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .UniversalModalSelector_modalContent__5U9h4 {
    min-width: 90vw;
    max-width: 95vw;
  }

  .UniversalModalSelector_optionsGrid__rK9ci {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .UniversalModalSelector_optionButton__swGLF {
    min-height: auto;
    padding: 15px;
  }
}

/* ImageSettingsModal.module.css */
/* Force dark mode styling to match UniversalModalSelector */

.ImageSettingsModal_container__PPka1 {
  padding: 20px;
  min-width: 500px;
  max-width: 600px;
  font-family: 'Inconsolata', monospace;
}

.ImageSettingsModal_container__PPka1 h3 {
  margin: 0 0 10px 0;
  font-size: 1.4rem;
  color: #e5e7eb; /* Force light text */
}

.ImageSettingsModal_modelDescription__gRTG\+ {
  margin: 0 0 20px 0;
  color: #9ca3af; /* Force muted light text */
  opacity: 0.8;
  font-size: 0.9rem;
}

.ImageSettingsModal_parametersContainer__iA-cq {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.ImageSettingsModal_parameterGroup__O-E3h {
  margin-bottom: 25px;
}

.ImageSettingsModal_parameterLabel__ikBju {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #d1d5db; /* Force light text */
  font-size: 0.95rem;
}

.ImageSettingsModal_parameterValue__qlPpx {
  float: right;
  color: #3b82f6; /* Force blue accent */
  font-weight: bold;
}

.ImageSettingsModal_parameterDescription__aZq8S {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: normal;
  color: #9ca3af; /* Force muted text */
  opacity: 0.7;
  line-height: 1.4;
}

.ImageSettingsModal_select__6WWjM {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #374151; /* Force dark border */
  border-radius: 4px;
  background-color: #1f2937; /* Force dark background */
  color: #f9fafb; /* Force light text */
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  cursor: pointer;
}

.ImageSettingsModal_select__6WWjM:focus {
  outline: none;
  border-color: #3b82f6; /* Force blue border on focus */
}

.ImageSettingsModal_slider__4OCZ4 {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #374151; /* Force dark track */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.ImageSettingsModal_slider__4OCZ4::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6; /* Force blue thumb */
  cursor: pointer;
}

.ImageSettingsModal_slider__4OCZ4::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6; /* Force blue thumb */
  cursor: pointer;
  border: none;
}

.ImageSettingsModal_sliderLabels__VJWCJ {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #9ca3af; /* Force muted text */
  opacity: 0.6;
}

.ImageSettingsModal_numberInput__esWcl {
  width: 95%;
  padding: 8px 12px;
  border: 1px solid #374151; /* Force dark border */
  border-radius: 4px;
  background-color: #1f2937; /* Force dark background */
  color: #f9fafb; /* Force light text */
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
}

.ImageSettingsModal_numberInput__esWcl:focus {
  outline: none;
  border-color: #3b82f6; /* Force blue border on focus */
}

.ImageSettingsModal_checkboxLabel__1Q739 {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 10px;
}

.ImageSettingsModal_checkbox__sjzXE {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.ImageSettingsModal_checkboxText__wGE66 {
  flex: 1 1;
  color: #d1d5db; /* Force light text */
  font-size: 0.95rem;
}

.ImageSettingsModal_textArea__uXk3- {
  width: 95%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid #374151; /* Force dark border */
  border-radius: 4px;
  background-color: #1f2937; /* Force dark background */
  color: #f9fafb; /* Force light text */
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  resize: vertical;
  line-height: 1.5;
}

.ImageSettingsModal_textArea__uXk3-:focus {
  outline: none;
  border-color: #3b82f6; /* Force blue border on focus */
}

.ImageSettingsModal_textArea__uXk3-::placeholder {
  color: #6b7280; /* Force muted placeholder */
  opacity: 0.5;
}

.ImageSettingsModal_actions__2WAjw {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #374151; /* Force dark border */
}

.ImageSettingsModal_actions__2WAjw button {
  padding: 10px 20px;
  border: 1px solid #374151; /* Force dark border */
  border-radius: 4px;
  background-color: #1f2937; /* Force dark background */
  color: #d1d5db; /* Force light text */
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ImageSettingsModal_actions__2WAjw button:hover {
  border-color: #3b82f6; /* Force blue border on hover */
  background-color: #374151; /* Slightly lighter on hover */
  transform: translateY(-1px);
}

.ImageSettingsModal_saveButton__9DhVl {
  background-color: #3b82f6 !important; /* Force blue background */
  color: white !important;
  font-weight: 600;
  border-color: #3b82f6 !important;
}

.ImageSettingsModal_saveButton__9DhVl:hover {
  background-color: #2563eb !important; /* Darker blue on hover */
  opacity: 0.9;
}

.ImageSettingsModal_cancelButton__0XgVQ {
  opacity: 0.7;
}

.ImageSettingsModal_resetButton__6118i {
  opacity: 0.8;
}

/* src/MainApp/ModalContent/guide/NodeGuideModal.module.css */

/* ================================== */
/* Full-Screen Guide Overlay          */
/* ================================== */

.NodeGuideModal_guideOverlay__CseCE {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 15, 25, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

.NodeGuideModal_guideOverlay__CseCE.NodeGuideModal_open__nf\+RK {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

/* Electron - disable expensive blur */
body.is-electron .NodeGuideModal_guideOverlay__CseCE {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(10, 15, 25, 0.98);
}

/* ================================== */
/* Close Button                       */
/* ================================== */

.NodeGuideModal_closeButton__c\+TUx {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.NodeGuideModal_closeButton__c\+TUx:hover {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

/* ================================== */
/* Title Section                      */
/* ================================== */

.NodeGuideModal_titleContainer__p-SKC {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
}

.NodeGuideModal_title__HyqHC {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #f9fafb;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_subtitle__EsapF {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inconsolata', monospace;
}

/* ================================== */
/* Frames Container - Two Frames      */
/* ================================== */

.NodeGuideModal_framesContainer__\+KCIV {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 20px;
}

.NodeGuideModal_frameWrapper__Bfbip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.NodeGuideModal_frameLabel__TENFf {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_frameArrow__mhW59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
}

.NodeGuideModal_nodeFrame__IbzCP {
  position: relative;
  padding: 40px 50px;
}

.NodeGuideModal_nodeContainer__uOy1K {
  position: relative;
}

/* ================================== */
/* InputNode Preview - Matching Real  */
/* ================================== */

.NodeGuideModal_inputNodePreview__FYD6A {
  position: relative;
  /* Match the real InputNode CSS variables */
  --input-node-bg: #f0fdf4;
  --input-node-border: #86efac;
  --input-node-border-selected: #22c55e;
  --input-node-text: #14532d;
  --input-node-label-text: #16a34a;
  --input-node-icon-bg: #dcfce7;
  --input-node-icon-color: #15803d;
  --input-node-button-bg: #22c55e;
  --input-node-button-text: #f0fdf4;
  --input-node-textarea-bg: #f6fef9;
  --input-node-textarea-border: #bbf7d0;
}

/* ================================== */
/* Collapsed Node Preview             */
/* ================================== */

.NodeGuideModal_collapsedNode__n6RYH {
  width: 280px;
  height: 180px;
  background-color: var(--input-node-bg);
  border: 1px solid var(--input-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_collapsedMainIcon__tua6F {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_nodeIconPlaceholder__j53Fc {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreview__bb60G {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreview__bb60G:hover,
.NodeGuideModal_statusIndicatorsPreview__bb60G.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(34, 197, 94, 0.15);
}

.NodeGuideModal_statusDot__\+uTLY {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--input-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDot__\+uTLY::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--input-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

/* ================================== */
/* Expanded Node Preview              */
/* ================================== */

.NodeGuideModal_expandedNodeWrapper__Mv1Py {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeader__gIQvv {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButton__fRZwJ {
  width: 26px;
  height: 20px;
  background-color: var(--input-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.NodeGuideModal_headerButton__fRZwJ:hover,
.NodeGuideModal_headerButton__fRZwJ.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

.NodeGuideModal_headerCreditsPreview__O5\+Dw {
  width: 50px;
  height: 18px;
  background-color: var(--input-node-bg);
  border: 1px solid var(--input-node-textarea-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--input-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_expandedNode__erSD1 {
  width: 280px;
  height: 180px;
  background-color: var(--input-node-bg);
  border: 1px solid var(--input-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_textareaPreview__ovcSt {
  flex: 1 1;
  background-color: var(--input-node-bg);
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textareaPreview__ovcSt:hover,
.NodeGuideModal_textareaPreview__ovcSt.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--input-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--input-node-border-selected);
}

.NodeGuideModal_placeholderText__vvJyU {
  font-size: 0.85rem;
  color: var(--input-node-label-text);
  font-family: 'Inconsolata', monospace;
  opacity: 0.7;
}

.NodeGuideModal_expandedFooter__RQY9t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_tokenCounterPreview__NjCX\+ {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--input-node-label-text);
  font-family: 'Inconsolata', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_tokenCounterPreview__NjCX\+:hover,
.NodeGuideModal_tokenCounterPreview__NjCX\+.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(34, 197, 94, 0.15);
}

.NodeGuideModal_modelNamePreview__ind1v {
  color: var(--input-node-border-selected);
  font-weight: 500;
}

.NodeGuideModal_footerButtons__N3xr- {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_footerButton__IcjBC {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--input-node-textarea-border);
  background-color: var(--input-node-textarea-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--input-node-label-text);
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButton__IcjBC:hover,
.NodeGuideModal_footerButton__IcjBC.NodeGuideModal_elementActive__D9gpf {
  border-color: var(--input-node-border-selected);
  background-color: var(--input-node-icon-bg);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.NodeGuideModal_goButtonPreview__O1juv {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--input-node-button-bg);
  color: var(--input-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreview__O1juv:hover,
.NodeGuideModal_goButtonPreview__O1juv.NodeGuideModal_elementActive__D9gpf {
  background-color: #16a34a;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

/* ================================== */
/* Handle Previews - Match Real Node  */
/* ================================== */

.NodeGuideModal_handleWrapper__jm-sq {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}

.NodeGuideModal_handlePreview__UsaQy {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #22c55e;
  border: 2px solid #f0fdf4;
  border-radius: 4px;
  box-sizing: border-box;
}

.NodeGuideModal_handleIcon__Ca8Rf {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--input-node-icon-bg);
  border: 1px solid var(--input-node-textarea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--input-node-icon-color);
  font-size: 12px;
}

/* ================================== */
/* Tooltip Popup                      */
/* ================================== */

.NodeGuideModal_tooltip__BZkfZ {
  position: fixed;
  width: 320px;
  background-color: rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  pointer-events: none; /* Prevent tooltip from interfering with hover */
  animation: NodeGuideModal_tooltipFadeIn__R433i 0.15s ease-out;
}

@keyframes NodeGuideModal_tooltipFadeIn__R433i {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.NodeGuideModal_tooltipRight__Mqnha::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: rgba(34, 197, 94, 0.3);
}

.NodeGuideModal_tooltipLeft__Jl-NB::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: rgba(34, 197, 94, 0.3);
}

.NodeGuideModal_tooltipHeader__uYAnq {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.NodeGuideModal_tooltipIcon__uuRhc {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  color: #22c55e;
}

.NodeGuideModal_tooltipIcon__uuRhc svg {
  width: 18px;
  height: 18px;
}

.NodeGuideModal_tooltipTitle__\+HOg\+ {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f9fafb;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_tooltipDescription__bRAHe {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: #d1d5db;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_tooltipTips__Py3yU {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.NodeGuideModal_tipsLabel__MUWA8 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #86efac;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_tooltipTips__Py3yU ul {
  margin: 8px 0 0;
  padding: 0 0 0 16px;
  list-style-type: none;
}

.NodeGuideModal_tooltipTips__Py3yU li {
  position: relative;
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 6px;
  padding-left: 10px;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_tooltipTips__Py3yU li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  background-color: #22c55e;
  border-radius: 50%;
}

/* ================================== */
/* Element Active State               */
/* ================================== */

.NodeGuideModal_elementActive__D9gpf {
  position: relative;
}

.NodeGuideModal_elementActive__D9gpf::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #22c55e;
  border-radius: 8px;
  animation: NodeGuideModal_pulseOutline__boUX9 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes NodeGuideModal_pulseOutline__boUX9 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ================================== */
/* High Contrast Theme                */
/* ================================== */

body.high-contrast .NodeGuideModal_guideOverlay__CseCE {
  background-color: rgba(5, 10, 15, 0.98);
}

body.high-contrast .NodeGuideModal_inputNodePreview__FYD6A {
  --input-node-bg: #111827;
  --input-node-border: #047857;
  --input-node-border-selected: #059669;
  --input-node-text: #f9fafb;
  --input-node-label-text: #6ee7b7;
  --input-node-icon-bg: #1f2937;
  --input-node-icon-color: #a7f3d0;
  --input-node-button-bg: #047857;
  --input-node-button-text: #f9fafb;
  --input-node-textarea-bg: #1f2937;
  --input-node-textarea-border: #4b5563;
}

body.high-contrast .NodeGuideModal_tooltip__BZkfZ {
  background-color: rgba(11, 15, 25, 0.98);
  border-color: rgba(110, 231, 183, 0.3);
}

/* ================================== */
/* Responsive                         */
/* ================================== */

@media (max-width: 900px) {
  .NodeGuideModal_framesContainer__\+KCIV {
    flex-direction: column;
    gap: 60px;
  }

  .NodeGuideModal_frameArrow__mhW59 {
    transform: rotate(90deg);
  }

  .NodeGuideModal_titleContainer__p-SKC {
    top: 24px;
  }

  .NodeGuideModal_title__HyqHC {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {
  .NodeGuideModal_tooltip__BZkfZ {
    width: 260px;
    padding: 16px;
  }

  .NodeGuideModal_collapsedNode__n6RYH,
  .NodeGuideModal_expandedNode__erSD1 {
    width: 240px;
    height: 160px;
  }
}

/* ================================== */
/* ImageNode Preview - Matching Real  */
/* ================================== */

.NodeGuideModal_imageNodePreview__n\+sbZ {
  position: relative;
  /* Match the real ImageGenerationNode CSS variables - Castle color scheme */
  --image-node-bg: #f1f5f9; /* slate-100 */
  --image-node-border: #cbd5e1; /* slate-300 */
  --image-node-border-selected: #4f46e5; /* indigo-600 */
  --image-node-text: #1e293b; /* slate-800 */
  --image-node-label-text: #334155; /* slate-700 */
  --image-node-icon-bg: #e2e8f0; /* slate-200 */
  --image-node-icon-color: #334155; /* slate-700 */
  --image-node-button-bg: #6366f1; /* indigo-500 */
  --image-node-button-text: #e0e7ff; /* indigo-100 */
  --image-node-textarea-bg: #f8fafc; /* slate-50 */
  --image-node-textarea-border: #e2e8f0; /* slate-200 */
}

/* ================================== */
/* ImageNode Collapsed Preview        */
/* ================================== */

.NodeGuideModal_collapsedNodeImage__4l00M {
  width: 280px;
  height: 180px;
  background-color: var(--image-node-bg);
  border: 1px solid var(--image-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_nodeIconPlaceholderImage__InOL\+ {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreviewImage__6Q8tX {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewImage__6Q8tX:hover,
.NodeGuideModal_statusIndicatorsPreviewImage__6Q8tX.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(99, 102, 241, 0.15);
}

.NodeGuideModal_statusDotImage__0GYo3 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--image-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDotImage__0GYo3::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--image-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

/* ================================== */
/* ImageNode Expanded Preview         */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperImage__2pw8Q {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderImage__HYfmI {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonImage__rCLef {
  width: 26px;
  height: 20px;
  background-color: var(--image-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.NodeGuideModal_headerButtonImage__rCLef:hover,
.NodeGuideModal_headerButtonImage__rCLef.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}

.NodeGuideModal_headerCreditsPreviewImage__zzNz2 {
  width: 50px;
  height: 18px;
  background-color: var(--image-node-bg);
  border: 1px solid var(--image-node-textarea-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--image-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_expandedNodeImage__TYByY {
  width: 280px;
  height: 180px;
  background-color: var(--image-node-bg);
  border: 1px solid var(--image-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_textareaPreviewImage__tXz-6 {
  flex: 1 1;
  background-color: var(--image-node-bg);
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textareaPreviewImage__tXz-6:hover,
.NodeGuideModal_textareaPreviewImage__tXz-6.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--image-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--image-node-border-selected);
}

.NodeGuideModal_placeholderTextImage__4Kebd {
  font-size: 0.85rem;
  color: var(--image-node-label-text);
  font-family: 'Inconsolata', monospace;
  opacity: 0.7;
}

.NodeGuideModal_expandedFooterImage__fIGpp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_tokenCounterPreviewImage__rqiuU {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--image-node-label-text);
  font-family: 'Inconsolata', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_tokenCounterPreviewImage__rqiuU:hover,
.NodeGuideModal_tokenCounterPreviewImage__rqiuU.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(99, 102, 241, 0.15);
}

.NodeGuideModal_modelNamePreviewImage__jTfEj {
  color: var(--image-node-border-selected);
  font-weight: 500;
}

.NodeGuideModal_footerButtonsImage__HhpZb {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_footerButtonImage__vzZfe {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--image-node-textarea-border);
  background-color: var(--image-node-textarea-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--image-node-label-text);
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButtonImage__vzZfe:hover,
.NodeGuideModal_footerButtonImage__vzZfe.NodeGuideModal_elementActive__D9gpf {
  border-color: var(--image-node-border-selected);
  background-color: var(--image-node-icon-bg);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.NodeGuideModal_goButtonPreviewImage__yFPiq {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreviewImage__yFPiq:hover,
.NodeGuideModal_goButtonPreviewImage__yFPiq.NodeGuideModal_elementActive__D9gpf {
  background-color: #4f46e5;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}

/* ================================== */
/* ImageNode Handle Previews          */
/* ================================== */

.NodeGuideModal_handleWrapperImage__XdqIL {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperImage__XdqIL:hover,
.NodeGuideModal_handleWrapperImage__XdqIL.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(236, 72, 153, 0.15);
}

.NodeGuideModal_handlePreviewImage__1iT2Q {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #ec4899; /* pink-500 */
  border: 2px solid #fce7f3; /* pink-100 */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ================================== */
/* ImageNode High Contrast Theme      */
/* ================================== */

body.high-contrast .NodeGuideModal_imageNodePreview__n\+sbZ {
  --image-node-bg: #111827; /* gray-900 */
  --image-node-border: #3730a3; /* indigo-700 */
  --image-node-border-selected: #4f46e5; /* indigo-600 */
  --image-node-text: #f9fafb; /* gray-50 */
  --image-node-label-text: #a5b4fc; /* indigo-300 */
  --image-node-icon-bg: #1f2937; /* gray-800 */
  --image-node-icon-color: #c7d2fe; /* indigo-200 */
  --image-node-button-bg: #3730a3; /* indigo-700 */
  --image-node-button-text: #f9fafb; /* gray-50 */
  --image-node-textarea-bg: #1f2937; /* gray-800 */
  --image-node-textarea-border: #4b5563; /* gray-600 */
}

/* ImageNode tooltip styling - indigo theme */
.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(99, 102, 241, 0.3);
}

.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #6366f1;
}

.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #a5b4fc;
}

/* ================================== */
/* VideoNode Preview - Matching Real  */
/* ================================== */

.NodeGuideModal_videoNodePreview__wuRhF {
  position: relative;
  /* Match the real VideoGenerationNode CSS variables - Orange/Coral color scheme */
  --video-node-bg: #fff7ed; /* orange-50 */
  --video-node-border: #fed7aa; /* orange-200 */
  --video-node-border-selected: #fb923c; /* orange-400 */
  --video-node-text: #7c2d12; /* orange-900 */
  --video-node-label-text: #c2410c; /* orange-700 */
  --video-node-icon-bg: #ffedd5; /* orange-100 */
  --video-node-icon-color: #9a3412; /* orange-800 */
  --video-node-button-bg: #fdba74; /* orange-300 */
  --video-node-button-text: #7c2d12; /* orange-900 */
  --video-node-textarea-bg: #fffbf5; /* Lighter orange */
  --video-node-textarea-border: #ffead1; /* orange-100 */
}

/* ================================== */
/* VideoNode Collapsed Preview        */
/* ================================== */

.NodeGuideModal_collapsedNodeVideo__\+1Me6 {
  width: 280px;
  height: 180px;
  background-color: var(--video-node-bg);
  border: 1px solid var(--video-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_nodeIconPlaceholderVideo__5jQqz {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreviewVideo__Z2YCt {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewVideo__Z2YCt:hover,
.NodeGuideModal_statusIndicatorsPreviewVideo__Z2YCt.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(251, 146, 60, 0.15);
}

.NodeGuideModal_statusDotVideo__H1SMu {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--video-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDotVideo__H1SMu::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--video-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

/* ================================== */
/* VideoNode Expanded Preview         */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperVideo__1z40n {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderVideo__80OJO {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonVideo__4Os1Z {
  width: 26px;
  height: 20px;
  background-color: var(--video-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.NodeGuideModal_headerButtonVideo__4Os1Z:hover,
.NodeGuideModal_headerButtonVideo__4Os1Z.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.6);
}

.NodeGuideModal_headerCreditsPreviewVideo__dKdZ8 {
  width: 50px;
  height: 18px;
  background-color: var(--video-node-bg);
  border: 1px solid var(--video-node-textarea-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--video-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_expandedNodeVideo__tLsEc {
  width: 280px;
  height: 180px;
  background-color: var(--video-node-bg);
  border: 1px solid var(--video-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_textareaPreviewVideo__Y\+8K\+ {
  flex: 1 1;
  background-color: var(--video-node-bg);
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textareaPreviewVideo__Y\+8K\+:hover,
.NodeGuideModal_textareaPreviewVideo__Y\+8K\+.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--video-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--video-node-border-selected);
}

.NodeGuideModal_placeholderTextVideo__F42Km {
  font-size: 0.85rem;
  color: var(--video-node-label-text);
  font-family: 'Inconsolata', monospace;
  opacity: 0.7;
}

.NodeGuideModal_expandedFooterVideo__JvJb4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_tokenCounterPreviewVideo__iwppB {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--video-node-label-text);
  font-family: 'Inconsolata', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_tokenCounterPreviewVideo__iwppB:hover,
.NodeGuideModal_tokenCounterPreviewVideo__iwppB.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(251, 146, 60, 0.15);
}

.NodeGuideModal_modelNamePreviewVideo__3SQhY {
  color: var(--video-node-border-selected);
  font-weight: 500;
}

.NodeGuideModal_footerButtonsVideo__QYgSF {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_footerButtonVideo__djDQ5 {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--video-node-textarea-border);
  background-color: var(--video-node-textarea-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--video-node-label-text);
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButtonVideo__djDQ5:hover,
.NodeGuideModal_footerButtonVideo__djDQ5.NodeGuideModal_elementActive__D9gpf {
  border-color: var(--video-node-border-selected);
  background-color: var(--video-node-icon-bg);
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.4);
}

.NodeGuideModal_goButtonPreviewVideo__Dvep- {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--video-node-button-bg);
  color: var(--video-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreviewVideo__Dvep-:hover,
.NodeGuideModal_goButtonPreviewVideo__Dvep-.NodeGuideModal_elementActive__D9gpf {
  background-color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.6);
}

/* ================================== */
/* VideoNode Handle Previews          */
/* ================================== */

.NodeGuideModal_handleWrapperVideo__qqSgE {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperVideo__qqSgE:hover,
.NodeGuideModal_handleWrapperVideo__qqSgE.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(236, 72, 153, 0.15);
}

.NodeGuideModal_handlePreviewVideo__oyHE1 {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #ec4899; /* pink-500 */
  border: 2px solid #fce7f3; /* pink-100 */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ================================== */
/* VideoNode High Contrast Theme      */
/* ================================== */

body.high-contrast .NodeGuideModal_videoNodePreview__wuRhF {
  --video-node-bg: #111827; /* gray-900 */
  --video-node-border: #ea580c; /* orange-600 */
  --video-node-border-selected: #fb923c; /* orange-400 */
  --video-node-text: #f9fafb; /* gray-50 */
  --video-node-label-text: #fed7aa; /* orange-200 */
  --video-node-icon-bg: #1f2937; /* gray-800 */
  --video-node-icon-color: #ffedd5; /* orange-100 */
  --video-node-button-bg: #ea580c; /* orange-600 */
  --video-node-button-text: #f9fafb; /* gray-50 */
  --video-node-textarea-bg: #1f2937; /* gray-800 */
  --video-node-textarea-border: #4b5563; /* gray-600 */
}

/* VideoNode tooltip styling - orange theme */
.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(251, 146, 60, 0.3);
}

.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #fb923c;
}

.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #fed7aa;
}

/* ================================== */
/* MusicNode Preview - Matching Real  */
/* ================================== */

.NodeGuideModal_musicNodePreview__0i6O5 {
  position: relative;
  /* Match the real MusicNode CSS variables - Violet/Purple color scheme */
  --music-node-bg: #f5f3ff; /* violet-50 */
  --music-node-border: #c4b5fd; /* violet-300 */
  --music-node-border-selected: #8b5cf6; /* violet-500 */
  --music-node-text: #5b21b6; /* violet-800 */
  --music-node-label-text: #7c3aed; /* violet-600 */
  --music-node-icon-bg: #ede9fe; /* violet-100 */
  --music-node-icon-color: #6d28d9; /* violet-700 */
  --music-node-button-bg: #a78bfa; /* violet-400 */
  --music-node-button-text: #4c1d95; /* violet-900 */
  --music-node-textarea-bg: #fafaff; /* Lighter violet */
  --music-node-textarea-border: #ddd6fe; /* violet-200 */
}

/* ================================== */
/* MusicNode Collapsed Preview        */
/* ================================== */

.NodeGuideModal_collapsedNodeMusic__qD0QG {
  width: 280px;
  height: 180px;
  background-color: var(--music-node-bg);
  border: 1px solid var(--music-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_nodeIconPlaceholderMusic__MJW2k {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreviewMusic__9LGtb {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewMusic__9LGtb:hover,
.NodeGuideModal_statusIndicatorsPreviewMusic__9LGtb.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(139, 92, 246, 0.15);
}

.NodeGuideModal_statusDotMusic__OxSql {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--music-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDotMusic__OxSql::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--music-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

/* ================================== */
/* MusicNode Expanded Preview         */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperMusic__SpphH {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderMusic__NZgZF {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonMusic__TZcb- {
  width: 26px;
  height: 20px;
  background-color: var(--music-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.NodeGuideModal_headerButtonMusic__TZcb-:hover,
.NodeGuideModal_headerButtonMusic__TZcb-.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}

.NodeGuideModal_headerCreditsPreviewMusic__PQMLH {
  width: 50px;
  height: 18px;
  background-color: var(--music-node-bg);
  border: 1px solid var(--music-node-textarea-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--music-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_expandedNodeMusic__kRRDH {
  width: 280px;
  height: 180px;
  background-color: var(--music-node-bg);
  border: 1px solid var(--music-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_textareaPreviewMusic__FcmbY {
  flex: 1 1;
  background-color: var(--music-node-bg);
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textareaPreviewMusic__FcmbY:hover,
.NodeGuideModal_textareaPreviewMusic__FcmbY.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--music-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--music-node-border-selected);
}

.NodeGuideModal_placeholderTextMusic__gtudE {
  font-size: 0.85rem;
  color: var(--music-node-label-text);
  font-family: 'Inconsolata', monospace;
  opacity: 0.7;
}

.NodeGuideModal_expandedFooterMusic__UzlES {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_tokenCounterPreviewMusic__O69Ra {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--music-node-label-text);
  font-family: 'Inconsolata', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_tokenCounterPreviewMusic__O69Ra:hover,
.NodeGuideModal_tokenCounterPreviewMusic__O69Ra.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(139, 92, 246, 0.15);
}

.NodeGuideModal_modelNamePreviewMusic__20xa\+ {
  color: var(--music-node-border-selected);
  font-weight: 500;
}

.NodeGuideModal_footerButtonsMusic__rkJcg {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_footerButtonMusic__KF5oj {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--music-node-textarea-border);
  background-color: var(--music-node-textarea-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--music-node-label-text);
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButtonMusic__KF5oj:hover,
.NodeGuideModal_footerButtonMusic__KF5oj.NodeGuideModal_elementActive__D9gpf {
  border-color: var(--music-node-border-selected);
  background-color: var(--music-node-icon-bg);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.NodeGuideModal_goButtonPreviewMusic__7kjek {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--music-node-button-bg);
  color: var(--music-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreviewMusic__7kjek:hover,
.NodeGuideModal_goButtonPreviewMusic__7kjek.NodeGuideModal_elementActive__D9gpf {
  background-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}

/* ================================== */
/* MusicNode Handle Previews          */
/* ================================== */

.NodeGuideModal_handleWrapperMusic__19FZH {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperMusic__19FZH:hover,
.NodeGuideModal_handleWrapperMusic__19FZH.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(236, 72, 153, 0.15);
}

.NodeGuideModal_handlePreviewMusic__vou\+u {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #ec4899; /* pink-500 */
  border: 2px solid #fce7f3; /* pink-100 */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ================================== */
/* MusicNode High Contrast Theme      */
/* ================================== */

body.high-contrast .NodeGuideModal_musicNodePreview__0i6O5 {
  --music-node-bg: #111827; /* gray-900 */
  --music-node-border: #7c3aed; /* violet-600 */
  --music-node-border-selected: #8b5cf6; /* violet-500 */
  --music-node-text: #f9fafb; /* gray-50 */
  --music-node-label-text: #c4b5fd; /* violet-300 */
  --music-node-icon-bg: #1f2937; /* gray-800 */
  --music-node-icon-color: #ddd6fe; /* violet-200 */
  --music-node-button-bg: #7c3aed; /* violet-600 */
  --music-node-button-text: #f9fafb; /* gray-50 */
  --music-node-textarea-bg: #1f2937; /* gray-800 */
  --music-node-textarea-border: #4b5563; /* gray-600 */
}

/* MusicNode tooltip styling - violet theme */
.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(139, 92, 246, 0.3);
}

.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #8b5cf6;
}

.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #c4b5fd;
}

/* ================================== */
/* AudioNode Preview - Matching Real  */
/* ================================== */

.NodeGuideModal_audioNodePreview__yikrz {
  position: relative;
  /* Match the real AudioNode CSS variables - Blue color scheme */
  --audio-node-bg: #eff6ff; /* blue-50 */
  --audio-node-border: #93c5fd; /* blue-300 */
  --audio-node-border-selected: #3b82f6; /* blue-500 */
  --audio-node-text: #1e40af; /* blue-800 */
  --audio-node-label-text: #2563eb; /* blue-600 */
  --audio-node-icon-bg: #dbeafe; /* blue-100 */
  --audio-node-icon-color: #1d4ed8; /* blue-700 */
  --audio-node-button-bg: #60a5fa; /* blue-400 */
  --audio-node-button-text: #1e3a8a; /* blue-900 */
  --audio-node-textarea-bg: #f8faff; /* Lighter blue */
  --audio-node-textarea-border: #bfdbfe; /* blue-200 */
}

/* ================================== */
/* AudioNode Collapsed Preview        */
/* ================================== */

.NodeGuideModal_collapsedNodeAudio__\+Z7KU {
  width: 280px;
  height: 180px;
  background-color: var(--audio-node-bg);
  border: 1px solid var(--audio-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_nodeIconPlaceholderAudio__DHhV7 {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreviewAudio__9kHKv {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewAudio__9kHKv:hover,
.NodeGuideModal_statusIndicatorsPreviewAudio__9kHKv.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(59, 130, 246, 0.15);
}

.NodeGuideModal_statusDotAudio__RPAop {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--audio-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDotAudio__RPAop::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--audio-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

/* ================================== */
/* AudioNode Expanded Preview         */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperAudio__yEl9Y {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderAudio__vQMxq {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonAudio__eMSpb {
  width: 26px;
  height: 20px;
  background-color: var(--audio-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--audio-node-button-text);
}

.NodeGuideModal_headerButtonAudio__eMSpb:hover,
.NodeGuideModal_headerButtonAudio__eMSpb.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.NodeGuideModal_headerCreditsPreviewAudio__0y\+JY {
  width: 50px;
  height: 18px;
  background-color: var(--audio-node-bg);
  border: 1px solid var(--audio-node-textarea-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--audio-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_expandedNodeAudio__Z52oj {
  width: 280px;
  height: 180px;
  background-color: var(--audio-node-bg);
  border: 1px solid var(--audio-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* AudioNode Tabs */
.NodeGuideModal_audioTabsPreview__ji-9t {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
}

.NodeGuideModal_audioTabPreview__1hQ5u {
  flex: 1 1;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  color: var(--audio-node-label-text);
  background-color: var(--audio-node-textarea-bg);
  border: 1px solid var(--audio-node-textarea-border);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  opacity: 0.6;
}

.NodeGuideModal_audioTabPreview__1hQ5u:hover,
.NodeGuideModal_audioTabPreview__1hQ5u.NodeGuideModal_elementActive__D9gpf {
  opacity: 1;
  background-color: var(--audio-node-icon-bg);
  border-color: var(--audio-node-border-selected);
}

.NodeGuideModal_audioTabActive__UJAnU {
  opacity: 1;
  background-color: var(--audio-node-bg);
  border-bottom-color: var(--audio-node-bg);
}

.NodeGuideModal_textareaPreviewAudio__FSv0E {
  flex: 1 1;
  background-color: var(--audio-node-bg);
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textareaPreviewAudio__FSv0E:hover,
.NodeGuideModal_textareaPreviewAudio__FSv0E.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--audio-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--audio-node-border-selected);
}

.NodeGuideModal_placeholderTextAudio__3oVVC {
  font-size: 0.85rem;
  color: var(--audio-node-label-text);
  font-family: 'Inconsolata', monospace;
  opacity: 0.7;
}

.NodeGuideModal_expandedFooterAudio__DA1fc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_tokenCounterPreviewAudio__Owu4l {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--audio-node-label-text);
  font-family: 'Inconsolata', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_tokenCounterPreviewAudio__Owu4l:hover,
.NodeGuideModal_tokenCounterPreviewAudio__Owu4l.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(59, 130, 246, 0.15);
}

.NodeGuideModal_modelNamePreviewAudio__k2eNT {
  color: var(--audio-node-border-selected);
  font-weight: 500;
}

.NodeGuideModal_footerButtonsAudio__zMfVH {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_footerButtonAudio__lHbEv {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--audio-node-textarea-border);
  background-color: var(--audio-node-textarea-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--audio-node-label-text);
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButtonAudio__lHbEv:hover,
.NodeGuideModal_footerButtonAudio__lHbEv.NodeGuideModal_elementActive__D9gpf {
  border-color: var(--audio-node-border-selected);
  background-color: var(--audio-node-icon-bg);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.NodeGuideModal_goButtonPreviewAudio__ioqEy {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreviewAudio__ioqEy:hover,
.NodeGuideModal_goButtonPreviewAudio__ioqEy.NodeGuideModal_elementActive__D9gpf {
  background-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

/* ================================== */
/* AudioNode Handle Previews          */
/* ================================== */

.NodeGuideModal_handleWrapperAudio__jSEf3 {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperAudio__jSEf3:hover,
.NodeGuideModal_handleWrapperAudio__jSEf3.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(236, 72, 153, 0.15);
}

.NodeGuideModal_handlePreviewAudio__mT\+-Y {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #ec4899; /* pink-500 */
  border: 2px solid #fce7f3; /* pink-100 */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ================================== */
/* AudioNode High Contrast Theme      */
/* ================================== */

body.high-contrast .NodeGuideModal_audioNodePreview__yikrz {
  --audio-node-bg: #111827; /* gray-900 */
  --audio-node-border: #2563eb; /* blue-600 */
  --audio-node-border-selected: #3b82f6; /* blue-500 */
  --audio-node-text: #f9fafb; /* gray-50 */
  --audio-node-label-text: #93c5fd; /* blue-300 */
  --audio-node-icon-bg: #1f2937; /* gray-800 */
  --audio-node-icon-color: #bfdbfe; /* blue-200 */
  --audio-node-button-bg: #2563eb; /* blue-600 */
  --audio-node-button-text: #f9fafb; /* gray-50 */
  --audio-node-textarea-bg: #1f2937; /* gray-800 */
  --audio-node-textarea-border: #4b5563; /* gray-600 */
}

/* AudioNode tooltip styling - blue theme */
.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(59, 130, 246, 0.3);
}

.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #3b82f6;
}

.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #93c5fd;
}

/* ================================== */
/* FrameExtractNode Preview - Amber   */
/* ================================== */

.NodeGuideModal_frameExtractNodePreview__c4Bwi {
  position: relative;
  /* Match the real VideoFrameExtractionNode CSS variables - Amber color scheme */
  --frame-node-bg: #fef3c7; /* amber-100 */
  --frame-node-border: #f59e0b; /* amber-500 */
  --frame-node-border-selected: #d97706; /* amber-600 */
  --frame-node-text: #92400e; /* amber-800 */
  --frame-node-label-text: #b45309; /* amber-700 */
  --frame-node-icon-bg: #fde68a; /* amber-200 */
  --frame-node-icon-color: #b45309; /* amber-700 */
  --frame-node-button-bg: #f59e0b; /* amber-500 */
  --frame-node-button-text: #fffbeb; /* amber-50 */
  --frame-node-textarea-bg: #fffbeb; /* amber-50 */
  --frame-node-textarea-border: #fde68a; /* amber-200 */
}

/* ================================== */
/* FrameExtractNode Collapsed Preview */
/* ================================== */

.NodeGuideModal_collapsedNodeFrameExtract__s0QLc {
  width: 280px;
  height: 180px;
  background-color: var(--frame-node-bg);
  border: 1px solid var(--frame-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_nodeIconPlaceholderFrameExtract__rQuHY {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreviewFrameExtract__XXRLu {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewFrameExtract__XXRLu:hover,
.NodeGuideModal_statusIndicatorsPreviewFrameExtract__XXRLu.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(245, 158, 11, 0.15);
}

.NodeGuideModal_statusDotFrameExtract__F7azo {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDotFrameExtract__F7azo::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--frame-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

/* ================================== */
/* FrameExtractNode Expanded Preview  */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperFrameExtract__vguci {
  position: relative;
}

.NodeGuideModal_expandedNodeFrameExtract__3yvDb {
  width: 280px;
  height: 180px;
  background-color: var(--frame-node-bg);
  border: 1px solid var(--frame-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_frameExtractPlaceholderContent__UYDr0 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.NodeGuideModal_frameExtractPlaceholderIcon__PF5C\+ {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--frame-node-label-text);
  opacity: 0.5;
  font-size: 1.2rem;
}

.NodeGuideModal_frameExtractPlaceholderText__h7cFJ {
  font-size: 0.85rem;
  color: var(--frame-node-label-text);
  font-family: 'Inconsolata', monospace;
  opacity: 0.7;
}

.NodeGuideModal_expandedFooterFrameExtract__qI8um {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_statusTextFrameExtract__vqyjC {
  font-size: 0.7rem;
  color: var(--frame-node-label-text);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_footerButtonsFrameExtract__ogQI9 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_frameSelectorPreview__zOofR {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: var(--frame-node-textarea-bg);
  color: var(--frame-node-label-text);
  font-size: 0.65rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_frameSelectorPreview__zOofR:hover,
.NodeGuideModal_frameSelectorPreview__zOofR.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--frame-node-icon-bg);
  border-color: var(--frame-node-border);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.NodeGuideModal_frameSelectorChevron__WIB8l {
  font-size: 0.5rem;
}

.NodeGuideModal_footerButtonFrameExtract__mbZwD {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: var(--frame-node-textarea-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--frame-node-label-text);
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButtonFrameExtract__mbZwD:hover,
.NodeGuideModal_footerButtonFrameExtract__mbZwD.NodeGuideModal_elementActive__D9gpf {
  border-color: var(--frame-node-border-selected);
  background-color: var(--frame-node-icon-bg);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.NodeGuideModal_goButtonPreviewFrameExtract__GETNC {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreviewFrameExtract__GETNC:hover,
.NodeGuideModal_goButtonPreviewFrameExtract__GETNC.NodeGuideModal_elementActive__D9gpf {
  background-color: #d97706;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* ================================== */
/* FrameExtractNode Handle Previews   */
/* ================================== */

.NodeGuideModal_handleWrapperFrameExtract__zxgVI {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperFrameExtract__zxgVI:hover,
.NodeGuideModal_handleWrapperFrameExtract__zxgVI.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(236, 72, 153, 0.15);
}

.NodeGuideModal_handlePreviewFrameExtract__1y-Ld {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #d97706; /* amber-600 */
  border: 2px solid #fef3c7; /* amber-100 */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ================================== */
/* FrameExtractNode High Contrast     */
/* ================================== */

body.high-contrast .NodeGuideModal_frameExtractNodePreview__c4Bwi {
  --frame-node-bg: #111827; /* gray-900 */
  --frame-node-border: #f59e0b; /* amber-500 */
  --frame-node-border-selected: #d97706; /* amber-600 */
  --frame-node-text: #f9fafb; /* gray-50 */
  --frame-node-label-text: #fde68a; /* amber-200 */
  --frame-node-icon-bg: #1f2937; /* gray-800 */
  --frame-node-icon-color: #fde68a; /* amber-200 */
  --frame-node-button-bg: #f59e0b; /* amber-500 */
  --frame-node-button-text: #111827; /* gray-900 */
  --frame-node-textarea-bg: #1f2937; /* gray-800 */
  --frame-node-textarea-border: #4b5563; /* gray-600 */
}

body.high-contrast .NodeGuideModal_handlePreviewFrameExtract__1y-Ld {
  background-color: #f59e0b;
  border-color: #111827;
}

/* FrameExtractNode tooltip styling - amber theme */
.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(245, 158, 11, 0.3);
}

.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #f59e0b;
}

.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #fde68a;
}

/* ================================== */
/* DataNode Preview - Yellow          */
/* ================================== */

.NodeGuideModal_dataNodePreview__5SaqB {
  position: relative;
  /* Match the real DataNode CSS variables - Yellow color scheme */
  --data-node-bg: #fefce8; /* yellow-50 */
  --data-node-border: #fde047; /* yellow-300 */
  --data-node-border-selected: #facc15; /* yellow-400 */
  --data-node-text: #78350f; /* amber-900 */
  --data-node-label-text: #b45309; /* amber-700 */
  --data-node-icon-bg: #fef9c3; /* yellow-100 */
  --data-node-icon-color: #854d0e; /* yellow-800 */
  --data-node-button-bg: #fde047; /* yellow-300 */
  --data-node-button-text: #78350f; /* amber-900 */
  --data-node-textarea-bg: #fefdf8; /* light yellow */
  --data-node-textarea-border: #fef08a; /* yellow-200 */
}

/* ================================== */
/* DataNode Collapsed Preview         */
/* ================================== */

.NodeGuideModal_collapsedNodeData__soNYS {
  width: 280px;
  height: 180px;
  background-color: var(--data-node-bg);
  border: 1px solid var(--data-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_nodeIconPlaceholderData__hz9Q4 {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
  border-radius: 8px;
  opacity: 0.6;
}

.NodeGuideModal_statusIndicatorsPreviewData__5-BxB {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewData__5-BxB:hover,
.NodeGuideModal_statusIndicatorsPreviewData__5-BxB.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(253, 224, 71, 0.15);
}

.NodeGuideModal_statusDotData__WhpZa {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--data-node-textarea-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusDotData__WhpZa::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: var(--data-node-label-text);
  opacity: 0.3;
  border-radius: 2px;
}

.NodeGuideModal_ghostLinesPreviewData__UynqP {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.NodeGuideModal_ghostLineData__vFlLr {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--data-node-textarea-border) 0%,
    var(--data-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
}

.NodeGuideModal_ghostLineData__vFlLr:nth-child(2) {
  width: 75%;
}

.NodeGuideModal_ghostLineData__vFlLr:nth-child(3) {
  width: 50%;
}

/* ================================== */
/* DataNode Expanded Preview          */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperData__\+ouOk {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderData__ujm8A {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonData__j9YOM {
  width: 26px;
  height: 20px;
  background-color: var(--data-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--data-node-button-text);
  font-size: 0.7rem;
}

.NodeGuideModal_headerButtonData__j9YOM:hover,
.NodeGuideModal_headerButtonData__j9YOM.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(253, 224, 71, 0.6);
}

.NodeGuideModal_expandedNodeData__K3uER {
  width: 280px;
  height: 180px;
  background-color: var(--data-node-bg);
  border: 1px solid var(--data-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_textareaPreviewData__eywND {
  flex: 1 1;
  background-color: var(--data-node-bg);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_textareaPreviewData__eywND:hover,
.NodeGuideModal_textareaPreviewData__eywND.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--data-node-textarea-bg);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.4);
}

.NodeGuideModal_textareaLinesData__stx\+V {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}

.NodeGuideModal_textareaLineData__0B\+a2 {
  height: 8px;
  background-color: var(--data-node-textarea-border);
  border-radius: 2px;
  opacity: 0.5;
}

.NodeGuideModal_textareaLineData__0B\+a2:nth-child(1) {
  width: 80%;
}

.NodeGuideModal_textareaLineData__0B\+a2:nth-child(2) {
  width: 60%;
}

.NodeGuideModal_textareaLineData__0B\+a2:nth-child(3) {
  width: 40%;
}

.NodeGuideModal_expandedFooterData__udgz- {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: auto;
}

.NodeGuideModal_footerStatusPreviewData__jnTxq {
  font-size: 0.65rem;
  color: var(--data-node-label-text);
  font-family: 'Inconsolata', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.NodeGuideModal_footerStatusPreviewData__jnTxq:hover,
.NodeGuideModal_footerStatusPreviewData__jnTxq.NodeGuideModal_elementActive__D9gpf {
  opacity: 1;
  background-color: rgba(253, 224, 71, 0.15);
}

.NodeGuideModal_footerButtonsData__\+MsRW {
  display: flex;
  align-items: center;
  gap: 4px;
}

.NodeGuideModal_footerButtonData__YpoJn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--data-node-label-text);
  transition: all 0.2s ease;
  opacity: 0.6;
}

.NodeGuideModal_footerButtonData__YpoJn:hover,
.NodeGuideModal_footerButtonData__YpoJn.NodeGuideModal_elementActive__D9gpf {
  opacity: 1;
  background-color: var(--data-node-button-bg);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.4);
}

.NodeGuideModal_goButtonPreviewData__0TZNd {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background-color: var(--data-node-button-bg);
  color: var(--data-node-button-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.NodeGuideModal_goButtonPreviewData__0TZNd:hover,
.NodeGuideModal_goButtonPreviewData__0TZNd.NodeGuideModal_elementActive__D9gpf {
  background-color: #facc15;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

/* ================================== */
/* DataNode Handle Previews           */
/* ================================== */

.NodeGuideModal_handleWrapperData__EHwzm {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperData__EHwzm:hover,
.NodeGuideModal_handleWrapperData__EHwzm.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(236, 72, 153, 0.15);
}

.NodeGuideModal_handlePreviewData__kWyJP {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #facc15; /* yellow-400 */
  border: 2px solid #fefce8; /* yellow-50 */
  border-radius: 4px;
  box-sizing: border-box;
}

/* ================================== */
/* DataNode High Contrast             */
/* ================================== */

body.high-contrast .NodeGuideModal_dataNodePreview__5SaqB {
  --data-node-bg: #111827; /* gray-900 */
  --data-node-border: #eab308; /* yellow-500 */
  --data-node-border-selected: #facc15; /* yellow-400 */
  --data-node-text: #f9fafb; /* gray-50 */
  --data-node-label-text: #fde047; /* yellow-300 */
  --data-node-icon-bg: #1f2937; /* gray-800 */
  --data-node-icon-color: #fef9c3; /* yellow-100 */
  --data-node-button-bg: #374151; /* gray-700 */
  --data-node-button-text: #fde047; /* yellow-300 */
  --data-node-textarea-bg: #1f2937; /* gray-800 */
  --data-node-textarea-border: #4b5563; /* gray-600 */
}

body.high-contrast .NodeGuideModal_handlePreviewData__kWyJP {
  background-color: #facc15;
  border-color: #111827;
}

/* DataNode tooltip styling - yellow theme */
.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(253, 224, 71, 0.3);
}

.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(253, 224, 71, 0.15);
  border-color: rgba(253, 224, 71, 0.3);
  color: #fde047;
}

.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #fde047;
}

.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #fef9c3;
}

/* ================================== */
/* PostCreatorNode Preview - Fuchsia  */
/* ================================== */

.NodeGuideModal_postCreatorNodePreview__\+LObw {
  position: relative;
  /* Match the real PostCreatorNode CSS variables - Fuchsia/Pink color scheme */
  --post-node-bg: #fdf4ff; /* fuchsia-50 */
  --post-node-border: #f0abfc; /* fuchsia-300 */
  --post-node-border-selected: #d946ef; /* fuchsia-500 */
  --post-node-text: #701a75; /* fuchsia-900 */
  --post-node-label-text: #a21caf; /* fuchsia-700 */
  --post-node-icon-bg: #fae8ff; /* fuchsia-100 */
  --post-node-icon-color: #86198f; /* fuchsia-800 */
  --post-node-button-bg: #e879f9; /* fuchsia-400 */
  --post-node-button-text: #701a75; /* fuchsia-900 */
  --post-node-textarea-bg: #fefaff; /* fuchsia-25 */
  --post-node-textarea-border: #f5d0fe; /* fuchsia-200 */
}

/* ================================== */
/* PostCreatorNode Collapsed Preview  */
/* ================================== */

.NodeGuideModal_collapsedNodePostCreator__Trjd\+ {
  width: 280px;
  height: 180px;
  background-color: var(--post-node-bg);
  border: 1px solid var(--post-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_previewCanvasCollapsed__gfzCR {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.NodeGuideModal_previewCanvasCollapsed__gfzCR:hover,
.NodeGuideModal_previewCanvasCollapsed__gfzCR.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--post-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--post-node-border-selected);
}

.NodeGuideModal_previewCanvasPlaceholder__a3c4t {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.NodeGuideModal_previewCanvasIcon__WkYx5 {
  font-size: 2rem;
}

.NodeGuideModal_previewCanvasText__Pch2K {
  font-size: 0.75rem;
  color: var(--post-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================================== */
/* PostCreatorNode Expanded Preview   */
/* ================================== */

.NodeGuideModal_expandedNodeWrapperPostCreator__6NpzI {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderPostCreator__d4OfI {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonPostCreator__OKtQK {
  width: 26px;
  height: 20px;
  background-color: var(--post-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--post-node-button-text);
  font-size: 0.7rem;
}

.NodeGuideModal_headerButtonPostCreator__OKtQK:hover,
.NodeGuideModal_headerButtonPostCreator__OKtQK.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.6);
}

.NodeGuideModal_headerButtonPostCreatorRender__PJHZ0 {
  width: 26px;
  height: 20px;
  background-color: #3b82f6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.7rem;
}

.NodeGuideModal_headerButtonPostCreatorRender__PJHZ0:hover,
.NodeGuideModal_headerButtonPostCreatorRender__PJHZ0.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.NodeGuideModal_expandedNodePostCreator__d1kfa {
  width: 280px;
  height: 180px;
  background-color: var(--post-node-bg);
  border: 1px solid var(--post-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.NodeGuideModal_inputIndicatorsPreview__jmKoW {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.NodeGuideModal_inputIndicatorsPreview__jmKoW:hover,
.NodeGuideModal_inputIndicatorsPreview__jmKoW.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--post-node-icon-bg);
}

.NodeGuideModal_indicatorPreview__XoKBj {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--post-node-textarea-bg);
  border: 1px solid var(--post-node-textarea-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--post-node-label-text);
}

.NodeGuideModal_indicatorIcon__azUEu {
  font-size: 14px;
}

.NodeGuideModal_indicatorText__gX3I0 {
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_indicatorCheck__jbFgJ {
  color: #22c55e; /* green-500 */
  margin-left: auto;
}

/* ================================== */
/* PostCreatorNode Handle Previews    */
/* ================================== */

.NodeGuideModal_handleWrapperPostCreator__-KOBt {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleWrapperPostCreator__-KOBt:hover,
.NodeGuideModal_handleWrapperPostCreator__-KOBt.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(217, 70, 239, 0.15);
}

.NodeGuideModal_handlePreviewPostCreator__3Vujo {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #d946ef; /* fuchsia-500 */
  border: 2px solid #fdf4ff; /* fuchsia-50 */
  border-radius: 4px;
  box-sizing: border-box;
}

.NodeGuideModal_imageHandlePreview__D3CEq {
  background-color: #10b981; /* green-500 for image */
}

.NodeGuideModal_textHandlePreview__8WXUe {
  background-color: #3b82f6; /* blue-500 for text */
}

/* ================================== */
/* PostCreatorNode High Contrast      */
/* ================================== */

body.high-contrast .NodeGuideModal_postCreatorNodePreview__\+LObw {
  --post-node-bg: #111827; /* gray-900 */
  --post-node-border: #d946ef; /* fuchsia-500 */
  --post-node-border-selected: #e879f9; /* fuchsia-400 */
  --post-node-text: #f9fafb; /* gray-50 */
  --post-node-label-text: #f0abfc; /* fuchsia-300 */
  --post-node-icon-bg: #1f2937; /* gray-800 */
  --post-node-icon-color: #fae8ff; /* fuchsia-100 */
  --post-node-button-bg: #d946ef; /* fuchsia-500 */
  --post-node-button-text: #f9fafb; /* gray-50 */
  --post-node-textarea-bg: #1f2937; /* gray-800 */
  --post-node-textarea-border: #4b5563; /* gray-600 */
}

body.high-contrast .NodeGuideModal_handlePreviewPostCreator__3Vujo {
  background-color: #d946ef;
  border-color: #111827;
}

/* PostCreatorNode tooltip styling - fuchsia theme */
.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tooltip__BZkfZ,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tooltip__BZkfZ {
  border-color: rgba(217, 70, 239, 0.3);
}

.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tooltipIcon__uuRhc {
  background-color: rgba(217, 70, 239, 0.15);
  border-color: rgba(217, 70, 239, 0.3);
  color: #d946ef;
}

.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: #d946ef;
}

.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tipsLabel__MUWA8 {
  color: #f0abfc;
}

/* ================================== */
/* OutputNode Preview Styling         */
/* Rose/Pink theme                    */
/* ================================== */

.NodeGuideModal_outputNodePreview__mMa03 {
  --output-node-bg: #fff1f2;
  --output-node-border: #fecdd3;
  --output-node-border-selected: #f43f5e;
  --output-node-text: #881337;
  --output-node-label-text: #be123c;
  --output-node-icon-bg: #ffe4e6;
  --output-node-icon-color: #9f1239;
  --output-node-button-bg: #fecdd3;
  --output-node-button-bg-hover: #fda4af;
  --output-node-button-text: #9f1239;
  --output-node-display-bg: #fff8f9;
  --output-node-display-border: #ffe4e6;
}

body.high-contrast .NodeGuideModal_outputNodePreview__mMa03 {
  --output-node-bg: #111827;
  --output-node-border: #e11d48;
  --output-node-border-selected: #f43f5e;
  --output-node-text: #f9fafb;
  --output-node-label-text: #fecdd3;
  --output-node-icon-bg: #1f2937;
  --output-node-icon-color: #ffe4e6;
  --output-node-button-bg: #374151;
  --output-node-button-bg-hover: #4b5563;
  --output-node-button-text: #fecdd3;
  --output-node-display-bg: #1f2937;
  --output-node-display-border: #4b5563;
}

/* OutputNode Collapsed Preview - matches InputNode pattern with rose theme */
.NodeGuideModal_collapsedNodeOutput__phlUW {
  width: 280px;
  height: 180px;
  background-color: var(--output-node-bg);
  border: 1px solid var(--output-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

/* Main Icon Container */
.NodeGuideModal_collapsedIconOutput__O5wxw {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon placeholder with rose gradient */
.NodeGuideModal_nodeIconPlaceholderOutput__WalYi {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-radius: 8px;
  opacity: 0.6;
}

/* Status indicators row */
.NodeGuideModal_statusIndicatorsPreviewOutput__EcWHf {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewOutput__EcWHf:hover,
.NodeGuideModal_statusIndicatorsPreviewOutput__EcWHf.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(244, 63, 94, 0.15);
}

/* Status indicator dots - rose theme */
.NodeGuideModal_statusIconOutput__WTsYi {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--output-node-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusIconOutput__WTsYi::after {
  content: '';
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-radius: 3px;
  opacity: 0.5;
}

.NodeGuideModal_handleWrapperOutput__h-xLX {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}

.NodeGuideModal_handlePreviewOutput__1OA4M {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #f43f5e; /* rose-500 */
  border: 2px solid var(--output-node-bg);
  border-radius: 4px;
  box-sizing: border-box;
}

/* OutputNode Expanded Preview */
.NodeGuideModal_expandedNodeWrapperOutput__BM1Ss {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderOutput__v1Gpa {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonOutput__2ZR6U {
  width: 26px;
  height: 20px;
  background-color: var(--output-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--output-node-button-text);
  font-size: 0.7rem;
}

.NodeGuideModal_headerButtonOutput__2ZR6U:hover,
.NodeGuideModal_headerButtonOutput__2ZR6U.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.6);
}

.NodeGuideModal_expandedNodeOutput__li8\+Q {
  width: 280px;
  height: 160px;
  background-color: var(--output-node-bg);
  border: 1px solid var(--output-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  position: relative;
}

.NodeGuideModal_outputDisplayPreview__8nvC4 {
  flex: 1 1;
  background-color: var(--output-node-display-bg);
  border: 1px solid var(--output-node-display-border);
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_outputDisplayPreview__8nvC4:hover,
.NodeGuideModal_outputDisplayPreview__8nvC4.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--output-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--output-node-border-selected);
}

.NodeGuideModal_outputLinesPreview__gmL1- {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.NodeGuideModal_outputLinePreview__AH98R {
  height: 8px;
  background-color: var(--output-node-border);
  border-radius: 4px;
  opacity: 0.6;
}

.NodeGuideModal_outputLinePreview__AH98R:nth-child(1) {
  width: 90%;
}

.NodeGuideModal_outputLinePreview__AH98R:nth-child(2) {
  width: 75%;
}

.NodeGuideModal_outputLinePreview__AH98R:nth-child(3) {
  width: 60%;
}

.NodeGuideModal_expandedFooterOutput__vxAjL {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--output-node-display-border);
}

.NodeGuideModal_footerStatusOutput__sWaUi {
  font-size: 0.65rem;
  color: var(--output-node-label-text);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_footerButtonsOutput__5J3VG {
  display: flex;
  gap: 4px;
}

.NodeGuideModal_footerButtonOutput__EibdU {
  width: 18px;
  height: 18px;
  background-color: var(--output-node-display-bg);
  border: 1px solid var(--output-node-display-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_footerButtonOutput__EibdU:hover,
.NodeGuideModal_footerButtonOutput__EibdU.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--output-node-icon-bg);
  border-color: var(--output-node-border-selected);
  transform: scale(1.1);
}

/* OutputNode High Contrast Handle Adjustments */
body.high-contrast .NodeGuideModal_handlePreviewOutput__1OA4M {
  background-color: #f43f5e;
  border-color: #111827;
}

/* ================================== */
/* GoogleDriveNode Preview Styling    */
/* Green theme                        */
/* ================================== */

.NodeGuideModal_googleDriveNodePreview__z9Lum {
  --gdrive-node-bg: #f0fdf4;
  --gdrive-node-border: #bbf7d0;
  --gdrive-node-border-selected: #22c55e;
  --gdrive-node-text: #14532d;
  --gdrive-node-label-text: #15803d;
  --gdrive-node-icon-bg: #dcfce7;
  --gdrive-node-icon-color: #166534;
  --gdrive-node-button-bg: #dcfce7;
  --gdrive-node-button-bg-hover: #bbf7d0;
  --gdrive-node-button-text: #166534;
  --gdrive-node-display-bg: #f2fff6;
  --gdrive-node-display-border: #d9f99d;
}

body.high-contrast .NodeGuideModal_googleDriveNodePreview__z9Lum {
  --gdrive-node-bg: #111827;
  --gdrive-node-border: #22c55e;
  --gdrive-node-border-selected: #4ade80;
  --gdrive-node-text: #f9fafb;
  --gdrive-node-label-text: #bbf7d0;
  --gdrive-node-icon-bg: #1f2937;
  --gdrive-node-icon-color: #dcfce7;
  --gdrive-node-button-bg: #374151;
  --gdrive-node-button-bg-hover: #4b5563;
  --gdrive-node-button-text: #dcfce7;
  --gdrive-node-display-bg: #1f2937;
  --gdrive-node-display-border: #4b5563;
}

/* GoogleDriveNode Collapsed Preview - matches InputNode pattern with green theme */
.NodeGuideModal_collapsedNodeGDrive__2pyNX {
  width: 280px;
  height: 180px;
  background-color: var(--gdrive-node-bg);
  border: 1px solid var(--gdrive-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

/* Main Icon Container */
.NodeGuideModal_gdriveIconLarge__QJrdp {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon placeholder with green gradient */
.NodeGuideModal_gdriveIconPlaceholder__GZ63a {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 8px;
  opacity: 0.6;
}

/* Message text container */
.NodeGuideModal_gdriveMessageContainer__wRRGx {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.NodeGuideModal_gdriveMessageContainer__wRRGx:hover,
.NodeGuideModal_gdriveMessageContainer__wRRGx.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(34, 197, 94, 0.15);
}

/* Message text - green theme */
.NodeGuideModal_gdriveMessageText__4O6sX {
  font-size: 0.8rem;
  color: var(--gdrive-node-label-text);
  margin: 0;
  line-height: 1.4;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_handleWrapperGDrive__uV5Xv {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}

.NodeGuideModal_handlePreviewGDrive__Z3QIl {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #22c55e; /* green-500 */
  border: 2px solid var(--gdrive-node-bg);
  border-radius: 4px;
  box-sizing: border-box;
}

/* GoogleDriveNode Expanded Preview */
.NodeGuideModal_expandedNodeWrapperGDrive__5YJha {
  position: relative;
  padding-top: 35px;
}

.NodeGuideModal_expandedHeaderGDrive__pzTPp {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.NodeGuideModal_headerButtonGDriveUpload__Oh3sN {
  width: 26px;
  height: 20px;
  background-color: var(--gdrive-node-button-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gdrive-node-button-text);
  font-size: 0.7rem;
}

.NodeGuideModal_headerButtonGDriveUpload__Oh3sN:hover,
.NodeGuideModal_headerButtonGDriveUpload__Oh3sN.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

.NodeGuideModal_headerButtonGDriveDisconnect__rx9Qm {
  width: 26px;
  height: 20px;
  background-color: #fee2e2;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  font-size: 0.7rem;
}

.NodeGuideModal_headerButtonGDriveDisconnect__rx9Qm:hover,
.NodeGuideModal_headerButtonGDriveDisconnect__rx9Qm.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
}

.NodeGuideModal_expandedNodeGDrive__CoWG0 {
  width: 200px;
  min-height: 180px;
  background-color: var(--gdrive-node-bg);
  border: 1px solid var(--gdrive-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  position: relative;
  gap: 8px;
}

.NodeGuideModal_fileTypeBadgePreview__YY4gP {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: var(--gdrive-node-icon-bg);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.NodeGuideModal_fileTypeBadgePreview__YY4gP:hover,
.NodeGuideModal_fileTypeBadgePreview__YY4gP.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--gdrive-node-button-bg-hover);
  box-shadow: inset 0 0 0 1px var(--gdrive-node-border-selected);
}

.NodeGuideModal_fileTypeIcon__IQZQZ {
  font-size: 0.8rem;
}

.NodeGuideModal_fileTypeText__A-4iC {
  font-size: 0.6rem;
  color: var(--gdrive-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.NodeGuideModal_previewAreaGDrive__boALG {
  flex: 1 1;
  background-color: var(--gdrive-node-display-bg);
  border: 1px solid var(--gdrive-node-display-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
}

.NodeGuideModal_previewAreaGDrive__boALG:hover,
.NodeGuideModal_previewAreaGDrive__boALG.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--gdrive-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--gdrive-node-border-selected);
}

.NodeGuideModal_previewPlaceholderGDrive__CdY-K {
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_previewImagePlaceholder__udjVi {
  width: 40px;
  height: 40px;
  background-color: var(--gdrive-node-border);
  border-radius: 4px;
  opacity: 0.5;
}

.NodeGuideModal_readyTextGDrive__MZ08f {
  font-size: 0.6rem;
  color: var(--gdrive-node-label-text);
  font-family: 'Inconsolata', monospace;
  text-align: center;
}

.NodeGuideModal_footerGDrive__7DEty {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: var(--gdrive-node-display-bg);
  border: 1px solid var(--gdrive-node-display-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_footerGDrive__7DEty:hover,
.NodeGuideModal_footerGDrive__7DEty.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--gdrive-node-icon-bg);
  box-shadow: inset 0 0 0 1px var(--gdrive-node-border-selected);
}

.NodeGuideModal_statusIconGDrive__7A1kl {
  color: var(--gdrive-node-border-selected);
  font-size: 0.7rem;
}

.NodeGuideModal_statusTextGDrive__ziCqn {
  font-size: 0.55rem;
  color: var(--gdrive-node-label-text);
  font-family: 'Inconsolata', monospace;
}

/* GoogleDriveNode High Contrast Handle Adjustments */
body.high-contrast .NodeGuideModal_handlePreviewGDrive__Z3QIl {
  background-color: #22c55e;
  border-color: #111827;
}

/* ==================== MEDIA PREVIEW NODE PREVIEW ==================== */

/* MediaPreviewNode Theme Variables - Blue/Cyan */
.NodeGuideModal_mediaPreviewNodePreview__5B1op {
  --media-node-bg: #f0f9ff; /* sky-50 */
  --media-node-border: #bae6fd; /* sky-200 */
  --media-node-border-selected: #0ea5e9; /* sky-500 */
  --media-node-text: #0c4a6e; /* sky-900 */
  --media-node-label-text: #0369a1; /* sky-700 */
  --media-node-icon-bg: #e0f2fe; /* sky-100 */
  --media-node-icon-color: #075985; /* sky-800 */
  --media-node-button-bg: #e0f2fe; /* sky-100 */
  --media-node-button-bg-hover: #bae6fd; /* sky-200 */
  --media-node-button-text: #075985; /* sky-800 */
}

/* MediaPreviewNode High Contrast Theme */
body.high-contrast .NodeGuideModal_mediaPreviewNodePreview__5B1op {
  --media-node-bg: #111827; /* gray-900 */
  --media-node-border: #0ea5e9; /* sky-500 */
  --media-node-border-selected: #38bdf8; /* sky-400 */
  --media-node-text: #f9fafb; /* gray-50 */
  --media-node-label-text: #bae6fd; /* sky-200 */
  --media-node-icon-bg: #1f2937; /* gray-800 */
  --media-node-icon-color: #e0f2fe; /* sky-100 */
  --media-node-button-bg: #374151; /* gray-700 */
  --media-node-button-bg-hover: #4b5563; /* gray-600 */
  --media-node-button-text: #e0f2fe; /* sky-100 */
}

/* MediaPreviewNode Collapsed Preview - matches InputNode pattern with sky theme */
.NodeGuideModal_collapsedNodeMediaPreview__iXLLg {
  width: 280px;
  height: 180px;
  background-color: var(--media-node-bg);
  border: 1px solid var(--media-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

/* Main Icon Container */
.NodeGuideModal_mediaPreviewIconLarge__P-4Tz {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon placeholder with sky gradient */
.NodeGuideModal_mediaPreviewIconPlaceholder__nt-V6 {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-radius: 8px;
  opacity: 0.6;
}

/* Status indicators row */
.NodeGuideModal_statusIndicatorsPreviewMediaPreview__ccBv\+ {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_statusIndicatorsPreviewMediaPreview__ccBv\+:hover,
.NodeGuideModal_statusIndicatorsPreviewMediaPreview__ccBv\+.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(14, 165, 233, 0.15);
}

/* Status indicator dots - sky theme */
.NodeGuideModal_statusIconMediaPreview__EjfjR {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--media-node-border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodeGuideModal_statusIconMediaPreview__EjfjR::after {
  content: '';
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-radius: 3px;
  opacity: 0.5;
}

.NodeGuideModal_handleWrapperMediaPreview__HFPU6 {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}

.NodeGuideModal_handlePreviewMediaPreview__b7PAu {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #0ea5e9; /* sky-500 */
  border: 2px solid var(--media-node-bg);
  border-radius: 4px;
  box-sizing: border-box;
}

/* MediaPreviewNode Expanded Preview */
.NodeGuideModal_expandedNodeWrapperMediaPreview__xhOIn {
  position: relative;
}

.NodeGuideModal_expandedNodeMediaPreview__\+vEhH {
  width: 280px;
  min-height: 220px;
  background-color: var(--media-node-bg);
  border: 1px solid var(--media-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 16px;
  position: relative;
}

.NodeGuideModal_mediaPreviewArea__ZcViD {
  width: 100%;
  flex: 1 1;
  min-height: 120px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--media-node-icon-bg);
  border: 1px dashed var(--media-node-border);
}

.NodeGuideModal_mediaPreviewArea__ZcViD:hover,
.NodeGuideModal_mediaPreviewArea__ZcViD.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(14, 165, 233, 0.15);
  border-color: var(--media-node-border-selected);
}

.NodeGuideModal_mediaPreviewPlaceholder__dLBR1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.NodeGuideModal_mediaPreviewPlaceholderIcon__I48bm {
  color: var(--media-node-label-text);
  opacity: 0.6;
}

.NodeGuideModal_mediaPreviewPlaceholderText__Dcu2y {
  font-size: 0.75rem;
  color: var(--media-node-label-text);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_selectFileButtonPreview__FBeBf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--media-node-button-bg);
  border: 1px solid var(--media-node-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--media-node-button-text);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_selectFileButtonPreview__FBeBf:hover,
.NodeGuideModal_selectFileButtonPreview__FBeBf.NodeGuideModal_elementActive__D9gpf {
  background-color: var(--media-node-button-bg-hover);
  border-color: var(--media-node-border-selected);
}

/* MediaPreviewNode High Contrast Handle Adjustments */
body.high-contrast .NodeGuideModal_handlePreviewMediaPreview__b7PAu {
  background-color: #0ea5e9;
  border-color: #111827;
}

/* ==================== TEXT DISPLAY NODE PREVIEW ==================== */

/* TextDisplayNode Theme Variables - Slate (matches actual node) */
.NodeGuideModal_textDisplayNodePreview__OROiy {
  /* Slate color scheme - matches actual TextDisplayNode */
  --text-node-bg: #f8fafc; /* slate-50 */
  --text-node-border: #334155; /* slate-700 - actual node border */
  --text-node-border-selected: #64748b; /* slate-500 */
  --text-node-text: #1e293b; /* slate-800 */
  --text-node-label-bg: #e2e8f0; /* slate-200 */
  --text-node-label-text: #475569; /* slate-600 */
  --text-node-icon-bg: #f1f5f9; /* slate-100 */
  --text-node-icon-color: #475569; /* slate-600 */
  --text-node-handle-color: #64748b; /* slate-500 */
  --text-node-button-bg: #e2e8f0; /* slate-200 */
  --text-node-button-bg-hover: #cbd5e1; /* slate-300 */
  --text-node-button-text: #475569; /* slate-600 */
}

/* TextDisplayNode High Contrast Theme */
body.high-contrast .NodeGuideModal_textDisplayNodePreview__OROiy {
  --text-node-bg: #1e293b; /* slate-800 */
  --text-node-border: #334155; /* slate-700 */
  --text-node-border-selected: #94a3b8; /* slate-400 */
  --text-node-text: #f8fafc; /* slate-50 */
  --text-node-label-bg: #334155; /* slate-700 */
  --text-node-label-text: #cbd5e1; /* slate-300 */
  --text-node-icon-bg: #334155; /* slate-700 */
  --text-node-icon-color: #cbd5e1; /* slate-300 */
  --text-node-handle-color: #94a3b8; /* slate-400 */
  --text-node-button-bg: #374151; /* gray-700 */
  --text-node-button-bg-hover: #4b5563; /* gray-600 */
  --text-node-button-text: #cbd5e1; /* slate-300 */
}

/* TextDisplayNode Collapsed Preview */
.NodeGuideModal_collapsedNodeTextDisplay__UNpHk {
  width: 252px;
  min-height: 100px;
  background-color: var(--text-node-bg);
  border: 1px solid var(--text-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_textEditorPreview__wAHpA {
  flex: 1 1;
  min-height: 60px;
  background-color: transparent; /* Matches actual node - transparent */
  border: none;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textEditorPreview__wAHpA:hover,
.NodeGuideModal_textEditorPreview__wAHpA.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(100, 116, 139, 0.1); /* slate-500 with transparency */
  border-radius: 4px;
}

.NodeGuideModal_textEditorPlaceholder__-wUZ\+ {
  font-size: 0.75rem;
  color: var(--text-node-label-text);
  opacity: 0.6;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_handleWrapperTextDisplay__bD\+om {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}

.NodeGuideModal_handlePreviewTextDisplay__D1R-Y {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: #64748b; /* slate-500 - matches actual node */
  border: 2px solid var(--text-node-bg);
  border-radius: 4px;
  box-sizing: border-box;
}

/* TextDisplayNode Expanded Preview */
.NodeGuideModal_expandedNodeWrapperTextDisplay__2p4-K {
  position: relative;
  padding-top: 30px;
}

.NodeGuideModal_expandedHeaderTextDisplay__uySYG {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

.NodeGuideModal_floatingLabelTextDisplay__NBU\+3 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background-color: var(--text-node-label-bg);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-node-label-text);
  font-family: 'Inconsolata', monospace;
  height: 20px;
  box-sizing: border-box;
}

.NodeGuideModal_alignmentButtonsPreview__htBAa,
.NodeGuideModal_formatButtonsPreview__sR7mI {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_alignmentButtonsPreview__htBAa:hover,
.NodeGuideModal_alignmentButtonsPreview__htBAa.NodeGuideModal_elementActive__D9gpf,
.NodeGuideModal_formatButtonsPreview__sR7mI:hover,
.NodeGuideModal_formatButtonsPreview__sR7mI.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(100, 116, 139, 0.15); /* slate-500 with transparency */
}

.NodeGuideModal_formatButton__xG4lD {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--text-node-label-bg);
  border: none;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-node-label-text);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_expandedNodeTextDisplay__3savh {
  width: 252px;
  min-height: 100px;
  background-color: var(--text-node-bg);
  border: 1px solid var(--text-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px;
  position: relative;
}

.NodeGuideModal_textEditorPreviewExpanded__yTPdI {
  flex: 1 1;
  min-height: 60px;
  background-color: transparent; /* Matches actual node - transparent */
  border: none;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
}

.NodeGuideModal_textEditorPreviewExpanded__yTPdI:hover,
.NodeGuideModal_textEditorPreviewExpanded__yTPdI.NodeGuideModal_elementActive__D9gpf {
  background-color: rgba(100, 116, 139, 0.1); /* slate-500 with transparency */
  border-radius: 4px;
}

.NodeGuideModal_textEditorSampleText__jNJzx {
  font-size: 0.75rem;
  color: var(--text-node-text);
  font-family: 'Inconsolata', monospace;
}

/* TextDisplayNode High Contrast Handle Adjustments */
body.high-contrast .NodeGuideModal_handlePreviewTextDisplay__D1R-Y {
  background-color: #94a3b8; /* slate-400 */
  border-color: #1e293b; /* slate-800 */
}

/* MainApp/MainComponents/Spinner.module.css */
.Spinner_spinner__5VAx4 {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-left-color: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: Spinner_spin__Es1-s 1s linear infinite;
}

@keyframes Spinner_spin__Es1-s {
  to {
    transform: rotate(360deg);
  }
}

/* src/nodes/OutputNode.module.css */
@keyframes OutputNode_scaleInNode__7M2fo {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes OutputNode_iconPulse__xWJob {
  0%,
  100% {
    background-color: var(--output-node-icon-bg);
  }
  50% {
    background-color: #f43f5e; /* rose-500 */
  }
}

@keyframes OutputNode_iconPulseHighContrast__HM5zC {
  0%,
  100% {
    background-color: var(--output-node-icon-bg);
  }
  50% {
    background-color: #fb7185; /* rose-400 - brighter for dark mode */
  }
}

/* --- Pastel Theme for OutputNode --- */
.OutputNode_nodeBase__Pelqi {
  --output-node-bg: #fff1f2; /* rose-50 */
  --output-node-border: #fecdd3; /* rose-200 */
  --output-node-border-selected: #f43f5e; /* rose-500 */
  --output-node-text: #881337; /* rose-900 */
  --output-node-label-text: #be123c; /* rose-700 */
  --output-node-icon-bg: #ffe4e6; /* rose-100 */
  --output-node-icon-color: #9f1239; /* rose-800 */
  --output-node-button-bg: #fecdd3; /* rose-200 */
  --output-node-button-bg-hover: #fda4af; /* rose-300 */
  --output-node-button-text: #9f1239; /* rose-800 */
  --output-node-display-bg: #fff8f9; /* Lighter rose */
  --output-node-display-border: #ffe4e6; /* rose-100 */
  --output-node-textarea-border: #fecdd3; /* rose-200 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;

  border-radius: 8px;
  border: 1px solid var(--output-node-border);
  background-color: var(--output-node-bg);
  color: var(--output-node-text);
  padding: 12px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: OutputNode_scaleInNode__7M2fo 0.3s ease-out;
  position: relative;
}

body.no-node-animation .OutputNode_nodeBase__Pelqi {
  animation: none;
}

body.high-contrast .OutputNode_nodeBase__Pelqi {
  --output-node-bg: #111827; /* gray-900 */
  --output-node-border: #e11d48; /* rose-600 */
  --output-node-border-selected: #f43f5e; /* rose-500 */
  --output-node-text: #f9fafb; /* gray-50 */
  --output-node-label-text: #fecdd3; /* rose-200 */
  --output-node-icon-bg: #1f2937; /* gray-800 */
  --output-node-icon-color: #ffe4e6; /* rose-100 */
  --output-node-button-bg: #374151; /* gray-700 */
  --output-node-button-bg-hover: #4b5563; /* gray-600 */
  --output-node-button-text: #fecdd3; /* rose-200 */
  --output-node-display-bg: #1f2937; /* gray-800 */
  --output-node-display-border: #4b5563; /* gray-600 */
  --output-node-textarea-border: #4b5563; /* gray-600 */
}

.react-flow__node.selected .OutputNode_nodeBase__Pelqi {
  border-color: var(--output-node-border-selected);
  box-shadow: 0 0 0 1px var(--output-node-border-selected);
}

/* Node state classes */
.OutputNode_nodeCollapsed__FZ-Ii {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

.OutputNode_nodeExpanded__BCRJs {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* Frames Container */
.OutputNode_framesContainer__kClTV {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 1: Collapsed View - Slides out to left */
.OutputNode_collapsedFrame__pV-\+l {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--output-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for output preview */
.OutputNode_collapsedFrame__pV-\+l.OutputNode_hasOutputPreview__T8nO7 {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.OutputNode_nodeExpanded__BCRJs .OutputNode_collapsedFrame__pV-\+l {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.OutputNode_collapsedIconsRow__HbAZt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.OutputNode_collapsedIconsRow__HbAZt.OutputNode_hasOutput__emZtA {
  gap: 6px;
}

.OutputNode_collapsedIcon__0uF-K {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.OutputNode_hasOutput__emZtA .OutputNode_collapsedIcon__0uF-K {
  width: 40px;
  height: 40px;
}

.OutputNode_collapsedIcon__0uF-K img {
  /* Rose/pink tint for dark mode (default) */
  filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%)
    hue-rotate(310deg) brightness(100%) contrast(95%);
  transition: filter 0.2s ease;
}

/* Darker rose tint for light mode */
body:not(.high-contrast) .OutputNode_collapsedIcon__0uF-K img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(600%)
    hue-rotate(320deg) brightness(95%) contrast(90%);
}

.OutputNode_collapsedIcon__0uF-K:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.OutputNode_statusIndicators__lkSgD {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.OutputNode_statusItem__cIBQR {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.OutputNode_statusIcon__oXV2\+ {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--output-node-textarea-border);
}

.OutputNode_statusActive__zTXqT {
  background-color: transparent;
  color: var(--output-node-border-selected);
  border-color: var(--output-node-border-selected);
}

.OutputNode_statusInactive__x7YcD {
  background-color: transparent;
  color: var(--output-node-label-text);
  opacity: 0.4;
}

.OutputNode_statusLoading__O\+X2\+ {
  background-color: transparent;
  color: #f59e0b; /* amber-500 */
  border-color: #f59e0b;
}

.OutputNode_statusError__rq8iz {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444;
}

.OutputNode_statusCheck__U5iBo {
  color: var(--output-node-border-selected);
}

body.high-contrast .OutputNode_statusActive__zTXqT {
  background-color: var(--output-node-button-bg);
  border-color: var(--output-node-border-selected);
  color: var(--output-node-label-text);
}

body.high-contrast .OutputNode_statusCheck__U5iBo {
  color: var(--output-node-label-text);
}

.OutputNode_collapsedLoading__UGW2p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.OutputNode_outputPreview__7Ho0a {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.OutputNode_ghostLines__jyzUf {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.OutputNode_ghostLine__uo-Oq {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--output-node-textarea-border) 0%,
    var(--output-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.OutputNode_ghostLine__uo-Oq:nth-child(2) {
  width: 75%;
}

.OutputNode_ghostLine__uo-Oq:nth-child(3) {
  width: 50%;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.OutputNode_expandedFrame__um-IC {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* Expanded header - positioned outside the node at top, centered */
.OutputNode_expandedHeader__FFwza {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.OutputNode_nodeExpanded__BCRJs .OutputNode_expandedHeader__FFwza {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.OutputNode_buttonsWrapper__Cb9Gl {
  display: flex;
  gap: 5px;
}

/* Uniform button sizing in expanded header */
.OutputNode_buttonsWrapper__Cb9Gl button {
  width: 26px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--output-node-button-bg);
  color: var(--output-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  transition: background-color 0.2s ease;
  margin: 0;
}

.OutputNode_buttonsWrapper__Cb9Gl button svg {
  width: 10px;
  height: 10px;
}

.OutputNode_buttonsWrapper__Cb9Gl button:hover {
  background-color: var(--output-node-button-bg-hover);
}

.OutputNode_buttonsWrapper__Cb9Gl button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Help Button */
.OutputNode_helpButton__DGA0v {
  border: 1px solid var(--output-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.OutputNode_helpButton__DGA0v:hover:not(:disabled) {
  border-color: var(--output-node-border-selected) !important;
}

.OutputNode_nodeContent__mKRSe {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
}

/* Seamless output display - same background as node, no border */
.OutputNode_outputDisplay__xzaGv {
  width: 100%;
  padding: 8px;
  border: none; /* No stroke - matches outer background */
  border-radius: 4px;
  background-color: var(--output-node-bg); /* Same as node background */
  color: var(--output-node-text);
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  min-height: 120px;
  max-height: 140px;
  overflow-y: auto;
  box-sizing: border-box;
}

.OutputNode_outputDisplay__xzaGv strong {
  color: var(--output-node-text);
  font-weight: bold;
}

.OutputNode_outputDisplay__xzaGv p {
  margin: 0 0 8px 0;
  font-size: 0.75rem;
}

.OutputNode_outputDisplay__xzaGv p:last-child {
  margin-bottom: 0;
}

.OutputNode_outputDisplay__xzaGv pre {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 5px 0;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  padding: 5px;
  background-color: var(--output-node-bg);
  border-radius: 3px;
  border: 1px dashed var(--output-node-border);
}

.OutputNode_outputDisplay__xzaGv div {
  margin-bottom: 5px;
  border-bottom: 1px dashed var(--output-node-display-border);
  padding-bottom: 5px;
}

.OutputNode_outputDisplay__xzaGv div:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Loading/Error states */
.OutputNode_loading__K5wTM {
  font-size: 0.75rem;
  color: var(--output-node-label-text);
  margin: 5px 0 0 0;
}

.OutputNode_error__psViY {
  font-size: 0.75rem;
  color: #ef4444;
  margin: 5px 0 0 0;
  font-weight: bold;
}

/* Expanded footer - transparent at bottom */
.OutputNode_expandedFooter__JBiQS {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

.OutputNode_footerStatus__PAiIm {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: var(--output-node-label-text);
}

.OutputNode_footerStatus__PAiIm span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.OutputNode_hasDataStatus__LKI8S {
  color: var(--output-node-border-selected);
}

.OutputNode_loadingStatus__POy-u {
  color: #f59e0b; /* amber-500 */
}

.OutputNode_awaitingStatus__-c2On {
  opacity: 0.7;
}

.OutputNode_footerControls__L4Y01 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.OutputNode_pinButton__Tx308 {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--output-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.OutputNode_pinButton__Tx308:hover {
  opacity: 1;
  background-color: var(--output-node-button-bg);
}

.OutputNode_pinActive__vRqsi {
  opacity: 1;
  color: var(--output-node-border-selected);
}

/* Floating message bar */
.OutputNode_floatingMessageBar__np4lz {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

.OutputNode_nodeExpanded__BCRJs .OutputNode_floatingMessageBar__np4lz {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.OutputNode_messageError__Eu1XL {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.OutputNode_messageText__\+HC5O {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Handle styling */
.OutputNode_handleWrapper__c2G\+4 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 5;
}

.OutputNode_handle__-GZXF {
  width: 12px;
  height: 12px;
  background-color: var(--output-node-border-selected);
  border: 2px solid var(--output-node-bg);
  border-radius: 50%;
}

.OutputNode_handleIcon__PYkh9 {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--output-node-icon-bg);
  border: 1px solid var(--output-node-textarea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--output-node-icon-color);
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

/* Show handle icons on node hover */
.OutputNode_nodeBase__Pelqi:hover .OutputNode_handleIcon__PYkh9 {
  opacity: 1;
  transform: scale(1);
}

/* Input handle icon - when data is connected, background pulses */
.OutputNode_inputHandleIconConnected__GxWxx {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--output-node-button-bg);
  color: var(--output-node-button-text);
  animation: OutputNode_iconPulse__xWJob 2s ease-in-out infinite;
}

/* Output handle icon - when data is available */
.OutputNode_handleIconConnected__3WHTD {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--output-node-button-bg);
  color: var(--output-node-button-text);
}

body.high-contrast .OutputNode_inputHandleIconConnected__GxWxx {
  animation: OutputNode_iconPulseHighContrast__HM5zC 2s ease-in-out infinite;
}

body.high-contrast .OutputNode_handle__-GZXF {
  background-color: var(--output-node-border-selected);
  border-color: var(--output-node-bg);
}

body.high-contrast .OutputNode_handleIcon__PYkh9 {
  background-color: var(--output-node-icon-bg);
  border-color: var(--output-node-textarea-border);
  color: var(--output-node-icon-color);
}

body.high-contrast .OutputNode_inputHandleIconConnected__GxWxx,
body.high-contrast .OutputNode_handleIconConnected__3WHTD {
  background-color: var(--output-node-button-bg);
  color: var(--output-node-button-text);
}

body.high-contrast .OutputNode_pinActive__vRqsi {
  background-color: var(--output-node-button-bg) !important;
  color: var(--output-node-button-text) !important;
}

body.high-contrast .OutputNode_collapsedLoading__UGW2p {
  background-color: rgba(31, 41, 55, 0.9);
}

body.high-contrast .OutputNode_collapsedIcon__0uF-K {
  background-color: transparent;
  border: none;
}

/* Active handle state when mouse is near - for edge preview */
.OutputNode_handleWrapperActive__aLXik {
  z-index: 100;
}

.OutputNode_handleActive__PsyDg {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.OutputNode_handleIconActive__vosxK {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* Media container styles for images, video, and audio */
.OutputNode_mediaContainer__u16bC {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--output-node-display-bg);
}

.OutputNode_mediaImage__oTXRO {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
}

.OutputNode_mediaVideo__MFaO8 {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
  background-color: #000;
}

.OutputNode_mediaAudio__hBTu5 {
  width: 100%;
  max-width: 100%;
  height: 40px;
}

.OutputNode_mediaError__Gs-P7 {
  color: var(--output-node-label-text);
  font-size: 0.75rem;
  padding: 8px;
  text-align: center;
}

.OutputNode_blobInfo__Y6MBF {
  padding: 12px;
  text-align: center;
  background-color: var(--output-node-display-bg);
  border-radius: 4px;
}

.OutputNode_blobDetails__d0OtO {
  font-size: 0.7rem;
  color: var(--output-node-label-text);
  margin-top: 4px;
}

.OutputNode_jsonOutput__oW5nM {
  font-size: 0.7rem;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--output-node-display-bg);
  padding: 8px;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.OutputNode_objectOutput__e6yMK {
  font-size: 0.75rem;
  line-height: 1.5;
}

.OutputNode_objectOutput__e6yMK p {
  margin: 4px 0;
}

.OutputNode_textOutput__NZoZ3 {
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--output-node-display-bg);
  padding: 8px;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.OutputNode_renderError__hN5zy {
  padding: 12px;
  text-align: center;
  color: #dc2626;
  background-color: #fef2f2;
  border-radius: 4px;
  font-size: 0.75rem;
}

body.high-contrast .OutputNode_renderError__hN5zy {
  background-color: #450a0a;
  color: #fca5a5;
}

/* src/nodes/DataNode.module.css */
@keyframes DataNode_scaleInNode__cUs2N {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes DataNode_modalFadeIn__qjNrm {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes DataNode_iconPulse__Pvjyr {
  0%,
  100% {
    background-color: var(--data-node-icon-bg);
  }
  50% {
    background-color: #facc15; /* yellow-400 */
  }
}

@keyframes DataNode_iconPulseHighContrast__cbXyo {
  0%,
  100% {
    background-color: var(--data-node-icon-bg);
  }
  50% {
    background-color: #fde047; /* yellow-300 */
  }
}

.DataNode_nodeBase__uF6om {
  --data-node-bg: #fefce8;
  --data-node-border: #fde047;
  --data-node-border-selected: #facc15;
  --data-node-text: #78350f;
  --data-node-label-text: #b45309;
  --data-node-icon-bg: #fef9c3;
  --data-node-icon-color: #854d0e;
  --data-node-button-bg: #fde047;
  --data-node-button-bg-hover: #facc15;
  --data-node-button-text: #78350f;
  --data-node-textarea-bg: #fefdf8;
  --data-node-textarea-border: #fef08a;

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;

  border-radius: 8px;
  border: 1px solid var(--data-node-border);
  background-color: var(--data-node-bg);
  color: var(--data-node-text);
  padding: 12px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible; /* Allow handle icons to show outside node bounds */
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DataNode_scaleInNode__cUs2N 0.3s ease-out;
  position: relative;
}

body.no-node-animation .DataNode_nodeBase__uF6om {
  animation: none;
}

body.high-contrast .DataNode_nodeBase__uF6om {
  --data-node-bg: #111827;
  --data-node-border: #eab308;
  --data-node-border-selected: #facc15;
  --data-node-text: #f9fafb;
  --data-node-label-text: #fde047;
  --data-node-icon-bg: #1f2937;
  --data-node-icon-color: #fef9c3;
  --data-node-textarea-bg: #1f2937;
  --data-node-textarea-border: #4b5563;
  --data-node-button-bg: #374151;
  --data-node-button-bg-hover: #4b5563;
  --data-node-button-text: #fde047;
}

.react-flow__node.selected .DataNode_nodeBase__uF6om {
  border-color: var(--data-node-border-selected);
  box-shadow: 0 0 0 1px var(--data-node-border-selected);
}

/* Node state classes */
.DataNode_nodeCollapsed__A0\+lv {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

.DataNode_nodeExpanded__Zw\+60 {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* Frames Container */
.DataNode_framesContainer__J6i5E {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 1: Collapsed View - Slides out to left */
.DataNode_collapsedFrame__jSAg\+ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--data-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for output preview */
.DataNode_collapsedFrame__jSAg\+.DataNode_hasOutputPreview__KUn6e {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.DataNode_nodeExpanded__Zw\+60 .DataNode_collapsedFrame__jSAg\+ {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.DataNode_collapsedIconsRow__ZGLGx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.DataNode_collapsedIconsRow__ZGLGx.DataNode_hasOutput__tR2zx {
  gap: 6px;
}

.DataNode_collapsedIcon__cpn5H {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.DataNode_hasOutput__tR2zx .DataNode_collapsedIcon__cpn5H {
  width: 40px;
  height: 40px;
}

.DataNode_collapsedIcon__cpn5H img {
  /* Yellow/amber tint for dark mode (default) - matches DataNode theme */
  filter: brightness(0) saturate(100%) invert(75%) sepia(50%) saturate(500%)
    hue-rotate(10deg) brightness(100%) contrast(95%);
  transition: filter 0.2s ease;
}

/* Darker yellow tint for light mode */
body:not(.high-contrast) .DataNode_collapsedIcon__cpn5H img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(600%)
    hue-rotate(20deg) brightness(95%) contrast(90%);
}

.DataNode_collapsedIcon__cpn5H:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.DataNode_statusIndicators__xbs98 {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.DataNode_statusItem__aWmzf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.DataNode_statusIcon__Py1lq {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--data-node-textarea-border);
}

.DataNode_statusActive__ng61Z {
  background-color: transparent;
  color: var(--data-node-border-selected);
  border-color: var(--data-node-border-selected);
}

.DataNode_statusInactive__\+OPHL {
  background-color: transparent;
  color: var(--data-node-label-text);
  opacity: 0.4;
}

.DataNode_statusIsolated__jFmiv {
  background-color: transparent;
  color: #f59e0b;
  border-color: #f59e0b;
}

.DataNode_statusCheck__e4QId {
  color: var(--data-node-border-selected);
}

.DataNode_statusWarning__QYDlW {
  color: #f59e0b;
}

body.high-contrast .DataNode_statusActive__ng61Z {
  background-color: var(--data-node-button-bg);
  border-color: var(--data-node-border-selected);
  color: var(--data-node-label-text);
}

body.high-contrast .DataNode_statusCheck__e4QId {
  color: var(--data-node-label-text);
}

.DataNode_collapsedLoading__U1TSv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.DataNode_outputPreview__AoOvM {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.DataNode_ghostLines__lySVW {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.DataNode_ghostLine__W-Bol {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--data-node-textarea-border) 0%,
    var(--data-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.DataNode_ghostLine__W-Bol:nth-child(2) {
  width: 75%;
}

.DataNode_ghostLine__W-Bol:nth-child(3) {
  width: 50%;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.DataNode_expandedFrame__TVC3R {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* Expanded header - positioned outside the node at top, centered */
.DataNode_expandedHeader__gKqO3 {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.DataNode_nodeExpanded__Zw\+60 .DataNode_expandedHeader__gKqO3 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.DataNode_buttonsWrapper__4qUz1 {
  display: flex;
  gap: 5px;
}

/* Uniform button sizing in expanded header */
.DataNode_buttonsWrapper__4qUz1 button {
  width: 26px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--data-node-button-bg);
  color: var(--data-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  transition: background-color 0.2s ease;
  margin: 0;
}

.DataNode_buttonsWrapper__4qUz1 button svg {
  width: 10px;
  height: 10px;
}

.DataNode_buttonsWrapper__4qUz1 button:hover {
  background-color: var(--data-node-button-bg-hover);
}

.DataNode_buttonsWrapper__4qUz1 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Active state for the isolate toggle */
.DataNode_buttonsWrapper__4qUz1 .DataNode_isolateActive__cTwnL {
  background-color: #f59e0b;
  color: white;
}

.DataNode_nodeContent__PPiQc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
}

/* Seamless textarea - same background as node, no border */
.DataNode_nodeContent__PPiQc textarea {
  width: 100%;
  padding: 8px;
  border: none; /* No stroke - matches outer background */
  border-radius: 4px;
  background-color: var(--data-node-bg); /* Same as node background */
  color: var(--data-node-text);
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  min-height: 120px;
  flex-grow: 1;
  resize: none;
  box-sizing: border-box;
}

.DataNode_nodeContent__PPiQc textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Expanded footer - transparent at bottom */
.DataNode_expandedFooter__GEkow {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

.DataNode_footerStatus__HYyEE {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: var(--data-node-label-text);
}

.DataNode_footerStatus__HYyEE span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.DataNode_apiConfigured__vLjHW {
  color: var(--data-node-border-selected);
}

.DataNode_textMode__H67qJ {
  opacity: 0.7;
}

.DataNode_footerControls__Uu29r {
  display: flex;
  align-items: center;
  gap: 4px;
}

.DataNode_helpButton__YOTyJ {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--data-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.DataNode_helpButton__YOTyJ:hover {
  opacity: 1;
  background-color: var(--data-node-button-bg);
  color: var(--data-node-border-selected);
}

.DataNode_pinButton__Oq8pq {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--data-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.DataNode_pinButton__Oq8pq:hover {
  opacity: 1;
  background-color: var(--data-node-button-bg);
}

.DataNode_pinActive__rERed {
  opacity: 1;
  color: var(--data-node-border-selected);
}

.DataNode_goButton__7aRHT {
  width: 28px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--data-node-button-bg);
  color: var(--data-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  transition: background-color 0.2s ease;
}

.DataNode_goButton__7aRHT:hover:not(:disabled) {
  background-color: var(--data-node-button-bg-hover);
}

.DataNode_goButton__7aRHT:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Floating message bar */
.DataNode_floatingMessageBar__g0gbC {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

.DataNode_nodeExpanded__Zw\+60 .DataNode_floatingMessageBar__g0gbC {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.DataNode_messageError__n0ICp {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.DataNode_messageText__fRIdI {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Handle styling */
.DataNode_handleWrapper__z9kqI {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 5;
}

.DataNode_handle__3Dlnb {
  width: 12px;
  height: 12px;
  background-color: var(--data-node-border-selected);
  border: 2px solid var(--data-node-bg);
  border-radius: 50%;
}

.DataNode_handleIcon__yGACX {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--data-node-icon-bg);
  border: 1px solid var(--data-node-textarea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--data-node-icon-color);
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

/* Show handle icons on node hover */
.DataNode_nodeBase__uF6om:hover .DataNode_handleIcon__yGACX {
  opacity: 1;
  transform: scale(1);
}

/* Input handle icon - when data is connected, background pulses */
.DataNode_inputHandleIconConnected__dYJfm {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--data-node-button-bg);
  color: var(--data-node-button-text);
  animation: DataNode_iconPulse__Pvjyr 2s ease-in-out infinite;
}

/* When isolated, show orange/muted background without animation */
.DataNode_inputHandleIconIsolated__FkRof {
  background-color: rgba(245, 158, 11, 0.5) !important;
  border-color: #f59e0b !important;
  animation: none;
}

/* Output handle icon - when data is available */
.DataNode_handleIconConnected__yd7lh {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--data-node-button-bg);
  color: var(--data-node-button-text);
}

body.high-contrast .DataNode_inputHandleIconConnected__dYJfm {
  animation: DataNode_iconPulseHighContrast__cbXyo 2s ease-in-out infinite;
}

body.high-contrast .DataNode_inputHandleIconIsolated__FkRof {
  background-color: rgba(251, 191, 36, 0.5) !important;
  border-color: #fbbf24 !important;
}

body.high-contrast .DataNode_handle__3Dlnb {
  background-color: var(--data-node-border-selected);
  border-color: var(--data-node-bg);
}

body.high-contrast .DataNode_handleIcon__yGACX {
  background-color: var(--data-node-icon-bg);
  border-color: var(--data-node-textarea-border);
  color: var(--data-node-icon-color);
}

body.high-contrast .DataNode_handleIconConnected__yd7lh {
  background-color: var(--data-node-button-bg);
  color: var(--data-node-button-text);
}

/* Active handle state when mouse is near - for edge preview */
.DataNode_handleWrapperActive__P9o7J {
  z-index: 100;
}

.DataNode_handleActive__5zobs {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.DataNode_handleIconActive__nGwuX {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

body.high-contrast .DataNode_pinActive__rERed {
  background-color: var(--data-node-button-bg) !important;
  color: var(--data-node-button-text) !important;
}

body.high-contrast .DataNode_collapsedLoading__U1TSv {
  background-color: rgba(31, 41, 55, 0.9);
}

body.high-contrast .DataNode_collapsedIcon__cpn5H {
  background-color: transparent;
  border: none;
}

/* Error text in node */
.DataNode_error__qEjDN {
  font-size: smaller;
  color: #ef4444;
  font-weight: bold;
}

/* Enhanced Modal Styles */
.DataNode_modalContentV2__7iMR6 {
  padding: 0;
  color: #f9fafb;
  min-width: 520px;
  max-width: 650px;
  border-radius: 12px;
  animation: DataNode_modalFadeIn__qjNrm 0.3s ease-out;
  overflow: hidden;
  font-family: 'Inconsolata', monospace;
}

.DataNode_modalContentV2__7iMR6 h2 {
  margin: 0;
  padding: 24px 32px 16px;
  color: #e5e7eb !important;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  border-bottom: 1px solid #374151;
  background: transparent;
  font-family: 'Inconsolata', monospace;
}

.DataNode_tabContainer__HCQk0 {
  display: flex;
  background: transparent;
  border-bottom: 1px solid #374151;
  margin: 0;
  padding: 0 24px;
}

.DataNode_tabContainer__HCQk0 button {
  padding: 16px 20px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: #9ca3af;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
  position: relative;
  font-family: 'Inconsolata', monospace;
}

.DataNode_tabContainer__HCQk0 button:hover {
  background-color: #374151;
  color: #3b82f6;
}

.DataNode_tabContainer__HCQk0 button.DataNode_activeTab__dYl6B {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background-color: #374151;
  font-weight: 600;
}

.DataNode_tabContent__J2a2h {
  min-height: 280px;
  padding: 32px;
  background: transparent;
}

.DataNode_formGroup__N41kO {
  margin-bottom: 24px;
}

.DataNode_formGroup__N41kO:last-child {
  margin-bottom: 0;
}

.DataNode_formGroup__N41kO label {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #e5e7eb;
  letter-spacing: -0.025em;
}

.DataNode_formGroup__N41kO input,
.DataNode_formGroup__N41kO select {
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  background-color: #374151;
  color: #f9fafb;
  border: 2px solid #4b5563;
  border-radius: 10px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-shadow: none;
}

.DataNode_formGroup__N41kO input:focus,
.DataNode_formGroup__N41kO select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.2),
    0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.DataNode_authNote__bNqjG {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  font-style: italic;
  font-family: 'Inconsolata', monospace;
}

.DataNode_dynamicList__Y145T {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.DataNode_dynamicListItem__ymQpt {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #4b5563;
  transition: all 0.2s ease;
}

.DataNode_dynamicListItem__ymQpt:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #4b5563;
}

.DataNode_dynamicListItem__ymQpt input {
  flex: 1 1;
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: #1f2937;
  color: #f9fafb;
  border: 2px solid #6b7280;
  border-radius: 8px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.DataNode_dynamicListItem__ymQpt input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.DataNode_addButton__5eJu9 {
  margin-top: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #3b82f6;
  color: #ffffff;
  align-self: flex-start;
}

.DataNode_addButton__5eJu9:hover {
  background: #2563eb;
}

.DataNode_removeButton__k3G2e {
  padding: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 36px;
  min-height: 36px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.DataNode_removeButton__k3G2e:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}

.DataNode_modalActions__tFq0l {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 32px;
  background: transparent;
  border-top: 1px solid #374151;
}

.DataNode_modalActions__tFq0l .DataNode_cancelButton__\+11ad {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #374151;
  color: #9ca3af;
}

.DataNode_modalActions__tFq0l .DataNode_cancelButton__\+11ad:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.DataNode_modalActions__tFq0l button:last-child {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #3b82f6;
  color: #ffffff;
}

.DataNode_modalActions__tFq0l button:last-child:hover {
  background: #2563eb;
}

/* Transform Node - Single Frame Design with Floating Header */

/* Animation for node entry */
@keyframes TransformNode_scaleInNode__gCPQT {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Transform Node Theme - Teal */
.TransformNode_nodeBase__ZxZ0X {
  /* Define Transform Node specific colors */
  --transform-node-bg: #f0fdfa; /* teal-50 */
  --transform-node-border: #99f6e4; /* teal-200 */
  --transform-node-border-selected: #2dd4bf; /* teal-400 */
  --transform-node-text: #0f766e; /* teal-700 */
  --transform-node-label-text: #0d9488; /* teal-600 */
  --transform-node-icon-bg: #ccfbf1; /* teal-100 */
  --transform-node-icon-color: #115e59; /* teal-800 */
  --transform-node-button-bg: #5eead4; /* teal-300 */
  --transform-node-button-bg-hover: #2dd4bf; /* teal-400 */
  --transform-node-button-text: #134e4a; /* teal-900 */
  --transform-node-display-bg: #f8fffd;
  --transform-node-display-border: #ccfbf1; /* teal-100 */
  --transform-node-success-text: #059669; /* emerald-600 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Base styling */
  position: relative;
  width: 220px;
  font-family: 'Inconsolata', monospace;
  animation: TransformNode_scaleInNode__gCPQT 0.3s ease-out;
}

body.no-node-animation .TransformNode_nodeBase__ZxZ0X {
  animation: none;
}

/* Dark mode theme */
body.high-contrast .TransformNode_nodeBase__ZxZ0X {
  --transform-node-bg: #111827; /* gray-900 */
  --transform-node-border: #14b8a6; /* teal-500 */
  --transform-node-border-selected: #2dd4bf; /* teal-400 */
  --transform-node-text: #f9fafb; /* gray-50 */
  --transform-node-label-text: #99f6e4; /* teal-200 */
  --transform-node-icon-bg: #1f2937; /* gray-800 */
  --transform-node-icon-color: #ccfbf1; /* teal-100 */
  --transform-node-button-bg: #14b8a6; /* teal-500 */
  --transform-node-button-bg-hover: #2dd4bf; /* teal-400 */
  --transform-node-button-text: #f9fafb; /* gray-50 */
  --transform-node-display-bg: #1f2937; /* gray-800 */
  --transform-node-display-border: #4b5563; /* gray-600 */
}

/* ==================== FLOATING HEADER ==================== */
.TransformNode_floatingHeader__-od-t {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.TransformNode_nodeHovered__R-9PB .TransformNode_floatingHeader__-od-t,
.TransformNode_nodeBase__ZxZ0X:hover .TransformNode_floatingHeader__-od-t {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Buttons Wrapper */
.TransformNode_buttonsWrapper__p7aew {
  display: flex;
  gap: 4px;
}

.TransformNode_buttonsWrapper__p7aew button {
  padding: 0;
  border: none;
  background-color: var(--transform-node-button-bg);
  color: var(--transform-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
}

.TransformNode_buttonsWrapper__p7aew button svg {
  width: 10px;
  height: 10px;
}

.TransformNode_buttonsWrapper__p7aew button:hover:not(:disabled) {
  background-color: var(--transform-node-button-bg-hover);
}

.TransformNode_buttonsWrapper__p7aew button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Generate Button */
.TransformNode_generateButton__XfG4M {
  background-color: var(--transform-node-button-bg) !important;
  color: var(--transform-node-button-text) !important;
  width: 80px;
  border: 1px solid var(--transform-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.TransformNode_generateButton__XfG4M:hover:not(:disabled) {
  background-color: var(--transform-node-button-bg-hover) !important;
  border-color: var(--transform-node-border-selected) !important;
}

/* Generated Button (success state) */
.TransformNode_generatedButton__NRfEO {
  background-color: #059669 !important; /* emerald-600 */
  color: white !important;
  width: 80px;
  border: 1px solid #059669 !important;
}

/* ==================== MAIN FRAME ==================== */
.TransformNode_mainFrame__wjXPp {
  border-radius: 8px;
  border: 1px solid var(--transform-node-border);
  background-color: var(--transform-node-bg);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Selected state */
.react-flow__node.selected .TransformNode_mainFrame__wjXPp {
  border-color: var(--transform-node-border-selected);
  box-shadow: 0 0 0 1px var(--transform-node-border-selected);
}

/* ==================== CONTENT AREA ==================== */
.TransformNode_contentArea__CRamn {
  padding: 12px 16px;
  min-height: 80px;
}

/* Message Container */
.TransformNode_messageContainer__4Cqh1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  text-align: center;
}

.TransformNode_iconLarge__30lGO {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.TransformNode_iconLarge__30lGO img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Teal tint for transform node */
  filter: brightness(0) saturate(100%) invert(45%) sepia(70%) saturate(500%)
    hue-rotate(130deg) brightness(95%) contrast(90%);
}

body.high-contrast .TransformNode_iconLarge__30lGO img {
  /* Brighter teal for dark mode */
  filter: brightness(0) saturate(100%) invert(85%) sepia(20%) saturate(600%)
    hue-rotate(130deg) brightness(100%) contrast(95%);
}

.TransformNode_messageText__G0Rb4 {
  font-size: 0.8rem;
  color: var(--transform-node-label-text);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

/* ==================== FOOTER ==================== */
.TransformNode_footer__ZZ\+i- {
  background-color: var(--transform-node-display-bg);
  border-top: 1px solid var(--transform-node-display-border);
  padding: 8px 12px;
}

.TransformNode_statusInfo__ozdHM {
  display: flex;
  align-items: center;
  gap: 6px;
}

.TransformNode_statusIcon__Pi1ZR {
  color: var(--transform-node-success-text);
  font-size: 14px;
  flex-shrink: 0;
}

.TransformNode_statusText__Xh2Q0 {
  font-size: 0.75rem;
  color: var(--transform-node-label-text);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ==================== HANDLES ==================== */
.TransformNode_handle__PqyZj {
  width: 12px;
  height: 12px;
  background-color: var(--transform-node-border-selected);
  border: 2px solid var(--transform-node-bg);
  border-radius: 50%;
}

body.high-contrast .TransformNode_handle__PqyZj {
  background-color: var(--transform-node-border-selected);
  border-color: var(--transform-node-bg);
}

/* src/nodes/SchemaChildNode.module.css */
@keyframes SchemaChildNode_scaleInNode__\+4ySm {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Clean, Minimal Theme for SchemaChildNode --- */
.SchemaChildNode_nodeBase__V06gr {
  /* Light slate/gray colors - very subtle */
  --schema-node-bg: #f8fafc; /* slate-50 - light background */
  --schema-node-text: #334155; /* slate-700 */
  --schema-node-label-bg: #e2e8f0; /* slate-200 */
  --schema-node-label-text: #475569; /* slate-600 */
  --schema-node-handle-color: #64748b; /* slate-500 */
  --schema-node-icon-bg: #f1f5f9; /* slate-100 */
  --schema-node-icon-color: #475569; /* slate-600 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;

  /* Simple, clean box - no border, just light background */
  border-radius: 6px;
  border: none;
  background-color: var(--schema-node-bg);
  color: var(--schema-node-text);
  padding: 10px 12px;
  font-family: 'Inconsolata', monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Fixed width - 90% of 280px = 252px, height grows with content */
  /* Min height - 60% of regular node height (~200px) = 120px */
  width: 252px;
  min-width: 252px;
  max-width: 252px;
  min-height: 120px;
  max-height: 90vh; /* Cap max height at 90% viewport height */
  height: auto; /* Allow height to grow with content */

  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: visible; /* Keep visible for floating header */

  animation: SchemaChildNode_scaleInNode__\+4ySm 0.3s ease-out;
}

body.no-node-animation .SchemaChildNode_nodeBase__V06gr {
  animation: none;
}

/* High contrast / dark mode */
body.high-contrast .SchemaChildNode_nodeBase__V06gr {
  --schema-node-bg: #1e293b; /* slate-800 */
  --schema-node-text: #e2e8f0; /* slate-200 */
  --schema-node-label-bg: #334155; /* slate-700 */
  --schema-node-label-text: #cbd5e1; /* slate-300 */
  --schema-node-handle-color: #94a3b8; /* slate-400 */
  --schema-node-icon-bg: #334155; /* slate-700 */
  --schema-node-icon-color: #cbd5e1; /* slate-300 */
}

/* Selected state - subtle highlight */
.react-flow__node.selected .SchemaChildNode_nodeBase__V06gr {
  box-shadow: 0 0 0 2px var(--schema-node-handle-color);
}

/* Floating Label - positioned above node */
.SchemaChildNode_floatingLabel__jf\+LE {
  position: absolute;
  top: -22px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background-color: var(--schema-node-label-bg);
  color: var(--schema-node-label-text);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  font-family: 'Inconsolata', monospace;
  z-index: 10;
}

.SchemaChildNode_floatingLabel__jf\+LE svg {
  flex-shrink: 0;
}

/* Content Area */
.SchemaChildNode_nodeContent__b4NUq {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 40px;
  justify-content: flex-start;
  overflow-y: auto;
  flex: 1 1;
}

/* Custom scrollbar for content */
.SchemaChildNode_nodeContent__b4NUq::-webkit-scrollbar {
  width: 4px;
}

.SchemaChildNode_nodeContent__b4NUq::-webkit-scrollbar-track {
  background: transparent;
}

.SchemaChildNode_nodeContent__b4NUq::-webkit-scrollbar-thumb {
  background: var(--schema-node-handle-color);
  border-radius: 2px;
  opacity: 0.5;
}

.SchemaChildNode_nodeContent__b4NUq::-webkit-scrollbar-thumb:hover {
  opacity: 1;
}

/* Value Display - simple text, no inner box */
.SchemaChildNode_valueDisplay__bXdy7 {
  font-size: 0.75rem;
  color: var(--schema-node-text);
  margin: 0;
  padding: 0;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Empty State */
.SchemaChildNode_emptyState__7DCUq {
  font-size: 0.7rem;
  color: var(--schema-node-label-text);
  margin: 0;
  padding: 0;
  opacity: 0.6;
  font-style: italic;
}

/* Handle styling */
.SchemaChildNode_handleWrapper__4ZPdY {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 5;
}

.SchemaChildNode_handle__2hIB6 {
  width: 10px;
  height: 10px;
  background-color: var(--schema-node-handle-color);
  border: 2px solid var(--schema-node-bg);
  border-radius: 50%;
}

.SchemaChildNode_handleIcon__DSW4b {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: var(--schema-node-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--schema-node-icon-color);
  font-size: 10px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

/* Show handle icons on node hover */
.SchemaChildNode_nodeBase__V06gr:hover .SchemaChildNode_handleIcon__DSW4b {
  opacity: 1;
  transform: scale(1);
}

body.high-contrast .SchemaChildNode_handle__2hIB6 {
  background-color: var(--schema-node-handle-color);
  border-color: var(--schema-node-bg);
}

body.high-contrast .SchemaChildNode_handleIcon__DSW4b {
  background-color: var(--schema-node-icon-bg);
  color: var(--schema-node-icon-color);
}

/* Active handle state when mouse is near - for edge preview */
.SchemaChildNode_handleWrapperActive__dxUJI {
  z-index: 100;
}

.SchemaChildNode_handleActive__uHFW9 {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.SchemaChildNode_handleIconActive__dmcXY {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* src/nodes/TextDisplayNode.module.css */
@keyframes TextDisplayNode_scaleInNode__X8UMI {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Clean, Minimal Theme for TextDisplayNode with Solid Background --- */
.TextDisplayNode_nodeBase__dxJOZ {
  /* Light mode (default) - light background, dark text */
  --text-node-bg: #f8fafc; /* slate-50 - light background */
  --text-node-text: #1e293b; /* slate-800 - dark text */
  --text-node-label-bg: #e2e8f0; /* slate-200 */
  --text-node-label-text: #475569; /* slate-600 */
  --text-node-handle-color: #64748b; /* slate-500 */
  --text-node-icon-bg: #f1f5f9; /* slate-100 */
  --text-node-icon-color: #475569; /* slate-600 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;

  /* Solid, clean box */
  border-radius: 8px;
  border: 1px solid #334155;
  /* background-color: var(--text-node-bg); */
  color: var(--text-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Fixed width, height grows with content */
  width: 252px;
  min-width: 252px;
  max-width: 252px;
  min-height: 120px;
  height: auto;

  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: visible;

  animation: TextDisplayNode_scaleInNode__X8UMI 0.3s ease-out;
}

body.no-node-animation .TextDisplayNode_nodeBase__dxJOZ {
  animation: none;
}

/* High contrast / dark mode - dark background, light text */
body.high-contrast .TextDisplayNode_nodeBase__dxJOZ {
  --text-node-bg: #1e293b; /* slate-800 - dark background */
  --text-node-text: #f8fafc; /* slate-50 - light text */
  --text-node-label-bg: #334155; /* slate-700 */
  --text-node-label-text: #cbd5e1; /* slate-300 */
  --text-node-handle-color: #94a3b8; /* slate-400 */
  --text-node-icon-bg: #334155; /* slate-700 */
  --text-node-icon-color: #cbd5e1; /* slate-300 */

  border-color: #334155;
}

/* Selected state - subtle highlight */
.react-flow__node.selected .TextDisplayNode_nodeBase__dxJOZ {
  box-shadow:
    0 0 0 2px var(--text-node-handle-color),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Floating Label - inside floating header */
.TextDisplayNode_floatingLabel__q-hAk {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background-color: var(--text-node-label-bg);
  color: var(--text-node-label-text);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  font-family: 'Inconsolata', monospace;
  height: 20px;
  box-sizing: border-box;
}

.TextDisplayNode_floatingLabel__q-hAk svg {
  flex-shrink: 0;
}

/* Content Area */
.TextDisplayNode_nodeContent__wwcBk {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 60px;
}

/* Rich text editor - contentEditable div */
.TextDisplayNode_richEditor__Z\+wO- {
  width: 100%;
  min-height: 80px;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  color: var(--text-node-text);
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Placeholder for empty editor */
.TextDisplayNode_richEditor__Z\+wO-:empty::before {
  content: attr(data-placeholder);
  color: var(--text-node-label-text);
  opacity: 0.6;
  pointer-events: none;
}

.TextDisplayNode_richEditor__Z\+wO-:focus {
  background-color: transparent;
}

/* Ensure formatted text inherits color */
.TextDisplayNode_richEditor__Z\+wO- b,
.TextDisplayNode_richEditor__Z\+wO- strong,
.TextDisplayNode_richEditor__Z\+wO- i,
.TextDisplayNode_richEditor__Z\+wO- em,
.TextDisplayNode_richEditor__Z\+wO- u {
  color: inherit;
}

/* Read-only state when upstream is connected */
.TextDisplayNode_readOnly__eN0S4 {
  cursor: default;
  -webkit-user-select: text;
          user-select: text;
  opacity: 0.9;
  pointer-events: none;
  -webkit-user-modify: read-only;
}

body.high-contrast .TextDisplayNode_richEditor__Z\+wO- {
  background-color: transparent;
}

body.high-contrast .TextDisplayNode_richEditor__Z\+wO-:focus {
  background-color: transparent;
}

/* Handle styling */
.TextDisplayNode_handleWrapper__oYR4Q {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 5;
}

.TextDisplayNode_handle__VoJSL {
  width: 12px;
  height: 12px;
  background-color: var(--text-node-handle-color);
  border: 2px solid var(--text-node-bg);
  border-radius: 50%;
}

.TextDisplayNode_handleIcon__ylMi6 {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--text-node-icon-bg);
  border: 1px solid var(--text-node-label-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-node-icon-color);
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

/* Show handle icons on node hover */
.TextDisplayNode_nodeBase__dxJOZ:hover .TextDisplayNode_handleIcon__ylMi6 {
  opacity: 1;
  transform: scale(1);
}

body.high-contrast .TextDisplayNode_handle__VoJSL {
  background-color: var(--text-node-handle-color);
  border-color: var(--text-node-bg);
}

body.high-contrast .TextDisplayNode_handleIcon__ylMi6 {
  background-color: var(--text-node-icon-bg);
  color: var(--text-node-icon-color);
}

/* Floating Header - positioned above node, hidden by default */
.TextDisplayNode_floatingHeader__rMW1m {
  position: absolute;
  top: -28px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

/* Show header when visible */
.TextDisplayNode_floatingHeader__rMW1m.TextDisplayNode_headerVisible__iYnn- {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Header Buttons Wrapper */
.TextDisplayNode_buttonsWrapper__xPAWj {
  display: flex;
  gap: 3px;
}

.TextDisplayNode_buttonsWrapper__xPAWj button {
  width: 24px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--text-node-label-bg);
  color: var(--text-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  margin: 0;
}

.TextDisplayNode_buttonsWrapper__xPAWj button:hover {
  background-color: var(--text-node-handle-color);
  color: var(--text-node-bg);
}

.TextDisplayNode_buttonsWrapper__xPAWj button svg {
  width: 10px;
  height: 10px;
}

/* Active button state */
.TextDisplayNode_buttonActive__odg6i {
  background-color: var(--text-node-handle-color) !important;
  color: var(--text-node-bg) !important;
}

/* Divider between button groups */
.TextDisplayNode_buttonDivider__VFWbU {
  width: 1px;
  height: 14px;
  background-color: var(--text-node-label-bg);
  margin: 0 3px;
  align-self: center;
}

/* Help Button */
.TextDisplayNode_helpButton__Kxkn- {
  width: 24px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--text-node-label-bg) !important;
  background-color: var(--text-node-label-bg);
  color: var(--text-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.TextDisplayNode_helpButton__Kxkn-:hover {
  background-color: var(--text-node-handle-color);
  color: var(--text-node-bg);
  border-color: var(--text-node-handle-color) !important;
}

.TextDisplayNode_helpButton__Kxkn- svg {
  width: 10px;
  height: 10px;
}

body.high-contrast .TextDisplayNode_buttonsWrapper__xPAWj button {
  background-color: var(--text-node-label-bg);
  color: var(--text-node-label-text);
}

body.high-contrast .TextDisplayNode_buttonsWrapper__xPAWj button:hover {
  background-color: var(--text-node-handle-color);
  color: var(--text-node-bg);
}

body.high-contrast .TextDisplayNode_buttonActive__odg6i {
  background-color: var(--text-node-handle-color) !important;
  color: var(--text-node-bg) !important;
}

body.high-contrast .TextDisplayNode_buttonDivider__VFWbU {
  background-color: var(--text-node-label-bg);
}

/* Edge preview active states */
.TextDisplayNode_handleWrapperActive__5SE2y {
  z-index: 100;
}

.TextDisplayNode_handleActive__ATdrf {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.TextDisplayNode_handleIconActive__qyRh- {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* src/MainComponents/GenerationHistoryPanel.css */
.generation-history-panel {
  padding: 5px;
  max-width: 100%;
  height: 70vh;
  /* Force dark theme colors */
  --node-bg: #2a2d31;
  --node-border: #4a5568;
  --node-text: #ffffff;
  --node-label-text: #cbd5e0;
  --node-textarea-border: #4a5568;
  --node-textarea-border-focus: #e6c7c7;
  --node-error-text: #fc8181;
  color: var(--node-text);
  border-radius: 8px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--node-border);
}

.history-header h2 {
  margin: 0;
  padding: 0;
  color: var(--node-text);
  font-size: 1.25rem;
}

/* Tab Navigation */
.history-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--node-border);
}

.history-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--node-label-text);
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  border-radius: 4px 4px 0 0;
}

.history-tab:hover {
  color: var(--node-text);
  background-color: var(--node-header-bg);
}

.history-tab.active {
  color: var(--node-text);
  border-bottom-color: var(--node-textarea-border-focus);
  background-color: var(--node-header-bg);
}

.tab-icon {
  font-size: 0.875rem;
}

/* History List */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 10px;
}

.history-item {
  background-color: var(--node-header-bg);
  border: 1px solid var(--node-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease-in-out;
}

.history-item:hover {
  border-color: var(--node-textarea-border-focus);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Item Header */
.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-type-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.875rem;
}

.history-type-icon {
  font-size: 1.1rem;
}

.history-type-label {
  text-transform: capitalize;
}

.history-actions {
  display: flex;
  gap: 8px;
}

.history-download-btn {
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  color: var(--node-label-text);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.history-download-btn:hover {
  border-color: var(--node-textarea-border-focus);
  color: var(--node-text);
  background-color: var(--node-header-bg);
}

/* Prompt */
.history-prompt {
  font-weight: 500;
  margin: 0 0 12px 0;
  color: var(--node-text);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 8px;
  background-color: var(--node-bg);
  border-radius: 6px;
  border: 1px solid transparent;
}

/* Metadata Section */
.history-metadata {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.history-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  color: var(--node-label-text);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

.pill-icon {
  font-size: 0.65rem;
  opacity: 0.7;
}

.history-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--node-label-text);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
}

.date-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Model Info */
.history-model {
  color: var(--node-label-text);
  font-size: 0.8rem;
  margin-bottom: 8px;
  font-style: italic;
}

/* Footer */
.history-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.history-status-badges {
  display: flex;
  gap: 6px;
}

.status-badge,
.source-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.status-completed {
  background-color: #10b981;
  color: white;
}

.status-badge.status-processing {
  background-color: #f59e0b;
  color: white;
}

.status-badge.status-failed {
  background-color: #ef4444;
  color: white;
}

.source-badge.source-cloud {
  background-color: #3b82f6;
  color: white;
}

.source-badge.source-local {
  background-color: #6b7280;
  color: white;
}

.file-size {
  color: var(--node-label-text);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

/* Messages */
.history-message {
  color: var(--node-label-text);
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.history-error {
  color: var(--node-error-text);
  font-weight: 500;
}

/* Load More Button */
.load-more-button {
  background-color: var(--node-header-bg);
  border: 1px solid var(--node-border);
  color: var(--node-text);
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  margin: 20px auto;
  display: block;
}

.load-more-button:hover:not(:disabled) {
  border-color: var(--node-textarea-border-focus);
  background-color: var(--node-bg);
}

.load-more-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Custom Scrollbar */
.history-list::-webkit-scrollbar {
  width: 6px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}

.history-list::-webkit-scrollbar-thumb {
  background-color: var(--node-textarea-border);
  border-radius: 10px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--node-textarea-border-focus);
}

/* Responsive Design */
@media (max-width: 768px) {
  .history-tabs {
    flex-wrap: wrap;
  }

  .history-metadata {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .history-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .history-actions {
    align-self: flex-end;
  }
}

/* Animation */
.history-item {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.refresh-button {
  background-color: var(--node-header-bg);
  border: 1px solid var(--node-border);
  color: var(--node-label-text);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 1.2rem;
  font-family: 'Inconsolata', monospace;
  line-height: 1;
  transition: all 0.2s ease;
  padding-top: 10px;
}
/* Refresh Button Spinning Animation */
.refresh-button .spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pagination */
.pagination-container {
  margin-top: 20px;
  padding: 15px;
  border-top: 1px solid var(--node-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-btn {
  background-color: var(--node-header-bg);
  border: 1px solid var(--node-border);
  color: var(--node-text);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--node-textarea-border-focus);
  background-color: var(--node-bg);
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--node-label-text);
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  color: var(--node-label-text);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  min-width: 32px;
  text-align: center;
  transition: all 0.2s ease;
}

.page-number:hover {
  border-color: var(--node-textarea-border-focus);
  color: var(--node-text);
}

.page-number.active {
  background-color: var(--node-textarea-border-focus);
  border-color: var(--node-textarea-border-focus);
  color: white;
}

.pagination-info {
  color: var(--node-label-text);
  font-size: 0.8rem;
  text-align: center;
}

.pagination-info.single-page {
  font-style: italic;
  padding: 5px;
}

.load-more-btn {
  background-color: var(--node-header-bg);
  border: 1px solid var(--node-border);
  color: var(--node-text);
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-top: 10px;
}

.load-more-btn:hover {
  border-color: var(--node-textarea-border-focus);
  background-color: var(--node-bg);
  transform: translateY(-1px);
}

.load-more-btn:active {
  transform: translateY(0);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.load-more-btn:disabled:hover {
  border-color: var(--node-border);
  background-color: var(--node-header-bg);
}

/* Local Generation Styles */
.local-generation {
  border-color: #8b5cf6;
  background: linear-gradient(
    135deg,
    var(--node-header-bg) 0%,
    rgba(139, 92, 246, 0.05) 100%
  );
}

.local-generation:hover {
  border-color: #a78bfa;
}

.local-badge {
  background-color: #8b5cf6;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

.status-local {
  background-color: #8b5cf6 !important;
  color: white !important;
}

.spinning {
  animation: spin 1s linear infinite;
}

/* src/nodes/VideoGenerationNode.module.css */
@keyframes VideoGenerationNode_scaleInNode__sYtwP {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}
/* --- Pastel Theme Overrides for VideoGenerationNode --- */
.VideoGenerationNode_nodeBase__NzoHw {
  --node-floating-bg: #ffedd5;
  /* Define VideoGenerationNode specific colors using pastel oranges/corals */
  --video-node-bg: #fff7ed; /* orange-50 */
  --video-node-border: #fed7aa; /* orange-200 */
  --video-node-border-selected: #fb923c; /* orange-400 */
  --video-node-text: #7c2d12; /* orange-900 */
  --video-node-label-text: #c2410c; /* orange-700 */
  --video-node-icon-bg: #ffedd5; /* orange-100 */
  --video-node-icon-color: #9a3412; /* orange-800 */
  --video-node-button-bg: #fdba74; /* orange-300 */
  --video-node-button-bg-hover: #fb923c; /* orange-400 */
  --video-node-button-text: #7c2d12; /* orange-900 */
  --video-node-textarea-bg: #fffbf5; /* Lighter orange */
  --video-node-textarea-border: #ffead1; /* orange-100 */
  --video-node-loading-text: var(--video-node-label-text);
  --video-node-error-text: #ef4444; /* red-500 */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */
  --refetch-button-bg: #f59e0b; /* amber-500 */
  --refetch-button-bg-hover: #d97706; /* amber-600 */
  --refetch-button-text: #ffffff; /* white */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Apply the overrides */
  border-radius: 8px;
  border: 1px solid var(--video-node-border); /* Use override */
  background-color: var(--video-node-bg); /* Use override */
  color: var(--video-node-text); /* Use override */
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: VideoGenerationNode_scaleInNode__sYtwP 0.3s ease-out;
  position: relative;
}

body.no-node-animation .VideoGenerationNode_nodeBase__NzoHw {
  animation: none;
}

body.high-contrast .VideoGenerationNode_nodeBase__NzoHw {
  --video-node-bg: #111827; /* gray-900 - Just one step darker */
  --video-node-border: #ea580c; /* orange-600 - Slightly darker orange */
  --video-node-border-selected: #fb923c; /* orange-400 - Same as normal border */
  --video-node-text: #f9fafb; /* gray-50 - Just slightly brighter */
  --video-node-label-text: #fed7aa; /* orange-200 - Keep the same */
  --video-node-icon-bg: #1f2937; /* gray-800 - One step darker */
  --video-node-icon-color: #ffedd5; /* orange-100 - Keep the same */
  --video-node-button-bg: #ea580c; /* orange-600 - Slightly darker */
  --video-node-button-bg-hover: #fb923c; /* orange-400 - Same as normal button */
  --video-node-button-text: #f9fafb; /* gray-50 - Slightly brighter */
  --video-node-textarea-bg: #1f2937; /* gray-800 - One step darker */
  --video-node-textarea-border: #4b5563; /* gray-600 - Slightly darker */
  --refetch-button-bg: #d97706; /* amber-600 */
  --refetch-button-bg-hover: #b45309; /* amber-700 */
  --refetch-button-text: #ffffff; /* white */
}

/* Selected state */
.react-flow__node.selected .VideoGenerationNode_nodeBase__NzoHw {
  border-color: var(--video-node-border-selected); /* Use override */
  box-shadow: 0 0 0 1px var(--video-node-border-selected);
}

/* Styles the icon positioned outside the top-left corner */
.VideoGenerationNode_floatingIcon__NT9F8 {
  /* Positioning */

  /* Appearance */
  background-color: var(--node-floating-bg);
  color: var(--input-node-icon-color);
  border-radius: 20%; /* Makes the background circular */
  border: 1px solid var(--video-node-border); /* Optional: Matches node border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Optional: Adds depth */

  /* Size and Alignment */
  width: 28px; /* Adjust size as needed */
  height: 28px; /* Adjust size as needed */
  padding: 0px; /* Adjust padding inside the icon background */
  display: flex; /* Needed for centering the icon inside */
  justify-content: center;
  align-items: center;
}

.VideoGenerationNode_nodeHeader__lOVHQ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px; /* Negative value moves it above the nodeBase top edge */
  left: -0px; /* Negative value moves it left of the nodeBase left edge */
  z-index: 10;
}

.VideoGenerationNode_iconWrapper__-CzPH {
  background-color: var(--video-node-icon-bg); /* Use override */
  color: var(--video-node-icon-color); /* Use override */
  border-radius: 4px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.VideoGenerationNode_buttonsWrapper__fHeVi {
  display: flex;
  gap: 5px;
}

/* Style buttons using specific video node variables */
.VideoGenerationNode_buttonsWrapper__fHeVi button {
  padding: 4px 8px;
  border: none;
  background-color: var(--video-node-button-bg); /* Use override */
  color: var(--video-node-button-text); /* Use override */
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

/* NEW: Active state for the cloud toggle */
.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_cloudActive__\+h49- {
  background-color: #22c55e; /* A distinct green color */
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

/* NEW: Active state for the isolate toggle */
.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_isolateActive__loq9R {
  background-color: #f59e0b; /* amber-500 - indicates locked/isolated state */
  color: white;
  box-shadow: 0 0 8px #f59e0b;
}

/* NEW: Active state for the shop toggle */
.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_shopActive__dMqh1 {
  background-color: #3b82f6; /* A distinct blue color */
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

/* Shop success animation */
@keyframes VideoGenerationNode_shopSuccessPulse__IyxAB {
  0% {
    transform: scale(1);
    background-color: #10b981; /* green-500 */
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes VideoGenerationNode_checkmarkAppear__5rR8U {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Go button success animation */
@keyframes VideoGenerationNode_goSuccessPulse__sIeU9 {
  0% {
    transform: scale(1);
    background-color: #10b981; /* green-500 */
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_goSuccess__xNufv {
  background-color: #10b981 !important; /* green-500 */
  color: white !important;
  animation: VideoGenerationNode_goSuccessPulse__sIeU9 0.6s ease-out;
  position: relative;
}

.VideoGenerationNode_goSuccessIcon__lp92Y {
  animation: VideoGenerationNode_checkmarkAppear__5rR8U 0.4s ease-out;
}

.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_shopSuccess__GXq5e {
  background-color: #10b981 !important; /* green-500 */
  color: white !important;
  animation: VideoGenerationNode_shopSuccessPulse__IyxAB 0.6s ease-out;
  position: relative;
}

.VideoGenerationNode_shopSuccessIcon__xZOjw {
  animation: VideoGenerationNode_checkmarkAppear__5rR8U 0.4s ease-out;
}

/* Refetch button styling */
.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_refetchButton__pgIME {
  background-color: var(--refetch-button-bg) !important;
  color: var(--refetch-button-text) !important;
  border: 1px solid var(--refetch-button-bg);
  animation: VideoGenerationNode_pulseRefetch__2yZk6 2s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_refetchButton__pgIME:hover {
  background-color: var(--refetch-button-bg-hover) !important;
  transform: scale(1.05);
}

@keyframes VideoGenerationNode_pulseRefetch__2yZk6 {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.VideoGenerationNode_buttonsWrapper__fHeVi button:hover {
  background-color: var(--video-node-button-bg-hover); /* Use override */
}

.VideoGenerationNode_buttonsWrapper__fHeVi button:disabled {
  background-color: var(--video-node-label-text); /* Use override */
  color: var(--video-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.VideoGenerationNode_nodeContent__mWADQ {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.VideoGenerationNode_nodeContent__mWADQ label {
  font-size: 0.8rem;
  color: var(--video-node-label-text); /* Use override */
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.VideoGenerationNode_nodeContent__mWADQ textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--video-node-textarea-border); /* Use override */
  border-radius: 4px;
  background-color: var(--video-node-textarea-bg); /* Use override */
  color: var(--video-node-text); /* Use override */
  font-family: inherit;
  min-height: 100px;
  resize: vertical;
}

/* Image input indicator styling - standardized across all nodes */
.VideoGenerationNode_inputImageIndicator__DHox\+ {
  font-size: 0.8rem;
  color: var(--video-node-border-selected);
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin: 4px 0;
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.VideoGenerationNode_imageTimestamp__CrpOb {
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: normal;
}

.VideoGenerationNode_compatible__f58Po {
  border-color: #10b981 !important; /* green */
  background-color: #d1fae5 !important; /* light green */
  color: #065f46 !important; /* dark green */
}

.VideoGenerationNode_incompatible__4OR-\+ {
  border-color: #f59e0b !important; /* amber */
  background-color: #fef3c7 !important; /* light amber */
  color: #92400e !important; /* dark amber */
}

.VideoGenerationNode_requirementText__v30ZY {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: normal;
  margin-top: 2px;
}

/* Style the video player */
.VideoGenerationNode_videoPlayer__B6s\+z {
  margin-top: 5px;
  width: 100%;
  background-color: #000; /* Keep black background */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--video-node-border); /* Add border */
}

.VideoGenerationNode_videoPlayer__B6s\+z video {
  display: block;
  width: 100%;
  max-height: 200px;
}

/* Loading/Error/Success states */
.VideoGenerationNode_loading__SVmBv {
  font-size: smaller;
  color: var(--video-node-loading-text); /* Use override */
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.VideoGenerationNode_success__Q3HNI {
  font-size: smaller;
  color: #10b981; /* green-500 */
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.VideoGenerationNode_error__d6lZK {
  font-size: smaller;
  color: var(--video-node-error-text); /* Use override */
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

/* Styles for job status display */
.VideoGenerationNode_jobStatusContainer__5ae9d {
  margin-top: 10px;
  padding: 8px;
  background-color: var(
    --video-node-textarea-bg
  ); /* Or a slightly different shade */
  border: 1px solid var(--video-node-textarea-border);
  border-radius: 4px;
  max-height: 100px;
  overflow-y: auto;
  font-size: 0.8rem;
}

.VideoGenerationNode_jobEntry__XH4w0 {
  padding: 4px 0;
  border-bottom: 1px dashed var(--video-node-textarea-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.VideoGenerationNode_jobEntry__XH4w0:last-child {
  border-bottom: none;
}

.VideoGenerationNode_jobPromptPreview__JMoNY {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--video-node-text);
}

.VideoGenerationNode_jobStatusText__BxrP2 {
  font-style: italic;
  color: var(--video-node-label-text);
  flex-shrink: 0;
}
.VideoGenerationNode_jobError__l3i9P {
  color: var(--video-node-error-text);
  font-weight: bold;
  cursor: help; /* Indicate title is available */
  flex-shrink: 0;
}

.VideoGenerationNode_noJobs__DsS\+S {
  text-align: center;
  color: var(--video-node-label-text);
}

.VideoGenerationNode_previewButton__A8M39 {
  padding: 2px 6px;
  font-size: 0.7rem;
  background-color: var(--video-node-button-bg);
  color: var(--video-node-button-text);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 5px;
  flex-shrink: 0;
}
.VideoGenerationNode_previewButton__A8M39:hover {
  background-color: var(--video-node-button-bg-hover);
}

.VideoGenerationNode_previewingNotice__qrNtO {
  font-size: 0.75rem;
  text-align: center;
  color: var(--video-node-label-text);
  margin-top: 4px;
}

/* Model Selection Modal Styles (can reuse from InputNode.module.css if classes are identical) */
/* If VideoNode.module.css defines its own modal styles, ensure these are covered: */
.VideoGenerationNode_modelGrid__tBS\+f {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  max-height: 400px;
  overflow-y: auto;
  padding: 5px;
}

.VideoGenerationNode_categoryHeaderFullWidth__RdEp- {
  grid-column: 1 / -1;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--video-node-text); /* Use video node's text color */
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--video-node-border); /* Use video node's border */
}
.VideoGenerationNode_categoryHeaderFullWidth__RdEp-:first-of-type {
  margin-top: 0;
}

.VideoGenerationNode_modelButton__odlYU {
  padding: 10px 12px;
  border: 1px solid var(--video-node-border);
  background-color: var(--video-node-bg);
  color: var(--video-node-text);
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  min-height: 60px;
}

.VideoGenerationNode_modelButton__odlYU:hover {
  background-color: var(
    --video-node-icon-bg
  ); /* Use video node's icon bg for hover */
  border-color: var(--video-node-border-selected);
}

.VideoGenerationNode_modelButton__odlYU.VideoGenerationNode_selected__IyZrw {
  background-color: var(
    --video-node-button-bg
  ); /* Use video node's button bg */
  color: var(--video-node-button-text);
  border-color: var(--video-node-button-bg-hover);
}

.VideoGenerationNode_modelInfo__8WARX {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: 8px;
}

.VideoGenerationNode_modelName__CbZCl {
  font-weight: bold;
  font-size: 0.95em;
  display: flex;
  align-items: center;
}

.VideoGenerationNode_costIndicator__EqyPY {
  margin-left: 8px;
  font-size: 0.9em;
  color: var(--video-node-label-text);
}
.VideoGenerationNode_modelButton__odlYU.VideoGenerationNode_selected__IyZrw .VideoGenerationNode_costIndicator__EqyPY {
  color: var(--video-node-button-text);
  opacity: 0.8;
}

.VideoGenerationNode_infoIcon__IF5v9 {
  font-size: 1.1em;
  color: var(--video-node-label-text);
  cursor: pointer;
  margin-left: auto;
  padding: 5px;
  border-radius: 50%;
  transition: color 0.2s ease;
}
.VideoGenerationNode_infoIcon__IF5v9:hover {
  color: var(--video-node-border-selected);
}
.VideoGenerationNode_modelButton__odlYU.VideoGenerationNode_selected__IyZrw .VideoGenerationNode_infoIcon__IF5v9 {
  color: var(--video-node-button-text);
  opacity: 0.8;
}

.VideoGenerationNode_deprecatedBadge__ct9bF {
  background-color: var(
    --video-node-error-text
  ); /* Use video node's error text color */
  color: white; /* Or a theme-appropriate contrast */
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  margin-left: 8px;
  align-self: center;
}

.VideoGenerationNode_modalActions__DxDHo {
  /* For the model selection modal's footer */
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.VideoGenerationNode_modalActions__DxDHo .VideoGenerationNode_cancelButton__rtRdA {
  /* Assuming a generic cancel button style or define one */
  padding: 8px 15px;
  /* ... other styles for cancel button ... */
  background-color: var(--video-node-label-text); /* Example */
  color: var(--video-node-bg); /* Example */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Ensure error messages in modal also use themed colors */
.VideoGenerationNode_error__d6lZK {
  /* General error class, used in model modal too */
  font-size: smaller;
  color: var(--video-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
}

.VideoGenerationNode_tokenCounter__YgA-5 {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.VideoGenerationNode_tokenInfo__KiSiq {
  display: flex;
  align-items: center;
  gap: 8px;
}

.VideoGenerationNode_creditInfo__LQaN- {
  display: flex;
  align-items: center;
  gap: 4px;
}

.VideoGenerationNode_tokenCount__VsDkZ {
  color: var(--token-counter-text);
  font-weight: 600;
}

.VideoGenerationNode_estimatedCost__OBt24 {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.VideoGenerationNode_estimatedCredits__6vzAN {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.VideoGenerationNode_creditInfoIcon__-8dZS {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.VideoGenerationNode_creditInfoIcon__-8dZS:hover {
  opacity: 1;
  color: var(--video-node-border-selected);
}

.VideoGenerationNode_coinIcon__t4voq {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.VideoGenerationNode_shopIcon__0CICD {
  filter: brightness(0) saturate(100%) invert(27%) sepia(9%) saturate(586%)
    hue-rotate(359deg) brightness(92%) contrast(86%);
}

.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_shopActive__dMqh1 .VideoGenerationNode_shopIcon__0CICD {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.high-contrast .VideoGenerationNode_shopIcon__0CICD {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

.VideoGenerationNode_thumbnailContainer__7HQ\+W {
  position: relative;
  cursor: pointer;
  width: 100%;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--video-node-border);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.VideoGenerationNode_thumbnailImage__LjTA9 {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  transition:
    transform 0.2s ease-in-out,
    filter 0.2s ease-in-out;
}

.VideoGenerationNode_thumbnailContainer__7HQ\+W:hover .VideoGenerationNode_thumbnailImage__LjTA9 {
  transform: scale(1.03);
  filter: brightness(0.7);
}

.VideoGenerationNode_playButtonOverlay__-iOcy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  pointer-events: none; /* Let clicks pass through to the container */
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.VideoGenerationNode_thumbnailContainer__7HQ\+W:hover .VideoGenerationNode_playButtonOverlay__-iOcy {
  background-color: rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Video placeholder when no thumbnail is available */
.VideoGenerationNode_videoPlaceholder__zR9xu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--video-node-label-text);
  font-size: 0.8rem;
  min-height: 120px;
  gap: 12px;
  background: transparent; /* Remove any background */
}

.VideoGenerationNode_videoPlaceholder__zR9xu span {
  display: none; /* Hide the "Click to play video" text */
}

/* Adjust the video placeholder icon */
.VideoGenerationNode_videoPlaceholder__zR9xu svg {
  opacity: 0.6;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.VideoGenerationNode_thumbnailContainer__7HQ\+W:hover .VideoGenerationNode_videoPlaceholder__zR9xu svg {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Shop Upload Success Overlay */
.VideoGenerationNode_shopOverlay__cwE9x {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(16, 185, 129, 0.95); /* green with high opacity */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: VideoGenerationNode_shopOverlayFadeIn__s2Zya 0.3s ease-out;
}

@keyframes VideoGenerationNode_shopOverlayFadeIn__s2Zya {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.VideoGenerationNode_shopOverlayContent__a9jwe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: VideoGenerationNode_shopOverlayBounce__828bx 0.6s ease-out;
}

@keyframes VideoGenerationNode_shopOverlayBounce__828bx {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.VideoGenerationNode_shopOverlayIcon__WBUYG {
  width: 64px;
  height: 64px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
  animation: VideoGenerationNode_shopIconPulse__PBsTO 1s ease-in-out infinite;
}

@keyframes VideoGenerationNode_shopIconPulse__PBsTO {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.VideoGenerationNode_shopOverlayText__Y\+8gY {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Handle Wrapper and Icons */
.VideoGenerationNode_handleWrapper__0LlcW {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.VideoGenerationNode_handleWrapper__0LlcW > * {
  pointer-events: auto;
}

.VideoGenerationNode_handle__V2Nda {
  width: 12px;
  height: 12px;
  background-color: #8b5cf6;
  border: 2px solid #f3e8ff;
  border-radius: 50%;
}

.VideoGenerationNode_handleIcon__Fg9rK {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--video-node-icon-bg);
  color: var(--video-node-icon-color);
  border: 1px solid var(--video-node-border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  pointer-events: none;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
}

.VideoGenerationNode_handleWrapper__0LlcW:hover .VideoGenerationNode_handleIcon__Fg9rK {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: var(--video-node-border);
}

/* High contrast handle styles */
body.high-contrast .VideoGenerationNode_handle__V2Nda {
  background-color: var(--video-node-border-selected);
  border-color: var(--video-node-bg);
}

body.high-contrast .VideoGenerationNode_handleIcon__Fg9rK {
  background-color: var(--video-node-icon-bg);
  border-color: var(--video-node-textarea-border);
  color: var(--video-node-icon-color);
}

body.high-contrast .VideoGenerationNode_handleIconConnected__nBF33 {
  background-color: var(--video-node-button-bg);
  color: var(--video-node-button-text);
}

body.high-contrast .VideoGenerationNode_inputHandleIconConnected__wfOBj {
  animation: VideoGenerationNode_iconPulseHighContrast__NIiDh 2s ease-in-out infinite;
}

body.high-contrast .VideoGenerationNode_inputHandleIconIsolated__YRomY {
  background-color: rgba(251, 191, 36, 0.5) !important;
  border-color: #fbbf24 !important;
}

@keyframes VideoGenerationNode_iconPulseHighContrast__NIiDh {
  0%,
  100% {
    background-color: var(--video-node-icon-bg);
  }
  50% {
    background-color: #fb923c; /* orange-400 - brighter for dark mode */
  }
}

/* ================================== */
/* Two-Frame UI Design Styles         */
/* ================================== */

/* Container for both frames - using overflow hidden for reveal effect */
.VideoGenerationNode_framesContainer__tZtAG {
  position: relative;
  width: 100%;
  height: 180px; /* Fixed height to prevent shrinking */
  overflow: hidden;
  border-radius: 6px;
}

/* Collapsed State */
.VideoGenerationNode_nodeCollapsed__MGbB4 {
  min-width: 280px;
  max-width: 350px;
  width: 280px; /* Fixed width to prevent size changes */
  padding: 12px;
}

/* Expanded State */
.VideoGenerationNode_nodeExpanded__etbdB {
  min-width: 280px;
  max-width: 350px;
  width: 280px; /* Fixed width to prevent size changes */
  padding: 12px; /* Same as collapsed to prevent shrinking */
}

/* Frame 1: Collapsed View - Slides out to left */
.VideoGenerationNode_collapsedFrame__2jLrW {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--video-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, use different layout for edge-to-edge image */
.VideoGenerationNode_collapsedFrame__2jLrW.VideoGenerationNode_hasOutputPreview__SB8Q0 {
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

/* Slide out animation when expanding */
.VideoGenerationNode_nodeExpanded__etbdB .VideoGenerationNode_collapsedFrame__2jLrW {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons when no output */
.VideoGenerationNode_collapsedIconsRow__GMJnZ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.VideoGenerationNode_collapsedIcon__BfX3r {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.VideoGenerationNode_collapsedIcon__BfX3r img {
  /* Orange tint for video node - matches --video-node-icon-color */
  display: block;
  margin: auto;
  filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(1500%)
    hue-rotate(360deg) brightness(95%) contrast(95%);
  transition: filter 0.2s ease;
}

/* High contrast mode - brighter orange */
body.high-contrast .VideoGenerationNode_collapsedIcon__BfX3r img {
  filter: brightness(0) saturate(100%) invert(85%) sepia(30%) saturate(500%)
    hue-rotate(340deg) brightness(105%) contrast(95%);
}

.VideoGenerationNode_collapsedIcon__BfX3r:hover {
  transform: scale(1.05);
}

/* Anchored Icon - positioned in top-left corner when output exists */
.VideoGenerationNode_anchoredIcon__dEvOR {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.high-contrast .VideoGenerationNode_anchoredIcon__dEvOR {
  background-color: rgba(30, 41, 59, 0.9);
}

.VideoGenerationNode_anchoredIconImage__5JJ0- {
  width: 18px;
  height: 18px;
  /* Orange tint - matches video node theme */
  filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(1500%)
    hue-rotate(360deg) brightness(95%) contrast(95%);
}

body.high-contrast .VideoGenerationNode_anchoredIconImage__5JJ0- {
  filter: brightness(0) saturate(100%) invert(85%) sepia(30%) saturate(500%)
    hue-rotate(340deg) brightness(105%) contrast(95%);
}

/* Edge-to-edge media preview in collapsed state */
.VideoGenerationNode_collapsedMediaPreview__1AA0J {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 6px;
  overflow: hidden;
}

.VideoGenerationNode_collapsedMediaImage__7f6SZ {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Video playing in collapsed frame */
.VideoGenerationNode_collapsedMediaVideo__eOC0B {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Placeholder when no thumbnail but video exists */
.VideoGenerationNode_collapsedVideoPlaceholder__xMRek {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--video-node-label-text);
  gap: 4px;
  cursor: pointer;
}

.VideoGenerationNode_collapsedVideoPlaceholder__xMRek:hover {
  color: var(--video-node-border-selected);
}

.VideoGenerationNode_collapsedVideoPlaceholder__xMRek span {
  font-size: 0.7rem;
}

/* Expand button in bottom-right corner of collapsed frame */
.VideoGenerationNode_collapsedExpandButton__VF\+BS {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.VideoGenerationNode_collapsedExpandButton__VF\+BS:hover {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

body.high-contrast .VideoGenerationNode_collapsedExpandButton__VF\+BS {
  background-color: rgba(30, 41, 59, 0.8);
  border-color: var(--video-node-border);
}

body.high-contrast .VideoGenerationNode_collapsedExpandButton__VF\+BS:hover {
  background-color: var(--video-node-button-bg);
  border-color: var(--video-node-border-selected);
}

/* Status Indicators Row */
.VideoGenerationNode_statusIndicators__uhmbX {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.VideoGenerationNode_statusItem__AW1RN {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.VideoGenerationNode_statusIcon__amTLu {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--video-node-textarea-border);
}

.VideoGenerationNode_statusActive__huiTu {
  background-color: transparent;
  color: var(--video-node-border-selected);
  border-color: var(--video-node-border-selected);
}

.VideoGenerationNode_statusInactive__AMSJB {
  background-color: transparent;
  color: var(--video-node-label-text);
  opacity: 0.4;
}

.VideoGenerationNode_statusOutputActive__EfZYU {
  background-color: transparent;
  color: #3b82f6; /* blue-500 */
  border-color: #3b82f6; /* blue-500 */
}

.VideoGenerationNode_statusRequired__-wCRI {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444; /* red-500 */
}

.VideoGenerationNode_statusCheck__8IfR9 {
  color: var(--video-node-border-selected);
}

.VideoGenerationNode_statusCheckOutput__v6PAA {
  color: #3b82f6; /* blue-500 */
}

.VideoGenerationNode_statusWarning__JphGB {
  color: #ef4444; /* red-500 */
}

.VideoGenerationNode_collapsedLoading__ANErE {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
  z-index: 15;
}

body.high-contrast .VideoGenerationNode_collapsedLoading__ANErE {
  background-color: rgba(30, 41, 59, 0.8);
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.VideoGenerationNode_expandedFrame__Eie44 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* Update nodeContent for expanded frame */
.VideoGenerationNode_expandedFrame__Eie44 .VideoGenerationNode_nodeContent__mWADQ {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
}

.VideoGenerationNode_expandedFrame__Eie44 .VideoGenerationNode_nodeContent__mWADQ textarea {
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  padding-bottom: 36px; /* Space for floating footer */
  border: none;
  border-radius: 4px;
  flex: 1 1;
  min-height: 0;
  resize: none;
  box-sizing: border-box;
  background-color: var(--video-node-bg);
  color: var(--video-node-text);
  font-family: 'Inconsolata', monospace;
}

/* Expanded Output Preview - shown when toggle is active */
.VideoGenerationNode_expandedOutputPreview__d18ch {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
  padding-bottom: 28px;
  box-sizing: border-box;
  cursor: pointer;
}

.VideoGenerationNode_expandedOutputImage__0O--a {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.VideoGenerationNode_expandedOutputVideo__CYilM {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.VideoGenerationNode_expandedThumbnailContainer__53tP9 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.VideoGenerationNode_expandedThumbnailContainer__53tP9:hover .VideoGenerationNode_expandedOutputImage__0O--a {
  filter: brightness(0.7);
}

.VideoGenerationNode_expandedThumbnailContainer__53tP9:hover .VideoGenerationNode_expandedPlayOverlay__ujkZT {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: rgba(0, 0, 0, 0.8);
}

.VideoGenerationNode_expandedPlayOverlay__ujkZT {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.VideoGenerationNode_expandedVideoPlaceholder__Rx5WD {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--video-node-label-text);
  cursor: pointer;
  gap: 8px;
}

.VideoGenerationNode_expandedVideoPlaceholder__Rx5WD:hover {
  color: var(--video-node-border-selected);
}

.VideoGenerationNode_expandedVideoPlaceholder__Rx5WD span {
  font-size: 0.8rem;
}

/* Expanded header - positioned outside the node at top, centered */
.VideoGenerationNode_expandedHeader__EdGPx {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.VideoGenerationNode_nodeExpanded__etbdB .VideoGenerationNode_expandedHeader__EdGPx {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Override nodeHeader styles for two-frame UI */
.VideoGenerationNode_nodeExpanded__etbdB .VideoGenerationNode_nodeHeader__lOVHQ,
.VideoGenerationNode_nodeCollapsed__MGbB4 .VideoGenerationNode_nodeHeader__lOVHQ {
  display: none;
}

/* Header Credits - styled like floating buttons, 2.5x width */
.VideoGenerationNode_headerCredits__7HoFc {
  width: 65px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--video-node-textarea-border);
  background-color: var(--video-node-bg);
  color: var(--video-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s ease;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.VideoGenerationNode_headerCredits__7HoFc:hover {
  background-color: var(--video-node-icon-bg);
  border-color: var(--video-node-border);
}

.VideoGenerationNode_headerCoinIcon__9IPz1 {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  filter: brightness(0) invert(0);
}

body.high-contrast .VideoGenerationNode_headerCoinIcon__9IPz1 {
  filter: brightness(0) invert(1);
}

.VideoGenerationNode_headerCreditsText__8XhUp {
  color: #374151; /* gray-700 - dark text for light mode */
}

body.high-contrast .VideoGenerationNode_headerCreditsText__8XhUp {
  color: #e5e7eb; /* gray-200 - light text for dark mode */
}

/* Floating Message Bar - positioned outside node at bottom */
.VideoGenerationNode_floatingMessageBar__t610k {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

/* Animate message bar in when expanded */
.VideoGenerationNode_nodeExpanded__etbdB .VideoGenerationNode_floatingMessageBar__t610k {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Error message style */
.VideoGenerationNode_messageError__M8pcq {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

/* Warning message style */
.VideoGenerationNode_messageWarning__ncyqx {
  background-color: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

/* Info message style */
.VideoGenerationNode_messageInfo__Q4NRP {
  background-color: rgba(59, 130, 246, 0.15);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

.VideoGenerationNode_messageText__US-Dz {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* High contrast theme for message bar */
body.high-contrast .VideoGenerationNode_messageError__M8pcq {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

body.high-contrast .VideoGenerationNode_messageWarning__ncyqx {
  background-color: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

body.high-contrast .VideoGenerationNode_messageInfo__Q4NRP {
  background-color: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
  color: #60a5fa;
}

/* Footer Controls - Floating bar inside node at bottom */
.VideoGenerationNode_expandedFooter__XpqHH {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

/* Token counter in expanded footer - inline style */
.VideoGenerationNode_expandedFooter__XpqHH .VideoGenerationNode_tokenCounter__YgA-5 {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  font-size: 0.65rem;
}

.VideoGenerationNode_footerControls__RF5zb {
  display: flex;
  align-items: center;
  gap: 4px;
}

.VideoGenerationNode_helpButton__GOW1a {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--video-node-textarea-border);
  background-color: var(--video-node-textarea-bg);
  color: var(--video-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.VideoGenerationNode_helpButton__GOW1a:hover {
  background-color: var(--video-node-icon-bg);
  border-color: var(--video-node-border);
  color: var(--video-node-border-selected);
}

.VideoGenerationNode_pinButton__3zWA6 {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--video-node-textarea-border);
  background-color: var(--video-node-textarea-bg);
  color: var(--video-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.VideoGenerationNode_pinButton__3zWA6:hover {
  background-color: var(--video-node-icon-bg);
  border-color: var(--video-node-border);
}

.VideoGenerationNode_pinActive__JMB5z {
  background-color: var(--video-node-button-bg) !important;
  color: var(--video-node-button-text) !important;
  border-color: var(--video-node-border-selected) !important;
}

/* Preview toggle button active state */
.VideoGenerationNode_previewActive__8EHBq {
  background-color: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

.VideoGenerationNode_goButton__TZipn {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--video-node-button-bg);
  color: var(--video-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
}

.VideoGenerationNode_goButton__TZipn:hover:not(:disabled) {
  background-color: var(--video-node-button-bg-hover);
  transform: scale(1.02);
}

.VideoGenerationNode_goButton__TZipn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Uniform button sizing for floating header */
.VideoGenerationNode_expandedHeader__EdGPx .VideoGenerationNode_buttonsWrapper__fHeVi button {
  width: 26px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.VideoGenerationNode_expandedHeader__EdGPx .VideoGenerationNode_buttonsWrapper__fHeVi button svg {
  width: 10px;
  height: 10px;
}

.VideoGenerationNode_expandedHeader__EdGPx .VideoGenerationNode_buttonsWrapper__fHeVi button img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

/* Handle icons - show on hover only */
.VideoGenerationNode_nodeBase__NzoHw .VideoGenerationNode_handleIcon__Fg9rK {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Show handle icons on node hover */
.VideoGenerationNode_nodeBase__NzoHw:hover .VideoGenerationNode_handleIcon__Fg9rK {
  opacity: 1;
  transform: scale(1);
}

/* Edge preview active states */
.VideoGenerationNode_handleWrapperActive__y2dGe {
  z-index: 100;
}

.VideoGenerationNode_handleActive__yXl17 {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.VideoGenerationNode_handleIconActive__XdKcI {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* Input handle icon - when data is connected, background pulses */
.VideoGenerationNode_inputHandleIconConnected__wfOBj {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--video-node-button-bg);
  color: var(--video-node-button-text);
  animation: VideoGenerationNode_iconPulse__QLVh6 2s ease-in-out infinite;
}

/* When isolated, show orange/muted background without animation */
.VideoGenerationNode_inputHandleIconIsolated__YRomY {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: rgba(245, 158, 11, 0.5) !important;
  border-color: #f59e0b !important;
  animation: none;
}

/* Output handle icon - when data is available */
.VideoGenerationNode_handleIconConnected__nBF33 {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--video-node-button-bg);
  color: var(--video-node-button-text);
}

@keyframes VideoGenerationNode_iconPulse__QLVh6 {
  0%,
  100% {
    background-color: var(--video-node-icon-bg);
  }
  50% {
    background-color: #fb923c; /* orange-400 to match video theme */
  }
}

/* High contrast theme adjustments for two-frame UI */
body.high-contrast .VideoGenerationNode_statusActive__huiTu {
  color: var(--video-node-label-text);
  border-color: var(--video-node-border-selected);
}

body.high-contrast .VideoGenerationNode_statusRequired__-wCRI {
  color: #fca5a5;
  border-color: #fca5a5;
}

body.high-contrast .VideoGenerationNode_statusWarning__JphGB {
  color: #fca5a5;
}

body.high-contrast .VideoGenerationNode_statusOutputActive__EfZYU {
  color: #60a5fa;
  border-color: #60a5fa;
}

body.high-contrast .VideoGenerationNode_statusCheck__8IfR9 {
  color: var(--video-node-label-text);
}

body.high-contrast .VideoGenerationNode_statusCheckOutput__v6PAA {
  color: #60a5fa;
}

body.high-contrast .VideoGenerationNode_collapsedIcon__BfX3r {
  background-color: transparent;
  border: none;
}

body.high-contrast .VideoGenerationNode_helpButton__GOW1a {
  background-color: var(--video-node-textarea-bg);
  border-color: var(--video-node-textarea-border);
  color: var(--video-node-label-text);
}

body.high-contrast .VideoGenerationNode_helpButton__GOW1a:hover {
  color: var(--video-node-border-selected);
}

body.high-contrast .VideoGenerationNode_pinButton__3zWA6 {
  background-color: var(--video-node-textarea-bg);
  border-color: var(--video-node-textarea-border);
  color: var(--video-node-label-text);
}

body.high-contrast .VideoGenerationNode_pinActive__JMB5z {
  background-color: var(--video-node-button-bg) !important;
  color: var(--video-node-button-text) !important;
}

body.high-contrast .VideoGenerationNode_previewActive__8EHBq {
  background-color: #60a5fa !important;
  color: #1e293b !important;
  border-color: #60a5fa !important;
}

body.high-contrast .VideoGenerationNode_expandedOutputPreview__d18ch {
  background-color: #0f172a;
  border: 1px solid var(--video-node-textarea-border);
}

body.high-contrast .VideoGenerationNode_tokenCount__VsDkZ {
  color: #e5e7eb;
}

/* Model name display in footer - pill style matching ImageGenerationNode */
.VideoGenerationNode_expandedFooter__XpqHH .VideoGenerationNode_tokenCounter__YgA-5 .VideoGenerationNode_modelName__CbZCl {
  color: var(--video-node-label-text);
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  padding: 1px 6px;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.high-contrast .VideoGenerationNode_expandedFooter__XpqHH .VideoGenerationNode_tokenCounter__YgA-5 .VideoGenerationNode_modelName__CbZCl {
  color: #e5e7eb;
  background-color: rgba(99, 102, 241, 0.2);
}

/* Stacked error messages */
.VideoGenerationNode_messageStacked__WbViC {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  bottom: auto;
  top: 100%;
  margin-top: 8px;
}

.VideoGenerationNode_messageStackedItem__UHupY {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 5px;
  color: #ef4444;
}

.VideoGenerationNode_messageStackedItem__UHupY .VideoGenerationNode_messageText__US-Dz {
  flex: 1 1;
  font-size: 0.7rem;
}
/* 
:global(body.high-contrast) .messageStackedItem {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
} */

/* src/nodes/AudioNode.module.css */
@keyframes AudioNode_scaleInNode__GAvX1 {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}

/* Go button success animation */
@keyframes AudioNode_goSuccessPulse__FpmG1 {
  0% {
    transform: scale(1);
    background-color: #10b981; /* green-500 */
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes AudioNode_checkmarkAppear__ZWQ1C {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.AudioNode_buttonsWrapper__Tlz0\+ .AudioNode_goSuccess__aRcvJ {
  background-color: #10b981 !important; /* green-500 */
  color: white !important;
  animation: AudioNode_goSuccessPulse__FpmG1 0.6s ease-out;
  position: relative;
}

.AudioNode_goSuccessIcon__MZMns {
  animation: AudioNode_checkmarkAppear__ZWQ1C 0.4s ease-out;
}
/* --- Pastel Theme Overrides for AudioNode --- */
.AudioNode_nodeBase__xtUhI {
  --audio-node-floating-bg: #bfdbfe;
  /* Define AudioNode specific colors using pastel blue */
  --audio-node-bg: #eff6ff; /* blue-50 */
  --audio-node-border: #93c5fd; /* blue-300 */
  --audio-node-border-selected: #3b82f6; /* blue-500 */
  --audio-node-text: #1e40af; /* blue-800 */
  --audio-node-label-text: #2563eb; /* blue-600 */
  --audio-node-icon-bg: #dbeafe; /* blue-100 */
  --audio-node-icon-color: #1d4ed8; /* blue-700 */
  --audio-node-button-bg: #60a5fa; /* blue-400 */
  --audio-node-button-bg-hover: #3b82f6; /* blue-500 */
  --audio-node-button-text: #1e3a8a; /* blue-900 */
  --audio-node-textarea-bg: #f8faff; /* Lighter blue */
  --audio-node-textarea-border: #bfdbfe; /* blue-200 */
  --audio-node-loading-text: var(--audio-node-label-text);
  --audio-node-error-text: #ef4444; /* red-500 */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Apply the overrides */
  border-radius: 8px;
  border: 1px solid var(--audio-node-border);
  background-color: var(--audio-node-bg);
  color: var(--audio-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: AudioNode_scaleInNode__GAvX1 0.3s ease-out;
  position: relative;
}

body.no-node-animation .AudioNode_nodeBase__xtUhI {
  animation: none;
}

body.high-contrast .AudioNode_nodeBase__xtUhI {
  --audio-node-bg: #111827; /* gray-900 - Just one step darker */
  --audio-node-border: #2563eb; /* blue-600 - Slightly darker blue */
  --audio-node-border-selected: #3b82f6; /* blue-500 - Same as normal border */
  --audio-node-text: #f9fafb; /* gray-50 - Just slightly brighter */
  --audio-node-label-text: #93c5fd; /* blue-300 - Keep the same */
  --audio-node-icon-bg: #1f2937; /* gray-800 - One step darker */
  --audio-node-icon-color: #bfdbfe; /* blue-200 - Keep the same */
  --audio-node-button-bg: #2563eb; /* blue-600 - Slightly darker */
  --audio-node-button-bg-hover: #3b82f6; /* blue-500 - Same as normal button */
  --audio-node-button-text: #f9fafb; /* gray-50 - Slightly brighter */
  --audio-node-textarea-bg: #1f2937; /* gray-800 - One step darker */
  --audio-node-textarea-border: #4b5563; /* gray-600 - Slightly darker */
}

/* Selected state */
.react-flow__node.selected .AudioNode_nodeBase__xtUhI {
  border-color: var(--audio-node-border-selected);
  box-shadow: 0 0 0 1px var(--audio-node-border-selected);
}

.AudioNode_nodeHeader__LTIXb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px; /* Negative value moves it above the nodeBase top edge */
  left: -0px; /* Negative value moves it left of the nodeBase left edge */
  z-index: 10;
}

.AudioNode_iconWrapper__C66TL {
  background-color: var(--audio-node-icon-bg);
  color: var(--audio-node-icon-color);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.AudioNode_buttonsWrapper__Tlz0\+ {
  display: flex;
  gap: 5px;
}

/* Style buttons using specific audio node variables */
.AudioNode_buttonsWrapper__Tlz0\+ button {
  padding: 4px 8px;
  border: none;
  background-color: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

/* NEW: Active state for the cloud toggle */
.AudioNode_buttonsWrapper__Tlz0\+ .AudioNode_cloudActive__EvmMg {
  background-color: #22c55e; /* A distinct green color */
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

/* NEW: Active state for the shop toggle */
.AudioNode_buttonsWrapper__Tlz0\+ .AudioNode_shopActive__YloEA {
  background-color: #3b82f6; /* A distinct blue color */
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

/* NEW: Active state for the isolate toggle */
.AudioNode_buttonsWrapper__Tlz0\+ .AudioNode_isolateActive__0ZEor {
  background-color: #f59e0b; /* amber-500 - indicates locked/isolated state */
  color: white;
  box-shadow: 0 0 8px #f59e0b;
}

.AudioNode_floatingIcon__K4lqG {
  /* Positioning */

  /* Appearance */
  background-color: var(
    --audio-node-floating-bg
  ); /* Optional: Matches node background */
  border-radius: 20%; /* Makes the background circular */
  border: 1px solid var(--audio-node-border); /* Optional: Matches node border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Optional: Adds depth */

  /* Size and Alignment */
  width: 28px; /* Adjust size as needed */
  height: 28px; /* Adjust size as needed */
  padding: 0px; /* Adjust padding inside the icon background */
  display: flex; /* Needed for centering the icon inside */
  justify-content: center;
  align-items: center;
}

.AudioNode_buttonsWrapper__Tlz0\+ button:hover {
  background-color: var(--audio-node-button-bg-hover);
}

.AudioNode_buttonsWrapper__Tlz0\+ button:disabled {
  background-color: var(--audio-node-label-text);
  color: var(--audio-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Voice select button */
.AudioNode_voiceSelectButton__G13ff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 180px;
  min-width: 60px;
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AudioNode_nodeContent__Gd9FT {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AudioNode_nodeContent__Gd9FT textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--audio-node-textarea-border);
  border-radius: 4px;
  background-color: var(--audio-node-textarea-bg);
  color: var(--audio-node-text);
  font-family: inherit;
  min-height: 100px;
  resize: vertical;
}

/* Instructions section */
.AudioNode_instructionWrapper__PJMck {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.AudioNode_instructionHeader__0tK2N {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.AudioNode_instructionLabel__QLP8q {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--audio-node-label-text);
}

.AudioNode_instructionHeaderRight__TotfX {
  display: flex;
  align-items: center;
  gap: 6px;
}

.AudioNode_instructionsTextarea__iU5xe {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--audio-node-textarea-border);
  border-radius: 4px;
  background-color: var(--audio-node-textarea-bg);
  color: var(--audio-node-text);
  font-family: inherit;
  min-height: 40px;
  resize: vertical;
}

.AudioNode_infoIconSmall__fO55G {
  font-size: 0.8rem;
  color: var(--audio-node-label-text);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.AudioNode_infoIconSmall__fO55G:hover {
  opacity: 1;
}

/* Mini button for instructions isolation toggle */
.AudioNode_miniButton__oN1pU {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.AudioNode_miniButton__oN1pU:hover {
  background: var(--audio-node-button-bg-hover);
}

.AudioNode_miniButton__oN1pU.AudioNode_isolateActive__0ZEor {
  background: #f59e0b;
  color: white;
}

/* Style the audio player */
.AudioNode_audioPlayer__YpdKL {
  margin-top: 5px;
  width: 100%;
}

.AudioNode_audioPlayer__YpdKL audio {
  width: 100%;
  height: 40px;
}

/* Loading/Error states */
.AudioNode_loading__s05-H {
  font-size: smaller;
  color: var(--audio-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.AudioNode_error__kl4Ez {
  font-size: smaller;
  color: var(--audio-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.AudioNode_tokenCounter__l-hAU {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.AudioNode_tokenInfo__yqvNk {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AudioNode_creditInfo__zL511 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.AudioNode_tokenCount__RTbxO {
  color: var(--token-counter-text);
  font-weight: 600;
}

.AudioNode_estimatedCost__wgkk- {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.AudioNode_estimatedCredits__1dEK1 {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.AudioNode_creditInfoIcon__o6nir {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.AudioNode_creditInfoIcon__o6nir:hover {
  opacity: 1;
  color: var(--audio-node-border-selected);
}

.AudioNode_coinIcon__9AL5a {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.AudioNode_shopIcon__e15Oo {
  filter: brightness(0) saturate(100%) invert(27%) sepia(9%) saturate(586%)
    hue-rotate(359deg) brightness(92%) contrast(86%);
}

.AudioNode_buttonsWrapper__Tlz0\+ .AudioNode_shopActive__YloEA .AudioNode_shopIcon__e15Oo {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.high-contrast .AudioNode_shopIcon__e15Oo {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

.AudioNode_placeholderContainer__I2jo0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
  padding: 10px;
  border: 1px dashed var(--audio-node-textarea-border);
  border-radius: 4px;
  background-color: var(--audio-node-textarea-bg);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  color: var(--audio-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.AudioNode_placeholderContainer__I2jo0:hover {
  background-color: var(--audio-node-bg);
  border-color: var(--audio-node-border-selected);
  color: var(--audio-node-text);
}

.AudioNode_playIcon__3FD-B {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.AudioNode_placeholderContainer__I2jo0:hover .AudioNode_playIcon__3FD-B {
  transform: scale(1.1);
}

.AudioNode_refetchButton__Ic9Lh {
  background-color: var(
    --audio-node-button-bg
  ) !important; /* amber-500 - Debug color */
  color: white !important;
  margin-left: 4px;
  animation: AudioNode_pulse__2VW36 2s infinite;
}

.AudioNode_refetchButton__Ic9Lh:hover {
  background-color: var(
    --audio-node-button-bg-hover
  ) !important; /* amber-600 - Darker on hover */
}

.AudioNode_errorContainer__52VOL {
  border: 1px solid #fecaca; /* red-200 */
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
}

.AudioNode_errorHint__-gTFr {
  color: #92400e !important; /* yellow-800 */
  background-color: #fef3c7; /* yellow-100 */
  border: 1px solid #fde68a; /* yellow-200 */
  border-radius: 4px;
  padding: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.2;
}

@keyframes AudioNode_pulse__2VW36 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Shop Upload Success Overlay */
.AudioNode_shopOverlay__UyNsp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(16, 185, 129, 0.95);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: AudioNode_shopOverlayFadeIn__9fxZ0 0.3s ease-out;
}

@keyframes AudioNode_shopOverlayFadeIn__9fxZ0 {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.AudioNode_shopOverlayContent__UXiux {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: AudioNode_shopOverlayBounce__XYaUr 0.6s ease-out;
}

@keyframes AudioNode_shopOverlayBounce__XYaUr {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.AudioNode_shopOverlayIcon__mh6xI {
  width: 64px;
  height: 64px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
  animation: AudioNode_shopIconPulse__mcnkD 1s ease-in-out infinite;
}

@keyframes AudioNode_shopIconPulse__mcnkD {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.AudioNode_shopOverlayText__c41U4 {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Handle Wrapper and Icons */
.AudioNode_handleWrapper__8r9XV {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.AudioNode_handleWrapper__8r9XV > * {
  pointer-events: auto;
}

.AudioNode_handle__PotJo {
  width: 12px;
  height: 12px;
  background-color: var(--audio-node-border-selected); /* rose-500 */
  border: 2px solid var(--audio-node-bg); /* rose-50 */
  border-radius: 50%;
}

body.high-contrast .AudioNode_handle__PotJo {
  background-color: var(--audio-node-border-selected);
  border-color: var(--audio-node-bg);
}

body.high-contrast .AudioNode_handleIcon__vGgf9 {
  background-color: var(--audio-node-icon-bg);
  border-color: var(--audio-node-textarea-border);
  color: var(--audio-node-icon-color);
}

.AudioNode_handleIcon__vGgf9 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--audio-node-icon-bg);
  color: var(--audio-node-icon-color);
  border: 1px solid var(--audio-node-border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  pointer-events: none;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
  /* Hide by default - only show on node hover */
  opacity: 0;
  transform: scale(0.8);
}

.AudioNode_handleWrapper__8r9XV:hover .AudioNode_handleIcon__vGgf9 {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: var(--audio-node-border);
}

/* ============================================ */
/* TWO-FRAME UI STYLES */
/* ============================================ */

/* Node state classes */
.AudioNode_nodeCollapsed__az8RY {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

.AudioNode_nodeExpanded__fYptz {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* Frames Container */
.AudioNode_framesContainer__AFKJZ {
  position: relative;
  width: 100%;
  height: 180px; /* Fixed height to match other creation nodes */
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 1: Collapsed View - Slides out to left */
.AudioNode_collapsedFrame__-Z4ZZ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--audio-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for audio preview */
.AudioNode_collapsedFrame__-Z4ZZ.AudioNode_hasOutputPreview__vO9aa {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.AudioNode_nodeExpanded__fYptz .AudioNode_collapsedFrame__-Z4ZZ {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.AudioNode_collapsedIconsRow__1hz\+l {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.AudioNode_collapsedIconsRow__1hz\+l.AudioNode_hasOutput__0ZTjq {
  gap: 6px;
}

.AudioNode_collapsedIcon__RP38T {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.AudioNode_hasOutput__0ZTjq .AudioNode_collapsedIcon__RP38T {
  width: 40px;
  height: 40px;
}

.AudioNode_collapsedIcon__RP38T img {
  /* Blue tint for dark mode (default) */
  filter: brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(500%)
    hue-rotate(190deg) brightness(100%) contrast(95%);
  transition: filter 0.2s ease;
}

/* Darker blue tint for light mode */
body:not(.high-contrast) .AudioNode_collapsedIcon__RP38T img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(600%)
    hue-rotate(200deg) brightness(95%) contrast(90%);
}

.AudioNode_collapsedIcon__RP38T:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.AudioNode_statusIndicators__zZIo- {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.AudioNode_statusItem__8bzwX {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.AudioNode_statusIcon__85L8Z {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--audio-node-textarea-border);
}

.AudioNode_statusActive__LCCq8 {
  background-color: transparent;
  color: var(--audio-node-border-selected);
  border-color: var(--audio-node-border-selected);
}

.AudioNode_statusInactive__8Np4W {
  background-color: transparent;
  color: var(--audio-node-label-text);
  opacity: 0.4;
}

.AudioNode_statusLoading__elaYJ {
  background-color: transparent;
  color: #f59e0b; /* amber-500 */
  border-color: #f59e0b;
}

.AudioNode_statusError__Wz-Bx {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444;
}

.AudioNode_statusRequired__QX3iL {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444; /* red-500 */
}

.AudioNode_statusCheck__NWsWP {
  color: var(--audio-node-border-selected);
}

.AudioNode_statusWarning__GQpGN {
  color: #ef4444; /* red-500 */
}

body.high-contrast .AudioNode_statusActive__LCCq8 {
  background-color: var(--audio-node-button-bg);
  border-color: var(--audio-node-border-selected);
  color: var(--audio-node-label-text);
}

body.high-contrast .AudioNode_statusRequired__QX3iL {
  color: #fca5a5; /* red-300 - brighter for high contrast */
  border-color: #fca5a5;
}

body.high-contrast .AudioNode_statusWarning__GQpGN {
  color: #fca5a5; /* red-300 */
}

body.high-contrast .AudioNode_statusCheck__NWsWP {
  color: var(--audio-node-label-text);
}

.AudioNode_collapsedLoading__YOLmU {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.AudioNode_outputPreview__Nw-\+L {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.AudioNode_ghostLines__OBS4g {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.AudioNode_ghostLine__3kSmG {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--audio-node-textarea-border) 0%,
    var(--audio-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.AudioNode_ghostLine__3kSmG:nth-child(2) {
  width: 75%;
}

.AudioNode_ghostLine__3kSmG:nth-child(3) {
  width: 50%;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.AudioNode_expandedFrame__dwGfo {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* ============================================ */
/* TAB BAR STYLES */
/* ============================================ */

.AudioNode_tabBar__O3aqo {
  display: flex;
  gap: 2px;
  padding: 0 2px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--audio-node-textarea-border);
}

.AudioNode_tab__ioAuR {
  flex: 1 1;
  padding: 6px 10px;
  border: none;
  background-color: transparent;
  color: var(--audio-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.6;
}

.AudioNode_tab__ioAuR:hover {
  background-color: var(--audio-node-icon-bg);
  opacity: 0.8;
}

.AudioNode_tabActive__6v38Y {
  background-color: var(--audio-node-icon-bg);
  color: var(--audio-node-border-selected);
  opacity: 1;
  border-bottom: 2px solid var(--audio-node-border-selected);
  margin-bottom: -1px;
}

.AudioNode_tabIsolateButton__qBs4M {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.AudioNode_tabIsolateButton__qBs4M:hover {
  background: var(--audio-node-button-bg-hover);
}

.AudioNode_tabIsolateButton__qBs4M.AudioNode_isolateActive__0ZEor {
  background: #f59e0b;
  color: white;
}

body.high-contrast .AudioNode_tab__ioAuR {
  color: var(--audio-node-label-text);
}

body.high-contrast .AudioNode_tabActive__6v38Y {
  background-color: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
  border-bottom-color: var(--audio-node-border-selected);
}

/* Update nodeContent for expanded frame */
.AudioNode_expandedFrame__dwGfo .AudioNode_nodeContent__Gd9FT {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
}

.AudioNode_expandedFrame__dwGfo .AudioNode_nodeContent__Gd9FT textarea {
  width: 100%;
  padding: 6px 8px;
  padding-bottom: 36px; /* Space for floating footer */
  border: none;
  border-radius: 4px;
  flex: 1 1;
  min-height: 0;
  resize: none;
  box-sizing: border-box;
  background-color: var(--audio-node-bg);
  color: var(--audio-node-text);
  font-family: 'Inconsolata', monospace;
  outline: none;
}

.AudioNode_expandedFrame__dwGfo .AudioNode_nodeContent__Gd9FT textarea:focus {
  outline: none;
  border: none;
}

.AudioNode_expandedFrame__dwGfo .AudioNode_nodeContent__Gd9FT .AudioNode_instructionsTextarea__iU5xe {
  background-color: var(--audio-node-textarea-bg);
}

/* Expanded header - positioned outside the node at top, centered */
.AudioNode_expandedHeader__PVmRF {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.AudioNode_nodeExpanded__fYptz .AudioNode_expandedHeader__PVmRF {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Uniform button sizing for floating header */
.AudioNode_expandedHeader__PVmRF .AudioNode_buttonsWrapper__Tlz0\+ button {
  width: 26px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AudioNode_expandedHeader__PVmRF .AudioNode_buttonsWrapper__Tlz0\+ button svg {
  width: 10px;
  height: 10px;
}

.AudioNode_expandedHeader__PVmRF .AudioNode_buttonsWrapper__Tlz0\+ button img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

/* Expanded footer - transparent at bottom */
.AudioNode_expandedFooter__Z22GN {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

.AudioNode_footerStatus__oa5hk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: var(--audio-node-label-text);
}

.AudioNode_footerControls__7mIrz {
  display: flex;
  align-items: center;
  gap: 4px;
}

.AudioNode_helpButton__RnIgU {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--audio-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.AudioNode_helpButton__RnIgU:hover {
  opacity: 1;
  background-color: var(--audio-node-button-bg);
}

.AudioNode_pinButton__rGwdy {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--audio-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.AudioNode_pinButton__rGwdy:hover {
  opacity: 1;
  background-color: var(--audio-node-button-bg);
}

.AudioNode_pinActive__xII0- {
  opacity: 1;
  color: var(--audio-node-border-selected);
  background-color: var(--audio-node-button-bg) !important;
}

/* Go button in footer */
.AudioNode_goButton__cSKbf {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
}

.AudioNode_goButton__cSKbf:hover:not(:disabled) {
  background-color: var(--audio-node-button-bg-hover);
  transform: scale(1.02);
}

.AudioNode_goButton__cSKbf:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Header Credits - styled like floating buttons */
.AudioNode_headerCredits__O0WYy {
  width: 65px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--audio-node-textarea-border);
  background-color: var(--audio-node-bg);
  color: var(--audio-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s ease;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.AudioNode_headerCredits__O0WYy:hover {
  background-color: var(--audio-node-icon-bg);
  border-color: var(--audio-node-border);
}

.AudioNode_headerCoinIcon__qszPc {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  filter: brightness(0) invert(0);
}

body.high-contrast .AudioNode_headerCoinIcon__qszPc {
  filter: brightness(0) invert(1);
}

.AudioNode_headerCreditsText__GtXhY {
  color: #374151; /* gray-700 - dark text for light mode */
}

body.high-contrast .AudioNode_headerCreditsText__GtXhY {
  color: #e5e7eb; /* gray-200 - light text for dark mode */
}

/* Token counter in expanded footer - inline style */
.AudioNode_expandedFooter__Z22GN .AudioNode_tokenCounter__l-hAU {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  font-size: 0.65rem;
}

/* Floating message bar */
.AudioNode_floatingMessageBar__IHhFA {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

.AudioNode_nodeExpanded__fYptz .AudioNode_floatingMessageBar__IHhFA {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.AudioNode_messageError__O9idc {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

/* Info message style - for status updates */
.AudioNode_messageInfo__Cz5nX {
  background-color: rgba(59, 130, 246, 0.15);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

body.high-contrast .AudioNode_messageError__O9idc {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

body.high-contrast .AudioNode_messageInfo__Cz5nX {
  background-color: rgba(147, 197, 253, 0.2);
  border-color: #93c5fd;
  color: #93c5fd;
}

.AudioNode_messageText__MWLt0 {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Handle icon connected states */
.AudioNode_inputHandleIconConnected__grtOr {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
}

.AudioNode_inputHandleIconIsolated__waEq9 {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: #f59e0b;
  color: white;
}

.AudioNode_outputHandleIconConnected__D\+Pya {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--audio-node-button-bg);
  color: var(--audio-node-button-text);
}

/* Show handle icons on node hover */
.AudioNode_nodeBase__xtUhI:hover .AudioNode_handleIcon__vGgf9 {
  opacity: 1;
  transform: scale(1);
}

/* Collapsed media preview - for audio output */
.AudioNode_collapsedMediaPreview__LoTjM {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--audio-node-bg);
  border-radius: 6px;
  overflow: hidden;
}

/* Audio player with controls in collapsed frame */
.AudioNode_collapsedAudioPlayer__TXxSF {
  width: 100%;
  height: 54px;
  border-radius: 27px;
  background-color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
}

.AudioNode_collapsedAudioPlayer__TXxSF::-webkit-media-controls-panel {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 27px;
}

body.high-contrast .AudioNode_collapsedAudioPlayer__TXxSF {
  background-color: rgba(30, 41, 59, 0.85);
}

body.high-contrast
  .AudioNode_collapsedAudioPlayer__TXxSF::-webkit-media-controls-panel {
  background-color: rgba(30, 41, 59, 0.85);
}

.AudioNode_collapsedAudioPlaceholder__tu3ow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--audio-node-icon-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.AudioNode_collapsedAudioPlaceholder__tu3ow:hover {
  transform: scale(1.05);
  color: var(--audio-node-border-selected);
}

.AudioNode_collapsedAudioPlaceholder__tu3ow span {
  font-size: 0.7rem;
  opacity: 0.8;
}

.AudioNode_collapsedExpandButton__biPyf {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.AudioNode_collapsedExpandButton__biPyf:hover {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

body.high-contrast .AudioNode_collapsedLoading__YOLmU {
  background-color: rgba(31, 41, 55, 0.9);
}

body.high-contrast .AudioNode_collapsedIcon__RP38T {
  background-color: transparent;
  border: none;
}

body.high-contrast .AudioNode_pinActive__xII0- {
  background-color: var(--audio-node-button-bg) !important;
  color: var(--audio-node-button-text) !important;
}

/* ============================================ */
/* AUDIO VISUALIZER STYLES */
/* ============================================ */

@keyframes AudioNode_visualizerBounce__jYLTF {
  0%,
  100% {
    height: 8px;
  }
  50% {
    height: 100%;
  }
}

@keyframes AudioNode_visualizerIdle__it9ao {
  0%,
  100% {
    height: 8px;
    opacity: 0.3;
  }
  50% {
    height: 16px;
    opacity: 0.5;
  }
}

.AudioNode_audioVisualizer__bVtdK {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 20px;
  z-index: 0;
  pointer-events: none;
}

.AudioNode_visualizerBar__ag8mG {
  width: 8px;
  height: 8px;
  background: linear-gradient(
    to top,
    var(--audio-node-border-selected) 0%,
    var(--audio-node-button-bg) 50%,
    var(--audio-node-icon-color) 100%
  );
  border-radius: 4px;
  animation: AudioNode_visualizerIdle__it9ao 2s ease-in-out infinite;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

/* Faster, more dynamic animation when playing */
.AudioNode_visualizerPlaying__9dAEj .AudioNode_visualizerBar__ag8mG {
  animation: AudioNode_visualizerBounce__jYLTF 0.5s ease-in-out infinite;
  opacity: 0.8;
}

/* Different bar heights for more visual variety */
.AudioNode_visualizerBar__ag8mG:nth-child(1) {
  animation-duration: 0.45s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(2) {
  animation-duration: 0.55s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(3) {
  animation-duration: 0.4s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(4) {
  animation-duration: 0.6s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(5) {
  animation-duration: 0.35s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(6) {
  animation-duration: 0.5s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(7) {
  animation-duration: 0.42s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(8) {
  animation-duration: 0.58s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(9) {
  animation-duration: 0.38s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(10) {
  animation-duration: 0.52s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(11) {
  animation-duration: 0.48s;
}
.AudioNode_visualizerBar__ag8mG:nth-child(12) {
  animation-duration: 0.44s;
}

/* When not playing, use idle animation durations */
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(1) {
  animation-duration: 1.8s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(2) {
  animation-duration: 2.2s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(3) {
  animation-duration: 1.6s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(4) {
  animation-duration: 2.4s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(5) {
  animation-duration: 1.5s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(6) {
  animation-duration: 2s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(7) {
  animation-duration: 1.7s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(8) {
  animation-duration: 2.3s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(9) {
  animation-duration: 1.55s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(10) {
  animation-duration: 2.1s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(11) {
  animation-duration: 1.9s;
}
.AudioNode_audioVisualizer__bVtdK:not(.AudioNode_visualizerPlaying__9dAEj) .AudioNode_visualizerBar__ag8mG:nth-child(12) {
  animation-duration: 1.75s;
}

/* High contrast mode adjustments */
body.high-contrast .AudioNode_visualizerBar__ag8mG {
  background: linear-gradient(to top, #93c5fd 0%, #60a5fa 50%, #bfdbfe 100%);
}

body.high-contrast .AudioNode_visualizerPlaying__9dAEj .AudioNode_visualizerBar__ag8mG {
  opacity: 0.9;
}

body.high-contrast .AudioNode_tokenCount__RTbxO {
  color: #e5e7eb;
}

/* Edge preview active states */
.AudioNode_handleWrapperActive__EONDe {
  z-index: 100;
}

.AudioNode_handleActive__C7Buc {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.AudioNode_handleIconActive__aRx8R {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* Model name display in footer - pill style */
.AudioNode_expandedFooter__Z22GN .AudioNode_tokenCounter__l-hAU .AudioNode_modelName__cIhCm {
  color: var(--audio-node-label-text);
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  padding: 1px 6px;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.high-contrast .AudioNode_expandedFooter__Z22GN .AudioNode_tokenCounter__l-hAU .AudioNode_modelName__cIhCm {
  color: #e5e7eb;
  background-color: rgba(99, 102, 241, 0.2);
}

/* Stacked error messages */
.AudioNode_messageStacked__Abk6v {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  bottom: auto;
  top: 100%;
  margin-top: 8px;
}

.AudioNode_messageStackedItem__Vxd2P {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 5px;
  color: #ef4444;
}

.AudioNode_messageStackedItem__Vxd2P .AudioNode_messageText__MWLt0 {
  flex: 1 1;
  font-size: 0.7rem;
}

/* :global(body.high-contrast) .messageStackedItem {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
} */

/* src/nodes/MusicNode.module.css */
@keyframes MusicNode_scaleInNode__imUZS {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}

/* Go button success animation */
@keyframes MusicNode_goSuccessPulse__RgeNw {
  0% {
    transform: scale(1);
    background-color: #10b981; /* green-500 */
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes MusicNode_checkmarkAppear__aEwtY {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.MusicNode_buttonsWrapper__\+grgd .MusicNode_goSuccess__TTGPm {
  background-color: #10b981 !important; /* green-500 */
  color: white !important;
  animation: MusicNode_goSuccessPulse__RgeNw 0.6s ease-out;
  position: relative;
}

.MusicNode_goSuccessIcon__PIGUt {
  animation: MusicNode_checkmarkAppear__aEwtY 0.4s ease-out;
}
/* --- Pastel Theme Overrides for MusicNode --- */
.MusicNode_nodeBase__QoCAr {
  --music-node-floating-bg: #ddd6fe;
  /* Define MusicNode specific colors using pastel violets/purples */
  --music-node-bg: #f5f3ff; /* violet-50 */
  --music-node-border: #c4b5fd; /* violet-300 */
  --music-node-border-selected: #8b5cf6; /* violet-500 */
  --music-node-text: #5b21b6; /* violet-800 */
  --music-node-label-text: #7c3aed; /* violet-600 */
  --music-node-icon-bg: #ede9fe; /* violet-100 */
  --music-node-icon-color: #6d28d9; /* violet-700 */
  --music-node-button-bg: #a78bfa; /* violet-400 */
  --music-node-button-bg-hover: #8b5cf6; /* violet-500 */
  --music-node-button-text: #4c1d95; /* violet-900 */
  --music-node-textarea-bg: #fafaff; /* Lighter violet */
  --music-node-textarea-border: #ddd6fe; /* violet-200 */
  --music-node-loading-text: var(--music-node-label-text);
  --music-node-error-text: #ef4444; /* red-500 */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Apply the overrides */
  border-radius: 8px;
  border: 1px solid var(--music-node-border);
  background-color: var(--music-node-bg);
  color: var(--music-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: MusicNode_scaleInNode__imUZS 0.3s ease-out;
  position: relative;
}

body.no-node-animation .MusicNode_nodeBase__QoCAr {
  animation: none;
}

body.high-contrast .MusicNode_nodeBase__QoCAr {
  --music-node-bg: #111827; /* gray-900 - Just one step darker */
  --music-node-border: #7c3aed; /* violet-600 - Slightly darker purple */
  --music-node-border-selected: #8b5cf6; /* violet-500 - Same as normal border */
  --music-node-text: #f9fafb; /* gray-50 - Just slightly brighter */
  --music-node-label-text: #c4b5fd; /* violet-300 - Keep the same */
  --music-node-icon-bg: #1f2937; /* gray-800 - One step darker */
  --music-node-icon-color: #ddd6fe; /* violet-200 - Keep the same */
  --music-node-button-bg: #7c3aed; /* violet-600 - Slightly darker */
  --music-node-button-bg-hover: #8b5cf6; /* violet-500 - Same as normal button */
  --music-node-button-text: #f9fafb; /* gray-50 - Slightly brighter */
  --music-node-textarea-bg: #1f2937; /* gray-800 - One step darker */
  --music-node-textarea-border: #4b5563; /* gray-600 - Slightly darker */
}

/* Selected state */
.react-flow__node.selected .MusicNode_nodeBase__QoCAr {
  border-color: var(--music-node-border-selected);
  box-shadow: 0 0 0 1px var(--music-node-border-selected);
}

.MusicNode_nodeHeader__QEKH6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px; /* Negative value moves it above the nodeBase top edge */
  left: -0px; /* Negative value moves it left of the nodeBase left edge */
  z-index: 10;
}

.MusicNode_iconWrapper__B2zwA {
  background-color: var(--music-node-icon-bg);
  color: var(--music-node-icon-color);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.MusicNode_buttonsWrapper__\+grgd {
  display: flex;
  gap: 5px;
}

/* Style buttons using specific music node variables */
.MusicNode_buttonsWrapper__\+grgd button {
  padding: 4px 8px;
  border: none;
  background-color: var(--music-node-button-bg);
  color: var(--music-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

/* NEW: Active state for the cloud toggle */
.MusicNode_buttonsWrapper__\+grgd .MusicNode_cloudActive__ZfhNB {
  background-color: #22c55e; /* A distinct green color */
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

/* NEW: Active state for the shop toggle */
.MusicNode_buttonsWrapper__\+grgd .MusicNode_shopActive__CDbnR {
  background-color: #3b82f6; /* A distinct blue color */
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

/* NEW: Active state for the isolate toggle */
.MusicNode_buttonsWrapper__\+grgd .MusicNode_isolateActive__xPFFS {
  background-color: #f59e0b; /* amber-500 - indicates locked/isolated state */
  color: white;
  box-shadow: 0 0 8px #f59e0b;
}

.MusicNode_floatingIcon__bdZKB {
  /* Positioning */

  /* Appearance */
  background-color: var(
    --music-node-floating-bg
  ); /* Optional: Matches node background */
  border-radius: 20%; /* Makes the background circular */
  border: 1px solid var(--music-node-border); /* Optional: Matches node border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Optional: Adds depth */

  /* Size and Alignment */
  width: 28px; /* Adjust size as needed */
  height: 28px; /* Adjust size as needed */
  padding: 0px; /* Adjust padding inside the icon background */
  display: flex; /* Needed for centering the icon inside */
  justify-content: center;
  align-items: center;
}

.MusicNode_buttonsWrapper__\+grgd button:hover {
  background-color: var(--music-node-button-bg-hover);
}

.MusicNode_buttonsWrapper__\+grgd button:disabled {
  background-color: var(--music-node-label-text);
  color: var(--music-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.MusicNode_nodeContent__r6KGH {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.MusicNode_nodeContent__r6KGH textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--music-node-textarea-border);
  border-radius: 4px;
  background-color: var(--music-node-textarea-bg);
  color: var(--music-node-text);
  font-family: inherit;
  min-height: 100px;
  resize: vertical;
}

/* Style the audio player */
.MusicNode_audioPlayer__vxO1Q {
  margin-top: 5px;
  width: 100%;
}

.MusicNode_audioPlayer__vxO1Q audio {
  width: 100%;
  height: 40px;
  /* Use filter for basic color shift - more complex styling is hard */
  /* filter: hue-rotate(220deg) saturate(0.8); Example filter */
}

/* Loading/Error states */
.MusicNode_loading__\+RDbg {
  font-size: smaller;
  color: var(--music-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.MusicNode_error__LNySZ {
  font-size: smaller;
  color: var(--music-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.MusicNode_tokenCounter__2eqqV {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.MusicNode_tokenInfo__EkQwy {
  display: flex;
  align-items: center;
  gap: 8px;
}

.MusicNode_creditInfo__n4sTD {
  display: flex;
  align-items: center;
  gap: 4px;
}

.MusicNode_tokenCount__dIeha {
  color: var(--token-counter-text);
  font-weight: 600;
}

.MusicNode_estimatedCost__sQaCB {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.MusicNode_estimatedCredits__I5B5i {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.MusicNode_creditInfoIcon__SfjW0 {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.MusicNode_creditInfoIcon__SfjW0:hover {
  opacity: 1;
  color: var(--music-node-border-selected);
}

.MusicNode_coinIcon__-rLFI {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.MusicNode_shopIcon__qSMh2 {
  filter: brightness(0) saturate(100%) invert(27%) sepia(9%) saturate(586%)
    hue-rotate(359deg) brightness(92%) contrast(86%);
}

.MusicNode_buttonsWrapper__\+grgd .MusicNode_shopActive__CDbnR .MusicNode_shopIcon__qSMh2 {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.high-contrast .MusicNode_shopIcon__qSMh2 {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

.MusicNode_placeholderContainer__pExH1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
  padding: 10px;
  border: 1px dashed var(--music-node-textarea-border);
  border-radius: 4px;
  background-color: var(--music-node-textarea-bg);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  color: var(--music-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.MusicNode_placeholderContainer__pExH1:hover {
  background-color: var(--music-node-bg);
  border-color: var(--music-node-border-selected);
  color: var(--music-node-text);
}

.MusicNode_playIcon__h8sJw {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.MusicNode_placeholderContainer__pExH1:hover .MusicNode_playIcon__h8sJw {
  transform: scale(1.1);
}

.MusicNode_refetchButton__SzgED {
  background-color: var(
    --music-node-button-bg
  ) !important; /* amber-500 - Debug color */
  color: white !important;
  margin-left: 4px;
  animation: MusicNode_pulse__Tx9-l 2s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MusicNode_refetchButton__SzgED:hover {
  background-color: var(
    --music-node-button-bg-hover
  ) !important; /* amber-600 - Darker on hover */
}

.MusicNode_errorContainer__w9bvi {
  /* background-color: #FEF2F2; red-50 */
  border: 1px solid #fecaca; /* red-200 */
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
}

.MusicNode_errorHint__5Sd0U {
  color: #92400e !important; /* yellow-800 */
  background-color: #fef3c7; /* yellow-100 */
  border: 1px solid #fde68a; /* yellow-200 */
  border-radius: 4px;
  padding: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.2;
}

@keyframes MusicNode_pulse__Tx9-l {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Shop Upload Success Overlay */
.MusicNode_shopOverlay__H9hvp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(16, 185, 129, 0.95);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: MusicNode_shopOverlayFadeIn__3QFa1 0.3s ease-out;
}

@keyframes MusicNode_shopOverlayFadeIn__3QFa1 {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.MusicNode_shopOverlayContent__LCE44 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: MusicNode_shopOverlayBounce__davqB 0.6s ease-out;
}

@keyframes MusicNode_shopOverlayBounce__davqB {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.MusicNode_shopOverlayIcon__8p6Zk {
  width: 64px;
  height: 64px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
  animation: MusicNode_shopIconPulse__qQHEt 1s ease-in-out infinite;
}

@keyframes MusicNode_shopIconPulse__qQHEt {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.MusicNode_shopOverlayText__6yhsM {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Handle Wrapper and Icons */
.MusicNode_handleWrapper__5oqdL {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.MusicNode_handleWrapper__5oqdL > * {
  pointer-events: auto;
}

.MusicNode_handle__sHa9s {
  width: 12px;
  height: 12px;
  background-color: var(--music-node-border-selected); /* violet-500 */
  border: 2px solid var(--music-node-bg); /* violet-50 */
  border-radius: 50%;
}

body.high-contrast .MusicNode_handle__sHa9s {
  background-color: var(--music-node-border-selected);
  border-color: var(--music-node-bg);
}

body.high-contrast .MusicNode_handleIcon__rWKd5 {
  background-color: var(--music-node-icon-bg);
  border-color: var(--music-node-textarea-border);
  color: var(--music-node-icon-color);
}

.MusicNode_handleIcon__rWKd5 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--music-node-icon-bg);
  color: var(--music-node-icon-color);
  border: 1px solid var(--music-node-border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  pointer-events: none;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
  /* Hide by default - only show on node hover */
  opacity: 0;
  transform: scale(0.8);
}

.MusicNode_handleWrapper__5oqdL:hover .MusicNode_handleIcon__rWKd5 {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: var(--music-node-border);
}

/* ============================================ */
/* TWO-FRAME UI STYLES */
/* ============================================ */

/* Node state classes */
.MusicNode_nodeCollapsed__FGzFa {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

.MusicNode_nodeExpanded__MIvK9 {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* Frames Container */
.MusicNode_framesContainer__LGtHV {
  position: relative;
  width: 100%;
  height: 180px; /* Fixed height to match other creation nodes */
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 1: Collapsed View - Slides out to left */
.MusicNode_collapsedFrame__sdPHf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--music-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for audio preview */
.MusicNode_collapsedFrame__sdPHf.MusicNode_hasOutputPreview__puzrI {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.MusicNode_nodeExpanded__MIvK9 .MusicNode_collapsedFrame__sdPHf {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.MusicNode_collapsedIconsRow__W1OQz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.MusicNode_collapsedIconsRow__W1OQz.MusicNode_hasOutput__YfMUb {
  gap: 6px;
}

.MusicNode_collapsedIcon__RlBtk {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.MusicNode_hasOutput__YfMUb .MusicNode_collapsedIcon__RlBtk {
  width: 40px;
  height: 40px;
}

.MusicNode_collapsedIcon__RlBtk img {
  /* Violet tint for dark mode (default) */
  filter: brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(500%)
    hue-rotate(230deg) brightness(100%) contrast(95%);
  transition: filter 0.2s ease;
}

/* Darker violet tint for light mode */
body:not(.high-contrast) .MusicNode_collapsedIcon__RlBtk img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(600%)
    hue-rotate(250deg) brightness(95%) contrast(90%);
}

.MusicNode_collapsedIcon__RlBtk:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.MusicNode_statusIndicators__EjIL8 {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.MusicNode_statusItem__uyXOm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.MusicNode_statusIcon__9g882 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--music-node-textarea-border);
}

.MusicNode_statusActive__GZg8z {
  background-color: transparent;
  color: var(--music-node-border-selected);
  border-color: var(--music-node-border-selected);
}

.MusicNode_statusInactive__TzPjU {
  background-color: transparent;
  color: var(--music-node-label-text);
  opacity: 0.4;
}

.MusicNode_statusLoading__EYQLa {
  background-color: transparent;
  color: #f59e0b; /* amber-500 */
  border-color: #f59e0b;
}

.MusicNode_statusError__8G1dk {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444;
}

.MusicNode_statusCheck__laS1z {
  color: var(--music-node-border-selected);
}

body.high-contrast .MusicNode_statusActive__GZg8z {
  background-color: var(--music-node-button-bg);
  border-color: var(--music-node-border-selected);
  color: var(--music-node-label-text);
}

body.high-contrast .MusicNode_statusCheck__laS1z {
  color: var(--music-node-label-text);
}

.MusicNode_collapsedLoading__8ZuAP {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.MusicNode_outputPreview__MpQxW {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.MusicNode_ghostLines__CtQ6z {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.MusicNode_ghostLine__uSolH {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--music-node-textarea-border) 0%,
    var(--music-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.MusicNode_ghostLine__uSolH:nth-child(2) {
  width: 75%;
}

.MusicNode_ghostLine__uSolH:nth-child(3) {
  width: 50%;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.MusicNode_expandedFrame__\+W7Kx {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* Update nodeContent for expanded frame */
.MusicNode_expandedFrame__\+W7Kx .MusicNode_nodeContent__r6KGH {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
}

.MusicNode_expandedFrame__\+W7Kx .MusicNode_nodeContent__r6KGH textarea {
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  padding-bottom: 36px; /* Space for floating footer */
  border: none;
  border-radius: 4px;
  flex: 1 1;
  min-height: 0;
  resize: none;
  box-sizing: border-box;
  background-color: var(--music-node-bg);
  color: var(--music-node-text);
  font-family: 'Inconsolata', monospace;
}

/* Expanded header - positioned outside the node at top, centered */
.MusicNode_expandedHeader__r2qyj {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.MusicNode_nodeExpanded__MIvK9 .MusicNode_expandedHeader__r2qyj {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Uniform button sizing for floating header */
.MusicNode_expandedHeader__r2qyj .MusicNode_buttonsWrapper__\+grgd button {
  width: 26px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MusicNode_expandedHeader__r2qyj .MusicNode_buttonsWrapper__\+grgd button svg {
  width: 10px;
  height: 10px;
}

.MusicNode_expandedHeader__r2qyj .MusicNode_buttonsWrapper__\+grgd button img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

/* Expanded footer - transparent at bottom */
.MusicNode_expandedFooter__jSJbU {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

.MusicNode_footerStatus__5FB68 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: var(--music-node-label-text);
}

.MusicNode_footerControls__VPJ\+L {
  display: flex;
  align-items: center;
  gap: 4px;
}

.MusicNode_helpButton__2RtXz {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--music-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.MusicNode_helpButton__2RtXz:hover {
  opacity: 1;
  background-color: var(--music-node-button-bg);
}

.MusicNode_pinButton__LkVYE {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--music-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.MusicNode_pinButton__LkVYE:hover {
  opacity: 1;
  background-color: var(--music-node-button-bg);
}

.MusicNode_pinActive__SFxv0 {
  opacity: 1;
  color: var(--music-node-border-selected);
  background-color: var(--music-node-button-bg) !important;
}

/* Go button in footer */
.MusicNode_goButton__u3dX6 {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--music-node-button-bg);
  color: var(--music-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
}

.MusicNode_goButton__u3dX6:hover:not(:disabled) {
  background-color: var(--music-node-button-bg-hover);
  transform: scale(1.02);
}

.MusicNode_goButton__u3dX6:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Header Credits - styled like floating buttons */
.MusicNode_headerCredits__-jFSD {
  width: 65px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--music-node-textarea-border);
  background-color: var(--music-node-bg);
  color: var(--music-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s ease;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.MusicNode_headerCredits__-jFSD:hover {
  background-color: var(--music-node-icon-bg);
  border-color: var(--music-node-border);
}

.MusicNode_headerCoinIcon__nm3d4 {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  filter: brightness(0) invert(0);
}

body.high-contrast .MusicNode_headerCoinIcon__nm3d4 {
  filter: brightness(0) invert(1);
}

.MusicNode_headerCreditsText__jTDRq {
  color: #374151; /* gray-700 - dark text for light mode */
}

body.high-contrast .MusicNode_headerCreditsText__jTDRq {
  color: #e5e7eb; /* gray-200 - light text for dark mode */
}

/* Token counter in expanded footer - inline style */
.MusicNode_expandedFooter__jSJbU .MusicNode_tokenCounter__2eqqV {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  font-size: 0.65rem;
}

/* Floating message bar */
.MusicNode_floatingMessageBar__WkrPT {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

.MusicNode_nodeExpanded__MIvK9 .MusicNode_floatingMessageBar__WkrPT {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.MusicNode_messageError__Ascqg {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

/* Info message style - for status updates */
.MusicNode_messageInfo__6qLI9 {
  background-color: rgba(139, 92, 246, 0.15);
  border: 1px solid #8b5cf6;
  color: #8b5cf6;
}

body.high-contrast .MusicNode_messageError__Ascqg {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

body.high-contrast .MusicNode_messageInfo__6qLI9 {
  background-color: rgba(167, 139, 250, 0.2);
  border-color: #a78bfa;
  color: #a78bfa;
}

.MusicNode_messageText__bAkw6 {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Handle icon connected states */
.MusicNode_inputHandleIconConnected__iLZ2o {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--music-node-button-bg);
  color: var(--music-node-button-text);
}

.MusicNode_outputHandleIconConnected__wiHiV {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--music-node-button-bg);
  color: var(--music-node-button-text);
}

/* Show handle icons on node hover */
.MusicNode_nodeBase__QoCAr:hover .MusicNode_handleIcon__rWKd5 {
  opacity: 1;
  transform: scale(1);
}

/* Edge preview active states */
.MusicNode_handleWrapperActive__UmzGD {
  z-index: 100;
}

.MusicNode_handleActive__5NU4e {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.MusicNode_handleIconActive__sLRZL {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* Collapsed media preview - for audio output */
.MusicNode_collapsedMediaPreview__UdV4X {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--music-node-bg);
  border-radius: 6px;
  overflow: hidden;
}

/* Audio player with controls in collapsed frame */
.MusicNode_collapsedAudioPlayer__Koypo {
  width: 100%;
  height: 54px;
  border-radius: 27px;
  background-color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
}

.MusicNode_collapsedAudioPlayer__Koypo::-webkit-media-controls-panel {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 27px;
}

body.high-contrast .MusicNode_collapsedAudioPlayer__Koypo {
  background-color: rgba(30, 41, 59, 0.85);
}

body.high-contrast
  .MusicNode_collapsedAudioPlayer__Koypo::-webkit-media-controls-panel {
  background-color: rgba(30, 41, 59, 0.85);
}

.MusicNode_collapsedAudioPlaceholder__KBzsQ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--music-node-icon-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.MusicNode_collapsedAudioPlaceholder__KBzsQ:hover {
  transform: scale(1.05);
  color: var(--music-node-border-selected);
}

.MusicNode_collapsedAudioPlaceholder__KBzsQ span {
  font-size: 0.7rem;
  opacity: 0.8;
}

.MusicNode_collapsedExpandButton__wyJtD {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.MusicNode_collapsedExpandButton__wyJtD:hover {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

body.high-contrast .MusicNode_collapsedLoading__8ZuAP {
  background-color: rgba(31, 41, 55, 0.9);
}

body.high-contrast .MusicNode_collapsedIcon__RlBtk {
  background-color: transparent;
  border: none;
}

body.high-contrast .MusicNode_pinActive__SFxv0 {
  background-color: var(--music-node-button-bg) !important;
  color: var(--music-node-button-text) !important;
}

/* ============================================ */
/* MUSIC VISUALIZER STYLES */
/* ============================================ */

@keyframes MusicNode_visualizerBounce__3hL05 {
  0%,
  100% {
    height: 8px;
  }
  50% {
    height: 100%;
  }
}

@keyframes MusicNode_visualizerIdle__R3raO {
  0%,
  100% {
    height: 8px;
    opacity: 0.3;
  }
  50% {
    height: 16px;
    opacity: 0.5;
  }
}

.MusicNode_musicVisualizer__I-b-P {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 20px;
  z-index: 0;
  pointer-events: none;
}

.MusicNode_visualizerBar__Sbsh5 {
  width: 8px;
  height: 8px;
  background: linear-gradient(
    to top,
    var(--music-node-border-selected) 0%,
    var(--music-node-button-bg) 50%,
    var(--music-node-icon-color) 100%
  );
  border-radius: 4px;
  animation: MusicNode_visualizerIdle__R3raO 2s ease-in-out infinite;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

/* Faster, more dynamic animation when playing */
.MusicNode_visualizerPlaying__W2yk1 .MusicNode_visualizerBar__Sbsh5 {
  animation: MusicNode_visualizerBounce__3hL05 0.5s ease-in-out infinite;
  opacity: 0.8;
}

/* Different bar heights for more visual variety */
.MusicNode_visualizerBar__Sbsh5:nth-child(1) {
  animation-duration: 0.45s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(2) {
  animation-duration: 0.55s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(3) {
  animation-duration: 0.4s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(4) {
  animation-duration: 0.6s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(5) {
  animation-duration: 0.35s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(6) {
  animation-duration: 0.5s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(7) {
  animation-duration: 0.42s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(8) {
  animation-duration: 0.58s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(9) {
  animation-duration: 0.38s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(10) {
  animation-duration: 0.52s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(11) {
  animation-duration: 0.48s;
}
.MusicNode_visualizerBar__Sbsh5:nth-child(12) {
  animation-duration: 0.44s;
}

/* When not playing, use idle animation durations */
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(1) {
  animation-duration: 1.8s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(2) {
  animation-duration: 2.2s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(3) {
  animation-duration: 1.6s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(4) {
  animation-duration: 2.4s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(5) {
  animation-duration: 1.5s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(6) {
  animation-duration: 2s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(7) {
  animation-duration: 1.7s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(8) {
  animation-duration: 2.3s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(9) {
  animation-duration: 1.55s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(10) {
  animation-duration: 2.1s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(11) {
  animation-duration: 1.9s;
}
.MusicNode_musicVisualizer__I-b-P:not(.MusicNode_visualizerPlaying__W2yk1) .MusicNode_visualizerBar__Sbsh5:nth-child(12) {
  animation-duration: 1.75s;
}

/* High contrast mode adjustments */
body.high-contrast .MusicNode_visualizerBar__Sbsh5 {
  background: linear-gradient(to top, #c4b5fd 0%, #a78bfa 50%, #ddd6fe 100%);
}

body.high-contrast .MusicNode_visualizerPlaying__W2yk1 .MusicNode_visualizerBar__Sbsh5 {
  opacity: 0.9;
}

body.high-contrast .MusicNode_tokenCount__dIeha {
  color: #e5e7eb;
}

/* Model name display in footer - pill style */
.MusicNode_expandedFooter__jSJbU .MusicNode_tokenCounter__2eqqV .MusicNode_modelName__Hi1aB {
  color: #a78bfa;
  color: var(--music-node-label-text, #a78bfa);
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  padding: 1px 6px;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.high-contrast .MusicNode_expandedFooter__jSJbU .MusicNode_tokenCounter__2eqqV .MusicNode_modelName__Hi1aB {
  color: #e5e7eb;
  background-color: rgba(99, 102, 241, 0.2);
}

/* Stacked error messages */
.MusicNode_messageStacked__ea9TB {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  bottom: auto;
  top: 100%;
  margin-top: 8px;
}

.MusicNode_messageStackedItem__4PBK3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 5px;
  color: #ef4444;
}

.MusicNode_messageStackedItem__4PBK3 .MusicNode_messageText__bAkw6 {
  flex: 1 1;
  font-size: 0.7rem;
}

/* :global(body.high-contrast) .messageStackedItem {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
} */

/* src/MainApp/nodes/Preview Nodes/MediaPreviewNode.module.css */
@keyframes MediaPreviewNode_scaleInNode__v\+N\+I {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.MediaPreviewNode_nodeBase__6OJAG {
  /* Blue "Media Preview" color scheme */
  --media-node-bg: #eff6ff; /* blue-50 */
  --media-node-border: #60a5fa; /* blue-400 */
  --media-node-border-selected: #3b82f6; /* blue-500 */
  --media-node-text: #1e3a8a; /* blue-900 */
  --media-node-label-text: #1d4ed8; /* blue-700 */
  --media-node-icon-bg: #dbeafe; /* blue-100 */
  --media-node-icon-color: #1d4ed8; /* blue-700 */
  --media-node-button-bg: #3b82f6; /* blue-500 */
  --media-node-button-bg-hover: #2563eb; /* blue-600 */
  --media-node-button-text: #eff6ff; /* blue-50 */
  --media-node-textarea-bg: #eff6ff; /* blue-50 */
  --media-node-textarea-border: #bfdbfe; /* blue-200 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  border-radius: 8px;
  border: 1px solid var(--media-node-border);
  background-color: var(--media-node-bg);
  color: var(--media-node-text);
  padding: 12px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease-in-out;
  animation: MediaPreviewNode_scaleInNode__v\+N\+I 0.3s ease-out;
  position: relative;
}

body.no-node-animation .MediaPreviewNode_nodeBase__6OJAG {
  animation: none;
}

body.high-contrast .MediaPreviewNode_nodeBase__6OJAG {
  --media-node-bg: #1f2937;
  --media-node-border: #3b82f6;
  --media-node-border-selected: #60a5fa;
  --media-node-text: #f9fafb;
  --media-node-label-text: #93c5fd;
  --media-node-icon-bg: #374151;
  --media-node-icon-color: #93c5fd;
  --media-node-button-bg: #3b82f6;
  --media-node-button-bg-hover: #60a5fa;
  --media-node-button-text: #1f2937;
  --media-node-textarea-bg: #374151;
  --media-node-textarea-border: #6b7280;
}

.react-flow__node.selected .MediaPreviewNode_nodeBase__6OJAG {
  border-color: var(--media-node-border-selected);
  box-shadow: 0 0 0 1px var(--media-node-border-selected);
}

/* Collapsed State */
.MediaPreviewNode_nodeCollapsed__0iy9T {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* Expanded State */
.MediaPreviewNode_nodeExpanded__xbymC {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* ================================== */
/* Floating Header                    */
/* ================================== */

.MediaPreviewNode_floatingHeader__NFJrI {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.MediaPreviewNode_nodeExpanded__xbymC .MediaPreviewNode_floatingHeader__NFJrI,
.MediaPreviewNode_nodeBase__6OJAG:hover .MediaPreviewNode_floatingHeader__NFJrI {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.MediaPreviewNode_buttonsWrapper__3SQKR {
  display: flex;
  gap: 4px;
}

.MediaPreviewNode_buttonsWrapper__3SQKR button {
  padding: 0;
  border: none;
  background-color: var(--media-node-icon-bg);
  color: var(--media-node-icon-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
}

.MediaPreviewNode_buttonsWrapper__3SQKR button svg {
  width: 10px;
  height: 10px;
}

.MediaPreviewNode_buttonsWrapper__3SQKR button:hover:not(:disabled) {
  background-color: var(--media-node-border);
}

.MediaPreviewNode_buttonsWrapper__3SQKR button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.MediaPreviewNode_helpButton__p8Rse {
  width: 26px;
  border: 1px solid var(--media-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.MediaPreviewNode_helpButton__p8Rse:hover:not(:disabled) {
  border-color: var(--media-node-border-selected) !important;
}

/* ================================== */
/* Two-Frame UI Design Styles         */
/* ================================== */

/* Container for both frames - using overflow hidden for reveal effect */
.MediaPreviewNode_framesContainer__\+95cu {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 1: Collapsed View - Slides out to left */
.MediaPreviewNode_collapsedFrame__nI4SD {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--media-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for output preview */
.MediaPreviewNode_collapsedFrame__nI4SD.MediaPreviewNode_hasOutputPreview__98jeU {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.MediaPreviewNode_nodeExpanded__xbymC .MediaPreviewNode_collapsedFrame__nI4SD {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.MediaPreviewNode_collapsedIconsRow__n7pzV {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.MediaPreviewNode_collapsedIconsRow__n7pzV.MediaPreviewNode_hasOutput__uIwvd {
  gap: 6px;
}

.MediaPreviewNode_collapsedIcon__MO\+Ew {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.MediaPreviewNode_hasOutput__uIwvd .MediaPreviewNode_collapsedIcon__MO\+Ew {
  width: 40px;
  height: 40px;
}

.MediaPreviewNode_collapsedIcon__MO\+Ew img {
  /* Blue tint for the icon */
  filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(500%)
    hue-rotate(200deg) brightness(95%) contrast(90%);
  transition: filter 0.2s ease;
}

/* Dark blue tint for light mode */
body:not(.high-contrast) .MediaPreviewNode_collapsedIcon__MO\+Ew img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(500%)
    hue-rotate(200deg) brightness(95%) contrast(90%);
}

.MediaPreviewNode_collapsedIcon__MO\+Ew:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.MediaPreviewNode_statusIndicators__j13cb {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.MediaPreviewNode_statusItem__ffaZZ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.MediaPreviewNode_statusIcon__aesnf {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--media-node-textarea-border);
}

.MediaPreviewNode_statusActive__ucT5H {
  background-color: transparent;
  color: var(--media-node-border-selected);
  border-color: var(--media-node-border-selected);
}

.MediaPreviewNode_statusInactive__1ZD8N {
  background-color: transparent;
  color: var(--media-node-label-text);
  opacity: 0.4;
}

.MediaPreviewNode_statusOutputActive__5xHfc {
  background-color: transparent;
  color: #22c55e; /* green-500 */
  border-color: #22c55e;
}

.MediaPreviewNode_statusCheck__BkO32 {
  color: var(--media-node-border-selected);
}

.MediaPreviewNode_statusCheckOutput__zKlLa {
  color: #22c55e; /* green-500 */
}

.MediaPreviewNode_collapsedLoading__Z-Vdu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.MediaPreviewNode_outputPreview__3\+mCQ {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  max-height: 90px;
}

.MediaPreviewNode_previewThumbnail__cyKTU {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.9;
}

.MediaPreviewNode_previewPlayIcon__klYdx {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* Edge-to-edge media preview in collapsed frame */
.MediaPreviewNode_collapsedMediaPreview__l4IF- {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}

.MediaPreviewNode_collapsedMediaImage__aDlQ6 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.MediaPreviewNode_collapsedVideoPreview__vpnGY {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(
    135deg,
    var(--media-node-icon-bg) 0%,
    var(--media-node-bg) 100%
  );
  border-radius: 6px;
}

.MediaPreviewNode_collapsedVideoIcon__9DSHM {
  color: var(--media-node-label-text);
  opacity: 0.6;
}

.MediaPreviewNode_collapsedPlayIcon__p-4Kh {
  color: var(--media-node-border-selected);
  opacity: 0.8;
}

/* Video thumbnail with play overlay */
.MediaPreviewNode_collapsedVideoThumbnailContainer__fb07c {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MediaPreviewNode_videoPlayOverlay__YKUZZ {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.MediaPreviewNode_videoPlayButton__\+s2Go {
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

.MediaPreviewNode_collapsedVideoThumbnailContainer__fb07c:hover .MediaPreviewNode_videoPlayOverlay__YKUZZ {
  background-color: rgba(0, 0, 0, 0.4);
}

.MediaPreviewNode_collapsedVideoThumbnailContainer__fb07c:hover .MediaPreviewNode_videoPlayButton__\+s2Go {
  transform: scale(1.1);
}

.MediaPreviewNode_collapsedAudioPreview__VJ3qr {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--media-node-icon-bg) 0%,
    var(--media-node-bg) 100%
  );
  border-radius: 6px;
}

.MediaPreviewNode_collapsedAudioIcon__UsbE9 {
  color: var(--media-node-label-text);
  opacity: 0.6;
}

/* Anchored icon in top-left corner when media exists */
.MediaPreviewNode_anchoredIcon__zJ4Ub {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

.MediaPreviewNode_anchoredIconImage__UAcx8 {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(500%)
    hue-rotate(200deg) brightness(95%) contrast(90%);
}

body.high-contrast .MediaPreviewNode_anchoredIcon__zJ4Ub {
  background-color: rgba(31, 41, 55, 0.9);
}

body.high-contrast .MediaPreviewNode_anchoredIconImage__UAcx8 {
  filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(400%)
    hue-rotate(180deg) brightness(105%) contrast(90%);
}

body.high-contrast .MediaPreviewNode_collapsedVideoPreview__vpnGY,
body.high-contrast .MediaPreviewNode_collapsedAudioPreview__VJ3qr {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

body.high-contrast .MediaPreviewNode_collapsedVideoIcon__9DSHM,
body.high-contrast .MediaPreviewNode_collapsedAudioIcon__UsbE9 {
  color: var(--media-node-label-text);
}

body.high-contrast .MediaPreviewNode_collapsedPlayIcon__p-4Kh {
  color: #60a5fa;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.MediaPreviewNode_expandedFrame__Pf6q0 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

.MediaPreviewNode_nodeContent__Ox5X9 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

/* Full edge-to-edge media container */
.MediaPreviewNode_fullMediaContainer__A570l {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.MediaPreviewNode_fullMediaImage__BzSJh {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.MediaPreviewNode_fullMediaPlayer__a0JpB {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background-color: #000;
}

.MediaPreviewNode_fullAudioPlayer__ikqfj {
  width: 90%;
  max-width: 240px;
}

.MediaPreviewNode_audioPlayerWrapper__78cvS {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--media-node-icon-bg) 0%,
    var(--media-node-bg) 100%
  );
}

.MediaPreviewNode_audioBackgroundIcon__Zq-25 {
  color: var(--media-node-label-text);
  opacity: 0.3;
}

.MediaPreviewNode_fullMediaPlaceholder__1v-AW {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--media-node-icon-bg) 0%,
    var(--media-node-bg) 100%
  );
}

.MediaPreviewNode_mediaPlayOverlay__thZwh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.MediaPreviewNode_fullMediaContainer__A570l:hover .MediaPreviewNode_mediaPlayOverlay__thZwh {
  background-color: rgba(0, 0, 0, 0.4);
}

.MediaPreviewNode_mediaPlayButton__K\+90E {
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
}

.MediaPreviewNode_fullMediaContainer__A570l:hover .MediaPreviewNode_mediaPlayButton__K\+90E {
  transform: scale(1.1);
}

/* Metadata overlay - appears on hover */
.MediaPreviewNode_metadataOverlay__EUd1Z {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

.MediaPreviewNode_expandedFrame__Pf6q0:hover .MediaPreviewNode_metadataOverlay__EUd1Z {
  opacity: 1;
}

.MediaPreviewNode_metadataTop__eX1XM {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    transparent 100%
  );
  padding: 8px 10px;
  border-radius: 6px 6px 0 0;
}

.MediaPreviewNode_metadataFilename__pmj-J {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.MediaPreviewNode_metadataBottom__pZXk6 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  padding: 8px 10px;
  border-radius: 0 0 6px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}

.MediaPreviewNode_metadataInfo__q0FPR {
  display: flex;
  align-items: center;
  gap: 8px;
}

.MediaPreviewNode_metadataType__KpIbv {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.MediaPreviewNode_metadataSize__tNRfd {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
}

.MediaPreviewNode_metadataControls__dEyeA {
  display: flex;
  align-items: center;
  gap: 6px;
}

.MediaPreviewNode_metadataSelectButton__LwZx0 {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.MediaPreviewNode_metadataSelectButton__LwZx0:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.MediaPreviewNode_metadataPinButton__Qiti4 {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.MediaPreviewNode_metadataPinButton__Qiti4:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.MediaPreviewNode_metadataPinButton__Qiti4.MediaPreviewNode_pinActive__o\+gQh {
  background-color: var(--media-node-button-bg);
  color: #fff;
}

/* High contrast mode for full media styles */
body.high-contrast .MediaPreviewNode_fullMediaPlaceholder__1v-AW,
body.high-contrast .MediaPreviewNode_audioPlayerWrapper__78cvS {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

body.high-contrast .MediaPreviewNode_audioBackgroundIcon__Zq-25 {
  color: var(--media-node-label-text);
}

/* Placeholder content when no output */
.MediaPreviewNode_placeholderContent__TkvEk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 8px;
  padding: 20px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.MediaPreviewNode_placeholderIcon__MSeLV {
  color: var(--media-node-label-text);
  opacity: 0.5;
}

.MediaPreviewNode_placeholderText__1kMtm {
  color: var(--media-node-label-text);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Select File Button */
.MediaPreviewNode_selectFileButton__knYjz {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 8px;
  border-radius: 6px;
  border: 1px solid var(--media-node-border);
  background-color: var(--media-node-icon-bg);
  color: var(--media-node-label-text);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.MediaPreviewNode_selectFileButton__knYjz:hover {
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
  border-color: var(--media-node-button-bg);
}

body.high-contrast .MediaPreviewNode_selectFileButton__knYjz {
  background-color: var(--media-node-textarea-bg);
  border-color: var(--media-node-textarea-border);
}

body.high-contrast .MediaPreviewNode_selectFileButton__knYjz:hover {
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
}

/* Media containers */
.MediaPreviewNode_thumbnailContainer__QEzI7 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

.MediaPreviewNode_thumbnailImage__IW2E1 {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 4px;
  transition: filter 0.2s ease;
}

.MediaPreviewNode_thumbnailContainer__QEzI7:hover .MediaPreviewNode_thumbnailImage__IW2E1 {
  filter: brightness(0.8);
}

.MediaPreviewNode_playButtonOverlay__k6wAS {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.MediaPreviewNode_thumbnailContainer__QEzI7:hover .MediaPreviewNode_playButtonOverlay__k6wAS {
  transform: scale(1.1);
}

/* Image container */
.MediaPreviewNode_imageContainer__VJglN {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
}

.MediaPreviewNode_imagePreview__o4KqC {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 4px;
}

/* Media player container */
.MediaPreviewNode_mediaPlayerContainer__wdHos {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.MediaPreviewNode_mediaPlayer__ZfsnO {
  max-width: 100%;
  max-height: 130px;
  border-radius: 4px;
}

.MediaPreviewNode_stopButton__yQiau {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.MediaPreviewNode_stopButton__yQiau:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Audio player container */
.MediaPreviewNode_audioPlayerContainer__Ea6Bl {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.MediaPreviewNode_audioPlayer__6OX0K {
  width: 100%;
  max-width: 240px;
}

/* Audio placeholder */
.MediaPreviewNode_audioPlaceholder__-tE33 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 4px;
  color: var(--media-node-label-text);
  cursor: pointer;
  transition: background 0.2s ease;
}

.MediaPreviewNode_audioPlaceholder__-tE33:hover {
  background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}

/* Footer Controls - Floating bar inside node at bottom */
.MediaPreviewNode_expandedFooter__pW-ot {
  position: absolute;
  bottom: 22px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

.MediaPreviewNode_fileInfo__VD9cX {
  display: flex;
  align-items: center;
  gap: 4px;
}

.MediaPreviewNode_mediaTypeLabel__4mCyW {
  font-size: 0.7rem;
  color: var(--media-node-label-text);
  font-weight: 500;
}

.MediaPreviewNode_footerControls__YYMLF {
  display: flex;
  align-items: center;
  gap: 4px;
}

.MediaPreviewNode_pinButton__0oCdd {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--media-node-textarea-border);
  background-color: var(--media-node-textarea-bg);
  color: var(--media-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.MediaPreviewNode_pinButton__0oCdd:hover {
  background-color: var(--media-node-icon-bg);
  border-color: var(--media-node-border);
}

.MediaPreviewNode_pinActive__o\+gQh {
  background-color: var(--media-node-button-bg) !important;
  color: var(--media-node-button-text) !important;
  border-color: var(--media-node-border-selected) !important;
}

/* Filename bar at bottom of expanded frame */
.MediaPreviewNode_filenameBar__t8PIq {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  font-size: 0.7rem;
  color: var(--media-node-text);
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Floating Message Bar - positioned outside node at bottom */
.MediaPreviewNode_floatingMessageBar__rc4vI {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

/* Animate message bar in when expanded */
.MediaPreviewNode_nodeExpanded__xbymC .MediaPreviewNode_floatingMessageBar__rc4vI {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Info message style */
.MediaPreviewNode_messageInfo__LpdZ9 {
  background-color: rgba(59, 130, 246, 0.15);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

.MediaPreviewNode_messageText__C\+JPi {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Handle wrapper and icon styling */
.MediaPreviewNode_handleWrapper__w7Ytl {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.MediaPreviewNode_handleWrapper__w7Ytl > * {
  pointer-events: auto;
}

.MediaPreviewNode_handle__CIPSo {
  width: 12px;
  height: 12px;
  background-color: var(--media-node-border-selected);
  border: 2px solid var(--media-node-bg);
  border-radius: 50%;
}

.MediaPreviewNode_handleIcon__WdLGn {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--media-node-icon-bg);
  border: 1px solid var(--media-node-textarea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--media-node-icon-color);
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Show handle icons on node hover */
.MediaPreviewNode_nodeBase__6OJAG:hover .MediaPreviewNode_handleIcon__WdLGn {
  opacity: 1;
  transform: scale(1);
}

/* Input handle icon - when data is connected */
.MediaPreviewNode_inputHandleIconConnected__anSLq {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
}

/* Output handle icon - when data is available */
.MediaPreviewNode_handleIconConnected__agJld {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
}

body.high-contrast .MediaPreviewNode_handle__CIPSo {
  background-color: var(--media-node-border-selected);
  border-color: var(--media-node-bg);
}

body.high-contrast .MediaPreviewNode_handleIcon__WdLGn {
  background-color: var(--media-node-icon-bg);
  border-color: var(--media-node-textarea-border);
  color: var(--media-node-icon-color);
}

body.high-contrast .MediaPreviewNode_inputHandleIconConnected__anSLq,
body.high-contrast .MediaPreviewNode_handleIconConnected__agJld {
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
}

/* High Contrast dark theme adjustments */
body.high-contrast .MediaPreviewNode_statusActive__ucT5H {
  color: var(--media-node-label-text);
  border-color: var(--media-node-border-selected);
}

body.high-contrast .MediaPreviewNode_statusOutputActive__5xHfc {
  color: #4ade80;
  border-color: #4ade80;
}

body.high-contrast .MediaPreviewNode_statusCheck__BkO32 {
  color: var(--media-node-label-text);
}

body.high-contrast .MediaPreviewNode_statusCheckOutput__zKlLa {
  color: #4ade80;
}

body.high-contrast .MediaPreviewNode_collapsedIcon__MO\+Ew {
  background-color: transparent;
  border: none;
}

body.high-contrast .MediaPreviewNode_collapsedIcon__MO\+Ew img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(400%)
    hue-rotate(180deg) brightness(105%) contrast(90%);
}

body.high-contrast .MediaPreviewNode_pinButton__0oCdd {
  background-color: var(--media-node-textarea-bg);
  border-color: var(--media-node-textarea-border);
  color: var(--media-node-label-text);
}

body.high-contrast .MediaPreviewNode_messageInfo__LpdZ9 {
  background-color: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
  color: #60a5fa;
}

body.high-contrast .MediaPreviewNode_collapsedLoading__Z-Vdu {
  background-color: rgba(31, 41, 55, 0.8);
}

body.high-contrast .MediaPreviewNode_audioPlaceholder__-tE33 {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

body.high-contrast .MediaPreviewNode_audioPlaceholder__-tE33:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

/* Edge preview active states */
.MediaPreviewNode_handleWrapperActive__jGugt {
  z-index: 100;
}

.MediaPreviewNode_handleActive__reNE6 {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.MediaPreviewNode_handleIconActive__bt8rS {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* Smart Transform Node - Single Frame Design with Floating Header */

/* Animation for node entry */
@keyframes SmartTransformNode_scaleInNode__c\+xRg {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Smart Transform Node Theme - Indigo */
.SmartTransformNode_nodeBase__ZsNHy {
  /* Define Smart Transform Node specific colors */
  --smart-node-bg: #eef2ff; /* indigo-50 */
  --smart-node-border: #a5b4fc; /* indigo-300 */
  --smart-node-border-selected: #6366f1; /* indigo-500 */
  --smart-node-text: #3730a3; /* indigo-800 */
  --smart-node-label-text: #4f46e5; /* indigo-600 */
  --smart-node-icon-bg: #e0e7ff; /* indigo-100 */
  --smart-node-icon-color: #4338ca; /* indigo-700 */
  --smart-node-button-bg: #818cf8; /* indigo-400 */
  --smart-node-button-bg-hover: #6366f1; /* indigo-500 */
  --smart-node-button-text: #e0e7ff; /* indigo-100 */
  --smart-node-display-bg: #f8faff;
  --smart-node-display-border: #e0e7ff;
  --smart-node-success-text: #059669; /* emerald-600 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Base styling */
  position: relative;
  width: 220px;
  font-family: 'Inconsolata', monospace;
  animation: SmartTransformNode_scaleInNode__c\+xRg 0.3s ease-out;
}

body.no-node-animation .SmartTransformNode_nodeBase__ZsNHy {
  animation: none;
}

/* Dark mode theme */
body.high-contrast .SmartTransformNode_nodeBase__ZsNHy {
  --smart-node-bg: #111827; /* gray-900 */
  --smart-node-border: #4f46e5; /* indigo-600 */
  --smart-node-border-selected: #6366f1; /* indigo-500 */
  --smart-node-text: #f9fafb; /* gray-50 */
  --smart-node-label-text: #a5b4fc; /* indigo-300 */
  --smart-node-icon-bg: #1f2937; /* gray-800 */
  --smart-node-icon-color: #c7d2fe; /* indigo-200 */
  --smart-node-button-bg: #4f46e5; /* indigo-600 */
  --smart-node-button-bg-hover: #6366f1; /* indigo-500 */
  --smart-node-button-text: #f9fafb; /* gray-50 */
  --smart-node-display-bg: #1f2937; /* gray-800 */
  --smart-node-display-border: #4b5563; /* gray-600 */
}

/* ==================== FLOATING HEADER ==================== */
.SmartTransformNode_floatingHeader__Dl5Ng {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.SmartTransformNode_nodeHovered__TQa\+D .SmartTransformNode_floatingHeader__Dl5Ng,
.SmartTransformNode_nodeBase__ZsNHy:hover .SmartTransformNode_floatingHeader__Dl5Ng {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Buttons Wrapper */
.SmartTransformNode_buttonsWrapper__z4JFB {
  display: flex;
  gap: 4px;
}

.SmartTransformNode_buttonsWrapper__z4JFB button {
  padding: 0;
  border: none;
  background-color: var(--smart-node-button-bg);
  color: var(--smart-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
}

.SmartTransformNode_buttonsWrapper__z4JFB button svg {
  width: 10px;
  height: 10px;
}

.SmartTransformNode_buttonsWrapper__z4JFB button:hover:not(:disabled) {
  background-color: var(--smart-node-button-bg-hover);
}

.SmartTransformNode_buttonsWrapper__z4JFB button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Regenerate Button */
.SmartTransformNode_regenerateButton__bxgf- {
  background-color: var(--smart-node-button-bg) !important;
  color: var(--smart-node-button-text) !important;
  width: 90px;
  border: 1px solid var(--smart-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.SmartTransformNode_regenerateButton__bxgf-:hover:not(:disabled) {
  background-color: var(--smart-node-button-bg-hover) !important;
  border-color: var(--smart-node-border-selected) !important;
}

/* ==================== MAIN FRAME ==================== */
.SmartTransformNode_mainFrame__oWo-g {
  border-radius: 8px;
  border: 1px solid var(--smart-node-border);
  background-color: var(--smart-node-bg);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Selected state */
.react-flow__node.selected .SmartTransformNode_mainFrame__oWo-g {
  border-color: var(--smart-node-border-selected);
  box-shadow: 0 0 0 1px var(--smart-node-border-selected);
}

/* ==================== CONTENT AREA ==================== */
.SmartTransformNode_contentArea__1Fx-5 {
  padding: 12px 16px;
  min-height: 80px;
}

/* Message Container */
.SmartTransformNode_messageContainer__K60j- {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  text-align: center;
}

.SmartTransformNode_iconLarge__rCief {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SmartTransformNode_iconLarge__rCief img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Indigo tint for smart transform node */
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%)
    hue-rotate(220deg) brightness(95%) contrast(90%);
}

body.high-contrast .SmartTransformNode_iconLarge__rCief img {
  /* Brighter indigo for dark mode */
  filter: brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(500%)
    hue-rotate(200deg) brightness(100%) contrast(95%);
}

.SmartTransformNode_messageText__93ibD {
  font-size: 0.8rem;
  color: var(--smart-node-label-text);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

/* ==================== FOOTER ==================== */
.SmartTransformNode_footer__oqKbo {
  background-color: var(--smart-node-display-bg);
  border-top: 1px solid var(--smart-node-display-border);
  padding: 8px 12px;
}

.SmartTransformNode_statusInfo__wWBNX {
  display: flex;
  align-items: center;
  gap: 6px;
}

.SmartTransformNode_statusIcon__Llgj8 {
  color: var(--smart-node-success-text);
  font-size: 14px;
  flex-shrink: 0;
}

.SmartTransformNode_statusText__q6rv5 {
  font-size: 0.75rem;
  color: var(--smart-node-label-text);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ==================== HANDLES ==================== */
.SmartTransformNode_handle__5Odqj {
  width: 12px;
  height: 12px;
  background-color: var(--smart-node-border-selected);
  border: 2px solid var(--smart-node-bg);
  border-radius: 50%;
}

body.high-contrast .SmartTransformNode_handle__5Odqj {
  background-color: var(--smart-node-border-selected);
  border-color: var(--smart-node-bg);
}

/* src/nodes/ImageGenerationNode.module.css */
@keyframes ImageGenerationNode_scaleInNode__cX0iD {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Go button success animation */
@keyframes ImageGenerationNode_goSuccessPulse__Y7mu7 {
  0% {
    transform: scale(1);
    background-color: #10b981; /* green-500 */
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes ImageGenerationNode_checkmarkAppear__P9OTQ {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.ImageGenerationNode_nodeBase__1SUZP {
  /* New "Castle" color scheme using slates and indigos */
  --image-node-bg: #f1f5f9; /* slate-100 */
  --image-node-border: #cbd5e1; /* slate-300 */
  --image-node-border-selected: #4f46e5; /* indigo-600 */
  --image-node-text: #1e293b; /* slate-800 */
  --image-node-label-text: #334155; /* slate-700 */
  --image-node-icon-bg: #e2e8f0; /* slate-200 */
  --image-node-icon-color: #334155; /* slate-700 */
  --image-node-button-bg: #6366f1; /* indigo-500 */
  --image-node-button-bg-hover: #4f46e5; /* indigo-600 */
  --image-node-button-text: #e0e7ff; /* indigo-100 */
  --image-node-textarea-bg: #f8fafc; /* slate-50 */
  --image-node-textarea-border: #e2e8f0; /* slate-200 */
  --image-node-loading-text: var(--image-node-label-text);
  --image-node-error-text: #ef4444; /* red-500 */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  border-radius: 8px;
  border: 1px solid var(--image-node-border);
  background-color: var(--image-node-bg);
  color: var(--image-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: ImageGenerationNode_scaleInNode__cX0iD 0.3s ease-out;
  position: relative;
}

body.no-node-animation .ImageGenerationNode_nodeBase__1SUZP {
  animation: none;
}

body.high-contrast .ImageGenerationNode_nodeBase__1SUZP {
  --image-node-bg: #111827; /* gray-900 - Just one step darker */
  --image-node-border: #3730a3; /* indigo-700 - Slightly darker indigo */
  --image-node-border-selected: #4f46e5; /* indigo-600 - Same as normal border */
  --image-node-text: #f9fafb; /* gray-50 - Just slightly brighter */
  --image-node-label-text: #a5b4fc; /* indigo-300 - Keep the same */
  --image-node-icon-bg: #1f2937; /* gray-800 - One step darker */
  --image-node-icon-color: #c7d2fe; /* indigo-200 - Keep the same */
  --image-node-button-bg: #3730a3; /* indigo-700 - Slightly darker */
  --image-node-button-bg-hover: #4f46e5; /* indigo-600 - Same as normal button */
  --image-node-button-text: #f9fafb; /* gray-50 - Slightly brighter */
  --image-node-textarea-bg: #1f2937; /* gray-800 - One step darker */
  --image-node-textarea-border: #4b5563; /* gray-600 - Slightly darker */
}

.react-flow__node.selected .ImageGenerationNode_nodeBase__1SUZP {
  border-color: var(--image-node-border-selected);
  box-shadow: 0 0 0 1px var(--image-node-border-selected);
}

.ImageGenerationNode_floatingIcon__h2uyN {
  background-color: #e2e8f0;
  color: var(--image-node-icon-color);
  border-radius: 20%;
  border: 1px solid var(--image-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ImageGenerationNode_nodeHeader__FxgmQ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 10;
}

.ImageGenerationNode_buttonsWrapper__d2Qtu {
  display: flex;
  gap: 5px;
}

.ImageGenerationNode_buttonsWrapper__d2Qtu button {
  padding: 4px 8px;
  border: none;
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata';
}

/* NEW: Active state for the cloud toggle */
.ImageGenerationNode_buttonsWrapper__d2Qtu .ImageGenerationNode_cloudActive__3kEtT {
  background-color: #22c55e; /* A distinct green color */
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

/* NEW: Active state for the isolate toggle */
.ImageGenerationNode_buttonsWrapper__d2Qtu .ImageGenerationNode_isolateActive__AHRAN {
  background-color: #f59e0b; /* amber-500 - indicates locked/isolated state */
  color: white;
  box-shadow: 0 0 8px #f59e0b;
}

/* NEW: Active state for the shop toggle */
.ImageGenerationNode_buttonsWrapper__d2Qtu .ImageGenerationNode_shopActive__gQmcq {
  background-color: #3b82f6; /* A distinct blue color */
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

/* Settings button style */
.ImageGenerationNode_settingsButton__Y4W8c {
  /* Inherits from .buttonsWrapper button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ImageGenerationNode_buttonsWrapper__d2Qtu button:hover {
  background-color: var(--image-node-button-bg-hover);
}

.ImageGenerationNode_buttonsWrapper__d2Qtu button:disabled {
  background-color: var(--image-node-label-text);
  color: var(--image-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.ImageGenerationNode_nodeContent__-Pz2C {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
}

.ImageGenerationNode_nodeContent__-Pz2C textarea {
  /* Box Model */
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  padding-bottom: 36px; /* Space for floating footer */
  border: none; /* No stroke - matches outer background */
  border-radius: 4px;
  flex: 1 1;
  min-height: 0;
  resize: none; /* Disable resize since it fills the space */
  box-sizing: border-box;

  /* Colors and Typography */
  background-color: var(--image-node-bg); /* Same as node background */
  color: var(--image-node-text);
  font-family: 'Inconsolata', monospace; /* Monospace for code/prompt */
}

/* Expanded Output Preview - shown when toggle is active */
.ImageGenerationNode_expandedOutputPreview__OIAkz {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
  padding-bottom: 28px; /* Space for floating footer */
  box-sizing: border-box;
}

.ImageGenerationNode_expandedOutputImage__AdZ2S {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.ImageGenerationNode_buttonsWrapper__d2Qtu .ImageGenerationNode_goSuccess__lZGFI {
  background-color: #10b981 !important; /* green-500 */
  color: white !important;
  animation: ImageGenerationNode_goSuccessPulse__Y7mu7 0.6s ease-out;
  position: relative;
}

.ImageGenerationNode_goSuccessIcon__Z3VYW {
  animation: ImageGenerationNode_checkmarkAppear__P9OTQ 0.4s ease-out;
}

.ImageGenerationNode_loading__g-QZF {
  font-size: smaller;
  color: var(--image-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.ImageGenerationNode_error__To1\+v {
  font-size: smaller;
  color: var(--image-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.ImageGenerationNode_modelGrid__s-zKz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  max-height: 400px;
  overflow-y: auto;
  padding: 5px;
}

.ImageGenerationNode_categoryHeaderFullWidth__3RZje {
  grid-column: 1 / -1;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--image-node-text);
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--image-node-border);
}
.ImageGenerationNode_categoryHeaderFullWidth__3RZje:first-of-type {
  margin-top: 0;
}

.ImageGenerationNode_modelButton__9nenj {
  padding: 10px 12px;
  border: 1px solid var(--image-node-border);
  background-color: var(--image-node-bg);
  color: var(--image-node-text);
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  min-height: 60px;
}

.ImageGenerationNode_modelButton__9nenj:hover {
  background-color: var(--image-node-icon-bg);
  border-color: var(--image-node-border-selected);
}

.ImageGenerationNode_modelButton__9nenj.ImageGenerationNode_selected__zpL0A {
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
  border-color: var(--image-node-button-bg-hover);
}

.ImageGenerationNode_modelInfo__X-Y73 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: 8px;
}

.ImageGenerationNode_modelName__nsrT- {
  font-weight: bold;
  font-size: 0.95em;
  display: flex;
  align-items: center;
}

.ImageGenerationNode_costIndicator__g\+qtj {
  margin-left: 8px;
  font-size: 0.9em;
  color: var(--image-node-label-text);
}

.ImageGenerationNode_modelButton__9nenj.ImageGenerationNode_selected__zpL0A .ImageGenerationNode_costIndicator__g\+qtj {
  color: var(--image-node-button-text);
  opacity: 0.8;
}

.ImageGenerationNode_infoIcon__v1vzZ {
  font-size: 1.1em;
  color: var(--image-node-label-text);
  cursor: pointer;
  margin-left: auto;
  padding: 5px;
  border-radius: 50%;
  transition: color 0.2s ease;
}

.ImageGenerationNode_infoIcon__v1vzZ:hover {
  color: var(--image-node-border-selected);
}

.ImageGenerationNode_modelButton__9nenj.ImageGenerationNode_selected__zpL0A .ImageGenerationNode_infoIcon__v1vzZ {
  color: var(--image-node-button-text);
  opacity: 0.8;
}

.ImageGenerationNode_modalActions__aVuW8 {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.ImageGenerationNode_modalActions__aVuW8 .ImageGenerationNode_cancelButton__GyhE6 {
  padding: 8px 15px;
  background-color: var(--image-node-label-text);
  color: var(--image-node-bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.ImageGenerationNode_imageContainer__YZfT4 {
  margin-top: 5px;
  width: 100%;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--image-node-border);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ImageGenerationNode_imagePreview__eNDoI {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.ImageGenerationNode_tokenCounter__lt6jp {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.ImageGenerationNode_tokenInfo__5EWlV {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ImageGenerationNode_creditInfo__2XFqW {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ImageGenerationNode_tokenCount__-qCcT {
  color: var(--token-counter-text);
  font-weight: 600;
}

.ImageGenerationNode_modelName__nsrT- {
  color: var(--node-label-text);
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  padding: 1px 6px;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 4px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ImageGenerationNode_estimatedCost__A1XXn {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.ImageGenerationNode_estimatedCredits__L0LNT {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.ImageGenerationNode_creditInfoIcon__byevz {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.ImageGenerationNode_creditInfoIcon__byevz:hover {
  opacity: 1;
  color: var(--image-node-border-selected);
}

.ImageGenerationNode_coinIcon__zVAIT {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.ImageGenerationNode_shopIcon__CnILN {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Image input indicator styling - standardized across all nodes */
.ImageGenerationNode_inputImageIndicator__ZH-Qx {
  font-size: 0.8rem;
  color: var(--image-node-border-selected);
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin: 4px 0;
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ImageGenerationNode_imageTimestamp__Kzik9 {
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: normal;
}

.ImageGenerationNode_compatible__GikyB {
  border-color: #10b981 !important; /* green */
  background-color: #d1fae5 !important; /* light green */
  color: #065f46 !important; /* dark green */
}

.ImageGenerationNode_incompatible__CSaGy {
  border-color: #f59e0b !important; /* amber */
  background-color: #fef3c7 !important; /* light amber */
  color: #92400e !important; /* dark amber */
}

.ImageGenerationNode_requirementText__duokY {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: normal;
  margin-top: 2px;
}

.ImageGenerationNode_optionalPrompt__RXE5w {
  opacity: 0.7;
  font-style: italic;
}

/* Shop Upload Success Overlay */
.ImageGenerationNode_shopOverlay__ULhHh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(16, 185, 129, 0.95); /* green with high opacity */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: ImageGenerationNode_shopOverlayFadeIn__jeHLT 0.3s ease-out;
}

@keyframes ImageGenerationNode_shopOverlayFadeIn__jeHLT {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ImageGenerationNode_shopOverlayContent__Tf0kh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: ImageGenerationNode_shopOverlayBounce__lKj8u 0.6s ease-out;
}

@keyframes ImageGenerationNode_shopOverlayBounce__lKj8u {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.ImageGenerationNode_shopOverlayIcon__nhJbG {
  width: 64px;
  height: 64px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
  animation: ImageGenerationNode_shopIconPulse__RsrzR 1s ease-in-out infinite;
}

@keyframes ImageGenerationNode_shopIconPulse__RsrzR {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.ImageGenerationNode_shopOverlayText__tO8Zq {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Handle Wrapper and Icons */
.ImageGenerationNode_handleWrapper__uZnUo {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.ImageGenerationNode_handleWrapper__uZnUo > * {
  pointer-events: auto;
}

.ImageGenerationNode_handle__kE0Rn {
  width: 12px;
  height: 12px;
  background-color: #ec4899;
  border: 2px solid #fce7f3;
  border-radius: 50%;
}

.ImageGenerationNode_handleIcon__U-Vh1 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--image-node-icon-bg);
  color: var(--image-node-icon-color);
  border: 1px solid var(--image-node-border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  pointer-events: none;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
}

.ImageGenerationNode_handleWrapper__uZnUo:hover .ImageGenerationNode_handleIcon__U-Vh1 {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: var(--image-node-border);
}

/* ================================== */
/* Two-Frame UI Design Styles         */
/* ================================== */

/* Container for both frames - using overflow hidden for reveal effect */
.ImageGenerationNode_framesContainer__A3bOf {
  position: relative;
  width: 100%;
  height: 180px; /* Fixed height to prevent shrinking */
  overflow: hidden;
  border-radius: 6px;
}

/* Collapsed State */
.ImageGenerationNode_nodeCollapsed__wi4PL {
  min-width: 280px;
  max-width: 350px;
  width: 280px; /* Fixed width to prevent size changes */
  padding: 12px;
}

/* Expanded State */
.ImageGenerationNode_nodeExpanded__HwFqt {
  min-width: 280px;
  max-width: 350px;
  width: 280px; /* Fixed width to prevent size changes */
  padding: 12px; /* Same as collapsed to prevent shrinking */
}

/* Frame 1: Collapsed View - Slides out to left */
.ImageGenerationNode_collapsedFrame__TKkrc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--image-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, use different layout for edge-to-edge image */
.ImageGenerationNode_collapsedFrame__TKkrc.ImageGenerationNode_hasOutputPreview__hphNr {
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

/* Slide out animation when expanding */
.ImageGenerationNode_nodeExpanded__HwFqt .ImageGenerationNode_collapsedFrame__TKkrc {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons when no output */
.ImageGenerationNode_collapsedIconsRow__ZwpbC {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ImageGenerationNode_collapsedIcon__6sTGL {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ImageGenerationNode_collapsedIcon__6sTGL img {
  /* Indigo tint for dark mode (default) */
  display: block;
  margin: auto;
  filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%)
    hue-rotate(210deg) brightness(95%) contrast(90%);
  transition: filter 0.2s ease;
}

/* Dark indigo tint for light mode */
body:not(.high-contrast) .ImageGenerationNode_collapsedIcon__6sTGL img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%)
    hue-rotate(220deg) brightness(95%) contrast(90%);
}

.ImageGenerationNode_collapsedIcon__6sTGL:hover {
  transform: scale(1.05);
}

/* Anchored Icon - positioned in top-left corner when output exists */
.ImageGenerationNode_anchoredIcon__1kXlM {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.high-contrast .ImageGenerationNode_anchoredIcon__1kXlM {
  background-color: rgba(30, 41, 59, 0.9);
}

.ImageGenerationNode_anchoredIconImage__lFJRe {
  width: 18px;
  height: 18px;
  /* Indigo tint */
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%)
    hue-rotate(220deg) brightness(95%) contrast(90%);
}

body.high-contrast .ImageGenerationNode_anchoredIconImage__lFJRe {
  filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(600%)
    hue-rotate(210deg) brightness(95%) contrast(90%);
}

/* Edge-to-edge media preview in collapsed state */
.ImageGenerationNode_collapsedMediaPreview__nPKQl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 6px;
  overflow: hidden;
}

.ImageGenerationNode_collapsedMediaImage__QubDA {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Status Indicators Row */
.ImageGenerationNode_statusIndicators__tN5uW {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.ImageGenerationNode_statusItem__\+0Wyw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ImageGenerationNode_statusIcon__wv7fw {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--image-node-textarea-border);
}

.ImageGenerationNode_statusActive__RJVcf {
  background-color: transparent;
  color: var(--image-node-border-selected);
  border-color: var(--image-node-border-selected);
}

.ImageGenerationNode_statusInactive__zh9Qw {
  background-color: transparent;
  color: var(--image-node-label-text);
  opacity: 0.4;
}

.ImageGenerationNode_statusOutputActive__2So\+T {
  background-color: transparent;
  color: #3b82f6; /* blue-500 */
  border-color: #3b82f6; /* blue-500 */
}

.ImageGenerationNode_statusRequired__ng7Vc {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444; /* red-500 */
}

.ImageGenerationNode_statusCheck__-0DCg {
  color: var(--image-node-border-selected);
}

.ImageGenerationNode_statusCheckOutput__B8-t6 {
  color: #3b82f6; /* blue-500 */
}

.ImageGenerationNode_statusWarning__\+mwcs {
  color: #ef4444; /* red-500 */
}

.ImageGenerationNode_collapsedLoading__tb2vQ {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
  z-index: 15;
}

body.high-contrast .ImageGenerationNode_collapsedLoading__tb2vQ {
  background-color: rgba(30, 41, 59, 0.8);
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.ImageGenerationNode_expandedFrame__gtd-e {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

/* Expanded header - positioned outside the node at top, centered */
.ImageGenerationNode_expandedHeader__0zVCY {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

/* Animate header in when expanded */
.ImageGenerationNode_nodeExpanded__HwFqt .ImageGenerationNode_expandedHeader__0zVCY {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s; /* Slight delay after slide starts */
}

/* Override nodeHeader styles for two-frame UI */
.ImageGenerationNode_nodeExpanded__HwFqt .ImageGenerationNode_nodeHeader__FxgmQ,
.ImageGenerationNode_nodeCollapsed__wi4PL .ImageGenerationNode_nodeHeader__FxgmQ {
  display: none;
}

/* Header Credits - styled like floating buttons, 2.5x width */
.ImageGenerationNode_headerCredits__dbFp8 {
  width: 65px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--image-node-textarea-border);
  background-color: var(--image-node-bg);
  color: var(--image-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s ease;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ImageGenerationNode_headerCredits__dbFp8:hover {
  background-color: var(--image-node-icon-bg);
  border-color: var(--image-node-border);
}

.ImageGenerationNode_headerCoinIcon__dT792 {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  /* Black tint for light mode visibility */
  filter: brightness(0) invert(0);
}

/* White tint for dark mode visibility */
body.high-contrast .ImageGenerationNode_headerCoinIcon__dT792 {
  filter: brightness(0) invert(1);
}

.ImageGenerationNode_headerCreditsText__6hZhw {
  color: #374151; /* gray-700 - dark text for light mode */
}

body.high-contrast .ImageGenerationNode_headerCreditsText__6hZhw {
  color: #e5e7eb; /* gray-200 - light text for dark mode */
}

/* Floating Message Bar - positioned outside node at bottom */
.ImageGenerationNode_floatingMessageBar__OBpdM {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

/* Animate message bar in when expanded */
.ImageGenerationNode_nodeExpanded__HwFqt .ImageGenerationNode_floatingMessageBar__OBpdM {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Error message style */
.ImageGenerationNode_messageError__8Bb6X {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

/* Warning message style */
.ImageGenerationNode_messageWarning__eT5Bb {
  background-color: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

/* Info message style */
.ImageGenerationNode_messageInfo__Y6-UN {
  background-color: rgba(59, 130, 246, 0.15);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

.ImageGenerationNode_messageText__W9ZW- {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Stacked message bar for multiple errors */
.ImageGenerationNode_messageStacked__a4RLW {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  bottom: auto;
  top: 100%;
  margin-top: 8px;
}

.ImageGenerationNode_messageStackedItem__8UK-6 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 5px;
  color: #ef4444;
}

.ImageGenerationNode_messageStackedItem__8UK-6 .ImageGenerationNode_messageText__W9ZW- {
  flex: 1 1;
  font-size: 0.7rem;
}

/* High contrast theme for message bar */
body.high-contrast .ImageGenerationNode_messageError__8Bb6X {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

body.high-contrast .ImageGenerationNode_messageWarning__eT5Bb {
  background-color: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

body.high-contrast .ImageGenerationNode_messageInfo__Y6-UN {
  background-color: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
  color: #60a5fa;
}

/* Footer Controls - Floating bar inside node at bottom */
.ImageGenerationNode_expandedFooter__FAyKj {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

/* Token counter in expanded footer - inline style */
.ImageGenerationNode_expandedFooter__FAyKj .ImageGenerationNode_tokenCounter__lt6jp {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  font-size: 0.65rem;
}

.ImageGenerationNode_footerControls__a4Z8S {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ImageGenerationNode_helpButton__SggXy {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--image-node-textarea-border);
  background-color: var(--image-node-textarea-bg);
  color: var(--image-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ImageGenerationNode_helpButton__SggXy:hover {
  background-color: var(--image-node-icon-bg);
  border-color: var(--image-node-border);
  color: var(--image-node-border-selected);
}

.ImageGenerationNode_pinButton__cTRis {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--image-node-textarea-border);
  background-color: var(--image-node-textarea-bg);
  color: var(--image-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ImageGenerationNode_pinButton__cTRis:hover {
  background-color: var(--image-node-icon-bg);
  border-color: var(--image-node-border);
}

.ImageGenerationNode_pinActive__Tqhn3 {
  background-color: var(--image-node-button-bg) !important;
  color: var(--image-node-button-text) !important;
  border-color: var(--image-node-border-selected) !important;
}

/* Preview toggle button active state */
.ImageGenerationNode_previewActive__zxqQw {
  background-color: #3b82f6 !important; /* blue-500 */
  color: white !important;
  border-color: #3b82f6 !important;
}

.ImageGenerationNode_goButton__X\+aBL {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
}

.ImageGenerationNode_goButton__X\+aBL:hover:not(:disabled) {
  background-color: var(--image-node-button-bg-hover);
  transform: scale(1.02);
}

.ImageGenerationNode_goButton__X\+aBL:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Uniform button sizing for floating header */
.ImageGenerationNode_expandedHeader__0zVCY .ImageGenerationNode_buttonsWrapper__d2Qtu button {
  width: 26px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ImageGenerationNode_expandedHeader__0zVCY .ImageGenerationNode_buttonsWrapper__d2Qtu button svg {
  width: 10px;
  height: 10px;
}

.ImageGenerationNode_expandedHeader__0zVCY .ImageGenerationNode_buttonsWrapper__d2Qtu button img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

/* Handle icons - show on hover only */
.ImageGenerationNode_handleIcon__U-Vh1 {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Show handle icons on node hover */
.ImageGenerationNode_nodeBase__1SUZP:hover .ImageGenerationNode_handleIcon__U-Vh1 {
  opacity: 1;
  transform: scale(1);
}

/* Input handle icon - when data is connected, background pulses */
.ImageGenerationNode_inputHandleIconConnected__D2k98 {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
  animation: ImageGenerationNode_iconPulse__vi-X- 2s ease-in-out infinite;
}

/* When isolated, show orange/muted background without animation */
.ImageGenerationNode_inputHandleIconIsolated__I9MSg {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: rgba(245, 158, 11, 0.5) !important;
  border-color: #f59e0b !important;
  animation: none;
}

/* Output handle icon - when data is available */
.ImageGenerationNode_handleIconConnected__u\+qSv {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
}

@keyframes ImageGenerationNode_iconPulse__vi-X- {
  0%,
  100% {
    background-color: var(--image-node-icon-bg);
  }
  50% {
    background-color: #6366f1; /* indigo-500 to match theme */
  }
}

/* High contrast theme adjustments for two-frame UI */
body.high-contrast .ImageGenerationNode_statusActive__RJVcf {
  color: var(--image-node-label-text);
  border-color: var(--image-node-border-selected);
}

body.high-contrast .ImageGenerationNode_statusRequired__ng7Vc {
  color: #fca5a5; /* red-300 - brighter for high contrast */
  border-color: #fca5a5;
}

body.high-contrast .ImageGenerationNode_statusWarning__\+mwcs {
  color: #fca5a5; /* red-300 */
}

body.high-contrast .ImageGenerationNode_statusOutputActive__2So\+T {
  color: #60a5fa;
  border-color: #60a5fa;
}

body.high-contrast .ImageGenerationNode_statusCheck__-0DCg {
  color: var(--image-node-label-text);
}

body.high-contrast .ImageGenerationNode_statusCheckOutput__B8-t6 {
  color: #60a5fa;
}

body.high-contrast .ImageGenerationNode_collapsedIcon__6sTGL {
  background-color: transparent;
  border: none;
}

body.high-contrast .ImageGenerationNode_helpButton__SggXy {
  background-color: var(--image-node-textarea-bg);
  border-color: var(--image-node-textarea-border);
  color: var(--image-node-label-text);
}

body.high-contrast .ImageGenerationNode_helpButton__SggXy:hover {
  color: var(--image-node-border-selected);
}

body.high-contrast .ImageGenerationNode_pinButton__cTRis {
  background-color: var(--image-node-textarea-bg);
  border-color: var(--image-node-textarea-border);
  color: var(--image-node-label-text);
}

body.high-contrast .ImageGenerationNode_pinActive__Tqhn3 {
  background-color: var(--image-node-button-bg) !important;
  color: var(--image-node-button-text) !important;
}

/* High contrast for preview toggle button */
body.high-contrast .ImageGenerationNode_previewActive__zxqQw {
  background-color: #60a5fa !important; /* blue-400 - brighter for dark mode */
  color: #1e293b !important; /* dark text for contrast */
  border-color: #60a5fa !important;
}

/* High contrast for expanded output preview */
body.high-contrast .ImageGenerationNode_expandedOutputPreview__OIAkz {
  background-color: #0f172a; /* slate-900 - darker background */
  border: 1px solid var(--image-node-textarea-border);
}

/* High contrast handle styles */
body.high-contrast .ImageGenerationNode_handle__kE0Rn {
  background-color: var(--image-node-border-selected);
  border-color: var(--image-node-bg);
}

body.high-contrast .ImageGenerationNode_handleIcon__U-Vh1 {
  background-color: var(--image-node-icon-bg);
  border-color: var(--image-node-textarea-border);
  color: var(--image-node-icon-color);
}

body.high-contrast .ImageGenerationNode_handleIconConnected__u\+qSv {
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
}

body.high-contrast .ImageGenerationNode_inputHandleIconConnected__D2k98 {
  animation: ImageGenerationNode_iconPulseHighContrast__KqkgX 2s ease-in-out infinite;
}

body.high-contrast .ImageGenerationNode_inputHandleIconIsolated__I9MSg {
  background-color: rgba(251, 191, 36, 0.5) !important;
  border-color: #fbbf24 !important;
}

@keyframes ImageGenerationNode_iconPulseHighContrast__KqkgX {
  0%,
  100% {
    background-color: var(--image-node-icon-bg);
  }
  50% {
    background-color: #818cf8; /* indigo-400 - brighter for dark mode */
  }
}

/* Token counter text - lighter for dark mode */
body.high-contrast .ImageGenerationNode_tokenCount__-qCcT {
  color: #e5e7eb; /* gray-200 - light text for dark mode */
}

/* Edge preview active states */
.ImageGenerationNode_handleWrapperActive__Lp-Gp {
  z-index: 100;
}

.ImageGenerationNode_handleActive__qYuev {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.ImageGenerationNode_handleIconActive__yNvgt {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* src/MainApp/nodes/Utility Nodes/VideoFrameExtractionNode.module.css */
@keyframes VideoFrameExtractionNode_scaleInNode__3MO-- {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.VideoFrameExtractionNode_nodeBase__Fd10C {
  /* Unique "Amber Frame" color scheme for video frame extraction */
  --frame-node-bg: #fef3c7; /* amber-100 */
  --frame-node-border: #f59e0b; /* amber-500 */
  --frame-node-border-selected: #d97706; /* amber-600 */
  --frame-node-text: #92400e; /* amber-800 */
  --frame-node-label-text: #b45309; /* amber-700 */
  --frame-node-icon-bg: #fde68a; /* amber-200 */
  --frame-node-icon-color: #b45309; /* amber-700 */
  --frame-node-button-bg: #f59e0b; /* amber-500 */
  --frame-node-button-bg-hover: #d97706; /* amber-600 */
  --frame-node-button-text: #fffbeb; /* amber-50 */
  --frame-node-textarea-bg: #fffbeb; /* amber-50 */
  --frame-node-textarea-border: #fde68a; /* amber-200 */
  --frame-node-loading-text: var(--frame-node-label-text);
  --frame-node-error-text: #dc2626; /* red-600 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  border-radius: 8px;
  border: 1px solid var(--frame-node-border);
  background-color: var(--frame-node-bg);
  color: var(--frame-node-text);
  padding: 12px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease-in-out;
  animation: VideoFrameExtractionNode_scaleInNode__3MO-- 0.3s ease-out;
  position: relative;
}

body.no-node-animation .VideoFrameExtractionNode_nodeBase__Fd10C {
  animation: none;
}

body.high-contrast .VideoFrameExtractionNode_nodeBase__Fd10C {
  --frame-node-bg: #111827; /* gray-900 - matches InputNode dark bg */
  --frame-node-border: #f59e0b;
  --frame-node-border-selected: #d97706;
  --frame-node-text: #f9fafb;
  --frame-node-label-text: #fde68a;
  --frame-node-icon-bg: #1f2937; /* gray-800 */
  --frame-node-icon-color: #fde68a;
  --frame-node-button-bg: #f59e0b;
  --frame-node-button-bg-hover: #d97706;
  --frame-node-button-text: #111827;
  --frame-node-textarea-bg: #1f2937; /* gray-800 */
  --frame-node-textarea-border: #4b5563; /* gray-600 */
}

.react-flow__node.selected .VideoFrameExtractionNode_nodeBase__Fd10C {
  border-color: var(--frame-node-border-selected);
  box-shadow: 0 0 0 1px var(--frame-node-border-selected);
}

/* Collapsed State */
.VideoFrameExtractionNode_nodeCollapsed__mtl2o {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* Expanded State */
.VideoFrameExtractionNode_nodeExpanded__OiEll {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
  padding: 12px;
}

/* ================================== */
/* Two-Frame UI Design Styles         */
/* ================================== */

/* Container for both frames - using overflow hidden for reveal effect */
.VideoFrameExtractionNode_framesContainer__PP\+Nh {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 1: Collapsed View - Slides out to left */
.VideoFrameExtractionNode_collapsedFrame__-N64z {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--frame-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

/* When output exists, align to top to make room for output preview */
.VideoFrameExtractionNode_collapsedFrame__-N64z.VideoFrameExtractionNode_hasOutputPreview__\+eY1m {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.VideoFrameExtractionNode_nodeExpanded__OiEll .VideoFrameExtractionNode_collapsedFrame__-N64z {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Container for main icon and status icons */
.VideoFrameExtractionNode_collapsedIconsRow__o2lrm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* When output exists, keep vertical but more compact */
.VideoFrameExtractionNode_collapsedIconsRow__o2lrm.VideoFrameExtractionNode_hasOutput__oOA35 {
  gap: 6px;
}

.VideoFrameExtractionNode_collapsedIcon__QtfEs {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Smaller main icon when output exists */
.VideoFrameExtractionNode_hasOutput__oOA35 .VideoFrameExtractionNode_collapsedIcon__QtfEs {
  width: 40px;
  height: 40px;
}

.VideoFrameExtractionNode_collapsedIcon__QtfEs img {
  /* Amber tint for the icon */
  filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(500%)
    hue-rotate(10deg) brightness(95%) contrast(90%);
  transition: filter 0.2s ease;
}

/* Dark amber tint for light mode */
body:not(.high-contrast) .VideoFrameExtractionNode_collapsedIcon__QtfEs img {
  filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(500%)
    hue-rotate(10deg) brightness(95%) contrast(90%);
}

.VideoFrameExtractionNode_collapsedIcon__QtfEs:hover {
  transform: scale(1.05);
}

/* Status Indicators Row */
.VideoFrameExtractionNode_statusIndicators__E9x2J {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.VideoFrameExtractionNode_statusItem__AEs5e {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.VideoFrameExtractionNode_statusIcon__I08Wm {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--frame-node-textarea-border);
}

.VideoFrameExtractionNode_statusActive__yBLmu {
  background-color: transparent;
  color: var(--frame-node-border-selected);
  border-color: var(--frame-node-border-selected);
}

.VideoFrameExtractionNode_statusInactive__rvSsZ {
  background-color: transparent;
  color: var(--frame-node-label-text);
  opacity: 0.4;
}

.VideoFrameExtractionNode_statusOutputActive__UVMpz {
  background-color: transparent;
  color: #3b82f6; /* blue-500 */
  border-color: #3b82f6;
}

.VideoFrameExtractionNode_statusRequired__yRxi5 {
  background-color: transparent;
  color: #ef4444; /* red-500 */
  border-color: #ef4444;
}

.VideoFrameExtractionNode_statusCheck__GK-le {
  color: var(--frame-node-border-selected);
}

.VideoFrameExtractionNode_statusCheckOutput__ynLES {
  color: #3b82f6; /* blue-500 */
}

.VideoFrameExtractionNode_statusWarning__lNzeI {
  color: #ef4444; /* red-500 */
}

.VideoFrameExtractionNode_collapsedLoading__CTF0q {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 8px;
}

/* Output Preview Mode */
.VideoFrameExtractionNode_outputPreview__DigWN {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  max-height: 100px;
}

.VideoFrameExtractionNode_previewThumbnail__hmpMm {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.8;
}

/* Frame 2: Expanded View - Always present underneath, revealed when Frame 1 slides */
.VideoFrameExtractionNode_expandedFrame__YMdpl {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  overflow: visible;
}

.VideoFrameExtractionNode_nodeContent__A8ugr {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
}

/* Placeholder content when no output */
.VideoFrameExtractionNode_placeholderContent__w9ew4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  padding: 20px;
}

.VideoFrameExtractionNode_placeholderIcon__1XQIy {
  color: var(--frame-node-label-text);
  opacity: 0.5;
}

.VideoFrameExtractionNode_placeholderText__ElZmK {
  color: var(--frame-node-label-text);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Output image container */
.VideoFrameExtractionNode_outputImageContainer__WeP6C {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
  padding-bottom: 30px; /* Space for footer */
}

.VideoFrameExtractionNode_outputImage__VQ5cJ {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Footer Controls - Floating bar inside node at bottom */
.VideoFrameExtractionNode_expandedFooter__Etb7C {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  z-index: 5;
}

.VideoFrameExtractionNode_statusText__IjKbW {
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
}

.VideoFrameExtractionNode_loadingStatus__wpXLT {
  color: var(--frame-node-label-text);
}

.VideoFrameExtractionNode_hasDataStatus__yw6rA {
  color: var(--frame-node-border-selected);
  display: flex;
  align-items: center;
  gap: 4px;
}

.VideoFrameExtractionNode_readyStatus__UiY5X {
  color: var(--frame-node-label-text);
}

.VideoFrameExtractionNode_awaitingStatus__sGGbT {
  color: var(--frame-node-label-text);
  opacity: 0.6;
}

.VideoFrameExtractionNode_footerControls__W9UgC {
  display: flex;
  align-items: center;
  gap: 4px;
}

.VideoFrameExtractionNode_helpButton__AroRD {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: var(--frame-node-textarea-bg);
  color: var(--frame-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.VideoFrameExtractionNode_helpButton__AroRD:hover {
  background-color: var(--frame-node-icon-bg);
  border-color: var(--frame-node-border);
  color: var(--frame-node-border-selected);
}

.VideoFrameExtractionNode_pinButton__uPrVl {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: var(--frame-node-textarea-bg);
  color: var(--frame-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.VideoFrameExtractionNode_pinButton__uPrVl:hover {
  background-color: var(--frame-node-icon-bg);
  border-color: var(--frame-node-border);
}

.VideoFrameExtractionNode_pinActive__WxHBe {
  background-color: var(--frame-node-button-bg) !important;
  color: var(--frame-node-button-text) !important;
  border-color: var(--frame-node-border-selected) !important;
}

.VideoFrameExtractionNode_goButton__5HGNu {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: bold;
}

.VideoFrameExtractionNode_goButton__5HGNu:hover:not(:disabled) {
  background-color: var(--frame-node-button-bg-hover);
  transform: scale(1.02);
}

.VideoFrameExtractionNode_goButton__5HGNu:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Floating Message Bar - positioned outside node at bottom */
.VideoFrameExtractionNode_floatingMessageBar__6wVGw {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

/* Animate message bar in when expanded */
.VideoFrameExtractionNode_nodeExpanded__OiEll .VideoFrameExtractionNode_floatingMessageBar__6wVGw {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Error message style */
.VideoFrameExtractionNode_messageError__bRVJJ {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.VideoFrameExtractionNode_messageText__dPNr2 {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Handle wrapper and icon styling */
.VideoFrameExtractionNode_handleWrapper__jCzCM {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.VideoFrameExtractionNode_handleWrapper__jCzCM > * {
  pointer-events: auto;
}

.VideoFrameExtractionNode_handle__WHqHo {
  width: 12px;
  height: 12px;
  background-color: var(--frame-node-border-selected);
  border: 2px solid var(--frame-node-bg);
  border-radius: 50%;
}

.VideoFrameExtractionNode_handleIcon__F1wct {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--frame-node-icon-bg);
  border: 1px solid var(--frame-node-textarea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--frame-node-icon-color);
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Show handle icons on node hover */
.VideoFrameExtractionNode_nodeBase__Fd10C:hover .VideoFrameExtractionNode_handleIcon__F1wct {
  opacity: 1;
  transform: scale(1);
}

/* Input handle icon - when data is connected */
.VideoFrameExtractionNode_inputHandleIconConnected__3gWZX {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
}

/* Output handle icon - when data is available */
.VideoFrameExtractionNode_handleIconConnected__IIemB {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
}

body.high-contrast .VideoFrameExtractionNode_handle__WHqHo {
  background-color: var(--frame-node-border-selected);
  border-color: var(--frame-node-bg);
}

body.high-contrast .VideoFrameExtractionNode_handleIcon__F1wct {
  background-color: var(--frame-node-icon-bg);
  border-color: var(--frame-node-textarea-border);
  color: var(--frame-node-icon-color);
}

body.high-contrast .VideoFrameExtractionNode_inputHandleIconConnected__3gWZX,
body.high-contrast .VideoFrameExtractionNode_handleIconConnected__IIemB {
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
}

/* High Contrast dark theme adjustments */
body.high-contrast .VideoFrameExtractionNode_statusActive__yBLmu {
  color: var(--frame-node-label-text);
  border-color: var(--frame-node-border-selected);
}

body.high-contrast .VideoFrameExtractionNode_statusRequired__yRxi5 {
  color: #fca5a5;
  border-color: #fca5a5;
}

body.high-contrast .VideoFrameExtractionNode_statusWarning__lNzeI {
  color: #fca5a5;
}

body.high-contrast .VideoFrameExtractionNode_statusOutputActive__UVMpz {
  color: #60a5fa;
  border-color: #60a5fa;
}

body.high-contrast .VideoFrameExtractionNode_statusCheck__GK-le {
  color: var(--frame-node-label-text);
}

body.high-contrast .VideoFrameExtractionNode_statusCheckOutput__ynLES {
  color: #60a5fa;
}

body.high-contrast .VideoFrameExtractionNode_collapsedIcon__QtfEs {
  background-color: transparent;
  border: none;
}

body.high-contrast .VideoFrameExtractionNode_pinButton__uPrVl {
  background-color: var(--frame-node-textarea-bg);
  border-color: var(--frame-node-textarea-border);
  color: var(--frame-node-label-text);
}

body.high-contrast .VideoFrameExtractionNode_messageError__bRVJJ {
  background-color: rgba(252, 165, 165, 0.2);
  border-color: #fca5a5;
  color: #fca5a5;
}

body.high-contrast .VideoFrameExtractionNode_collapsedLoading__CTF0q {
  background-color: rgba(31, 41, 55, 0.8);
}

/* ================================== */
/* Edge-to-Edge Media Preview Styles  */
/* ================================== */

/* Container for edge-to-edge media in collapsed frame */
.VideoFrameExtractionNode_collapsedMediaPreview__De1zJ {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
}

/* Image contained within the collapsed frame */
.VideoFrameExtractionNode_collapsedMediaImage__gVT5g {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Anchored icon in top-left corner */
.VideoFrameExtractionNode_anchoredIcon__OYVa2 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 251, 235, 0.9);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 5;
  transition: all 0.2s ease;
}

.VideoFrameExtractionNode_anchoredIcon__OYVa2:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.VideoFrameExtractionNode_anchoredIconImage__SMbcY {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(500%)
    hue-rotate(10deg) brightness(95%) contrast(90%);
}

/* High contrast mode for anchored icon */
body.high-contrast .VideoFrameExtractionNode_anchoredIcon__OYVa2 {
  background-color: rgba(31, 41, 55, 0.9);
}

body.high-contrast .VideoFrameExtractionNode_anchoredIconImage__SMbcY {
  filter: brightness(0) saturate(100%) invert(90%) sepia(50%) saturate(500%)
    hue-rotate(10deg) brightness(100%) contrast(90%);
}

/* ================================== */
/* Frame Selector Dropdown Styles     */
/* ================================== */

.VideoFrameExtractionNode_frameSelector__YoHH5 {
  position: relative;
}

.VideoFrameExtractionNode_frameSelectorButton__nIXCG {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: var(--frame-node-textarea-bg);
  color: var(--frame-node-label-text);
  font-size: 0.65rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.VideoFrameExtractionNode_frameSelectorButton__nIXCG:hover {
  background-color: var(--frame-node-icon-bg);
  border-color: var(--frame-node-border);
}

.VideoFrameExtractionNode_frameSelectorLabel__6yk1o {
  min-width: 28px;
  text-align: center;
}

.VideoFrameExtractionNode_frameSelectorDropdown__IJlXX {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  background-color: var(--frame-node-bg);
  border: 1px solid var(--frame-node-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 110px;
  overflow: hidden;
}

.VideoFrameExtractionNode_frameSelectorOption__KxDYX {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background-color: transparent;
  color: var(--frame-node-text);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.VideoFrameExtractionNode_frameSelectorOption__KxDYX:hover {
  background-color: var(--frame-node-icon-bg);
}

.VideoFrameExtractionNode_frameSelectorOptionActive__hDwYU {
  background-color: var(--frame-node-button-bg) !important;
  color: var(--frame-node-button-text) !important;
}

.VideoFrameExtractionNode_customTimeOption__x47Gh {
  border-top: 1px solid var(--frame-node-textarea-border);
}

.VideoFrameExtractionNode_customTimeInput__YL40T {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: var(--frame-node-textarea-bg);
}

.VideoFrameExtractionNode_timeInput__q2QuB {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid var(--frame-node-textarea-border);
  border-radius: 4px;
  background-color: var(--frame-node-bg);
  color: var(--frame-node-text);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  text-align: center;
  /* Hide native spinner buttons */
  -moz-appearance: textfield;
}

/* Hide spinner buttons in WebKit browsers */
.VideoFrameExtractionNode_timeInput__q2QuB::-webkit-outer-spin-button,
.VideoFrameExtractionNode_timeInput__q2QuB::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.VideoFrameExtractionNode_timeInput__q2QuB:focus {
  outline: none;
  border-color: var(--frame-node-border-selected);
}

/* Custom spinner buttons */
.VideoFrameExtractionNode_timeSpinnerButtons__BDeet {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.VideoFrameExtractionNode_spinnerButton__vEOpq {
  width: 16px;
  height: 12px;
  padding: 0;
  border: 1px solid var(--frame-node-textarea-border);
  background-color: var(--frame-node-textarea-bg);
  color: var(--frame-node-label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.15s ease;
}

.VideoFrameExtractionNode_spinnerArrow__7SG9a {
  font-size: 5px;
  line-height: 1;
  display: block;
}

.VideoFrameExtractionNode_spinnerButton__vEOpq:hover {
  background-color: var(--frame-node-icon-bg);
}

.VideoFrameExtractionNode_spinnerButton__vEOpq:active {
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
}

.VideoFrameExtractionNode_spinnerButtonUp__C5myj {
  border-radius: 3px 3px 0 0;
}

.VideoFrameExtractionNode_spinnerButtonDown__10TmV {
  border-radius: 0 0 3px 3px;
}

.VideoFrameExtractionNode_timeLabel__DCy2I {
  color: var(--frame-node-label-text);
  font-size: 0.7rem;
}

/* High contrast mode for frame selector */
body.high-contrast .VideoFrameExtractionNode_frameSelectorButton__nIXCG {
  background-color: var(--frame-node-textarea-bg);
  border-color: var(--frame-node-textarea-border);
}

body.high-contrast .VideoFrameExtractionNode_frameSelectorDropdown__IJlXX {
  background-color: var(--frame-node-bg);
  border-color: var(--frame-node-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.high-contrast .VideoFrameExtractionNode_customTimeInput__YL40T {
  background-color: #374151;
}

body.high-contrast .VideoFrameExtractionNode_timeInput__q2QuB {
  background-color: var(--frame-node-bg);
  border-color: var(--frame-node-textarea-border);
}

/* Edge preview active states */
.VideoFrameExtractionNode_handleWrapperActive__D\+jGZ {
  z-index: 100;
}

.VideoFrameExtractionNode_handleActive__P\+-HR {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

.VideoFrameExtractionNode_handleIconActive__p9jt2 {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* MainApp/nodes/Automation/StartNode.module.css */
.StartNode_nodeBase__IjFAD {
  --start-node-bg: #f5d0fe; /* fuchsia-200 */
  --start-node-border: #e879f9; /* fuchsia-400 */
  --start-node-border-selected: #d946ef; /* fuchsia-500 */
  --start-node-text: #701a75; /* fuchsia-900 */
  --start-node-icon-bg: #fae8ff; /* fuchsia-100 */
  --start-node-icon-color: #86198f; /* fuchsia-800 */

  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 50px; /* Pill shape */
  background-color: var(--start-node-bg);
  border: 2px solid var(--start-node-border);
  color: var(--start-node-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.react-flow__node.selected .StartNode_nodeBase__IjFAD {
  border-color: var(--start-node-border-selected);
  box-shadow: 0 0 0 2px var(--start-node-border-selected);
}

.StartNode_iconWrapper__bcIPV {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 1.2rem;
  color: var(--start-node-icon-color);
}

.StartNode_label__tJQrQ {
  line-height: 1;
}

.StartNode_handle__1RTj3 {
  width: 12px;
  height: 12px;
  background-color: var(--start-node-bg);
  border: 2px solid var(--start-node-icon-color);
  border-radius: 50%;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

.StartNode_handle__1RTj3:hover {
  background-color: var(--start-node-icon-color);
  opacity: 1;
}

/* MainApp/nodes/Automation/EndNode.module.css */
.EndNode_nodeBase__oO7xK {
  --end-node-bg: #fee2e2; /* red-100 */
  --end-node-border: #fca5a5; /* red-300 */
  --end-node-border-selected: #ef4444; /* red-500 */
  --end-node-text: #991b1b; /* red-800 */
  --end-node-icon-bg: #ffefef; /* red-50 */
  --end-node-icon-color: #b91c1c; /* red-700 */

  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 50px; /* Pill shape */
  background-color: var(--end-node-bg);
  border: 2px solid var(--end-node-border);
  color: var(--end-node-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.react-flow__node.selected .EndNode_nodeBase__oO7xK {
  border-color: var(--end-node-border-selected);
  box-shadow: 0 0 0 2px var(--end-node-border-selected);
}

.EndNode_iconWrapper__8t1i4 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 1.2rem;
  color: var(--end-node-icon-color);
}

.EndNode_label__nBsw\+ {
  line-height: 1;
}

.EndNode_handle__iMw5V {
  width: 12px;
  height: 12px;
  background-color: var(--end-node-bg);
  border: 2px solid var(--end-node-icon-color);
  border-radius: 50%;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

.EndNode_handle__iMw5V:hover {
  background-color: var(--end-node-icon-color);
  opacity: 1;
}

/* Google Drive Node - Single Frame Design with Floating Header */

/* Animation for node entry */
@keyframes GoogleDriveNode_scaleInNode__SjpjV {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Google Drive Node Theme - Green/Teal */
.GoogleDriveNode_nodeBase__Nihw0 {
  /* Define Google Drive specific colors */
  --gdrive-node-bg: #f0fdf4; /* green-50 */
  --gdrive-node-border: #bbf7d0; /* green-200 */
  --gdrive-node-border-selected: #22c55e; /* green-500 */
  --gdrive-node-text: #14532d; /* green-900 */
  --gdrive-node-label-text: #15803d; /* green-700 */
  --gdrive-node-icon-bg: #dcfce7; /* green-100 */
  --gdrive-node-icon-color: #166534; /* green-800 */
  --gdrive-node-button-bg: #dcfce7; /* green-100 */
  --gdrive-node-button-bg-hover: #bbf7d0; /* green-200 */
  --gdrive-node-button-text: #166534; /* green-800 */
  --gdrive-node-display-bg: #f2fff6;
  --gdrive-node-display-border: #d9f99d; /* lime-200 */
  --gdrive-node-error-text: #dc2626; /* red-600 */
  --gdrive-node-success-text: #16a34a; /* green-600 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Base styling */
  position: relative;
  width: 220px;
  font-family: 'Inconsolata', monospace;
  animation: GoogleDriveNode_scaleInNode__SjpjV 0.3s ease-out;
}

body.no-node-animation .GoogleDriveNode_nodeBase__Nihw0 {
  animation: none;
}

/* Dark mode theme */
body.high-contrast .GoogleDriveNode_nodeBase__Nihw0 {
  --gdrive-node-bg: #111827; /* gray-900 */
  --gdrive-node-border: #22c55e; /* green-500 */
  --gdrive-node-border-selected: #4ade80; /* green-400 */
  --gdrive-node-text: #f9fafb; /* gray-50 */
  --gdrive-node-label-text: #bbf7d0; /* green-200 */
  --gdrive-node-icon-bg: #1f2937; /* gray-800 */
  --gdrive-node-icon-color: #dcfce7; /* green-100 */
  --gdrive-node-button-bg: #374151; /* gray-700 */
  --gdrive-node-button-bg-hover: #4b5563; /* gray-600 */
  --gdrive-node-button-text: #dcfce7; /* green-100 */
  --gdrive-node-display-bg: #1f2937; /* gray-800 */
  --gdrive-node-display-border: #4b5563; /* gray-600 */
}

/* ==================== FLOATING HEADER ==================== */
.GoogleDriveNode_floatingHeader__REIwi {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.GoogleDriveNode_nodeHovered__57bYU .GoogleDriveNode_floatingHeader__REIwi,
.GoogleDriveNode_nodeBase__Nihw0:hover .GoogleDriveNode_floatingHeader__REIwi {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Buttons Wrapper */
.GoogleDriveNode_buttonsWrapper__oAFWn {
  display: flex;
  gap: 4px;
}

.GoogleDriveNode_buttonsWrapper__oAFWn button {
  padding: 0;
  border: none;
  background-color: var(--gdrive-node-button-bg);
  color: var(--gdrive-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
}

.GoogleDriveNode_buttonsWrapper__oAFWn button svg {
  width: 10px;
  height: 10px;
}

.GoogleDriveNode_buttonsWrapper__oAFWn button:hover:not(:disabled) {
  background-color: var(--gdrive-node-button-bg-hover);
}

.GoogleDriveNode_buttonsWrapper__oAFWn button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Help Button */
.GoogleDriveNode_helpButton__vgOTK {
  width: 26px;
  border: 1px solid var(--gdrive-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.GoogleDriveNode_helpButton__vgOTK:hover:not(:disabled) {
  border-color: var(--gdrive-node-border-selected) !important;
}

/* Connect Button */
.GoogleDriveNode_connectButton__NB07C {
  background-color: var(--gdrive-node-button-bg) !important;
  color: var(--gdrive-node-button-text) !important;
  width: 70px;
  border: 1px solid var(--gdrive-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.GoogleDriveNode_connectButton__NB07C:hover:not(:disabled) {
  background-color: var(--gdrive-node-button-bg-hover) !important;
  border-color: var(--gdrive-node-border-selected) !important;
}

/* Upload Button */
.GoogleDriveNode_uploadButton__daFPA {
  background-color: #22c55e !important; /* green-500 */
  color: white !important;
  width: 26px;
}

.GoogleDriveNode_uploadButton__daFPA:hover:not(:disabled) {
  background-color: #16a34a !important; /* green-600 */
}

/* Disconnect Button */
.GoogleDriveNode_disconnectButton__VtfL0 {
  background-color: #fee2e2 !important; /* red-100 */
  color: #dc2626 !important; /* red-600 */
  width: 26px;
}

.GoogleDriveNode_disconnectButton__VtfL0:hover:not(:disabled) {
  background-color: #fecaca !important; /* red-200 */
  color: #b91c1c !important; /* red-700 */
}

/* ==================== MAIN FRAME ==================== */
.GoogleDriveNode_mainFrame__zM9xe {
  border-radius: 8px;
  border: 1px solid var(--gdrive-node-border);
  background-color: var(--gdrive-node-bg);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Selected state */
.react-flow__node.selected .GoogleDriveNode_mainFrame__zM9xe {
  border-color: var(--gdrive-node-border-selected);
  box-shadow: 0 0 0 1px var(--gdrive-node-border-selected);
}

/* ==================== CONTENT AREA ==================== */
.GoogleDriveNode_contentArea__05MBu {
  padding: 12px 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Message Container - for disconnected/not configured states */
.GoogleDriveNode_messageContainer__meDqh {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  text-align: center;
}

.GoogleDriveNode_driveIconLarge__T0573 {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.GoogleDriveNode_driveIconLarge__T0573 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.GoogleDriveNode_messageText__zBacx {
  font-size: 0.8rem;
  color: var(--gdrive-node-label-text);
  margin: 0;
  line-height: 1.4;
}

/* Error Badge */
.GoogleDriveNode_errorBadge__cnUXS {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: #fee2e2;
  color: var(--gdrive-node-error-text);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

body.high-contrast .GoogleDriveNode_errorBadge__cnUXS {
  background-color: #7f1d1d;
  color: #fecaca;
}

/* ==================== CONNECTED CONTENT ==================== */
.GoogleDriveNode_connectedContent__98VdS {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Status Messages */
.GoogleDriveNode_statusMessage__5xBfs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--gdrive-node-label-text);
  font-size: 0.85rem;
  font-weight: 500;
}

.GoogleDriveNode_successMessage__jozOL {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background-color: #dcfce7; /* green-100 */
  color: var(--gdrive-node-success-text);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

body.high-contrast .GoogleDriveNode_successMessage__jozOL {
  background-color: #14532d;
  color: #bbf7d0;
}

.GoogleDriveNode_errorMessage__pcpOc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background-color: #fee2e2;
  color: var(--gdrive-node-error-text);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

body.high-contrast .GoogleDriveNode_errorMessage__pcpOc {
  background-color: #7f1d1d;
  color: #fecaca;
}

/* Empty State */
.GoogleDriveNode_emptyState__rEo2I {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  color: var(--gdrive-node-label-text);
  opacity: 0.6;
  font-size: 0.8rem;
}

/* ==================== PREVIEW CONTAINER ==================== */
.GoogleDriveNode_previewContainer__6mH21 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.GoogleDriveNode_fileTypeBadge__-lk3M {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: var(--gdrive-node-icon-bg);
  border: 1px solid var(--gdrive-node-border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gdrive-node-label-text);
}

.GoogleDriveNode_fileTypeIcon__6Ly36 {
  font-size: 1rem;
  line-height: 1;
}

.GoogleDriveNode_fileTypeText__jeDem {
  font-family: 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

/* Media Preview */
.GoogleDriveNode_mediaPreview__QUDVZ {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gdrive-node-display-bg);
  border: 1px solid var(--gdrive-node-display-border);
  border-radius: 4px;
  padding: 8px;
  max-height: 120px;
  overflow: hidden;
}

.GoogleDriveNode_previewImage__oP9pv {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  border-radius: 4px;
}

.GoogleDriveNode_previewVideo__Hg5Ge {
  max-width: 100%;
  max-height: 100px;
  border-radius: 4px;
}

.GoogleDriveNode_previewAudio__1sdGS {
  width: 100%;
  height: 36px;
}

/* Text Preview */
.GoogleDriveNode_textPreview__9\+0Hh {
  font-size: 0.7rem;
  color: var(--gdrive-node-label-text);
  background-color: var(--gdrive-node-display-bg);
  border: 1px solid var(--gdrive-node-display-border);
  border-radius: 4px;
  padding: 8px;
  font-family: 'Inconsolata', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60px;
  overflow-y: auto;
  line-height: 1.4;
}

/* Ready Text */
.GoogleDriveNode_readyText__q-620 {
  font-size: 0.75rem;
  color: var(--gdrive-node-success-text);
  text-align: center;
  padding: 6px;
  background-color: #dcfce7; /* green-100 */
  border-radius: 4px;
  font-weight: 600;
}

body.high-contrast .GoogleDriveNode_readyText__q-620 {
  background-color: var(--gdrive-node-icon-bg);
  color: var(--gdrive-node-label-text);
}

/* ==================== FOOTER ==================== */
.GoogleDriveNode_footer__RXWU- {
  background-color: var(--gdrive-node-display-bg);
  border-top: 1px solid var(--gdrive-node-display-border);
  padding: 8px 12px;
}

.GoogleDriveNode_statusInfo__NewZs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.GoogleDriveNode_statusIcon__ygvEd {
  color: var(--gdrive-node-success-text);
  font-size: 14px;
  flex-shrink: 0;
}

.GoogleDriveNode_statusText__BxhTL {
  font-size: 0.75rem;
  color: var(--gdrive-node-label-text);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ==================== HANDLES ==================== */
.GoogleDriveNode_handle__QD\+k8 {
  width: 12px;
  height: 12px;
  background-color: var(--gdrive-node-border-selected);
  border: 2px solid var(--gdrive-node-bg);
  border-radius: 50%;
}

body.high-contrast .GoogleDriveNode_handle__QD\+k8 {
  background-color: var(--gdrive-node-border-selected);
  border-color: var(--gdrive-node-bg);
}

/* Post Creator Node - Two-Frame Design with Floating Header */
@keyframes PostCreatorNode_scaleInNode__bOO0U {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.PostCreatorNode_nodeBase__8Tcv1 {
  /* Post Creator specific colors - Purple/Pink theme */
  --post-node-bg: #fdf4ff; /* fuchsia-50 */
  --post-node-border: #f0abfc; /* fuchsia-300 */
  --post-node-border-selected: #d946ef; /* fuchsia-500 */
  --post-node-text: #701a75; /* fuchsia-900 */
  --post-node-label-text: #a21caf; /* fuchsia-700 */
  --post-node-icon-bg: #fae8ff; /* fuchsia-100 */
  --post-node-icon-color: #86198f; /* fuchsia-800 */
  --post-node-display-bg: #fefaff; /* fuchsia-25 */
  --post-node-display-border: #f5d0fe; /* fuchsia-200 */
  --post-node-button-bg: #e879f9; /* fuchsia-400 */
  --post-node-button-bg-hover: #d946ef; /* fuchsia-500 */
  --post-node-button-text: #701a75; /* fuchsia-900 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Apply styling - match InputNode size */
  position: relative;
  width: 280px;
  font-family: 'Inconsolata', monospace;
  animation: PostCreatorNode_scaleInNode__bOO0U 0.3s ease-out;
}

body.no-node-animation .PostCreatorNode_nodeBase__8Tcv1 {
  animation: none;
}

body.high-contrast .PostCreatorNode_nodeBase__8Tcv1 {
  --post-node-bg: #111827; /* gray-900 */
  --post-node-border: #d946ef; /* fuchsia-500 */
  --post-node-border-selected: #e879f9; /* fuchsia-400 */
  --post-node-text: #f9fafb; /* gray-50 */
  --post-node-label-text: #f0abfc; /* fuchsia-300 */
  --post-node-icon-bg: #1f2937; /* gray-800 */
  --post-node-icon-color: #fae8ff; /* fuchsia-100 */
  --post-node-display-bg: #1f2937; /* gray-800 */
  --post-node-display-border: #4b5563; /* gray-600 */
  --post-node-button-bg: #d946ef; /* fuchsia-500 */
  --post-node-button-bg-hover: #e879f9; /* fuchsia-400 */
  --post-node-button-text: #f9fafb; /* gray-50 */
}

/* ==================== FLOATING HEADER ==================== */
.PostCreatorNode_floatingHeader__V\+YSG {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Only use class-based hover (not CSS :hover) so JS controls the timing */
.PostCreatorNode_nodeExpanded__kmFpH .PostCreatorNode_floatingHeader__V\+YSG {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Buttons Wrapper */
.PostCreatorNode_buttonsWrapper__YNRJm {
  display: flex;
  gap: 4px;
}

.PostCreatorNode_buttonsWrapper__YNRJm button {
  padding: 0;
  border: none;
  background-color: var(--post-node-button-bg);
  color: var(--post-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
}

.PostCreatorNode_buttonsWrapper__YNRJm button svg {
  width: 10px;
  height: 10px;
}

.PostCreatorNode_buttonsWrapper__YNRJm button:hover:not(:disabled) {
  background-color: var(--post-node-button-bg-hover);
}

.PostCreatorNode_buttonsWrapper__YNRJm button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Help Button */
.PostCreatorNode_helpButton__iXjd2 {
  width: 26px;
  border: 1px solid var(--post-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.PostCreatorNode_helpButton__iXjd2:hover:not(:disabled) {
  border-color: var(--post-node-border-selected) !important;
}

/* Settings Button */
.PostCreatorNode_settingsButton__yCHXw {
  width: 26px;
  border: 1px solid var(--post-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.PostCreatorNode_settingsButton__yCHXw:hover:not(:disabled) {
  border-color: var(--post-node-border-selected) !important;
}

/* Render Button */
.PostCreatorNode_renderButton__WXlZU {
  width: 26px;
  background-color: #3b82f6 !important;
  color: white !important;
  border: 1px solid #60a5fa !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.PostCreatorNode_renderButton__WXlZU:hover:not(:disabled) {
  background-color: #2563eb !important;
  border-color: #3b82f6 !important;
}

/* ==================== MAIN FRAME ==================== */
.PostCreatorNode_mainFrame__kJdLI {
  border-radius: 8px;
  border: 1px solid var(--post-node-border);
  background-color: var(--post-node-bg);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Selected state */
.react-flow__node.selected .PostCreatorNode_mainFrame__kJdLI {
  border-color: var(--post-node-border-selected);
  box-shadow: 0 0 0 1px var(--post-node-border-selected);
}

/* ==================== FRAMES CONTAINER ==================== */
.PostCreatorNode_framesContainer__MHVfD {
  position: relative;
  width: 100%;
  min-height: 180px;
  border-radius: 6px;
  overflow: hidden;
}

/* Frame 1: Collapsed View - Preview Canvas */
.PostCreatorNode_collapsedFrame__98txq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--post-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
  padding: 8px;
}

/* Frame 2: Expanded View - Input Indicators (sets the height) */
.PostCreatorNode_expandedFrame__U\+OtH {
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 180px;
  visibility: hidden;
}

/* When expanded, slide frame 1 out and show frame 2 */
.PostCreatorNode_nodeExpanded__kmFpH .PostCreatorNode_collapsedFrame__98txq {
  transform: translateX(-105%);
  pointer-events: none;
}

.PostCreatorNode_nodeExpanded__kmFpH .PostCreatorNode_expandedFrame__U\+OtH {
  visibility: visible;
}

/* Node Content (legacy - for content area) */
.PostCreatorNode_nodeContent__TPeyW {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* ==================== INPUT INDICATORS ==================== */
.PostCreatorNode_inputIndicators__CpkXi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.PostCreatorNode_indicator__xT-1j {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--post-node-display-bg);
  border: 1px solid var(--post-node-display-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--post-node-label-text);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.PostCreatorNode_indicator__xT-1j svg {
  font-size: 14px;
}

.PostCreatorNode_indicator__xT-1j.PostCreatorNode_active__nHBO7 {
  opacity: 1;
  background-color: var(--post-node-icon-bg);
  border-color: var(--post-node-border);
  font-weight: 600;
}

/* ==================== PREVIEW SECTION ==================== */
.PostCreatorNode_previewSection__HdS3C {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.PostCreatorNode_previewLabel__1E7O4 {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--post-node-label-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.PostCreatorNode_previewContainer__gcUQQ {
  display: flex;
  align-items: center;
  justify-content: center;
  /* No separate background/border - uses parent's solid background */
}

/* Legacy node header styles - keeping for backward compatibility */
.PostCreatorNode_nodeHeader__2Lmla {
  display: none;
}

.PostCreatorNode_floatingIcon__\+Oskl {
  display: none;
}

.PostCreatorNode_nodeTitle__QCyso {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--post-node-label-text);
  letter-spacing: 0.5px;
}

/* Post Mockup Container */
.PostCreatorNode_postMockup__1Kxd4 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Square Instagram-like format */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Background Image */
.PostCreatorNode_postBackground__bpBlD {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.PostCreatorNode_postBackground__bpBlD img,
.PostCreatorNode_postBackground__bpBlD video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.PostCreatorNode_postVideo__x-oDk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder for Image */
.PostCreatorNode_placeholderImage__jAwUT {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fae8ff 0%, #f0abfc 100%);
  color: var(--post-node-label-text);
  gap: 10px;
}

.PostCreatorNode_placeholderImage__jAwUT span {
  font-size: 0.75rem;
  font-style: italic;
  opacity: 0.8;
}

/* Text Overlay */
.PostCreatorNode_postTextOverlay__cDqVz {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 70%,
    transparent 100%
  );
  padding: 20px 12px 12px 12px;
  min-height: 80px;
  display: flex;
  align-items: flex-end;
}

/* Post Text */
.PostCreatorNode_postText__ePHln {
  color: #ffffff;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow-y: auto;
  width: 100%;
}

/* Scrollbar for text overflow */
.PostCreatorNode_postText__ePHln::-webkit-scrollbar {
  width: 4px;
}

.PostCreatorNode_postText__ePHln::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.PostCreatorNode_postText__ePHln::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.PostCreatorNode_postText__ePHln::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Empty State */
.PostCreatorNode_emptyPreview__Vt6dK {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  font-size: 0.75rem;
  color: var(--post-node-label-text);
  opacity: 0.6;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* Handles */
.PostCreatorNode_handleWrapper__mh83f {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.PostCreatorNode_handleWrapper__mh83f > * {
  pointer-events: auto;
}

.PostCreatorNode_handle__KGr8y {
  width: 12px;
  height: 12px;
  background-color: var(--post-node-border-selected);
  border: 2px solid var(--post-node-bg);
  border-radius: 50%;
}

body.high-contrast .PostCreatorNode_handle__KGr8y {
  background-color: var(--post-node-border-selected);
  border-color: var(--post-node-bg);
}

body.high-contrast .PostCreatorNode_handleIcon__5oF2N {
  background-color: var(--post-node-icon-bg);
  border-color: var(--post-node-border);
  color: var(--post-node-icon-color);
}

.PostCreatorNode_handleIcon__5oF2N {
  position: absolute;
  left: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--post-node-icon-bg);
  color: var(--post-node-icon-color);
  border: 1px solid var(--post-node-border);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  pointer-events: none;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
}

.PostCreatorNode_handleWrapper__mh83f:hover .PostCreatorNode_handleIcon__5oF2N {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: var(--post-node-border);
}

/* Special handle colors */
.PostCreatorNode_imageHandle__yDeZQ {
  background-color: #10b981; /* green-500 for image */
}

.PostCreatorNode_textHandle__vGoCG {
  background-color: #3b82f6; /* blue-500 for text */
}

.PostCreatorNode_videoHandle__iE\+WL {
  background-color: #8b5cf6; /* purple-500 for video */
}

.PostCreatorNode_audioHandle__ulh9y {
  background-color: #ec4899; /* pink-500 for audio */
}

/* Text Size Classes */
.PostCreatorNode_textSmall__WJGLZ {
  font-size: 0.7rem !important;
}

.PostCreatorNode_textMedium__AY1gC {
  font-size: 0.85rem !important;
}

.PostCreatorNode_textLarge__FIwZg {
  font-size: 1rem !important;
}

/* Settings Modal - Matches DataNode style */
.PostCreatorNode_settingsModal__cgInI {
  padding: 0;
  color: #f9fafb;
  min-width: 520px;
  max-width: 650px;
  border-radius: 12px;
  animation: PostCreatorNode_modalFadeIn__Hx-HC 0.3s ease-out;
  overflow: hidden;
  font-family: 'Inconsolata', monospace;
}

.PostCreatorNode_settingsModal__cgInI h2 {
  margin: 0;
  padding: 24px 32px 16px;
  color: #e5e7eb !important;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  border-bottom: 1px solid #374151;
  background: transparent;
  font-family: 'Inconsolata', monospace;
}

.PostCreatorNode_settingsSection__wBgPl {
  margin-bottom: 24px;
}

.PostCreatorNode_settingsSection__wBgPl:last-child {
  margin-bottom: 0;
}

.PostCreatorNode_settingsLabel__MoOu6 {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #e5e7eb;
  letter-spacing: -0.025em;
}

.PostCreatorNode_radioGroup__BAZXd {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.PostCreatorNode_radioLabel__43y4Z {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #e5e7eb;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.PostCreatorNode_radioLabel__43y4Z:hover {
  background: #374151;
}

.PostCreatorNode_radioLabel__43y4Z input[type='radio'] {
  cursor: pointer;
  accent-color: #3b82f6;
  width: 16px;
  height: 16px;
}

.PostCreatorNode_radioLabel__43y4Z span {
  font-weight: 500;
}

.PostCreatorNode_slider__pigGX {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #1a1a1a;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid #444;
}

.PostCreatorNode_slider__pigGX::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d946ef;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.5);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid #f0abfc;
}

.PostCreatorNode_slider__pigGX::-webkit-slider-thumb:hover {
  background: #c026d3;
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(217, 70, 239, 0.7);
}

.PostCreatorNode_slider__pigGX::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d946ef;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.5);
  border: 2px solid #f0abfc;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.PostCreatorNode_slider__pigGX::-moz-range-thumb:hover {
  background: #c026d3;
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(217, 70, 239, 0.7);
}

.PostCreatorNode_sliderLabels__agTew {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #9ca3af;
  font-style: italic;
}

.PostCreatorNode_modalActions__5oNDi {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 32px;
  background: transparent;
  border-top: 1px solid #374151;
  flex-shrink: 0;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_cancelButton__Vpb1v {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #374151;
  color: #9ca3af;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_cancelButton__Vpb1v:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveButton__8ebEA {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #3b82f6;
  color: #ffffff;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveButton__8ebEA:hover {
  background: #2563eb;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveButton__8ebEA:disabled {
  background: #6b7280;
  cursor: not-allowed;
  opacity: 0.5;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveTemplateButton__kO1Ja {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #d946ef;
  color: #ffffff;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveTemplateButton__kO1Ja:hover {
  background: #c026d3;
}

/* Tab Navigation */
.PostCreatorNode_tabContainer__P\+6Pe {
  display: flex;
  background: transparent;
  border-bottom: 1px solid #374151;
  margin: 0;
  padding: 0 24px;
  flex-shrink: 0;
}

.PostCreatorNode_tabContainer__P\+6Pe button {
  padding: 16px 20px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: #9ca3af;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
  position: relative;
  font-family: 'Inconsolata', monospace;
}

.PostCreatorNode_tabContainer__P\+6Pe button:hover {
  background-color: #374151;
  color: #3b82f6;
}

.PostCreatorNode_tabContainer__P\+6Pe button.PostCreatorNode_activeTab__wWHWv {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background-color: #374151;
  font-weight: 600;
}

.PostCreatorNode_tabContent__Y9KzZ {
  flex: 1 1;
  overflow-y: auto;
  padding: 32px;
  background: transparent;
}

.PostCreatorNode_tabDescription__OpTh1 {
  font-size: 0.85rem;
  color: #9ca3af;
  margin: 0 0 20px 0;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  font-style: italic;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
}

/* Dynamic List for Input Handles */
.PostCreatorNode_dynamicList__\+7AXm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.PostCreatorNode_dynamicListItem__V4Ukj {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #4b5563;
  transition: all 0.2s ease;
}

.PostCreatorNode_dynamicListItem__V4Ukj:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #4b5563;
}

.PostCreatorNode_dragHandle__i0rXV {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: grab;
  padding: 4px;
  transition: color 0.2s ease;
}

.PostCreatorNode_dragHandle__i0rXV:hover {
  color: #f9fafb;
}

.PostCreatorNode_dragHandle__i0rXV:active {
  cursor: grabbing;
}

.PostCreatorNode_handleInput__7CRzB {
  flex: 1 1;
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: #1f2937;
  color: #f9fafb;
  border: 2px solid #6b7280;
  border-radius: 8px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.PostCreatorNode_handleInput__7CRzB:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.PostCreatorNode_handleTypeSelect__Gv\+aw {
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: #1f2937;
  color: #f9fafb;
  border: 2px solid #6b7280;
  border-radius: 8px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 120px;
  transition: all 0.2s ease;
}

.PostCreatorNode_handleTypeSelect__Gv\+aw:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.PostCreatorNode_removeButton__Ocl5N {
  padding: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 36px;
  min-height: 36px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.PostCreatorNode_removeButton__Ocl5N:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}

.PostCreatorNode_addButton__Mpvi9 {
  margin-top: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #3b82f6;
  color: #ffffff;
  align-self: flex-start;
}

.PostCreatorNode_addButton__Mpvi9:hover {
  background: #2563eb;
}

/* Element Settings Tab */
.PostCreatorNode_elementsSettings__2HgoW {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.PostCreatorNode_noElements__tFkCA {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 0.9rem;
  font-style: italic;
}

.PostCreatorNode_elementCard__cYXH6 {
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
  border: 2px solid #d946ef;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
}

.PostCreatorNode_elementCard__cYXH6:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 70, 239, 0.4);
}

.PostCreatorNode_elementCardActive__e9RIJ {
  border-color: #f0abfc;
  box-shadow: 0 6px 20px rgba(217, 70, 239, 0.6);
  background: linear-gradient(135deg, #3a2a3a 0%, #3d2a3d 100%);
}

.PostCreatorNode_selectedBadge__1ElrJ {
  background: #d946ef;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
}

.PostCreatorNode_elementHeader__XKpIx {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #444;
}

.PostCreatorNode_elementTitle__B0MSA {
  font-size: 1rem;
  font-weight: 700;
  color: #f0abfc;
  flex: 1 1;
}

.PostCreatorNode_elementType__1pNr9 {
  font-size: 0.8rem;
  color: #b5b5b5;
  font-style: italic;
}

.PostCreatorNode_elementSettings__3agcr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #1a1a1a;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #444;
}

.PostCreatorNode_settingRow__m3YiZ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #2a2a2a;
  border-radius: 6px;
  border-left: 3px solid #d946ef;
}

.PostCreatorNode_settingRow__m3YiZ label {
  font-size: 0.9rem;
  color: #f0abfc;
  font-weight: 700;
  flex: 0 0 auto;
}

.PostCreatorNode_sliderValue__mRX3t {
  min-width: 50px;
  text-align: right;
  font-size: 0.85rem;
  color: #d946ef;
  font-weight: 600;
}

.PostCreatorNode_settingSelect__eT1Fc {
  padding: 6px 10px;
  background-color: #1a1a1a;
  color: #b5b5b5;
  border: 1px solid #444;
  border-radius: 4px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.PostCreatorNode_settingSelect__eT1Fc:focus {
  outline: none;
  border-color: #d946ef;
  box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.2);
}

.PostCreatorNode_settingInput__8JI\+F {
  padding: 8px 12px;
  background-color: #1a1a1a;
  color: #f9fafb;
  border: 1px solid #444;
  border-radius: 4px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  width: 100px;
  text-align: right;
  transition: all 0.2s ease;
}

.PostCreatorNode_settingInput__8JI\+F:focus {
  outline: none;
  border-color: #d946ef;
  box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.2);
  background-color: #2a2a2a;
}

.PostCreatorNode_settingInput__8JI\+F:hover {
  border-color: #666;
}

.PostCreatorNode_colorPicker__M-u6R {
  width: 50px;
  height: 30px;
  border: 2px solid #444;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.PostCreatorNode_colorPicker__M-u6R:hover {
  border-color: #d946ef;
  box-shadow: 0 0 8px rgba(217, 70, 239, 0.3);
}

/* Progress Bar */
.PostCreatorNode_progressBarContainer__3-Enj {
  flex: 1 1;
  height: 20px;
  background-color: rgba(75, 85, 99, 0.4);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 12px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.PostCreatorNode_progressBar__0OsRs {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border-radius: 12px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 2px 8px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: PostCreatorNode_progressPulse__ptRnr 2s ease-in-out infinite;
}

@keyframes PostCreatorNode_progressPulse__ptRnr {
  0%,
  100% {
    box-shadow:
      0 2px 8px rgba(59, 130, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 2px 12px rgba(59, 130, 246, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

.PostCreatorNode_progressText__5l3nZ {
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 8px rgba(59, 130, 246, 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* ===== FULL CANVAS PANEL (Modal3 Left Panel) - DARK THEME ===== */
.PostCreatorNode_canvasPanel__3wN4q {
  position: relative;
  width: 100%;
  height: 100%;
  /* background: #0d0d0d; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
}

/* Floating Controls - Top Right */
.PostCreatorNode_floatingControls__cHdnK {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.PostCreatorNode_zoomControls__GLMcz {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(42, 42, 42, 0.95);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #444;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.PostCreatorNode_zoomControls__GLMcz button {
  background: #333;
  border: 1px solid #555;
  color: #e5e5e5;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.PostCreatorNode_zoomControls__GLMcz button:hover {
  background: #444;
  border-color: #d946ef;
  transform: scale(1.05);
}

.PostCreatorNode_zoomControls__GLMcz span {
  min-width: 50px;
  text-align: center;
  font-weight: 700;
  color: #e5e5e5;
  font-size: 0.95rem;
}

/* Floating Info Badge - Bottom Center */
.PostCreatorNode_floatingInfo__AYQ8e {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(217, 70, 239, 0.95);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 100;
  animation: PostCreatorNode_slideUp__RZdZd 0.3s ease;
}

@keyframes PostCreatorNode_slideUp__RZdZd {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.PostCreatorNode_floatingInfo__AYQ8e strong {
  color: white;
  font-weight: 800;
}

.PostCreatorNode_hdPreview__gnRLS {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: min(80vh, 80vw);
  max-height: min(80vh, 80vw);
  aspect-ratio: 1 / 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.PostCreatorNode_hdBackground__aLp9v {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: border 0.2s;
}

.PostCreatorNode_hdVideo__HCR2Y,
.PostCreatorNode_hdImage__WjpLr,
.PostCreatorNode_hdBackground__aLp9v img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.PostCreatorNode_hdPlaceholder__BtXdb {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #666;
  background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
}

.PostCreatorNode_hdPlaceholder__BtXdb span {
  font-size: 1.5rem;
  font-weight: 500;
  color: #888;
}

.PostCreatorNode_hdTextOverlay__xkOxe {
  position: absolute;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  transition: border 0.2s;
}

.PostCreatorNode_hdText__4-a6A {
  color: white;
  font-weight: 800;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  word-wrap: break-word;
  line-height: 1.4;
}

.PostCreatorNode_hdText__4-a6A.PostCreatorNode_small__GAuWd {
  font-size: 3rem;
}

.PostCreatorNode_hdText__4-a6A.PostCreatorNode_medium__VHttp {
  font-size: 4.5rem;
}

.PostCreatorNode_hdText__4-a6A.PostCreatorNode_large__kVES\+ {
  font-size: 6rem;
}

/* Removed .previewInfo - replaced with floating badge */

/* ===== SETTINGS PANEL (Modal3 Right Panel) - DARK THEME ===== */
.PostCreatorNode_settingsPanel__dQIb8 {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* background: #1a1a1a; */
  padding: 0px;
  overflow: hidden;
}

.PostCreatorNode_settingsPanel__dQIb8 h2 {
  color: #e5e5e5;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #333;
  flex-shrink: 0;
}

/* ===== INSPECT ELEMENT SECTION - DARK THEME ===== */
.PostCreatorNode_inspectSection__M4lDQ {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
  border-radius: 12px;
  border: 2px solid #d946ef;
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
}

.PostCreatorNode_inspectSection__M4lDQ h3 {
  color: #f0abfc;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.PostCreatorNode_inspectDetails__7zhvC {
  background: #1a1a1a;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #444;
}

.PostCreatorNode_elementInfo__bxi-r {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.PostCreatorNode_elementInfo__bxi-r p {
  margin: 0;
  color: #b5b5b5;
  font-size: 0.95rem;
  padding: 8px;
  background: #2a2a2a;
  border-radius: 6px;
  border-left: 3px solid #d946ef;
}

.PostCreatorNode_elementInfo__bxi-r strong {
  color: #f0abfc;
  font-weight: 700;
}

/* ===== TEMPLATES TAB - DARK THEME ===== */
.PostCreatorNode_templatesTab__NWLQi {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.PostCreatorNode_loadingTemplates__Vc8rk,
.PostCreatorNode_noTemplates__LhNN7 {
  text-align: center;
  padding: 40px 20px;
  color: #b5b5b5;
}

.PostCreatorNode_templateHint__5u-12 {
  font-size: 0.85rem;
  color: #888;
  margin-top: 10px;
}

.PostCreatorNode_templateHint__5u-12 code {
  background: #2a2a2a;
  padding: 2px 8px;
  border-radius: 4px;
  color: #f0abfc;
  font-family: 'Inconsolata', monospace;
}

.PostCreatorNode_templateGrid__3owSx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.PostCreatorNode_templateCard__IW5eh {
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 2px solid #333;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.PostCreatorNode_templateCard__IW5eh:hover {
  border-color: #d946ef;
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.2);
  transform: translateY(-2px);
}

.PostCreatorNode_templateCardSelected__2YjB9 {
  border-color: #d946ef;
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.4);
  background: linear-gradient(135deg, #3a2a3a 0%, #2a1f2a 100%);
}

.PostCreatorNode_templateHeader__yB4NL {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.PostCreatorNode_templateHeader__yB4NL h3 {
  color: #e5e5e5;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  flex: 1 1;
}

.PostCreatorNode_templateHeaderActions__LpWXc {
  display: flex;
  align-items: center;
  gap: 8px;
}

.PostCreatorNode_activeBadge__fhbVF {
  background: #d946ef;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PostCreatorNode_deleteTemplateButton__-GZP7 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #444;
  border-radius: 6px;
  color: #999;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.PostCreatorNode_deleteTemplateButton__-GZP7:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  transform: scale(1.05);
}

.PostCreatorNode_deleteTemplateButton__-GZP7:active {
  transform: scale(0.95);
}

.PostCreatorNode_templateDescription__Vwtxm {
  color: #b5b5b5;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.PostCreatorNode_templateInfo__U7isr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

.PostCreatorNode_layerCount__-HOJE {
  color: #888;
  font-size: 0.85rem;
  font-weight: 600;
}

.PostCreatorNode_layerTypes__wafJY {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.PostCreatorNode_layerType__QfnPa {
  background: #2a2a2a;
  color: #f0abfc;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #444;
  text-transform: capitalize;
}

/* ===== SAVE TEMPLATE DIALOG ===== */
.PostCreatorNode_saveTemplateDialog__Z9LC- {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.PostCreatorNode_dialogDescription__MfWij {
  color: #9ca3af;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

.PostCreatorNode_formGroup__h8EaI {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.PostCreatorNode_formGroup__h8EaI label {
  color: #e5e5e5;
  font-size: 0.9rem;
  font-weight: 600;
}

.PostCreatorNode_formInput__K6bs6,
.PostCreatorNode_formTextarea__jxG5E {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #374151;
  border-radius: 6px;
  background: #1f2937;
  color: #e5e5e5;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  transition: all 0.2s ease;
}

.PostCreatorNode_formInput__K6bs6:focus,
.PostCreatorNode_formTextarea__jxG5E:focus {
  outline: none;
  border-color: #d946ef;
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.1);
}

.PostCreatorNode_formInput__K6bs6::placeholder,
.PostCreatorNode_formTextarea__jxG5E::placeholder {
  color: #6b7280;
}

.PostCreatorNode_formTextarea__jxG5E {
  resize: vertical;
  min-height: 80px;
}

.PostCreatorNode_dialogActions__YpKoO {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #374151;
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_cancelButton__Vpb1v {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #374151;
  color: #9ca3af;
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_cancelButton__Vpb1v:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_saveButton__8ebEA {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: #3b82f6;
  color: #ffffff;
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_saveButton__8ebEA:hover {
  background: #2563eb;
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_saveButton__8ebEA:disabled {
  background: #6b7280;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Post Creator Modal Styles */

/* --- Main Overlay --- */
.PostCreatorModal_modalOverlay__bCTaw {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
  padding: 20px; /* Add padding to ensure spacing from edges */
}

.PostCreatorModal_modalOverlay__bCTaw.PostCreatorModal_open__WK1Pp {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

/* --- Main Content Wrapper (Two-Panel Layout) --- */
.PostCreatorModal_modalContentWrapper__8rHgo {
  display: flex;
  gap: 20px;
  width: 90vw;
  max-width: 1600px; /* Maximum width for large screens */
  min-height: 50vh;
  max-height: 85vh;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-25px) scale(0.93);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.PostCreatorModal_modalOverlay__bCTaw.PostCreatorModal_open__WK1Pp .PostCreatorModal_modalContentWrapper__8rHgo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Left Panel (Preview) --- */
.PostCreatorModal_leftPanel__92XeZ {
  flex: 1 1;
  background-color: rgba(17, 24, 39, 0.95);
  color: #e5e7eb;
  padding: 25px 30px;
  border-radius: 12px;
  border: 1px solid #374151;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* --- Right Panel (Settings) --- */
.PostCreatorModal_rightPanel__Ek5EB {
  flex: 1 1;
  background-color: rgba(17, 24, 39, 0.95);
  color: #e5e7eb;
  padding: 25px 30px;
  border-radius: 12px;
  border: 1px solid #374151;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbar */
.PostCreatorModal_leftPanel__92XeZ::-webkit-scrollbar,
.PostCreatorModal_rightPanel__Ek5EB::-webkit-scrollbar {
  width: 6px;
}

.PostCreatorModal_leftPanel__92XeZ::-webkit-scrollbar-track,
.PostCreatorModal_rightPanel__Ek5EB::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}

.PostCreatorModal_leftPanel__92XeZ::-webkit-scrollbar-thumb,
.PostCreatorModal_rightPanel__Ek5EB::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

/* --- Particle Background --- */
.PostCreatorModal_particleContainer__0h27o {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.PostCreatorModal_particle__5hALu {
  position: absolute;
  opacity: 0;
  animation-name: PostCreatorModal_popInOut__hgz29;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes PostCreatorModal_popInOut__hgz29 {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* --- Pastel Filters --- */
.PostCreatorModal_pastelFilter1__LyQIA {
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}
.PostCreatorModal_pastelFilter2__zw5bh {
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}
.PostCreatorModal_pastelFilter3__CWe2l {
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}
.PostCreatorModal_pastelFilter4__gUxCt {
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}
.PostCreatorModal_pastelFilter5__ROnwf {
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .PostCreatorModal_modalOverlay__bCTaw {
    padding: 10px;
  }

  .PostCreatorModal_modalContentWrapper__8rHgo {
    flex-direction: column;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    gap: 10px;
  }

  .PostCreatorModal_leftPanel__92XeZ {
    display: none; /* Hide preview on mobile */
  }

  .PostCreatorModal_rightPanel__Ek5EB {
    flex: 1 1;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .PostCreatorModal_modalOverlay__bCTaw {
    padding: 5px;
  }

  .PostCreatorModal_modalContentWrapper__8rHgo {
    width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
  }

  .PostCreatorModal_rightPanel__Ek5EB {
    padding: 12px;
  }
}

/* Draggable Canvas Preview Styles */

.DraggableCanvasPreview_canvasWrapper__YWuvf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 8px;
  min-height: 400px;
}

.DraggableCanvasPreview_canvasControls__2a2Sx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.DraggableCanvasPreview_controlButton__cv5aN {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e5e7eb;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.DraggableCanvasPreview_controlButton__cv5aN:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.DraggableCanvasPreview_controlButton__cv5aN.DraggableCanvasPreview_active__y0kBz {
  background: rgba(217, 70, 239, 0.2);
  border-color: #d946ef;
  color: #d946ef;
}

.DraggableCanvasPreview_canvasDimensions__6zG\+M {
  font-size: 0.85rem;
  color: #9ca3af;
  font-family: monospace;
}

.DraggableCanvasPreview_canvas__RAJsD {
  position: relative;
  background: #2d2d2d;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

.DraggableCanvasPreview_canvasOver__mTWUV {
  box-shadow: 0 4px 30px rgba(217, 70, 239, 0.4);
  border: 2px solid #d946ef;
}

.DraggableCanvasPreview_gridOverlay__DPtdg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.DraggableCanvasPreview_gridLine__2wOiV {
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.DraggableCanvasPreview_dropIndicator__lmSBV {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  background: rgba(217, 70, 239, 0.1);
  border: 2px dashed #d946ef;
  border-radius: 8px;
  color: #d946ef;
  font-weight: 600;
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 100;
}

.DraggableCanvasPreview_emptyState__1vm45 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #6b7280;
  pointer-events: none;
}

.DraggableCanvasPreview_emptyState__1vm45 svg {
  margin-bottom: 15px;
  opacity: 0.5;
}

.DraggableCanvasPreview_emptyState__1vm45 p {
  font-size: 0.95rem;
  margin: 0;
}

/* Draggable Element Styles */

.DraggableElement_draggableElement__GJTdq {
  position: absolute;
  -webkit-user-select: none;
          user-select: none;
  transition: box-shadow 0.2s;
  /* Performance optimizations - GPU acceleration */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.DraggableElement_draggableElement__GJTdq.DraggableElement_selected__s\+S-- {
  box-shadow:
    0 0 0 2px #d946ef,
    0 4px 12px rgba(217, 70, 239, 0.3);
  /* z-index removed - element stays at its layer position */
}

.DraggableElement_draggableElement__GJTdq.DraggableElement_dragging__5T0mu {
  opacity: 0.7;
  z-index: 999;
}

/* Element Type Styles */
.DraggableElement_imageElement__4-o04,
.DraggableElement_videoElement__ZiCBI,
.DraggableElement_textElement__kgDAg,
.DraggableElement_audioElement__8eMRC {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.DraggableElement_imageElement__4-o04 img,
.DraggableElement_videoElement__ZiCBI video {
  border-radius: 4px;
}

.DraggableElement_textElement__kgDAg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.DraggableElement_audioElement__8eMRC {
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  padding: 10px;
}

.DraggableElement_audioElement__8eMRC svg {
  opacity: 0.9;
}

.DraggableElement_audioElement__8eMRC span {
  font-size: 0.85rem;
  font-weight: 500;
}

.DraggableElement_placeholder__X1ZUH {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  color: #666;
  font-weight: 500;
  border: 2px dashed #ccc;
  border-radius: 4px;
}

/* Resize Handles */
.DraggableElement_resizeHandle__EJz7V {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #d946ef;
  border: 2px solid white;
  border-radius: 50%;
  z-index: 20;
  cursor: pointer;
}

.DraggableElement_handleNW__5JNCY {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

.DraggableElement_handleNE__bO\+X3 {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.DraggableElement_handleSW__khKz- {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}

.DraggableElement_handleSE__\+THKN {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.DraggableElement_resizeHandle__EJz7V:hover {
  background: #f0abfc;
  transform: scale(1.2);
}

/* Elements Panel Styles */

.ElementsPanel_elementsPanel__Qe-sE {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.ElementsPanel_panelHeader__2Y5-4 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
}

.ElementsPanel_panelHeader__2Y5-4 h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #f9fafb;
}

.ElementsPanel_panelHeader__2Y5-4 p {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}

.ElementsPanel_elementsGrid__X9fDw {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  flex: 1 1;
}

.ElementsPanel_elementItem__He-XK {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 25px 15px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: grab;
  transition: all 0.2s;
  -webkit-user-select: none;
          user-select: none;
}

.ElementsPanel_elementItem__He-XK:hover {
  background: linear-gradient(
    135deg,
    rgba(217, 70, 239, 0.15) 0%,
    rgba(217, 70, 239, 0.05) 100%
  );
  border-color: #d946ef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
}

.ElementsPanel_elementItem__He-XK:active {
  cursor: grabbing;
  transform: translateY(0);
}

.ElementsPanel_elementIcon__HzFzY {
  color: #d946ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ElementsPanel_elementLabel__XMYFp {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e5e7eb;
}

.ElementsPanel_panelFooter__17oHl {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
}

.ElementsPanel_tip__XZ7nr {
  padding: 12px;
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #e5e7eb;
  line-height: 1.5;
}

.ElementsPanel_tip__XZ7nr strong {
  color: #60a5fa;
}

/* Static Canvas Preview Styles */
.StaticCanvasPreview_staticCanvasWrapper__8TwCm {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.StaticCanvasPreview_staticCanvas__kU2Ws {
  position: relative;
  background: #000000;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.StaticCanvasPreview_canvasBackground__5Q2yG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.1;
  pointer-events: none;
}

.StaticCanvasPreview_placeholder__Tiga0 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 500;
}

.StaticCanvasPreview_audioElement__BEIzT {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.2);
  border: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: 8px;
  color: #a855f7;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
}

.StaticCanvasPreview_audioElement__BEIzT svg {
  flex-shrink: 0;
}

.StaticCanvasPreview_emptyState__7yfoR {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  pointer-events: none;
}

.StaticCanvasPreview_emptyState__7yfoR p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.StaticCanvasPreview_emptyState__7yfoR svg {
  opacity: 0.5;
}

/* src/MainApp/nodes/Utility Nodes/GroupNode.module.css */

/* Make the ReactFlow node wrapper non-interactive for group nodes */
.react-flow__node-groupNode {
  pointer-events: none !important;
}

/* When group node has the interactMode class, make wrapper interactive */
.react-flow__node-groupNode.interactMode {
  pointer-events: auto !important;
}

/* When group node is being edited, bring it above other nodes */
.react-flow__node-groupNode.editing {
  z-index: 1000 !important;
}

.GroupNode_groupWrapper__4wifw {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}

/* When in interact mode, allow normal node interactions */
.GroupNode_groupWrapper__4wifw.GroupNode_interactMode__Z7eEP {
  pointer-events: auto;
}

/* Background - completely non-interactive */
.GroupNode_groupBackground__Mnej8 {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px dashed rgba(148, 163, 184, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.GroupNode_groupBackground__Mnej8.GroupNode_selected__I1AcW {
  border-color: rgba(129, 140, 248, 0.7);
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
}

/* Floating header - always on top and interactive */
.GroupNode_floatingHeader__cePWF {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.GroupNode_floatingHeader__cePWF.GroupNode_visible__jtIHH {
  opacity: 1;
  transform: translateY(0);
}

/* Header row - contains main header and optional description */
.GroupNode_headerRow__A-gHY {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Header content layout - sleek dark glass style (dark mode default) */
.GroupNode_headerContent__E3qhc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

/* Light mode */
body:not(.dark-theme) .GroupNode_headerContent__E3qhc {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Drag handle for moving the group */
.GroupNode_dragHandle__nj7dj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #94a3b8;
  cursor: grab;
  border-radius: 4px;
  transition: all 0.15s ease;
  pointer-events: auto !important;
}

.GroupNode_dragHandle__nj7dj:hover {
  background: rgba(129, 140, 248, 0.2);
  color: #a5b4fc;
}

.GroupNode_dragHandle__nj7dj:active {
  cursor: grabbing;
  background: rgba(129, 140, 248, 0.3);
}

body:not(.dark-theme) .GroupNode_dragHandle__nj7dj {
  color: #64748b;
}

body:not(.dark-theme) .GroupNode_dragHandle__nj7dj:hover {
  color: #6366f1;
}

/* Interact button - click to enable selection/dragging */
.GroupNode_interactButton__846FW {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.GroupNode_interactButton__846FW:hover {
  background: rgba(129, 140, 248, 0.2);
  color: #a5b4fc;
}

body:not(.dark-theme) .GroupNode_interactButton__846FW {
  color: #64748b;
}

body:not(.dark-theme) .GroupNode_interactButton__846FW:hover {
  color: #6366f1;
}

/* Name text */
.GroupNode_name__vIWle {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  font-family: 'Urbanist', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-width: 120px;
}

body:not(.dark-theme) .GroupNode_name__vIWle {
  color: #334155;
}

.GroupNode_placeholder__yPr16 {
  font-weight: 500;
  color: #64748b;
  font-style: italic;
}

/* Description container - separate glass pill */
.GroupNode_descriptionContainer__IVou2 {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  max-width: 200px;
}

body:not(.dark-theme) .GroupNode_descriptionContainer__IVou2 {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.GroupNode_description__9eIKM {
  font-size: 11px;
  color: #94a3b8;
  font-family: 'Urbanist', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

body:not(.dark-theme) .GroupNode_description__9eIKM {
  color: #64748b;
}

.GroupNode_editButton__gQX5P {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #94a3b8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.GroupNode_editButton__gQX5P:hover {
  background: rgba(129, 140, 248, 0.2);
  color: #a5b4fc;
}

body:not(.dark-theme) .GroupNode_editButton__gQX5P {
  color: #64748b;
}

body:not(.dark-theme) .GroupNode_editButton__gQX5P:hover {
  color: #6366f1;
}

/* Edit form - sleek dark glass style */
.GroupNode_editForm__6z0p4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

body:not(.dark-theme) .GroupNode_editForm__6z0p4 {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.GroupNode_nameInput__JDxrF {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.6);
  color: #e2e8f0;
  font-family: 'Urbanist', sans-serif;
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.GroupNode_nameInput__JDxrF:focus {
  border-color: #818cf8;
  background: rgba(30, 41, 59, 0.8);
}

.GroupNode_nameInput__JDxrF::placeholder {
  color: #64748b;
}

body:not(.dark-theme) .GroupNode_nameInput__JDxrF {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.4);
  color: #334155;
}

body:not(.dark-theme) .GroupNode_nameInput__JDxrF:focus {
  background: #fff;
}

.GroupNode_descriptionInput__BjWKQ {
  font-size: 11px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.6);
  color: #cbd5e1;
  font-family: 'Urbanist', sans-serif;
  outline: none;
  resize: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.GroupNode_descriptionInput__BjWKQ:focus {
  border-color: #818cf8;
  background: rgba(30, 41, 59, 0.8);
}

.GroupNode_descriptionInput__BjWKQ::placeholder {
  color: #64748b;
}

body:not(.dark-theme) .GroupNode_descriptionInput__BjWKQ {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.4);
  color: #475569;
}

body:not(.dark-theme) .GroupNode_descriptionInput__BjWKQ:focus {
  background: #fff;
}

/* Color picker row */
.GroupNode_colorPickerRow__xmntX {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.GroupNode_colorLabel__Ycjzd {
  font-size: 11px;
  color: #94a3b8;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
}

body:not(.dark-theme) .GroupNode_colorLabel__Ycjzd {
  color: #64748b;
}

.GroupNode_colorOptions__swLBf {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.GroupNode_colorOption__JPHuO {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.GroupNode_colorOption__JPHuO:hover {
  transform: scale(1.2);
}

.GroupNode_colorOption__JPHuO.GroupNode_colorSelected__9wMiz {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.6);
  transform: scale(1.2);
}

/* Opacity slider row */
.GroupNode_opacityRow__DvZvC {
  display: flex;
  align-items: center;
  gap: 8px;
}

.GroupNode_opacitySlider__5mCzW {
  flex: 1 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.3);
  outline: none;
  cursor: pointer;
}

.GroupNode_opacitySlider__5mCzW::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #818cf8;
  cursor: pointer;
  -webkit-transition: transform 0.15s ease;
  transition: transform 0.15s ease;
}

.GroupNode_opacitySlider__5mCzW::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.GroupNode_opacitySlider__5mCzW::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #818cf8;
  cursor: pointer;
  border: none;
}

.GroupNode_opacityValue__ciMY6 {
  font-size: 10px;
  color: #94a3b8;
  min-width: 28px;
  text-align: right;
  font-family: 'Urbanist', sans-serif;
}

body:not(.dark-theme) .GroupNode_opacityValue__ciMY6 {
  color: #64748b;
}

/* Edit actions */
.GroupNode_editActions__3FiZ6 {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}

.GroupNode_saveButton__ygdfk,
.GroupNode_cancelButton__aDOei {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
}

.GroupNode_saveButton__ygdfk {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.GroupNode_saveButton__ygdfk:hover {
  background: #22c55e;
  transform: translateY(-1px);
}

.GroupNode_cancelButton__aDOei {
  background: rgba(100, 116, 139, 0.5);
  color: #e2e8f0;
}

.GroupNode_cancelButton__aDOei:hover {
  background: rgba(100, 116, 139, 0.7);
}

body:not(.dark-theme) .GroupNode_cancelButton__aDOei {
  background: rgba(100, 116, 139, 0.2);
  color: #475569;
}

body:not(.dark-theme) .GroupNode_cancelButton__aDOei:hover {
  background: rgba(100, 116, 139, 0.3);
}

/* Resizer styles */
.GroupNode_resizerLine__mAEvg {
  border-color: #818cf8 !important;
  pointer-events: auto !important;
}

.GroupNode_resizerHandle__4AzBR {
  background: #818cf8 !important;
  border: 2px solid rgba(15, 23, 42, 0.8) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* UniversalCustomNode.module.css */
/* Styled to match InputNode's two-frame UI design */

@keyframes UniversalCustomNode_scaleInNode__N5vLK {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes UniversalCustomNode_spin__l4ZG8 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Base Node Styling --- */
.UniversalCustomNode_nodeBase__HqyLd {
  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Layout and Box Model */
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--custom-node-border);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Colors and Typography */
  background-color: var(--custom-node-bg);
  color: var(--custom-node-text);
  font-family: 'Inconsolata', monospace;

  /* Positioning Context */
  position: relative;

  /* Transitions */
  transition: border-color 0.2s ease-in-out;
  animation: UniversalCustomNode_scaleInNode__N5vLK 0.3s ease-out;
}

body.no-node-animation .UniversalCustomNode_nodeBase__HqyLd {
  animation: none;
}

/* --- Selected Node State --- */
.react-flow__node.selected .UniversalCustomNode_nodeBase__HqyLd {
  border-color: var(--custom-node-border-selected);
  box-shadow: 0 0 0 1px var(--custom-node-border-selected);
}

/* --- Collapsed State --- */
.UniversalCustomNode_nodeCollapsed__ekhRo {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
}

/* --- Expanded State --- */
.UniversalCustomNode_nodeExpanded__AKbAh {
  min-width: 280px;
  max-width: 350px;
  width: 280px;
}

/* --- Floating Icon Styling --- */
.UniversalCustomNode_floatingIcon__xX7gL {
  position: absolute;
  top: -12px;
  left: -12px;
  background-color: var(--custom-node-icon-bg);
  color: var(--custom-node-icon-color);
  border-radius: 20%;
  border: 1px solid var(--custom-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* --- Frames Container --- */
.UniversalCustomNode_framesContainer__0b9\+Z {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
}

/* --- Frame 1: Collapsed View --- */
.UniversalCustomNode_collapsedFrame__JhRQ- {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--custom-node-bg);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  border-radius: 6px;
  will-change: transform;
}

.UniversalCustomNode_collapsedFrame__JhRQ-.UniversalCustomNode_hasOutputPreview__MuknM {
  justify-content: flex-start;
  padding-top: 8px;
}

/* Slide out animation when expanding */
.UniversalCustomNode_nodeExpanded__AKbAh .UniversalCustomNode_collapsedFrame__JhRQ- {
  transform: translateX(-105%);
  pointer-events: none;
}

/* --- Collapsed Icons Row --- */
.UniversalCustomNode_collapsedIconsRow__1VWlO {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.UniversalCustomNode_collapsedIconsRow__1VWlO.UniversalCustomNode_hasOutput__Vnn3O {
  gap: 6px;
}

.UniversalCustomNode_collapsedIcon__vBFQg {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--custom-node-icon-color);
  transition: all 0.2s ease;
}

.UniversalCustomNode_hasOutput__Vnn3O .UniversalCustomNode_collapsedIcon__vBFQg {
  width: 40px;
  height: 40px;
}

.UniversalCustomNode_collapsedIcon__vBFQg:hover {
  transform: scale(1.05);
}

/* --- Status Indicators --- */
.UniversalCustomNode_statusIndicators__ir0Me {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 200px;
}

.UniversalCustomNode_statusItem__YMyhn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.UniversalCustomNode_statusIcon__JUp9h {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--custom-node-textarea-border);
}

.UniversalCustomNode_statusActive__0\+Q5x {
  background-color: transparent;
  color: var(--custom-node-border-selected);
  border-color: var(--custom-node-border-selected);
}

.UniversalCustomNode_statusInactive__iOaFg {
  background-color: transparent;
  color: var(--custom-node-label-text);
  opacity: 0.4;
}

.UniversalCustomNode_statusOutputActive__vLR4R {
  background-color: transparent;
  color: #3b82f6;
  border-color: #3b82f6;
}

.UniversalCustomNode_statusCheck__626QF {
  color: var(--custom-node-border-selected);
}

.UniversalCustomNode_statusCheckOutput__HmEuV {
  color: #3b82f6;
}

/* --- Output Preview (Ghost Lines) --- */
.UniversalCustomNode_outputPreview__zwlHD {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.UniversalCustomNode_ghostLines__cYIhD {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.UniversalCustomNode_ghostLine__gcesD {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--custom-node-textarea-border) 0%,
    var(--custom-node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.UniversalCustomNode_ghostLine__gcesD:nth-child(2) {
  width: 75%;
}

.UniversalCustomNode_ghostLine__gcesD:nth-child(3) {
  width: 50%;
}

/* --- Image Preview Container --- */
.UniversalCustomNode_imagePreviewContainer__Nb-wP {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  border-radius: 6px;
}

.UniversalCustomNode_imagePreview__e\+iTi {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Audio Preview Container --- */
.UniversalCustomNode_audioPreviewContainer__Oe8CK {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(99, 102, 241, 0.05) 100%
  );
}

.UniversalCustomNode_audioPreview__UKMn1 {
  width: 100%;
  max-width: 220px;
  height: 36px;
  border-radius: 18px;
}

/* --- Polling Status --- */
.UniversalCustomNode_pollingStatus__cjIw2 {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.7rem;
  color: #9ca3af;
  background: rgba(17, 24, 39, 0.95);
  padding: 4px 12px;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  white-space: nowrap;
  border: 1px solid #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

/* --- Collapsed Loading --- */
.UniversalCustomNode_collapsedLoading__qFM8H {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--custom-node-border-selected);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Frame 2: Expanded View --- */
.UniversalCustomNode_expandedFrame__FSGHr {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0;
  overflow: hidden;
}

/* --- Expanded Header --- */
.UniversalCustomNode_expandedHeader__KC8Um {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  pointer-events: none;
}

.UniversalCustomNode_nodeExpanded__AKbAh .UniversalCustomNode_expandedHeader__KC8Um,
.UniversalCustomNode_expandedHeader__KC8Um.UniversalCustomNode_headerVisible__QNRRE {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* --- Header Buttons Wrapper --- */
.UniversalCustomNode_buttonsWrapper__CEIFj {
  display: flex;
  gap: 5px;
}

.UniversalCustomNode_buttonsWrapper__CEIFj button {
  width: 26px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--custom-node-button-bg);
  color: var(--custom-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  margin: 0;
}

.UniversalCustomNode_buttonsWrapper__CEIFj button:hover {
  background-color: var(--custom-node-button-bg-hover);
}

.UniversalCustomNode_buttonsWrapper__CEIFj button:disabled {
  background-color: var(--custom-node-label-text);
  color: var(--custom-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.UniversalCustomNode_buttonsWrapper__CEIFj button.UniversalCustomNode_refreshing__094hO svg {
  animation: UniversalCustomNode_spin__l4ZG8 0.8s linear infinite;
}

@keyframes UniversalCustomNode_spin__l4ZG8 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Refresh Success Animation --- */
.UniversalCustomNode_refreshSuccess__qTBTK {
  animation: UniversalCustomNode_refreshSuccessPulse__aEUb\+ 1.5s ease-out;
}

@keyframes UniversalCustomNode_refreshSuccessPulse__aEUb\+ {
  0% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0.7),
      0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  20% {
    box-shadow:
      0 0 0 8px rgba(34, 197, 94, 0.4),
      0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
  }
  40% {
    box-shadow:
      0 0 0 15px rgba(34, 197, 94, 0),
      0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: scale(1);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

/* --- Node Content Area --- */
.UniversalCustomNode_nodeContent__KlnwC {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* --- Text Area Wrapper --- */
.UniversalCustomNode_textAreaWrapper__C4KQk {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
  min-height: 0;
}

.UniversalCustomNode_textAreaLabel__CrIAQ {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--custom-node-label-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* --- Textarea Styling --- */
.UniversalCustomNode_nodeContent__KlnwC textarea {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  flex: 1 1;
  min-height: 0;
  resize: none;
  box-sizing: border-box;
  background-color: var(--custom-node-bg);
  color: var(--custom-node-text);
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
}

.UniversalCustomNode_nodeContent__KlnwC textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--custom-node-border-selected);
}

.UniversalCustomNode_nodeContent__KlnwC textarea::placeholder {
  color: var(--custom-node-label-text);
  opacity: 0.6;
}

/* --- Output Display --- */
.UniversalCustomNode_outputDisplay__FJVu6 {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  background: var(--custom-node-icon-bg);
  border-radius: 4px;
}

.UniversalCustomNode_outputDisplay__FJVu6 pre {
  margin: 0;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  color: var(--custom-node-text);
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Error Display (inside expanded view) --- */
.UniversalCustomNode_errorDisplay__N0Tav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 0.75rem;
}

/* --- Floating Error Message (outside node, shows on hover) --- */
.UniversalCustomNode_floatingError__4Na5V {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 0.75rem;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  max-height: 80px;
  overflow-y: auto;
}

.UniversalCustomNode_nodeBase__HqyLd:hover .UniversalCustomNode_floatingError__4Na5V {
  opacity: 1;
  pointer-events: auto;
}

.UniversalCustomNode_floatingError__4Na5V span {
  flex: 1 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.UniversalCustomNode_floatingError__4Na5V svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Expanded Footer --- */
.UniversalCustomNode_expandedFooter__Bu5Pf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  flex-shrink: 0;
  height: 28px;
}

.UniversalCustomNode_footerInfo__WILJf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.UniversalCustomNode_methodBadge__QXyf- {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  background-color: var(--custom-node-icon-bg);
  color: var(--custom-node-label-text);
  border-radius: 4px;
  font-family: 'Inconsolata', monospace;
}

.UniversalCustomNode_footerControls__WI1qd {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Pin Button --- */
.UniversalCustomNode_pinButton__BE63q {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--custom-node-label-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.UniversalCustomNode_pinButton__BE63q:hover {
  background: var(--custom-node-icon-bg);
}

.UniversalCustomNode_pinButton__BE63q.UniversalCustomNode_pinActive__OUZh2 {
  color: var(--custom-node-border-selected);
}

/* --- Go Button --- */
.UniversalCustomNode_goButton__qZvaE {
  width: 28px;
  height: 22px;
  padding: 0;
  border: none;
  background-color: var(--custom-node-button-bg);
  color: var(--custom-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.UniversalCustomNode_goButton__qZvaE:hover:not(:disabled) {
  background-color: var(--custom-node-button-bg-hover);
}

.UniversalCustomNode_goButton__qZvaE:disabled {
  background-color: var(--custom-node-label-text);
  color: var(--custom-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- Spinning Animation --- */
.UniversalCustomNode_spinning__4TZ3x {
  animation: UniversalCustomNode_spin__l4ZG8 1s linear infinite;
}

/* --- Handle Styling --- */
.UniversalCustomNode_handle__JaD-M {
  width: 12px;
  height: 12px;
  background-color: var(--custom-node-border-selected);
  border: 2px solid var(--custom-node-bg);
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* --- Handle Wrapper for Edge Preview --- */
.UniversalCustomNode_handleWrapper__mTSjn {
  z-index: 1;
}

.UniversalCustomNode_handleWrapperActive__cJ4qo {
  z-index: 100;
}

/* --- Edge Preview Active States --- */
.UniversalCustomNode_handleActive__de3tP {
  background-color: #ec4899 !important;
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
  cursor: pointer;
}

/* --- Settings Modal Styles --- */
.UniversalCustomNode_settingsModalOverlay__SE2xQ {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.UniversalCustomNode_settingsModal__Ysa8X {
  background-color: rgba(17, 24, 39, 0.98);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  color: #f9fafb;
  font-family: 'Inconsolata', monospace;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.UniversalCustomNode_settingsModalHeader__eMuku {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #374151;
  flex-shrink: 0;
}

.UniversalCustomNode_settingsModalHeader__eMuku h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #f9fafb;
}

.UniversalCustomNode_closeModalButton__C8uHB {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.UniversalCustomNode_closeModalButton__C8uHB:hover {
  background: #374151;
  color: #f9fafb;
}

.UniversalCustomNode_settingsModalContent__eLyjR {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1;
  overflow-y: auto;
}

.UniversalCustomNode_descriptionSection__-w7yH {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(99, 102, 241, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 16px;
}

.UniversalCustomNode_descriptionText__plTws {
  margin: 0;
  font-size: 0.9rem;
  color: #c4b5fd;
  line-height: 1.5;
  font-style: italic;
}

.UniversalCustomNode_settingsSection__tIRXa {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 16px;
}

.UniversalCustomNode_settingsSection__tIRXa h4 {
  margin: 0 0 12px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.UniversalCustomNode_settingsRow__FPqSc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

.UniversalCustomNode_settingsRow__FPqSc:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.UniversalCustomNode_settingsLabel__JPyVx {
  font-size: 0.85rem;
  color: #9ca3af;
}

.UniversalCustomNode_settingsValue__KfO9T {
  font-size: 0.85rem;
  color: #f9fafb;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.UniversalCustomNode_editInCreatorButton__Os3F6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.UniversalCustomNode_editInCreatorButton__Os3F6:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.UniversalCustomNode_editInCreatorButton__Os3F6:active {
  transform: translateY(0);
}

/* src/components/Sidebar.module.css */

/* --- Base Variables (Consider defining these in a global CSS or :root) --- */
:root {
  --node-bg: #fffff6;
  --node-border: #4a4a4c;
  --node-text-on-dark-bg: #f2f2f7;
  --node-text-on-light-bg: #333333;
  --node-label-text: #c7c7cc;
  --node-icon-bg: #3a3a3c;
  --node-textarea-bg: #3a3a3c;
  --node-textarea-border: #5a5a5c;
  --handle-bg: #5a5a5c;
  --node-border-selected: #007aff;

  /* Lighter Button Base/Border/Glow Colors */
  --btn-input-base: #f0fdf4;
  --btn-output-base: #fff1f2;
  --btn-data-base: #fefce8;
  --btn-transform-base: #f0fdfa;
  --btn-smart-transform-base: #eef2ff;
  --btn-video-base: #fff7ed;
  --btn-audio-base: #e0f2fe;
  --btn-music-base: #f5f3ff;
  --btn-image-base: #f1f5f9; /* New: Castle Grey */
  --btn-frame-extract-base: #fef3c7; /* New: Amber Frame Extraction */
  --btn-start-base: #f8daff; /* New: Automation Purple */
  --btn-gdrive-base: #e8f5e9; /* New: Google Drive Green */
  --btn-post-creator-base: #fdf4ff; /* New: Post Creator Fuchsia */
  --btn-text-display-base: #1e293b; /* New: Text Display Slate */
  --btn-media-preview-base: #dbeafe; /* New: Media Preview Sky Blue */

  --btn-save-base: #282a4e;
  --btn-save-base-border: #616161;
  --btn-toggle-base: #282a4e;
  --btn-toggle-base-border: #616161;
  --btn-toggle-icon: #e0e0e0;

  --btn-input-base-border: #86efac;
  --btn-output-base-border: #fecdd3;
  --btn-data-base-border: #fde047;
  --btn-transform-base-border: #99f6e4;
  --btn-smart-transform-base-border: #c7d2fe;
  --btn-video-base-border: #fed7aa;
  --btn-audio-base-border: #7dd3fc;
  --btn-music-base-border: #c4b5fd;
  --btn-image-base-border: #cbd5e1; /* New: Castle Grey Border */
  --btn-frame-extract-base-border: #f59e0b; /* New: Amber Frame Extraction Border */
  --btn-start-base-border: #f08dff; /* New: Automation Purple Border */
  --btn-gdrive-base-border: #66bb6a; /* New: Google Drive Green Border */
  --btn-post-creator-base-border: #f0abfc; /* New: Post Creator Fuchsia Border */
  --btn-text-display-base-border: #334155; /* New: Text Display Slate Border */
  --btn-media-preview-base-border: #60a5fa; /* New: Media Preview Sky Blue Border */

  --grad-save-start: #9e9e9e;
  --grad-toggle-start: #8d8d8d;

  /* Text colors for buttons */
  --text-on-input: #1b5e20;
  --text-on-output: #881337;
  --text-on-data: #78350f;
  --text-on-transform: #0f766e;
  --text-on-smart-transform: #3730a3;
  --text-on-video: #7c2d12;
  --text-on-audio: #0c4a6e;
  --text-on-music: #4a148c;
  --text-on-image: #1e293b; /* New: Castle Text */
  --text-on-frame-extract: #92400e; /* New: Amber Frame Extraction Text */
  --text-on-start: #701a75; /* New: Automation Text */
  --text-on-gdrive: #1b5e20; /* New: Google Drive Text */
  --text-on-post-creator: #701a75; /* New: Post Creator Fuchsia Text */
  --text-on-text-display: #e2e8f0; /* New: Text Display Light Text */
  --text-on-media-preview: #1e3a8a; /* New: Media Preview Deep Blue Text */
  --text-on-save: var(--node-text-on-dark-bg);
}

/* --- Base Sidebar Container --- */
.Sidebar_sidebar__ppnma {
  padding: 0;
  box-sizing: border-box;
  display: flex;
  position: fixed;
  z-index: 1000;
  /* background-color: var(--node-bg); */
  border-radius: 12px;
  /* border: 2px solid #4a4a4c; */
  border-left: 1px solid #4a4a4c;
  border-right: 1px solid #4a4a4c;
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0,0,0,0.2); */
  transition:
    width 0.3s ease-in-out,
    min-width 0.3s ease-in-out,
    height 0.3s ease-in-out,
    min-height 0.3s ease-in-out,
    max-width 0.3s ease-in-out,
    top 0.2s ease-out,
    left 0.2s ease-out,
    right 0.2s ease-out,
    bottom 0.2s ease-out,
    transform 0.3s ease-in-out,
    flex-direction 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}

.Sidebar_sidebar__ppnma.Sidebar_dragging__neg\+4 {
  cursor: grabbing !important;
  opacity: 0.85;
  transition: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU {
  flex-direction: column;
  width: 190px;
  min-width: 190px;
  height: clamp(250px, 75vh, 75vh);
  border-right: 1px solid #4a4a4c;
  border-right: 1px solid var(--node-border);
  padding: 12px;
  gap: 12px;
}

.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA {
  flex-direction: row;
  align-items: center;
  height: auto;
  /* MODIFIED: Increased min-height to accommodate tabs */
  min-height: 95px;
  width: auto;
  max-width: calc(100vw - 2 * 1%);
  max-width: calc(100vw - 2 * var(--horizontal-margin, 1%));
  padding: 0 10px;
  gap: 10px;
  /* border-top: 1px solid var(--node-border); */
  margin-top: 7px;
  max-width: 800px;
}
.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA.Sidebar_collapsed__sGwNB {
  /* MODIFIED: Reset min-height when collapsed */
  min-height: 56px;
}

.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU.Sidebar_collapsed__sGwNB {
  width: 56px;
  min-width: 56px;
  padding: 10px 0;
}
.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU.Sidebar_collapsed__sGwNB .Sidebar_scrollableContent__agphR {
  align-items: center;
  padding-bottom: 8px;
}
.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU.Sidebar_collapsed__sGwNB .Sidebar_saveButtonContainer__5fER3 {
  padding-top: 8px;
}

.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA.Sidebar_collapsed__sGwNB {
  width: auto;
  padding: 0 8px;
  gap: 8px;
}

.Sidebar_horizontalArrangementItem__BPhOZ {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.Sidebar_horizontalScrollableNodeList__ZytS1 {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  display: flex;
  min-width: 0;
  padding: 0 5px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15px,
    black calc(100% - 15px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15px,
    black calc(100% - 15px),
    transparent 100%
  );
  /* NEW: Set a min-height for the node list row */
  min-height: 50px;
}

.Sidebar_toggleButton__rWaZ2 {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #282a4e;
  background-color: var(--btn-toggle-base);
  border: 1px solid #616161;
  border: 1px solid var(--btn-toggle-base-border);
  color: #e0e0e0;
  color: var(--btn-toggle-icon);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.Sidebar_toggleButton__rWaZ2:hover {
  background-color: #1b1b38;
  border-color: #6e6e6e;
  transform: scale(1.05);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.Sidebar_toggleButton__rWaZ2 svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU .Sidebar_scrollableContent__agphR {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  padding-right: 5px;
}

.Sidebar_horizontalScrollableNodeList__ZytS1 {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  display: flex;
  min-width: 0;
  padding: 0 5px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15px,
    black calc(100% - 15px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15px,
    black calc(100% - 15px),
    transparent 100%
  );
}
.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA.Sidebar_collapsed__sGwNB .Sidebar_horizontalScrollableNodeList__ZytS1 {
  flex-grow: 0;
  flex-shrink: 0;
  -webkit-mask-image: none;
  mask-image: none;
  padding: 0;
}

.Sidebar_scrollableContent__agphR::-webkit-scrollbar,
.Sidebar_horizontalScrollableNodeList__ZytS1::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.Sidebar_scrollableContent__agphR::-webkit-scrollbar-track,
.Sidebar_horizontalScrollableNodeList__ZytS1::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
.Sidebar_scrollableContent__agphR::-webkit-scrollbar-thumb,
.Sidebar_horizontalScrollableNodeList__ZytS1::-webkit-scrollbar-thumb {
  background-color: #5a5a5c;
  background-color: var(--handle-bg);
  border-radius: 3px;
}
.Sidebar_scrollableContent__agphR::-webkit-scrollbar-thumb:hover,
.Sidebar_horizontalScrollableNodeList__ZytS1::-webkit-scrollbar-thumb:hover {
  background-color: #007aff;
  background-color: var(--node-border-selected);
}

.Sidebar_nodeListContainer__w8Xfy {
  display: flex;
  align-items: stretch;
  width: auto;
}
.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU .Sidebar_nodeListContainer__w8Xfy {
  flex-direction: column;
  gap: 8px;
}
.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA .Sidebar_nodeListContainer__w8Xfy {
  flex-direction: row;
  gap: 10px;
  align-items: center;
  width: -webkit-max-content;
  width: max-content;
  padding: 5px 0;
}
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_nodeListContainer__w8Xfy {
  gap: 10px;
  align-items: center;
}

.Sidebar_nodeItem__ZkrNE {
  box-sizing: border-box;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  cursor: grab;
  font-weight: 500;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  text-align: left;
  -webkit-user-select: none;
          user-select: none;
  overflow: visible;
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.15s ease-out;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0px rgba(255, 255, 255, 0.1);
  position: relative;
}
.Sidebar_nodeItem__ZkrNE:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px) scale(1.01);
  z-index: 1;
}
.Sidebar_nodeItem__ZkrNE:active {
  cursor: grabbing;
  transform: translateY(0px) scale(1);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_nodeItem__ZkrNE {
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
}

.Sidebar_nodeIconSvg__q7CAc {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  transition: filter 0.2s ease-in-out;
}

/* Glow effects */
.Sidebar_nodeItem__ZkrNE[data-node-type='inputNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #f0fdf4)
    drop-shadow(0 0 8px #f0fdf4);
  filter: drop-shadow(0 0 4px var(--btn-input-base))
    drop-shadow(0 0 8px var(--btn-input-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='outputNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #fff1f2)
    drop-shadow(0 0 8px #fff1f2);
  filter: drop-shadow(0 0 4px var(--btn-output-base))
    drop-shadow(0 0 8px var(--btn-output-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='dataNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #fefce8)
    drop-shadow(0 0 8px #fefce8);
  filter: drop-shadow(0 0 4px var(--btn-data-base))
    drop-shadow(0 0 8px var(--btn-data-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='transformNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #f0fdfa)
    drop-shadow(0 0 8px #f0fdfa);
  filter: drop-shadow(0 0 4px var(--btn-transform-base))
    drop-shadow(0 0 8px var(--btn-transform-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='smartTransformNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #eef2ff)
    drop-shadow(0 0 8px #eef2ff);
  filter: drop-shadow(0 0 4px var(--btn-smart-transform-base))
    drop-shadow(0 0 8px var(--btn-smart-transform-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='videoGenerationNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #fff7ed)
    drop-shadow(0 0 8px #fff7ed);
  filter: drop-shadow(0 0 4px var(--btn-video-base))
    drop-shadow(0 0 8px var(--btn-video-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='audioNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #e0f2fe)
    drop-shadow(0 0 8px #e0f2fe);
  filter: drop-shadow(0 0 4px var(--btn-audio-base))
    drop-shadow(0 0 8px var(--btn-audio-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='musicNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #f5f3ff)
    drop-shadow(0 0 8px #f5f3ff);
  filter: drop-shadow(0 0 4px var(--btn-music-base))
    drop-shadow(0 0 8px var(--btn-music-base));
}
.Sidebar_nodeItem__ZkrNE[data-node-type='imageGenerationNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #f1f5f9)
    drop-shadow(0 0 8px #f1f5f9);
  filter: drop-shadow(0 0 4px var(--btn-image-base))
    drop-shadow(0 0 8px var(--btn-image-base));
} /* New */
.Sidebar_nodeItem__ZkrNE[data-node-type='videoFrameExtractionNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #fef3c7)
    drop-shadow(0 0 8px #fef3c7);
  filter: drop-shadow(0 0 4px var(--btn-frame-extract-base))
    drop-shadow(0 0 8px var(--btn-frame-extract-base));
} /* New */
.Sidebar_nodeItem__ZkrNE[data-node-type='startNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #f8daff)
    drop-shadow(0 0 8px #f8daff);
  filter: drop-shadow(0 0 4px var(--btn-start-base))
    drop-shadow(0 0 8px var(--btn-start-base));
} /* New */
.Sidebar_nodeItem__ZkrNE[data-node-type='googleDriveNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #e8f5e9)
    drop-shadow(0 0 8px #e8f5e9);
  filter: drop-shadow(0 0 4px var(--btn-gdrive-base))
    drop-shadow(0 0 8px var(--btn-gdrive-base));
} /* Google Drive */
.Sidebar_nodeItem__ZkrNE[data-node-type='postCreatorNode'] .Sidebar_nodeIconSvg__q7CAc {
  filter: drop-shadow(0 0 4px #fdf4ff)
    drop-shadow(0 0 8px #fdf4ff);
  filter: drop-shadow(0 0 4px var(--btn-post-creator-base))
    drop-shadow(0 0 8px var(--btn-post-creator-base));
} /* Post Creator */

/* Flat backgrounds & matching borders */
.Sidebar_nodeItem__ZkrNE[data-node-type='inputNode'] {
  background-color: #f0fdf4;
  background-color: var(--btn-input-base);
  border: 1px solid #86efac;
  border: 1px solid var(--btn-input-base-border);
  color: #1b5e20;
  color: var(--text-on-input);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='outputNode'] {
  background-color: #fff1f2;
  background-color: var(--btn-output-base);
  border: 1px solid #fecdd3;
  border: 1px solid var(--btn-output-base-border);
  color: #881337;
  color: var(--text-on-output);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='dataNode'] {
  background-color: #fefce8;
  background-color: var(--btn-data-base);
  border: 1px solid #fde047;
  border: 1px solid var(--btn-data-base-border);
  color: #78350f;
  color: var(--text-on-data);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='transformNode'] {
  background-color: #f0fdfa;
  background-color: var(--btn-transform-base);
  border: 1px solid #99f6e4;
  border: 1px solid var(--btn-transform-base-border);
  color: #0f766e;
  color: var(--text-on-transform);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='smartTransformNode'] {
  background-color: #eef2ff;
  background-color: var(--btn-smart-transform-base);
  border: 1px solid #c7d2fe;
  border: 1px solid var(--btn-smart-transform-base-border);
  color: #3730a3;
  color: var(--text-on-smart-transform);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='videoGenerationNode'] {
  background-color: #fff7ed;
  background-color: var(--btn-video-base);
  border: 1px solid #fed7aa;
  border: 1px solid var(--btn-video-base-border);
  color: #7c2d12;
  color: var(--text-on-video);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='audioNode'] {
  background-color: #e0f2fe;
  background-color: var(--btn-audio-base);
  border: 1px solid #7dd3fc;
  border: 1px solid var(--btn-audio-base-border);
  color: #0c4a6e;
  color: var(--text-on-audio);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='musicNode'] {
  background-color: #f5f3ff;
  background-color: var(--btn-music-base);
  border: 1px solid #c4b5fd;
  border: 1px solid var(--btn-music-base-border);
  color: #4a148c;
  color: var(--text-on-music);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='imageGenerationNode'] {
  /* New */
  background-color: #f1f5f9;
  background-color: var(--btn-image-base);
  border: 1px solid #cbd5e1;
  border: 1px solid var(--btn-image-base-border);
  color: #1e293b;
  color: var(--text-on-image);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='videoFrameExtractionNode'] {
  /* New */
  background-color: #fef3c7;
  background-color: var(--btn-frame-extract-base);
  border: 1px solid #f59e0b;
  border: 1px solid var(--btn-frame-extract-base-border);
  color: #92400e;
  color: var(--text-on-frame-extract);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='startNode'] {
  /* New */
  background-color: #f8daff;
  background-color: var(--btn-start-base);
  border: 1px solid #f08dff;
  border: 1px solid var(--btn-start-base-border);
  color: #701a75;
  color: var(--text-on-start);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='googleDriveNode'] {
  /* Google Drive */
  background-color: #e8f5e9;
  background-color: var(--btn-gdrive-base);
  border: 1px solid #66bb6a;
  border: 1px solid var(--btn-gdrive-base-border);
  color: #1b5e20;
  color: var(--text-on-gdrive);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='postCreatorNode'] {
  /* Post Creator */
  background-color: #fdf4ff;
  background-color: var(--btn-post-creator-base);
  border: 1px solid #f0abfc;
  border: 1px solid var(--btn-post-creator-base-border);
  color: #701a75;
  color: var(--text-on-post-creator);
}

/* Hover states */
.Sidebar_nodeItem__ZkrNE[data-node-type='inputNode']:hover {
  background-color: #c1e2c1;
  border-color: #f0fdf4;
  border-color: var(--btn-input-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='outputNode']:hover {
  background-color: #f4a9a9;
  border-color: #fff1f2;
  border-color: var(--btn-output-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='dataNode']:hover {
  background-color: #fff4a0;
  border-color: #fefce8;
  border-color: var(--btn-data-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='transformNode']:hover {
  background-color: #a0eaf0;
  border-color: #f0fdfa;
  border-color: var(--btn-transform-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='smartTransformNode']:hover {
  background-color: #e0e7ff;
  border-color: #eef2ff;
  border-color: var(--btn-smart-transform-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='videoGenerationNode']:hover {
  background-color: #ffd8a3;
  border-color: #fff7ed;
  border-color: var(--btn-video-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='audioNode']:hover {
  background-color: #a9d5fb;
  border-color: #e0f2fe;
  border-color: var(--btn-audio-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='musicNode']:hover {
  background-color: #d6a7da;
  border-color: #f5f3ff;
  border-color: var(--btn-music-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='imageGenerationNode']:hover {
  /* New */
  background-color: #e2e8f0;
  border-color: #f1f5f9;
  border-color: var(--btn-image-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='videoFrameExtractionNode']:hover {
  /* New */
  background-color: #fde68a;
  border-color: #fef3c7;
  border-color: var(--btn-frame-extract-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='startNode']:hover {
  /* New */
  background-color: #f9d8ff;
  border-color: #f8daff;
  border-color: var(--btn-start-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='googleDriveNode']:hover {
  /* Google Drive */
  background-color: #c8e6c9;
  border-color: #e8f5e9;
  border-color: var(--btn-gdrive-base);
}
.Sidebar_nodeItem__ZkrNE[data-node-type='postCreatorNode']:hover {
  /* Post Creator */
  background-color: #fae8ff;
  border-color: #fdf4ff;
  border-color: var(--btn-post-creator-base);
}

.Sidebar_nodeItemLabel__d5Sdx {
  white-space: nowrap;
  opacity: 1;
  transition:
    opacity 0.2s ease-in-out 0.05s,
    max-width 0.3s ease-in-out,
    margin-left 0.3s ease-in-out,
    display 0s linear 0.3s;
  max-width: 120px;
  overflow: hidden;
  display: inline;
}
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_nodeItemLabel__d5Sdx {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  pointer-events: none;
  display: none;
  transition:
    opacity 0.1s ease-in-out,
    max-width 0.1s ease-in-out,
    margin-left 0.1s ease-in-out,
    display 0s linear 0.1s;
}

.Sidebar_saveButtonContainer__5fER3 {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU .Sidebar_saveButtonContainer__5fER3 {
  padding: 10px 0 0 0;
  width: 100%;
}
.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA .Sidebar_saveButtonContainer__5fER3 {
  flex-shrink: 0;
  width: auto;
}

.Sidebar_saveButton__X7rD-,
.Sidebar_syncButton__2NgxZ {
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background-color: #282a4e;
  background-color: var(--btn-save-base);
  border: 1px solid #616161;
  border: 1px solid var(--btn-save-base-border);
  color: #f2f2f7;
  color: var(--text-on-save);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease-out,
    box-shadow 0.15s ease;
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0px rgba(255,255,255,0.1); */
}
.Sidebar_saveButton__X7rD-:hover,
.Sidebar_syncButton__2NgxZ:hover {
  background-color: #1b1b38;
  border-color: #8a8a8a;
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0px rgba(255, 255, 255, 0.15);
}
.Sidebar_saveButton__X7rD-:active,
.Sidebar_syncButton__2NgxZ:active {
  transform: translateY(0px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.Sidebar_saveButton__X7rD- svg,
.Sidebar_syncButton__2NgxZ svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.Sidebar_saveButtonLabel__Bx7Vl {
  white-space: nowrap;
  opacity: 1;
  transition:
    opacity 0.2s ease-in-out 0.05s,
    max-width 0.3s ease-in-out,
    margin-left 0.3s ease-in-out,
    display 0s linear 0.3s;
  max-width: 100px;
  overflow: hidden;
  display: inline;
}
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_saveButtonLabel__Bx7Vl {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  pointer-events: none;
  display: none;
  transition:
    opacity 0.1s ease-in-out,
    max-width 0.1s ease-in-out,
    margin-left 0.1s ease-in-out,
    display 0s linear 0.1s;
}
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_saveButton__X7rD-,
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_syncButton__2NgxZ {
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
}
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_saveButton__X7rD- svg,
.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_syncButton__2NgxZ svg {
  filter: drop-shadow(0 0 3px #282a4e);
  filter: drop-shadow(0 0 3px var(--btn-save-base));
}
.Sidebar_mainContentContainer__8DZRU {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0; /* Important for flexbox shrinking */
}

.Sidebar_tabContainer__U6983 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU .Sidebar_tabContainer__U6983 {
  padding-bottom: 12px;
  border-bottom: 1px solid #4a4a4c;
  border-bottom: 1px solid var(--node-border);
  margin-bottom: 12px;
}

.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA .Sidebar_tabContainer__U6983 {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #4a4a4c;
  border-bottom: 1px solid var(--node-border);
  justify-content: flex-start; /* Align tabs to the start */
}

.Sidebar_tabButton__Ydafv {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  background-color: transparent;
  border: 1px solid #4a4a4c;
  border: 1px solid var(--node-border);
  color: #c7c7cc;
  color: var(--node-label-text);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.Sidebar_tabButton__Ydafv:hover {
  background-color: #3a3a3c;
  background-color: var(--node-icon-bg);
  color: #f2f2f7;
  color: var(--node-text-on-dark-bg);
  border-color: #5a5a5c;
  border-color: var(--handle-bg);
}

.Sidebar_tabButton__Ydafv.Sidebar_activeTab__3WtVS {
  background-color: #007aff;
  background-color: var(--node-border-selected);
  color: #fffff6;
  color: var(--node-bg);
  border-color: #007aff;
  border-color: var(--node-border-selected);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.Sidebar_verticalContainer__GPQ5F {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.Sidebar_horizontalContainer__y7xow {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 1;
  width: auto;
  min-width: 30vw;
  max-width: 45vw;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Node count badge styles */
.Sidebar_nodeCountBadge__KSi0c {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #007aff;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
  transition: all 0.2s ease;
}

.Sidebar_nodeCountBadge__KSi0c.Sidebar_atLimit__5KxEK {
  background-color: #ff3b30;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.4);
}

.Sidebar_nodeCountBadge__KSi0c.Sidebar_nearLimit__k4yZ2 {
  background-color: #ff9500;
  box-shadow: 0 0 6px rgba(255, 149, 0, 0.4);
}

.Sidebar_sidebar__ppnma.Sidebar_collapsed__sGwNB .Sidebar_nodeCountBadge__KSi0c {
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  font-size: 0.6rem;
}

/* Top bar container for tabs and plus button */
.Sidebar_topBarContainer__RKTQV {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
}

/* Plus button styles */
.Sidebar_plusButton__irTga {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #282a4e;
  background-color: var(--btn-toggle-base);
  border: 1px solid #616161;
  border: 1px solid var(--btn-toggle-base-border);
  color: #e0e0e0;
  color: var(--btn-toggle-icon);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.Sidebar_plusButton__irTga:hover {
  background-color: #1b1b38;
  border-color: #6e6e6e;
  transform: scale(1.05);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.Sidebar_plusButton__irTga svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* Overlay backdrop */
.Sidebar_overlayBackdrop__1rj9Q {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Nodes Library Overlay */
.Sidebar_nodesLibraryOverlay__sy4iw {
  position: fixed;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 500px;
  height: 90vh;
  background: rgba(26, 26, 28, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: Sidebar_slideInRight__gGRSr 0.3s ease-out;
}

@keyframes Sidebar_slideInRight__gGRSr {
  from {
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
}

/* Overlay Header */
.Sidebar_overlayHeader__-SlRm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.Sidebar_overlayHeader__-SlRm h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Inconsolata', monospace;
}

.Sidebar_closeButton__oI\+OG {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.Sidebar_closeButton__oI\+OG:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.1);
}

/* Overlay Content */
.Sidebar_overlayContent__Tb55Z {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.Sidebar_overlayContent__Tb55Z::-webkit-scrollbar {
  width: 6px;
}

.Sidebar_overlayContent__Tb55Z::-webkit-scrollbar-track {
  background: transparent;
}

.Sidebar_overlayContent__Tb55Z::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.Sidebar_overlayContent__Tb55Z::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.Sidebar_categoryNodes__clDRR {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

/* Library Node Item */
.Sidebar_libraryNodeItem__w7HnU {
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  cursor: grab;
  font-weight: 500;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.15s ease-out;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0px rgba(255, 255, 255, 0.1);
  min-height: 110px;
  padding: 12px 8px;
  overflow: visible;
  z-index: 1;
}

.Sidebar_libraryNodeItem__w7HnU:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px) scale(1.02);
  z-index: 100;
}

.Sidebar_libraryNodeItem__w7HnU:active {
  cursor: grabbing;
  transform: translateY(0px) scale(1);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.Sidebar_libraryNodeItem__w7HnU .Sidebar_nodeIconSvg__q7CAc {
  width: 32px;
  height: 32px;
}

.Sidebar_libraryNodeLabel__eDIdj {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  max-width: 100%;
}

/* Apply same colors as sidebar nodes */
.Sidebar_libraryNodeItem__w7HnU[data-node-type='inputNode'] {
  background-color: #f0fdf4;
  background-color: var(--btn-input-base);
  border: 1px solid #86efac;
  border: 1px solid var(--btn-input-base-border);
  color: #1b5e20;
  color: var(--text-on-input);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='outputNode'] {
  background-color: #fff1f2;
  background-color: var(--btn-output-base);
  border: 1px solid #fecdd3;
  border: 1px solid var(--btn-output-base-border);
  color: #881337;
  color: var(--text-on-output);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='dataNode'] {
  background-color: #fefce8;
  background-color: var(--btn-data-base);
  border: 1px solid #fde047;
  border: 1px solid var(--btn-data-base-border);
  color: #78350f;
  color: var(--text-on-data);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='transformNode'] {
  background-color: #f0fdfa;
  background-color: var(--btn-transform-base);
  border: 1px solid #99f6e4;
  border: 1px solid var(--btn-transform-base-border);
  color: #0f766e;
  color: var(--text-on-transform);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='smartTransformNode'] {
  background-color: #eef2ff;
  background-color: var(--btn-smart-transform-base);
  border: 1px solid #c7d2fe;
  border: 1px solid var(--btn-smart-transform-base-border);
  color: #3730a3;
  color: var(--text-on-smart-transform);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='videoGenerationNode'] {
  background-color: #fff7ed;
  background-color: var(--btn-video-base);
  border: 1px solid #fed7aa;
  border: 1px solid var(--btn-video-base-border);
  color: #7c2d12;
  color: var(--text-on-video);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='audioNode'] {
  background-color: #e0f2fe;
  background-color: var(--btn-audio-base);
  border: 1px solid #7dd3fc;
  border: 1px solid var(--btn-audio-base-border);
  color: #0c4a6e;
  color: var(--text-on-audio);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='musicNode'] {
  background-color: #f5f3ff;
  background-color: var(--btn-music-base);
  border: 1px solid #c4b5fd;
  border: 1px solid var(--btn-music-base-border);
  color: #4a148c;
  color: var(--text-on-music);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='imageGenerationNode'] {
  background-color: #f1f5f9;
  background-color: var(--btn-image-base);
  border: 1px solid #cbd5e1;
  border: 1px solid var(--btn-image-base-border);
  color: #1e293b;
  color: var(--text-on-image);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='videoFrameExtractionNode'] {
  background-color: #fef3c7;
  background-color: var(--btn-frame-extract-base);
  border: 1px solid #f59e0b;
  border: 1px solid var(--btn-frame-extract-base-border);
  color: #92400e;
  color: var(--text-on-frame-extract);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='startNode'] {
  background-color: #f8daff;
  background-color: var(--btn-start-base);
  border: 1px solid #f08dff;
  border: 1px solid var(--btn-start-base-border);
  color: #701a75;
  color: var(--text-on-start);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='googleDriveNode'] {
  background-color: #e8f5e9;
  background-color: var(--btn-gdrive-base);
  border: 1px solid #66bb6a;
  border: 1px solid var(--btn-gdrive-base-border);
  color: #1b5e20;
  color: var(--text-on-gdrive);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='postCreatorNode'] {
  background-color: #fdf4ff;
  background-color: var(--btn-post-creator-base);
  border: 1px solid #f0abfc;
  border: 1px solid var(--btn-post-creator-base-border);
  color: #701a75;
  color: var(--text-on-post-creator);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='textDisplayNode'] {
  background-color: #1e293b;
  background-color: var(--btn-text-display-base);
  border: 1px solid #334155;
  border: 1px solid var(--btn-text-display-base-border);
  color: #e2e8f0;
  color: var(--text-on-text-display);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='mediaPreviewNode'] {
  background-color: #dbeafe;
  background-color: var(--btn-media-preview-base);
  border: 1px solid #60a5fa;
  border: 1px solid var(--btn-media-preview-base-border);
  color: #1e3a8a;
  color: var(--text-on-media-preview);
}

/* Hover states for library nodes */
.Sidebar_libraryNodeItem__w7HnU[data-node-type='inputNode']:hover {
  background-color: #c1e2c1;
  border-color: #f0fdf4;
  border-color: var(--btn-input-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='outputNode']:hover {
  background-color: #f4a9a9;
  border-color: #fff1f2;
  border-color: var(--btn-output-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='dataNode']:hover {
  background-color: #fff4a0;
  border-color: #fefce8;
  border-color: var(--btn-data-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='transformNode']:hover {
  background-color: #a0eaf0;
  border-color: #f0fdfa;
  border-color: var(--btn-transform-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='smartTransformNode']:hover {
  background-color: #e0e7ff;
  border-color: #eef2ff;
  border-color: var(--btn-smart-transform-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='videoGenerationNode']:hover {
  background-color: #ffd8a3;
  border-color: #fff7ed;
  border-color: var(--btn-video-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='audioNode']:hover {
  background-color: #a9d5fb;
  border-color: #e0f2fe;
  border-color: var(--btn-audio-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='musicNode']:hover {
  background-color: #d6a7da;
  border-color: #f5f3ff;
  border-color: var(--btn-music-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='imageGenerationNode']:hover {
  background-color: #e2e8f0;
  border-color: #f1f5f9;
  border-color: var(--btn-image-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='videoFrameExtractionNode']:hover {
  background-color: #fde68a;
  border-color: #fef3c7;
  border-color: var(--btn-frame-extract-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='startNode']:hover {
  background-color: #f9d8ff;
  border-color: #f8daff;
  border-color: var(--btn-start-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='googleDriveNode']:hover {
  background-color: #c8e6c9;
  border-color: #e8f5e9;
  border-color: var(--btn-gdrive-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='postCreatorNode']:hover {
  background-color: #fae8ff;
  border-color: #fdf4ff;
  border-color: var(--btn-post-creator-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='textDisplayNode']:hover {
  background-color: #334155;
  border-color: #1e293b;
  border-color: var(--btn-text-display-base);
}
.Sidebar_libraryNodeItem__w7HnU[data-node-type='mediaPreviewNode']:hover {
  background-color: #bfdbfe;
  border-color: #dbeafe;
  border-color: var(--btn-media-preview-base);
}

/* Custom Nodes Section */
.Sidebar_customNodesSectionHeader__cQ0W\+ {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  color: #a78bfa;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  margin-top: 8px;
}

.Sidebar_customNodeIcon__9rei0 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

/* Search Bar Container */
.Sidebar_searchBarContainer__G5RiW {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.Sidebar_searchInput__E-c6E {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.Sidebar_searchInput__E-c6E::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.Sidebar_searchInput__E-c6E:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.Sidebar_searchInput__E-c6E:focus {
  border-color: #007aff;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* Info Button and Tooltip */
.Sidebar_infoButton__QWGeK {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
  opacity: 0;
}

.Sidebar_libraryNodeItem__w7HnU:hover .Sidebar_infoButton__QWGeK {
  opacity: 1;
}

.Sidebar_infoButton__QWGeK:hover {
  background-color: rgba(0, 122, 255, 0.8);
  color: #ffffff;
  transform: scale(1.1);
}

.Sidebar_infoButton__QWGeK svg {
  width: 10px;
  height: 10px;
}

/* Tooltip */
.Sidebar_tooltip__HYWe7 {
  position: fixed;
  padding: 10px 14px;
  background-color: rgba(26, 26, 28, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(0, 122, 255, 0.5);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  pointer-events: none;
  font-family: 'Inconsolata', monospace;
}

/* NodePickerOverlay.module.css */

.NodePickerOverlay_backdrop__zseFr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 1050;
}

.NodePickerOverlay_overlay__6F69I {
  position: fixed;
  width: 320px;
  max-height: 420px;
  background: rgba(26, 26, 28, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 1051;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: NodePickerOverlay_scaleIn__CCKk5 0.2s ease-out;
  transform: translate(-50%, -50%);
}

@keyframes NodePickerOverlay_scaleIn__CCKk5 {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.NodePickerOverlay_header__tl4A1 {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.NodePickerOverlay_searchInput__lkwak {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.NodePickerOverlay_searchInput__lkwak::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.NodePickerOverlay_searchInput__lkwak:focus {
  border-color: #007aff;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.NodePickerOverlay_content__q2W2b {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  min-height: 200px;
}

.NodePickerOverlay_content__q2W2b::-webkit-scrollbar {
  width: 6px;
}

.NodePickerOverlay_content__q2W2b::-webkit-scrollbar-track {
  background: transparent;
}

.NodePickerOverlay_content__q2W2b::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.NodePickerOverlay_content__q2W2b::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.NodePickerOverlay_nodeGrid__KLzX1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.NodePickerOverlay_nodeItem__\+B-u2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.NodePickerOverlay_nodeItem__\+B-u2:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.NodePickerOverlay_nodeItem__\+B-u2:active {
  transform: translateY(0) scale(0.98);
}

.NodePickerOverlay_nodeIcon__O38yR {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.NodePickerOverlay_nodeIcon__O38yR img,
.NodePickerOverlay_nodeIcon__O38yR svg {
  width: 100%;
  height: 100%;
}

.NodePickerOverlay_nodeLabel__TmPml {
  font-size: 0.65rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Node type specific styles */
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='inputNode'] {
  background-color: #dcfce7;
  border: 1px solid #86efac;
  color: #1b5e20;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='inputNode']:hover {
  background-color: #bbf7d0;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='outputNode'] {
  background-color: #ffe4e6;
  border: 1px solid #fecdd3;
  color: #881337;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='outputNode']:hover {
  background-color: #fecdd3;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='dataNode'] {
  background-color: #fef9c3;
  border: 1px solid #fde047;
  color: #78350f;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='dataNode']:hover {
  background-color: #fef08a;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='transformNode'] {
  background-color: #ccfbf1;
  border: 1px solid #99f6e4;
  color: #0f766e;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='transformNode']:hover {
  background-color: #99f6e4;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='smartTransformNode'] {
  background-color: #e0e7ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='smartTransformNode']:hover {
  background-color: #c7d2fe;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='videoGenerationNode'] {
  background-color: #ffedd5;
  border: 1px solid #fed7aa;
  color: #7c2d12;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='videoGenerationNode']:hover {
  background-color: #fed7aa;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='audioNode'] {
  background-color: #bae6fd;
  border: 1px solid #7dd3fc;
  color: #0c4a6e;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='audioNode']:hover {
  background-color: #7dd3fc;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='musicNode'] {
  background-color: #ede9fe;
  border: 1px solid #c4b5fd;
  color: #4a148c;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='musicNode']:hover {
  background-color: #ddd6fe;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='imageGenerationNode'] {
  background-color: #e2e8f0;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='imageGenerationNode']:hover {
  background-color: #cbd5e1;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='videoFrameExtractionNode'] {
  background-color: #fde68a;
  border: 1px solid #f59e0b;
  color: #92400e;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='videoFrameExtractionNode']:hover {
  background-color: #fcd34d;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='startNode'] {
  background-color: #f3c4ff;
  border: 1px solid #f08dff;
  color: #701a75;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='startNode']:hover {
  background-color: #e879f9;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='googleDriveNode'] {
  background-color: #c8e6c9;
  border: 1px solid #66bb6a;
  color: #1b5e20;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='googleDriveNode']:hover {
  background-color: #a5d6a7;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='postCreatorNode'] {
  background-color: #fae8ff;
  border: 1px solid #f0abfc;
  color: #701a75;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='postCreatorNode']:hover {
  background-color: #f5d0fe;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='textDisplayNode'] {
  background-color: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='textDisplayNode']:hover {
  background-color: #334155;
}

.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='mediaPreviewNode'] {
  background-color: #dbeafe;
  border: 1px solid #60a5fa;
  color: #1e3a8a;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='mediaPreviewNode']:hover {
  background-color: #bfdbfe;
}

/* Icon glow effects */
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='inputNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(134, 239, 172, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='outputNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(254, 205, 211, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='dataNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(253, 224, 71, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='transformNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(153, 246, 228, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='smartTransformNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(199, 210, 254, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='videoGenerationNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(254, 215, 170, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='audioNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='musicNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='imageGenerationNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(203, 213, 225, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='videoFrameExtractionNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='startNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(240, 141, 255, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='googleDriveNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(102, 187, 106, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='postCreatorNode'] .NodePickerOverlay_nodeIcon__O38yR svg {
  filter: drop-shadow(0 0 6px rgba(240, 171, 252, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='textDisplayNode'] .NodePickerOverlay_nodeIcon__O38yR svg {
  filter: drop-shadow(0 0 6px rgba(148, 163, 184, 0.5));
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='mediaPreviewNode'] .NodePickerOverlay_nodeIcon__O38yR img {
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.5));
}

.NodePickerOverlay_footer__9G1hr {
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.NodePickerOverlay_hint__TOUn7 {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Inconsolata', monospace;
}

/* Double-click animation hint */
.NodePickerOverlay_doubleClickHint__Jv083 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.NodePickerOverlay_cursorIcon__KtYhH {
  position: relative;
  width: 14px;
  height: 14px;
  animation: NodePickerOverlay_cursorMove__QHPZR 2s ease-in-out infinite;
}

.NodePickerOverlay_cursorIcon__KtYhH svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.NodePickerOverlay_clickRipple__YQbBA {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 122, 255, 0.4);
  transform: translate(-50%, -50%) scale(0);
  animation: NodePickerOverlay_doubleClickRipple__TQcCB 2s ease-in-out infinite;
}

@keyframes NodePickerOverlay_cursorMove__QHPZR {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20%,
  40% {
    transform: translate(1px, 1px);
  }
  25%,
  45% {
    transform: translate(0, 0);
  }
}

@keyframes NodePickerOverlay_doubleClickRipple__TQcCB {
  0%,
  15% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
  35% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
  55%,
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

.NodePickerOverlay_emptyState__BLpBC {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 150px;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
}

/* Node count badge */
.NodePickerOverlay_nodeCountBadge__yYb\+d {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #007aff;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.NodePickerOverlay_nodeCountBadge__yYb\+d.NodePickerOverlay_atLimit__muo3H {
  background-color: #ff3b30;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.4);
}

.NodePickerOverlay_nodeCountBadge__yYb\+d.NodePickerOverlay_nearLimit__SiBjn {
  background-color: #ff9500;
  box-shadow: 0 0 6px rgba(255, 149, 0, 0.4);
}

/* Info button */
.NodePickerOverlay_infoButton__ZWH1V {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
  opacity: 0;
}

.NodePickerOverlay_nodeItem__\+B-u2:hover .NodePickerOverlay_infoButton__ZWH1V {
  opacity: 1;
}

.NodePickerOverlay_infoButton__ZWH1V:hover {
  background-color: rgba(0, 122, 255, 0.8);
  color: #ffffff;
  transform: scale(1.1);
}

.NodePickerOverlay_infoButton__ZWH1V svg {
  width: 10px;
  height: 10px;
}

/* Tooltip */
.NodePickerOverlay_tooltip__D-blO {
  position: fixed;
  padding: 10px 14px;
  background-color: rgba(26, 26, 28, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(0, 122, 255, 0.5);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  pointer-events: none;
  font-family: 'Inconsolata', monospace;
}

/* Light mode support */
[data-theme='light'] .NodePickerOverlay_overlay__6F69I {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .NodePickerOverlay_searchInput__lkwak {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

[data-theme='light'] .NodePickerOverlay_searchInput__lkwak::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme='light'] .NodePickerOverlay_hint__TOUn7 {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme='light'] .NodePickerOverlay_emptyState__BLpBC {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme='light'] .NodePickerOverlay_header__tl4A1,
[data-theme='light'] .NodePickerOverlay_footer__9G1hr {
  border-color: rgba(0, 0, 0, 0.08);
}

/* Custom node styles */
.NodePickerOverlay_customNodeItem__Oib7C {
  transition: all 0.2s ease;
}

.NodePickerOverlay_customNodeItem__Oib7C:hover {
  filter: brightness(1.1);
}

.NodePickerOverlay_customNodeIcon__6W\+8A {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

/* src/MainComponents/panels/ChatPanel.css */

/* Modal Overlay - Professional dark blurred background */
.chat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

.chat-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

/* Chat Overlay - Main content container */
.chat-overlay {
  width: 90%;
  max-width: 550px;
  height: 80vh;
  max-height: 700px;
  background-color: rgba(17, 24, 39, 0.95);
  border: 1px solid #374151;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-25px) scale(0.93);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-modal-overlay.open .chat-overlay {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Side View Mode - No overlay background */
.chat-modal-overlay.side-view {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  justify-content: flex-end;
  align-items: stretch;
}

.chat-modal-overlay.side-view .chat-overlay {
  pointer-events: auto;
}

/* Side Panel Variant */
.chat-overlay.side-panel {
  width: 480px;
  max-width: 480px;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border-left: 1px solid #374151;
  border-top: none;
  border-bottom: none;
  border-right: none;
  transform: translateX(100%);
  transition:
    opacity 0.3s ease-out,
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-modal-overlay.open .chat-overlay.side-panel {
  opacity: 1;
  transform: translateX(0);
}

.chat-panel {
  padding: 0;
  width: 100%;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e5e7eb;
}

/* Overlay Header - Professional dark theme */
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #374151;
  background-color: rgba(17, 24, 39, 0.98);
  flex-shrink: 0;
}

.header-title-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.overlay-header h3 {
  margin: 0;
  padding: 0;
  color: #e5e7eb;
  font-size: 1.25rem;
  font-weight: 600;
}

.beta-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
  transform: rotate(90deg);
}

.view-toggle-button,
.clear-chat-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  padding: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggle-button:hover,
.clear-chat-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
}

.clear-chat-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* Warning and Error Messages */
.chat-warning,
.chat-error {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 24px 0 24px;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.chat-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border: 1px solid #f59e0b;
  color: #fbbf24;
}

.chat-error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  color: #f87171;
}

.chat-warning p,
.chat-error p {
  margin: 0;
}

/* Messages Container */
.chat-messages {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  margin: 16px 24px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Individual Message */
.chat-message {
  display: flex;
  gap: 12px;
  animation: fadeInUp 0.3s ease-out;
  width: 100%;
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
}

.assistant-message {
  flex-direction: row;
}

.message-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;
  font-size: 1.5rem;
}

.user-message .message-icon {
  background-color: #3b82f6;
  color: white;
}

.assistant-message .message-icon {
  background-color: #8b5cf6;
  color: white;
}

.user-icon,
.assistant-icon {
  font-size: 1.2rem;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 48px);
  min-width: 0;
  overflow: hidden;
  flex: 1 1;
}

.message-role {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-message .message-role {
  text-align: right;
}

.message-text {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.user-message .message-text {
  background-color: #3b82f6;
  color: white;
  border-bottom-right-radius: 4px;
}

.assistant-message .message-text {
  background-color: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-bottom-left-radius: 4px;
}

/* Better formatting for message text content */
.message-text strong {
  font-weight: 700;
  color: inherit;
}

.message-text code {
  font-family: 'Courier New', Courier, monospace;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.user-message .message-text code {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #9ca3af;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

/* Input Container */
.chat-input-container {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 16px 24px;
  background-color: transparent;
  border-top: 1px solid #374151;
  flex-shrink: 0;
}

.chat-input {
  flex: 1 1;
  background-color: rgba(31, 41, 55, 0.8);
  border: 1px solid #4b5563;
  border-radius: 8px;
  padding: 10px 12px;
  color: #e5e7eb;
  font-size: 0.9rem;
  resize: none;
  font-family: inherit;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: #667eea;
}

.chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-input::placeholder {
  color: #9ca3af;
  opacity: 0.6;
}

.send-button {
  background-color: #3b82f6;
  border: none;
  color: white;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
}

.send-button:hover:not(:disabled) {
  background-color: #2563eb;
  transform: scale(1.05);
}

.send-button:disabled {
  background-color: #4b5563;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Custom Scrollbar - Dark theme */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

.chat-input::-webkit-scrollbar {
  width: 4px;
}

.chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.chat-input::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .chat-modal-overlay {
    padding: 10px;
  }

  .chat-overlay {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
  }

  /* Side panel adjustments for tablet */
  .chat-overlay.side-panel {
    width: 350px;
    max-width: 350px;
  }

  .message-content {
    max-width: 90%;
  }

  .overlay-header {
    padding: 16px;
  }

  .chat-messages,
  .chat-warning,
  .chat-error {
    margin: 0 16px 12px 16px;
  }

  .chat-input-container {
    padding: 12px 16px;
  }

  .chat-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .chat-modal-overlay {
    padding: 5px;
  }

  .chat-overlay {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
  }

  /* Side panel takes full width on small mobile */
  .chat-overlay.side-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .overlay-header {
    padding: 12px;
  }

  .overlay-header h3 {
    font-size: 1.1rem;
  }
}

/* src/components/MainApp/StatusToast.module.css */

@keyframes StatusToast_slideInFromRight__3hXvG {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes StatusToast_slideOutToRight__6pegb {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes StatusToast_pulse__UHJQ0 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Rotating gradient border animation */
@keyframes StatusToast_rotateBorder__EQEWe {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.StatusToast_toastContainer__\+-l3- {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 2000;
  padding: 7px 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: 0.8rem;
  color: #ffffff;

  /* Remove default background and border */
  background: transparent;
  border: none;
  overflow: hidden;

  /* Entrance animation */
  animation: StatusToast_slideInFromRight__3hXvG 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    forwards;

  /* Add shadow for better visibility */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Exit animation class */
.StatusToast_exiting__hYCBZ {
  animation: StatusToast_slideOutToRight__6pegb 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045)
    forwards;
}

/* Animated gradient border - this creates the moving stroke border */
.StatusToast_toastContainer__\+-l3-::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 300%; /* Large enough to cover when rotating */
  height: 300%;

  /* Animated conic gradient using CSS variables for different states */
  background: conic-gradient(
    from 0deg,
    transparent,
    #8f8f8f,
    #ffffff,
    #8f8f8f,
    transparent
  );
  background: conic-gradient(
    from 0deg,
    transparent,
    var(--gradient-start, #8f8f8f),
    var(--gradient-mid, #ffffff),
    var(--gradient-end, #8f8f8f),
    transparent
  );

  /* Continuous rotation animation */
  animation: StatusToast_rotateBorder__EQEWe 3s linear infinite;
  border-radius: 50%;
}

/* Inner background - creates the actual toast background inside the border */
.StatusToast_toastContainer__\+-l3-::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2px; /* Border thickness - adjust this to make border thicker/thinner */
  left: 2px;
  right: 2px;
  bottom: 2px;

  /* Semi-transparent dark background */
  background: rgba(20, 20, 20, 0.85);
  border-radius: 8px; /* Slightly less than container radius */

  /* Backdrop blur for glass effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* State-specific gradient colors for the animated border */
.StatusToast_saving__Rhbl0 {
  --gradient-start: #3b82f6; /* Blue */
  --gradient-mid: #60a5fa; /* Light blue */
  --gradient-end: #1d4ed8; /* Dark blue */
}

.StatusToast_syncing__7jRMp {
  --gradient-start: #8b5cf6; /* Violet */
  --gradient-mid: #a78bfa; /* Light Violet */
  --gradient-end: #7c3aed; /* Dark Violet */
}

.StatusToast_saved__IRG2R {
  --gradient-start: #22c55e; /* Green */
  --gradient-mid: #4ade80; /* Light green */
  --gradient-end: #16a34a; /* Dark green */
}

.StatusToast_error__MlyY1 {
  --gradient-start: #ef4444; /* Red */
  --gradient-mid: #f87171; /* Light red */
  --gradient-end: #dc2626; /* Dark red */
}

/* Icon styles */
.StatusToast_toastContainer__\+-l3- svg {
  font-size: 1rem;
  position: relative;
  z-index: 1;
}

/* Pulsing animation for the saving icon */
.StatusToast_iconAnimate__zlfKM {
  animation: StatusToast_pulse__UHJQ0 1.5s infinite ease-in-out;
}

/* src/MainApp/ModalContent/customNode/CustomNodeCreatorModal.module.css */

/* --- Main Overlay --- */
.CustomNodeCreatorModal_modalOverlay__RLHsc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111827;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 1050;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

/* Electron Specific Overrides for Performance */
body.is-electron .CustomNodeCreatorModal_modalOverlay__RLHsc {
  background-color: #0b0f19;
}

.CustomNodeCreatorModal_modalOverlay__RLHsc.CustomNodeCreatorModal_open__Hf5DK {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

/* --- Content Wrapper --- */
.CustomNodeCreatorModal_contentWrapper__BPW82 {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-15px);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.CustomNodeCreatorModal_modalOverlay__RLHsc.CustomNodeCreatorModal_open__Hf5DK .CustomNodeCreatorModal_contentWrapper__BPW82 {
  opacity: 1;
  transform: translateY(0);
}

/* --- Panel Styles --- */
.CustomNodeCreatorModal_leftPanel__1OOxP,
.CustomNodeCreatorModal_rightPanel__xv1F4 {
  flex: 1 1;
  color: #e5e7eb;
  padding: 40px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.CustomNodeCreatorModal_leftPanel__1OOxP {
  border-right: 1px solid #374151;
}

/* --- Close Button --- */
.CustomNodeCreatorModal_closeButton__CTV8R {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_closeButton__CTV8R:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

.CustomNodeCreatorModal_closeButton__CTV8R:active {
  transform: scale(0.95);
}

/* --- Panel Header --- */
.CustomNodeCreatorModal_panelHeader__n\+fIh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #374151;
}

.CustomNodeCreatorModal_panelHeader__n\+fIh h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_headerIcon__JmP-m {
  width: 20px;
  height: 20px;
  color: #8b5cf6;
}

/* --- Style Tabs --- */
.CustomNodeCreatorModal_styleTabs__dBRTQ {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.CustomNodeCreatorModal_styleTab__8ZpwJ {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(30, 30, 35, 0.5);
  border: 1px solid #374151;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_styleTab__8ZpwJ:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_styleTabActive__Xrqvf {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.CustomNodeCreatorModal_styleTabLabel__JCqqE {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_styleTabDesc__pYvmr {
  font-size: 0.7rem;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_styleTabActive__Xrqvf .CustomNodeCreatorModal_styleTabLabel__JCqqE {
  color: #c4b5fd;
}

.CustomNodeCreatorModal_styleTabActive__Xrqvf .CustomNodeCreatorModal_styleTabDesc__pYvmr {
  color: #9ca3af;
}

/* --- Preview Media Type Selector --- */
.CustomNodeCreatorModal_previewMediaTypeSelector__yvl3a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: rgba(30, 30, 35, 0.5);
  border-radius: 8px;
  border: 1px solid #374151;
}

.CustomNodeCreatorModal_previewMediaTypeLabel__t\+yiL {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
  white-space: nowrap;
}

.CustomNodeCreatorModal_previewMediaTypeTabs__7A8ie {
  display: flex;
  gap: 6px;
  flex: 1 1;
}

.CustomNodeCreatorModal_previewMediaTypeTab__q0cNw {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(20, 20, 25, 0.6);
  border: 1px solid #4b5563;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_previewMediaTypeTab__q0cNw:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.CustomNodeCreatorModal_previewMediaTypeTabActive__dT2q1 {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.CustomNodeCreatorModal_previewMediaTypeTab__q0cNw svg {
  flex-shrink: 0;
}

/* --- Preview Area (Left Panel) --- */
.CustomNodeCreatorModal_previewArea__a-VtD {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    rgba(30, 30, 35, 0.3),
    rgba(20, 20, 25, 0.5)
  );
  border-radius: 12px;
  border: 1px dashed #374151;
  padding: 30px;
  position: relative;
}

/* --- Preview Controls (Top Right) --- */
.CustomNodeCreatorModal_previewControls__Ofa94 {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.CustomNodeCreatorModal_previewControlBtn__Bj0R0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_previewControlBtn__Bj0R0:hover {
  background: rgba(55, 65, 81, 0.9);
  border-color: #6b7280;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_previewControlActive__1z5BT {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.CustomNodeCreatorModal_previewControlActive__1z5BT:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: #a78bfa;
}

/* Color Picker Wrapper */
.CustomNodeCreatorModal_colorPickerWrapper__yeW9P {
  position: relative;
}

/* Color Input Label - styled like a button */
.CustomNodeCreatorModal_colorInputLabel__bMlIM {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.CustomNodeCreatorModal_colorInputLabel__bMlIM:hover {
  background: rgba(55, 65, 81, 0.9);
  border-color: #6b7280;
  color: #e5e7eb;
}

/* Hidden color input */
.CustomNodeCreatorModal_colorInput__3i88Y {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  top: 0;
  left: 0;
}

/* Color Indicator on Palette Button */
.CustomNodeCreatorModal_colorIndicator__fZQWW {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  right: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.CustomNodeCreatorModal_previewPlaceholder__khrY\+ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* --- Common Mock Node Styles --- */
/* Green color scheme matching actual nodes - Light Mode */
.CustomNodeCreatorModal_mockNodeBase__kzxG\+ {
  --node-bg: #f0fdf4; /* green-50 */
  --node-border: #86efac; /* green-300 */
  --node-border-selected: #22c55e; /* green-500 */
  --node-text: #14532d; /* green-900 */
  --node-label-text: #16a34a; /* green-600 */
  --node-icon-bg: #dcfce7; /* green-100 */
  --node-icon-color: #15803d; /* green-700 */
  --node-textarea-border: #bbf7d0; /* green-200 */
  --node-button-bg: #22c55e; /* green-500 */
  --node-button-text: #f0fdf4; /* green-50 */
  --node-footer-bg: #f2fff6;
  --node-footer-border: #d9f99d;
  --node-media-gradient-start: #dcfce7;
  --node-media-gradient-end: #f0fdf4;

  font-family: 'Inconsolata', monospace;
}

/* Dark Mode overrides */
.CustomNodeCreatorModal_darkMode__0riau {
  --node-bg: #111827; /* gray-900 */
  --node-border: #047857; /* emerald-700 */
  --node-border-selected: #059669; /* emerald-600 */
  --node-text: #f9fafb; /* gray-50 */
  --node-label-text: #6ee7b7; /* emerald-300 */
  --node-icon-bg: #1f2937; /* gray-800 */
  --node-icon-color: #a7f3d0; /* emerald-200 */
  --node-textarea-border: #4b5563; /* gray-600 */
  --node-button-bg: #047857; /* emerald-700 */
  --node-button-text: #f9fafb; /* gray-50 */
  --node-footer-bg: #1f2937; /* gray-800 */
  --node-footer-border: #374151; /* gray-700 */
  --node-media-gradient-start: #1f2937;
  --node-media-gradient-end: #111827;
}

.CustomNodeCreatorModal_mockNodeIcon__ND0bW {
  font-size: 1rem;
}

.CustomNodeCreatorModal_mockNodeIconImg__enPtC {
  width: 32px;
  height: 32px;
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(500%)
    hue-rotate(100deg) brightness(95%) contrast(90%);
}

.CustomNodeCreatorModal_mockInput__Dx8aE,
.CustomNodeCreatorModal_mockOutput__0e3YU {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_mockOutput__0e3YU {
  justify-content: flex-end;
}

.CustomNodeCreatorModal_mockHandle__vRbCA {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--node-border-selected);
  border: 2px solid var(--node-bg);
}

.CustomNodeCreatorModal_mockHandleLeft__Vtdl8,
.CustomNodeCreatorModal_mockHandleRight__pyvDY {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background-color: var(--node-border-selected);
  border: none;
}

.CustomNodeCreatorModal_mockHandleLeft__Vtdl8 {
  left: -7px;
}

.CustomNodeCreatorModal_mockHandleRight__pyvDY {
  right: -7px;
}

/* Dark mode handle adjustments */
.CustomNodeCreatorModal_darkMode__0riau .CustomNodeCreatorModal_mockHandleLeft__Vtdl8,
.CustomNodeCreatorModal_darkMode__0riau .CustomNodeCreatorModal_mockHandleRight__pyvDY {
  background-color: var(--node-border-selected);
}

/* Multiple Handles Container */
.CustomNodeCreatorModal_mockHandlesLeft__cnRiK,
.CustomNodeCreatorModal_mockHandlesRight__t0oYY {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_mockHandlesLeft__cnRiK {
  left: -7px;
}

.CustomNodeCreatorModal_mockHandlesRight__t0oYY {
  right: -7px;
}

/* Individual Handle in Multi-Handle Mode */
.CustomNodeCreatorModal_mockHandleMulti__VG1e0 {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: var(--node-border);
  border: none;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_mockHandleMulti__VG1e0.CustomNodeCreatorModal_mockHandlePrimary__l8IiZ {
  background-color: var(--node-border-selected);
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Input handle style - slightly different to distinguish */
.CustomNodeCreatorModal_mockHandleInput__2F-iy {
  border-left: 2px solid var(--node-border-selected);
}

.CustomNodeCreatorModal_mockHandleInput__2F-iy.CustomNodeCreatorModal_mockHandlePrimary__l8IiZ {
  border-left: none;
}

/* Output handle style */
.CustomNodeCreatorModal_mockHandleOutput__85cPH {
  border-right: 2px solid var(--node-border-selected);
}

.CustomNodeCreatorModal_mockHandleOutput__85cPH.CustomNodeCreatorModal_mockHandlePrimary__l8IiZ {
  border-right: none;
}

.CustomNodeCreatorModal_previewHint__KH57i {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
  font-family: 'Inconsolata', monospace;
  text-align: center;
}

/* --- Single Frame Node Style (like GoogleDriveNode) --- */
.CustomNodeCreatorModal_mockNodeSingle__KdKpD {
  position: relative;
  width: 220px;
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  border-radius: 8px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: visible;
}

.CustomNodeCreatorModal_mockNodeFloatingHeader__pzwby {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.CustomNodeCreatorModal_mockFloatingHeaderButton__Durri {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 20px;
  background-color: var(--node-icon-bg);
  border: 1px solid var(--node-border);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
  gap: 3px;
}

.CustomNodeCreatorModal_mockNodeSingleBody__kxVZF {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
}

/* Single Frame Collapsed Content - not absolutely positioned */
.CustomNodeCreatorModal_mockSingleFrameContent__p28Mz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  min-height: 120px;
}

.CustomNodeCreatorModal_mockSingleFrameContent__p28Mz .CustomNodeCreatorModal_mockCollapsedIcon__STplv {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--node-icon-color);
}

.CustomNodeCreatorModal_darkMode__0riau .CustomNodeCreatorModal_mockSingleFrameContent__p28Mz .CustomNodeCreatorModal_mockCollapsedIcon__STplv {
  color: var(--node-label-text);
}

.CustomNodeCreatorModal_mockSingleFrameContent__p28Mz .CustomNodeCreatorModal_mockStatusIndicators__1UPNj {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.CustomNodeCreatorModal_mockContentArea__JW1g7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  min-height: 80px;
}

.CustomNodeCreatorModal_mockDriveIcon__dzK2f {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  color: var(--node-label-text);
}

.CustomNodeCreatorModal_mockContentPlaceholder__kr7cX {
  font-size: 0.8rem;
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
  text-align: center;
  line-height: 1.4;
}

.CustomNodeCreatorModal_mockSingleFooter__oaY95 {
  background-color: var(--node-footer-bg);
  border-top: 1px solid var(--node-footer-border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.CustomNodeCreatorModal_mockFooterIcon__4pB4D {
  color: var(--node-border-selected);
}

.CustomNodeCreatorModal_mockStatusText__4\+HX8 {
  font-size: 0.75rem;
  color: var(--node-label-text);
  font-weight: 600;
}

.CustomNodeCreatorModal_mockStatusLabel__KXTFg {
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
}

/* Status Icon States */
.CustomNodeCreatorModal_mockStatusIcon__Qa4f- {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--node-textarea-border);
}

.CustomNodeCreatorModal_statusActive__LRv0A {
  background-color: transparent;
  color: var(--node-border-selected);
  border-color: var(--node-border-selected);
}

.CustomNodeCreatorModal_statusInactive__fGrwr {
  background-color: transparent;
  color: var(--node-label-text);
  opacity: 0.4;
}

.CustomNodeCreatorModal_statusOutputActive__uEsY\+ {
  background-color: transparent;
  color: #3b82f6;
  border-color: #3b82f6;
}

.CustomNodeCreatorModal_statusRequired__-rQMN {
  background-color: transparent;
  color: #ef4444;
  border-color: #ef4444;
}

/* --- Double Frame Node Styles (like InputNode) --- */
.CustomNodeCreatorModal_mockNodeDouble__8PoZz {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 280px;
  padding: 12px;
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  border-radius: 8px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: visible;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* ==================== EXPAND/COLLAPSE ANIMATION ==================== */

/* Collapsed State */
.CustomNodeCreatorModal_nodeCollapsed__T\+RSK {
  /* Default state */
}

/* Expanded State */
.CustomNodeCreatorModal_nodeExpanded__tsmRg {
  /* Expanded state */
}

/* Collapsed Frame - slides out to left on expand */
.CustomNodeCreatorModal_mockCollapsedFrame__rssH3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--node-bg);
  border-radius: 6px;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* Slide out animation when expanding */
.CustomNodeCreatorModal_nodeExpanded__tsmRg .CustomNodeCreatorModal_mockCollapsedFrame__rssH3,
.CustomNodeCreatorModal_nodeExpanded__tsmRg .CustomNodeCreatorModal_mockCollapsedFramePreview__oJUdD {
  transform: translateX(-105%);
  pointer-events: none;
}

/* Expanded Frame - underneath, revealed when collapsed slides */
.CustomNodeCreatorModal_mockExpandedFrame__N8rtw {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1px;
  background-color: var(--node-bg);
  border-radius: 6px;
}

/* Floating Header Animation - only for nodes with expand animation */
.CustomNodeCreatorModal_nodeCollapsed__T\+RSK .CustomNodeCreatorModal_mockExpandedHeader__wlrhg {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Animate header in when expanded */
.CustomNodeCreatorModal_nodeExpanded__tsmRg .CustomNodeCreatorModal_mockExpandedHeader__wlrhg {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.CustomNodeCreatorModal_mockFramesContainer__lvTAl {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
}

/* Two Nodes Container - displays two separate nodes side by side */
.CustomNodeCreatorModal_mockTwoNodesContainer__FuTYi {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

/* Collapsed Frame (with indicators and ghost lines) */
.CustomNodeCreatorModal_mockCollapsedFrame__rssH3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--node-bg);
  border-radius: 6px;
  z-index: 2;
}

.CustomNodeCreatorModal_mockCollapsedIconsRow__BFtmj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

.CustomNodeCreatorModal_mockCollapsedIcon__STplv {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--node-icon-color);
}

/* In dark mode, use lighter color for visibility */
.CustomNodeCreatorModal_darkMode__0riau .CustomNodeCreatorModal_mockCollapsedIcon__STplv {
  color: var(--node-label-text);
}

.CustomNodeCreatorModal_mockCreditIcon__w52DL {
  color: var(--node-border-selected);
  font-size: 8px;
}

.CustomNodeCreatorModal_mockStatusIndicators__1UPNj {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.CustomNodeCreatorModal_mockStatusItem__DklmG {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.CustomNodeCreatorModal_mockGhostLines__hQwGa {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 80%;
  padding: 0 16px;
  margin-top: 12px;
}

.CustomNodeCreatorModal_mockGhostLine__-aGj1 {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--node-textarea-border) 0%,
    var(--node-textarea-border) 60%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  width: 100%;
}

.CustomNodeCreatorModal_mockGhostLine__-aGj1:nth-child(2) {
  width: 75%;
}

.CustomNodeCreatorModal_mockGhostLine__-aGj1:nth-child(3) {
  width: 50%;
}

/* Expanded Frame (underneath, shown when collapsed slides) */
.CustomNodeCreatorModal_mockExpandedFrame__N8rtw {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding: 1px;
}

/* Single Frame - Expanded frame that fills the entire container */
.CustomNodeCreatorModal_mockExpandedFrameSingle__ir7fm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  padding: 1px;
  background-color: var(--node-bg);
  border-radius: 6px;
}

.CustomNodeCreatorModal_mockExpandedHeader__wlrhg {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
}

.CustomNodeCreatorModal_mockHeaderCredits__TQAJC {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 65px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--node-textarea-border);
  background-color: var(--node-bg);
  color: var(--node-label-text);
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.CustomNodeCreatorModal_mockExpandedBody__vqj3K {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_mockTextArea__092GI {
  flex: 1 1;
  padding: 8px;
  background-color: var(--node-bg);
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--node-text);
  font-family: 'Inconsolata', monospace;
  line-height: 1.4;
}

.CustomNodeCreatorModal_mockExpandedFooter__MbWrf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
}

.CustomNodeCreatorModal_mockFooterControls__vaQ-k {
  display: flex;
  align-items: center;
  gap: 4px;
}

.CustomNodeCreatorModal_mockPinButton__lViV\+ {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--node-textarea-border);
  background-color: var(--node-bg);
  color: var(--node-label-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.CustomNodeCreatorModal_mockGoButton__HxUe\+ {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background-color: var(--node-button-bg);
  color: var(--node-button-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 10px;
}

.CustomNodeCreatorModal_mockTokenInfo__rjRAQ {
  font-size: 0.65rem;
  color: var(--node-label-text);
}

/* Collapsed Frame with Preview (like ImageGenerationNode) */
.CustomNodeCreatorModal_mockCollapsedFramePreview__oJUdD {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--node-bg);
  border-radius: 6px;
  z-index: 2;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.CustomNodeCreatorModal_mockAnchoredIcon__W86cV {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--node-icon-bg);
  border-radius: 20%;
  border: 1px solid var(--node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: var(--node-icon-color);
}

/* In dark mode, use lighter color for visibility */
.CustomNodeCreatorModal_darkMode__0riau .CustomNodeCreatorModal_mockAnchoredIcon__W86cV {
  color: var(--node-label-text);
}

.CustomNodeCreatorModal_mockMediaPreview__pupAr {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--node-media-gradient-start) 0%,
    var(--node-media-gradient-end) 100%
  );
}

.CustomNodeCreatorModal_mockMediaPlaceholder__YPsnv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--node-label-text);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_mockMediaPlaceholder__YPsnv span:first-child {
  font-size: 2rem;
  opacity: 0.6;
}

/* --- Settings Area (Right Panel) --- */
.CustomNodeCreatorModal_placeholderContent__VQYJ9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  text-align: center;
  padding: 20px;
}

.CustomNodeCreatorModal_placeholderIcon__sS\+Ci {
  color: #6b7280;
  margin-bottom: 20px;
  opacity: 0.6;
}

.CustomNodeCreatorModal_placeholderContent__VQYJ9 h3 {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_placeholderContent__VQYJ9 p {
  margin: 0 0 24px 0;
  font-size: 0.95rem;
  color: #9ca3af;
  line-height: 1.6;
  font-family: 'Inconsolata', monospace;
  max-width: 320px;
}

.CustomNodeCreatorModal_placeholderList__TJHOM {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 280px;
}

.CustomNodeCreatorModal_placeholderItem__PoY-m {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_bullet__\+MypD {
  color: #8b5cf6;
  font-size: 1.2rem;
}

/* --- Particle Background Styles --- */
.CustomNodeCreatorModal_particleContainer__zNPoA {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.CustomNodeCreatorModal_particle__GT66g {
  position: absolute;
  opacity: 0;
  animation-name: CustomNodeCreatorModal_popInOut__xuoxE;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes CustomNodeCreatorModal_popInOut__xuoxE {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(180deg);
    opacity: 0.3;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.15;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* --- Filter Styles --- */
.CustomNodeCreatorModal_pastelFilter1__L7LOe {
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}
.CustomNodeCreatorModal_pastelFilter2__j9fdr {
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}
.CustomNodeCreatorModal_pastelFilter3__wNj3K {
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}
.CustomNodeCreatorModal_pastelFilter4__nVsMP {
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}
.CustomNodeCreatorModal_pastelFilter5__F1oMp {
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

/* --- Custom Scrollbar for panels --- */
.CustomNodeCreatorModal_leftPanel__1OOxP::-webkit-scrollbar,
.CustomNodeCreatorModal_rightPanel__xv1F4::-webkit-scrollbar {
  width: 6px;
}

.CustomNodeCreatorModal_leftPanel__1OOxP::-webkit-scrollbar-track,
.CustomNodeCreatorModal_rightPanel__xv1F4::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}

.CustomNodeCreatorModal_leftPanel__1OOxP::-webkit-scrollbar-thumb,
.CustomNodeCreatorModal_rightPanel__xv1F4::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

.CustomNodeCreatorModal_leftPanel__1OOxP::-webkit-scrollbar-thumb:hover,
.CustomNodeCreatorModal_rightPanel__xv1F4::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 1024px) {
  .CustomNodeCreatorModal_leftPanel__1OOxP,
  .CustomNodeCreatorModal_rightPanel__xv1F4 {
    padding: 30px;
  }

  .CustomNodeCreatorModal_styleTabs__dBRTQ {
    gap: 8px;
  }

  .CustomNodeCreatorModal_styleTab__8ZpwJ {
    padding: 10px 12px;
  }

  .CustomNodeCreatorModal_styleTabLabel__JCqqE {
    font-size: 0.75rem;
  }

  .CustomNodeCreatorModal_styleTabDesc__pYvmr {
    font-size: 0.65rem;
  }
}

@media (max-width: 768px) {
  .CustomNodeCreatorModal_contentWrapper__BPW82 {
    flex-direction: column;
  }

  /* Hide the left panel on mobile */
  .CustomNodeCreatorModal_leftPanel__1OOxP {
    display: none;
  }

  /* Make the right panel take full space */
  .CustomNodeCreatorModal_rightPanel__xv1F4 {
    flex: 1 1;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    min-height: auto;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .CustomNodeCreatorModal_rightPanel__xv1F4 {
    padding: 15px;
  }

  .CustomNodeCreatorModal_panelHeader__n\+fIh h2 {
    font-size: 1.1rem;
  }

  .CustomNodeCreatorModal_placeholderContent__VQYJ9 h3 {
    font-size: 1.1rem;
  }
}

/* ==================== STYLE STEP CONTENT ==================== */
.CustomNodeCreatorModal_styleStepContent__t\+Ipv {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0;
}

/* ==================== NODE NAME SECTION ==================== */
.CustomNodeCreatorModal_nodeNameSection__AXq5f {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(30, 30, 35, 0.4);
  border: 1px solid #374151;
  border-radius: 8px;
}

.CustomNodeCreatorModal_nodeNameLabel__MBNEb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_nodeNameLabel__MBNEb svg {
  color: #8b5cf6;
}

.CustomNodeCreatorModal_nodeNameInput__V1BPd {
  width: 100%;
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_nodeNameInput__V1BPd:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_nodeNameInput__V1BPd::placeholder {
  color: #6b7280;
  font-weight: 400;
}

.CustomNodeCreatorModal_nodeDescriptionSection__JrTc0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(30, 30, 35, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(55, 65, 81, 0.5);
}

.CustomNodeCreatorModal_nodeDescriptionLabel__cR2HB {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}

.CustomNodeCreatorModal_nodeDescriptionLabel__cR2HB svg {
  color: #8b5cf6;
}

.CustomNodeCreatorModal_nodeDescriptionInput__\+2Gpp {
  width: 100%;
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #f9fafb;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_nodeDescriptionInput__\+2Gpp:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_nodeDescriptionInput__\+2Gpp::placeholder {
  color: #6b7280;
  font-weight: 400;
}

/* Details Row Layout */
.CustomNodeCreatorModal_detailsRow__Y1IqO {
  display: flex;
  gap: 20px;
}

.CustomNodeCreatorModal_detailsLeft__OPGA6 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.CustomNodeCreatorModal_detailsRight__MbUHl {
  width: 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_iconSelectionLabel__PXDY\+ {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}

.CustomNodeCreatorModal_iconSelectionLabel__PXDY\+ svg {
  color: #8b5cf6;
}

.CustomNodeCreatorModal_iconGrid__18Z8h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  padding: 12px;
  background: rgba(30, 30, 35, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(55, 65, 81, 0.5);
  max-height: 220px;
  overflow-y: auto;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar {
  width: 6px;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.4);
  border-radius: 3px;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

.CustomNodeCreatorModal_iconGridItem__YXSPO {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_iconGridItem__YXSPO:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

.CustomNodeCreatorModal_iconGridItemActive__9eE4a {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.CustomNodeCreatorModal_iconGridItemActive__9eE4a:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.CustomNodeCreatorModal_saveError__IWdg2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #fca5a5;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_saveError__IWdg2 svg {
  flex-shrink: 0;
}

/* ==================== STEP INDICATOR ==================== */
.CustomNodeCreatorModal_stepIndicator__ZFTSY {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  margin-bottom: 4px;
}

.CustomNodeCreatorModal_stepBox__aXmnI {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 35, 0.8);
  border: 2px solid #4b5563;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_stepBox__aXmnI:hover {
  border-color: #6b7280;
  background: rgba(55, 65, 81, 0.9);
}

.CustomNodeCreatorModal_stepActive__fxB2p {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.CustomNodeCreatorModal_stepCompleted__Aoemm {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #86efac;
}

.CustomNodeCreatorModal_stepArrow__-LrP0 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_stepArrowActive__8XI51 {
  color: #22c55e;
}

.CustomNodeCreatorModal_stepLabels__xe0y0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #374151;
  margin-bottom: 16px;
}

.CustomNodeCreatorModal_stepLabel__CeNMb {
  font-size: 0.7rem;
  font-weight: 500;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_stepLabelActive__jTDsJ {
  color: #c4b5fd;
}

/* ==================== STEP CONTENT ==================== */
.CustomNodeCreatorModal_stepContent__cAASp {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.CustomNodeCreatorModal_stepInfo__n0icB {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  text-align: center;
  padding: 20px;
  gap: 12px;
}

.CustomNodeCreatorModal_stepInfoIcon__Pj1I6 {
  color: #8b5cf6;
  opacity: 0.7;
}

.CustomNodeCreatorModal_stepInfo__n0icB h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_stepInfo__n0icB p {
  margin: 0;
  font-size: 0.9rem;
  color: #9ca3af;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
  max-width: 280px;
}

/* ==================== HANDLE CONFIGURATION ==================== */
.CustomNodeCreatorModal_handleConfig__ng8GM {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}

.CustomNodeCreatorModal_handleSection__dtycr {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_handleSectionHeader__p6h00 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.CustomNodeCreatorModal_handleSectionHeader__p6h00 h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_addHandleBtn__i38V5 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid #8b5cf6;
  border-radius: 4px;
  color: #c4b5fd;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addHandleBtn__i38V5:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #a78bfa;
}

.CustomNodeCreatorModal_handleList__uIGcq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_handleItem__UKpJM {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid #374151;
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_handleItem__UKpJM:hover {
  border-color: #4b5563;
}

.CustomNodeCreatorModal_primaryBtn__lsroy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #4b5563;
  border-radius: 4px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_primaryBtn__lsroy:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}

.CustomNodeCreatorModal_primaryActive__QJz9d {
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
  color: #fbbf24;
}

.CustomNodeCreatorModal_handleLabelInput__cdSUL {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_handleLabelInput__cdSUL:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_handleLabelInput__cdSUL::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_handleTypeSelect__iVRHk {
  width: 90px;
  padding: 6px 8px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_handleTypeSelect__iVRHk:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_handleTypeSelect__iVRHk option {
  background: #1f2937;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_deleteHandleBtn__sB3V0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #4b5563;
  border-radius: 4px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_deleteHandleBtn__sB3V0:hover:not(:disabled) {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.CustomNodeCreatorModal_deleteHandleBtn__sB3V0:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.CustomNodeCreatorModal_handleNote__RcPWL {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
  font-size: 0.75rem;
  color: #fbbf24;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_noteIcon__MLvkv {
  flex-shrink: 0;
}

/* ==================== STEP NAVIGATION ==================== */
.CustomNodeCreatorModal_stepNavigation__gvVEQ {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #374151;
  margin-top: auto;
}

.CustomNodeCreatorModal_navBtn__9qzA- {
  flex: 1 1;
  padding: 10px 20px;
  background: rgba(55, 65, 81, 0.6);
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_navBtn__9qzA-:hover:not(:disabled) {
  background: rgba(75, 85, 99, 0.8);
  border-color: #6b7280;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_navBtn__9qzA-:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.CustomNodeCreatorModal_navBtnPrimary__ixw3R {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.CustomNodeCreatorModal_navBtnPrimary__ixw3R:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.35);
  border-color: #a78bfa;
  color: #ddd6fe;
}

/* ==================== SETTINGS CONFIGURATION (Step 3) ==================== */
.CustomNodeCreatorModal_settingsConfig__BIawr {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
  overflow-y: auto;
}

.CustomNodeCreatorModal_settingsSection__Ee-dU {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: rgba(30, 30, 35, 0.4);
  border: 1px solid #374151;
  border-radius: 8px;
}

.CustomNodeCreatorModal_settingsSection__Ee-dU.CustomNodeCreatorModal_disabledSection__PIuas {
  opacity: 0.5;
  position: relative;
}

.CustomNodeCreatorModal_settingsSection__Ee-dU.CustomNodeCreatorModal_disabledSection__PIuas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  pointer-events: none;
}

.CustomNodeCreatorModal_settingsSection__Ee-dU.CustomNodeCreatorModal_disabledSection__PIuas .CustomNodeCreatorModal_toggleBtn__iXSQa {
  cursor: not-allowed;
  opacity: 0.6;
}

.CustomNodeCreatorModal_settingsSectionHeader__dP\+Y9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.CustomNodeCreatorModal_settingsTitleRow__Q9oce {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_settingsIcon__l0LxS {
  color: #8b5cf6;
  opacity: 0.8;
}

.CustomNodeCreatorModal_settingsSectionHeader__dP\+Y9 h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_settingsSubHeader__ycMkk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #374151;
}

.CustomNodeCreatorModal_settingsSubHeader__ycMkk span {
  font-size: 0.75rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

/* Toggle Button */
.CustomNodeCreatorModal_toggleBtn__iXSQa {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_toggleBtn__iXSQa:hover {
  color: #9ca3af;
}

.CustomNodeCreatorModal_toggleBtn__iXSQa svg {
  color: inherit;
}

.CustomNodeCreatorModal_toggleBtn__iXSQa:has(svg[class*='BsToggleOn']) {
  color: #22c55e;
}

/* Text Area List */
.CustomNodeCreatorModal_textAreaList__9flZi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_textAreaItem__WF5s- {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid #374151;
  border-radius: 6px;
}

.CustomNodeCreatorModal_textAreaRow__yMPWw {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_placeholderInput__iMLeJ {
  flex: 1 1;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-style: italic;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_placeholderInput__iMLeJ:focus {
  outline: none;
  border-color: #8b5cf6;
  color: #e5e7eb;
  font-style: normal;
}

.CustomNodeCreatorModal_placeholderInput__iMLeJ::placeholder {
  color: #4b5563;
}

/* API Configuration */
.CustomNodeCreatorModal_apiUrlRow__ztrGU {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}

.CustomNodeCreatorModal_apiLabel__B1Ggr {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_apiUrlInput__c\+r\+f {
  width: 100%;
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
}

.CustomNodeCreatorModal_apiUrlInput__c\+r\+f:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_apiUrlInput__c\+r\+f::placeholder {
  color: #6b7280;
}

/* HTTP Method Selector */
.CustomNodeCreatorModal_methodSelector__UF0Hw {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.CustomNodeCreatorModal_methodBtn__xj\+4T {
  padding: 6px 12px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_methodBtn__xj\+4T:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: #6b7280;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_methodBtnActive__ajVqS {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  color: #a78bfa;
}

.CustomNodeCreatorModal_methodBtnActive__ajVqS:hover {
  background: rgba(139, 92, 246, 0.35);
  border-color: #a78bfa;
}

/* Parameter List */
.CustomNodeCreatorModal_parameterList__eA\+59 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_parameterItem__lWg6Q {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid #374151;
  border-radius: 6px;
}

.CustomNodeCreatorModal_parameterRow__U8RSI {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_paramNameInput__UM6zn {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_paramNameInput__UM6zn:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_paramNameInput__UM6zn::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_paramTypeSelect__OYduG {
  width: 85px;
  padding: 6px 8px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_paramTypeSelect__OYduG:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_paramTypeSelect__OYduG option {
  background: #1f2937;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_paramDefaultInput__I6inj {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_paramDefaultInput__I6inj:focus {
  outline: none;
  border-color: #8b5cf6;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_paramDefaultInput__I6inj::placeholder {
  color: #4b5563;
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq {
  width: 140px;
  padding: 6px 8px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq option {
  background: #1f2937;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq optgroup {
  color: #9ca3af;
  font-style: normal;
  font-weight: 600;
}

/* Required Button */
.CustomNodeCreatorModal_requiredBtn__XvngT {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #4b5563;
  border-radius: 4px;
  color: #6b7280;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_requiredBtn__XvngT:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.CustomNodeCreatorModal_requiredActive__uf0Xx {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

/* Add to Keys Button */
.CustomNodeCreatorModal_addToKeysBtn__1hAtJ {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 4px;
  color: #a78bfa;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.CustomNodeCreatorModal_addToKeysBtn__1hAtJ:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #a78bfa;
}

.CustomNodeCreatorModal_addToKeysBtn__1hAtJ:active {
  background: rgba(139, 92, 246, 0.35);
}

/* ==================== ADD KEY MODAL ==================== */
.CustomNodeCreatorModal_addKeyModalOverlay__X6Aiq {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.CustomNodeCreatorModal_addKeyModal__zxgs8 {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: CustomNodeCreatorModal_modalSlideIn__nxRIi 0.2s ease-out;
}

@keyframes CustomNodeCreatorModal_modalSlideIn__nxRIi {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.CustomNodeCreatorModal_addKeyModalHeader__FHdSr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #374151;
  color: #a78bfa;
}

.CustomNodeCreatorModal_addKeyModalHeader__FHdSr h3 {
  flex: 1 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_addKeyModalClose__4G3jg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeyModalClose__4G3jg:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

.CustomNodeCreatorModal_addKeyModalBody__0e-Fe {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.CustomNodeCreatorModal_addKeyField__TwHmi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.CustomNodeCreatorModal_addKeyField__TwHmi label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #9ca3af;
}

.CustomNodeCreatorModal_addKeyField__TwHmi input {
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeyField__TwHmi input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.CustomNodeCreatorModal_addKeyField__TwHmi input::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_addKeyModalFooter__xUTST {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #374151;
  background: rgba(17, 24, 39, 0.5);
  border-radius: 0 0 12px 12px;
}

.CustomNodeCreatorModal_addKeySkipBtn__ADWwT {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeySkipBtn__ADWwT:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #6b7280;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_addKeySaveBtn__5piRt {
  padding: 8px 16px;
  background: #8b5cf6;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeySaveBtn__5piRt:hover {
  background: #7c3aed;
}

/* ==================== HEADERS LIST ==================== */
.CustomNodeCreatorModal_headerList__yKoii {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_headerItem__H7FaN {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid #374151;
  border-radius: 6px;
}

.CustomNodeCreatorModal_headerRow__-uefg {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_headerNameInput__8Ay7c {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_headerNameInput__8Ay7c:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_headerNameInput__8Ay7c::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_headerValueInput__e3dKG {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_headerValueInput__e3dKG:focus {
  outline: none;
  border-color: #8b5cf6;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_headerValueInput__e3dKG::placeholder {
  color: #4b5563;
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU {
  width: 140px;
  padding: 6px 8px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU option {
  background: #1f2937;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU optgroup {
  color: #9ca3af;
  font-style: normal;
  font-weight: 600;
}

/* ==================== POLLING CONFIGURATION ==================== */
.CustomNodeCreatorModal_pollingConfig__eBjkN {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(17, 24, 39, 0.3);
  border: 1px solid #374151;
  border-radius: 6px;
  margin-top: 4px;
}

.CustomNodeCreatorModal_pollingOptionsRow__z2JLZ {
  display: flex;
  gap: 12px;
}

.CustomNodeCreatorModal_pollingOption__B5nW7 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.CustomNodeCreatorModal_pollingInput__nokHi {
  width: 100%;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_pollingInput__nokHi:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_pollingFieldsSection__Q\+L65 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(55, 65, 81, 0.5);
}

.CustomNodeCreatorModal_pollingFieldRow__bxZ9a {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.CustomNodeCreatorModal_pollingFieldInput__acTi9 {
  width: 100%;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_pollingFieldInput__acTi9:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_pollingFieldInput__acTi9::placeholder {
  color: #6b7280;
}

/* URL Hint */
.CustomNodeCreatorModal_urlHint__6nv2m {
  font-size: 0.7rem;
  color: #6b7280;
  margin-top: 4px;
  font-family: 'Inconsolata', monospace;
}

/* Field Input with Suggestions */
.CustomNodeCreatorModal_fieldInputWithSuggestions__U2Wc8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.CustomNodeCreatorModal_fieldSuggestions__O3PEj {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.CustomNodeCreatorModal_fieldSuggestionBtn__\+Rb41 {
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 4px;
  color: #a78bfa;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_fieldSuggestionBtn__\+Rb41:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
}

/* Sample Response Section */
.CustomNodeCreatorModal_sampleResponseSection__XyECw {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_sampleResponseTextarea__OHGQB {
  width: 100%;
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_sampleResponseTextarea__OHGQB:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_sampleResponseTextarea__OHGQB::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_sampleResponseError__MgQla {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #fca5a5;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

/* Result URL Configuration */
.CustomNodeCreatorModal_detectedUrlsSection__x7tJb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.CustomNodeCreatorModal_detectedUrlsLabel__byuxB {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_detectedUrlsList__u3Ass {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.CustomNodeCreatorModal_detectedUrlBtn__4wMfL {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  color: #86efac;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_detectedUrlBtn__4wMfL:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='image'] {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='video'] {
  background: rgba(168, 85, 247, 0.2);
  color: #c4b5fd;
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='audio'] {
  background: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='unknown'],
.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='file'] {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
}

.CustomNodeCreatorModal_urlConfigList__ZN5oc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_urlConfigItem__OCpmy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid #374151;
  border-radius: 6px;
}

.CustomNodeCreatorModal_urlConfigRow__0ZLt2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_urlPathInput__\+44db {
  flex: 1 1;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_urlPathInput__\+44db:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_urlPathInput__\+44db::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_urlTypeSelect__0vSFT {
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  min-width: 80px;
}

.CustomNodeCreatorModal_urlTypeSelect__0vSFT:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_urlConfigOptions__MRpXh {
  display: flex;
  gap: 16px;
  padding-left: 4px;
}

.CustomNodeCreatorModal_urlOptionLabel__T0O1n {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_urlOptionLabel__T0O1n:hover {
  color: #e5e7eb;
}

.CustomNodeCreatorModal_urlOptionLabel__T0O1n input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: #8b5cf6;
  cursor: pointer;
}

.CustomNodeCreatorModal_noUrlConfigsMessage__YHkAA {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: rgba(17, 24, 39, 0.4);
  border: 1px dashed #374151;
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

/* Local Save Path Row */
.CustomNodeCreatorModal_localSavePathRow__VWh5a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(55, 65, 81, 0.5);
  margin-top: 4px;
}

.CustomNodeCreatorModal_localSaveLabel__rWQ9a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
  white-space: nowrap;
}

.CustomNodeCreatorModal_localSavePathInput__J7MW- {
  flex: 1 1;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_localSavePathInput__J7MW-:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_localSavePathInput__J7MW-::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_browsePathBtn__8E7V6 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 4px;
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_browsePathBtn__8E7V6:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
}

/* ==================== OUTPUT CONFIGURATION (Step 4/5) ==================== */
.CustomNodeCreatorModal_outputConfig__bo7DF {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  overflow-y: auto;
}

/* Test API Button */
.CustomNodeCreatorModal_testApiBtn__QDCfO {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  border-radius: 4px;
  color: #86efac;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_testApiBtn__QDCfO:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.25);
  border-color: #4ade80;
}

.CustomNodeCreatorModal_testApiBtn__QDCfO:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.CustomNodeCreatorModal_testApiBtn__QDCfO.CustomNodeCreatorModal_testing__raiXk {
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
  color: #fcd34d;
}

/* Spin animation for loading icon */
.CustomNodeCreatorModal_spinIcon__uJMdX {
  animation: CustomNodeCreatorModal_spin__m2a4- 1s linear infinite;
}

@keyframes CustomNodeCreatorModal_spin__m2a4- {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Test Result Display */
.CustomNodeCreatorModal_testResultError__Fi1-U {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_testResultSuccess__uvbwg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_testResultHeader__lD8wA {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #86efac;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_testResultJson__F7UPp {
  margin: 0;
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.CustomNodeCreatorModal_testPlaceholder__Fd8lI {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: #6b7280;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  text-align: center;
}

/* Test Inputs Section */
.CustomNodeCreatorModal_testInputsSection__uppYs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(17, 24, 39, 0.4);
  border: 1px solid #374151;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.CustomNodeCreatorModal_testInputsLabel__CLKG\+ {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_testInputsLabel__CLKG\+ svg {
  color: #8b5cf6;
  opacity: 0.8;
}

.CustomNodeCreatorModal_testInputsList__fLeGN {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_testInputItem__KgmXS {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.CustomNodeCreatorModal_testInputLabel__tatvy {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_requiredMark__6eNBY {
  color: #ef4444;
  font-weight: bold;
}

.CustomNodeCreatorModal_testTextArea__zuTSe {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  resize: vertical;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
}

.CustomNodeCreatorModal_testTextArea__zuTSe:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_testTextArea__zuTSe::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_testParamItem__uJp2v {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_testParamInput__T-XEl {
  flex: 1 1;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_testParamInput__T-XEl:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_testParamInput__T-XEl::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_paramTypeTag__fPNK5 {
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #a78bfa;
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Display Mode Options */
.CustomNodeCreatorModal_displayModeOptions__Yx8ai {
  display: flex;
  gap: 8px;
}

.CustomNodeCreatorModal_displayModeBtn__CI1XJ {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid #374151;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_displayModeBtn__CI1XJ:hover {
  border-color: #4b5563;
  background: rgba(55, 65, 81, 0.6);
}

.CustomNodeCreatorModal_displayModeActive__lo8gW {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_displayModeActive__lo8gW:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: #a78bfa;
}

.CustomNodeCreatorModal_displayModeLabel__3J577 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_displayModeActive__lo8gW .CustomNodeCreatorModal_displayModeLabel__3J577 {
  color: #c4b5fd;
}

.CustomNodeCreatorModal_displayModeDesc__qD5lW {
  font-size: 0.65rem;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_displayModeActive__lo8gW .CustomNodeCreatorModal_displayModeDesc__qD5lW {
  color: #a78bfa;
}

/* Output Mappings */
.CustomNodeCreatorModal_outputMappingList__Unjyh {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_outputMappingItem__MQl1I {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid #374151;
  border-radius: 6px;
}

.CustomNodeCreatorModal_jsonPathInput__0-THH {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_jsonPathInput__0-THH:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_jsonPathInput__0-THH::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_mappingArrow__M4yKa {
  color: #6b7280;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_outputHandleSelect__hcbws {
  width: 100px;
  padding: 6px 8px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_outputHandleSelect__hcbws:focus {
  outline: none;
  border-color: #8b5cf6;
}

.CustomNodeCreatorModal_outputHandleSelect__hcbws option {
  background: #1f2937;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_noMappingsPlaceholder__cbosV {
  padding: 16px;
  text-align: center;
  color: #6b7280;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  background: rgba(17, 24, 39, 0.3);
  border: 1px dashed #374151;
  border-radius: 6px;
}

/* Schema Child Nodes */
.CustomNodeCreatorModal_schemaPreview__VyY3i {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_schemaPreviewHeader__OMRMt {
  font-size: 0.75rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_schemaFieldList__ULoGU {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.CustomNodeCreatorModal_schemaFieldItem__T4QZT {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid #374151;
  border-radius: 4px;
}

.CustomNodeCreatorModal_schemaFieldItem__T4QZT svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_schemaFieldName__73hRP {
  flex: 1 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_schemaFieldType__vd-A3 {
  font-size: 0.7rem;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 3px;
}

.CustomNodeCreatorModal_schemaPlaceholder__L0II3 {
  padding: 12px;
  text-align: center;
  color: #6b7280;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  font-style: italic;
}

/* Create Node Button */
.CustomNodeCreatorModal_navBtnCreate__8Yd4V {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #86efac;
}

.CustomNodeCreatorModal_navBtnCreate__8Yd4V:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.35);
  border-color: #4ade80;
  color: #bbf7d0;
}

/* Create Node Wrapper with Beta Badge */
.CustomNodeCreatorModal_createNodeWrapper__fqLdi {
  position: relative;
  display: flex;
  align-items: center;
}

.CustomNodeCreatorModal_navBtnDisabledBeta__nhjZr {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(107, 114, 128, 0.15) !important;
  border-color: #6b7280 !important;
  color: #9ca3af !important;
}

.CustomNodeCreatorModal_navBtnDisabledBeta__nhjZr:hover {
  background: rgba(107, 114, 128, 0.2) !important;
}

.CustomNodeCreatorModal_betaBadge__4fF45 {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  z-index: 1;
}

/* Save Draft Button */
.CustomNodeCreatorModal_navBtnDraft__-gLhe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
  color: #fcd34d;
}

.CustomNodeCreatorModal_navBtnDraft__-gLhe:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.25);
  border-color: #f59e0b;
  color: #fde68a;
}

.CustomNodeCreatorModal_navBtnDraft__-gLhe:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== SHOW DRAFT BUTTON ==================== */
.CustomNodeCreatorModal_showDraftBtn__dg1ZC {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_showDraftBtn__dg1ZC:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fcd34d;
}

.CustomNodeCreatorModal_showDraftBtnActive__JeA8M {
  background: rgba(251, 191, 36, 0.25);
  border-color: #fbbf24;
  color: #fde68a;
}

/* ==================== DRAFT PREVIEW CONTAINER ==================== */
.CustomNodeCreatorModal_draftPreviewContainer__NjgAh {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid #374151;
  border-radius: 8px;
  height: 100%;
  overflow: hidden;
}

.CustomNodeCreatorModal_draftPreviewHeader__uOTd1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_draftPreviewJson__KiPHu {
  flex: 1 1;
  padding: 12px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  margin: 0;
  line-height: 1.5;
}

.CustomNodeCreatorModal_draftPreviewHint__DPecY {
  margin: 0;
  padding: 8px 0 0;
  font-size: 0.7rem;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
  text-align: center;
  font-style: italic;
}

/* ==================== HEADER BUTTONS WRAPPER ==================== */
.CustomNodeCreatorModal_headerButtons__4Z4jB {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ==================== OPEN DRAFT BUTTON ==================== */
.CustomNodeCreatorModal_openDraftBtn__lYjDB {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_openDraftBtn__lYjDB:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  color: #60a5fa;
}

/* ==================== AUTO SAVE BUTTON ==================== */
.CustomNodeCreatorModal_autoSaveBtn__tX3dw {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.3);
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_autoSaveBtn__tX3dw:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.CustomNodeCreatorModal_autoSaveBtnActive__vOn-K {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.CustomNodeCreatorModal_autoSaveBtnActive__vOn-K:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  color: #4ade80;
}

/* ==================== DRAFTS MODAL ==================== */
.CustomNodeCreatorModal_draftsModalOverlay__Rz0yD {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.CustomNodeCreatorModal_draftsModal__jdAJk {
  width: 90%;
  max-width: 480px;
  max-height: 70vh;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.CustomNodeCreatorModal_draftsModalHeader__0kpgN {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #374151;
  background: rgba(17, 24, 39, 0.5);
}

.CustomNodeCreatorModal_draftsModalTitle__bhNVc {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e5e7eb;
}

.CustomNodeCreatorModal_draftsModalTitle__bhNVc svg {
  color: #3b82f6;
}

.CustomNodeCreatorModal_draftsModalTitle__bhNVc h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_draftsModalClose__VZ02f {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftsModalClose__VZ02f:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.CustomNodeCreatorModal_draftsModalContent__EYwcH {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
}

/* Drafts States */
.CustomNodeCreatorModal_draftsLoading__5-8rh,
.CustomNodeCreatorModal_draftsError__2UL7H,
.CustomNodeCreatorModal_draftsEmpty__QYgIK {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: #9ca3af;
  text-align: center;
}

.CustomNodeCreatorModal_draftsLoading__5-8rh svg {
  color: #3b82f6;
}

.CustomNodeCreatorModal_draftsError__2UL7H svg {
  color: #ef4444;
}

.CustomNodeCreatorModal_draftsError__2UL7H span {
  color: #fca5a5;
}

.CustomNodeCreatorModal_draftsEmpty__QYgIK svg {
  opacity: 0.5;
}

.CustomNodeCreatorModal_draftsEmpty__QYgIK span {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_draftsEmpty__QYgIK p {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
}

/* Drafts List */
.CustomNodeCreatorModal_draftsList__mkU4G {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_draftItem__m5x33 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid #374151;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftItem__m5x33:hover {
  border-color: #4b5563;
  background: rgba(17, 24, 39, 0.7);
}

.CustomNodeCreatorModal_draftItemColor__KirEj {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_draftItemInfo__0s8Ol {
  flex: 1 1;
  min-width: 0;
}

.CustomNodeCreatorModal_draftItemName__oGnVF {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.CustomNodeCreatorModal_draftItemMeta__f7uFz {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.CustomNodeCreatorModal_draftItemStep__stw7N {
  font-size: 0.7rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
  padding: 2px 6px;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 4px;
}

.CustomNodeCreatorModal_draftItemDate__2NXTI {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: #6b7280;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_draftItemActions__8\+klT {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_draftLoadBtn__BZ4S8 {
  padding: 6px 14px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftLoadBtn__BZ4S8:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  color: #60a5fa;
}

.CustomNodeCreatorModal_draftDeleteBtn__HUCPp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftDeleteBtn__HUCPp:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ==================== AI COMPANION ==================== */

/* AI Button in Navigation */
.CustomNodeCreatorModal_navBtnAI__O44hE {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.15),
    rgba(236, 72, 153, 0.15)
  );
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
  flex: 0 0 auto;
  min-width: 70px;
  margin-left: auto;
}

.CustomNodeCreatorModal_navBtnAI__O44hE:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.25),
    rgba(236, 72, 153, 0.25)
  );
  border-color: rgba(139, 92, 246, 0.6);
  color: #ddd6fe;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.CustomNodeCreatorModal_navBtnAIActive__hWQxm {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.3),
    rgba(236, 72, 153, 0.3)
  );
  border-color: #8b5cf6;
  color: #e9d5ff;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

/* AI Companion Overlay */
.CustomNodeCreatorModal_aiCompanionOverlay__QYYUZ {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(17, 24, 39, 0.98);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(139, 92, 246, 0.3);
  animation: CustomNodeCreatorModal_slideInFromLeft__n9-3I 0.3s ease-out;
}

@keyframes CustomNodeCreatorModal_slideInFromLeft__n9-3I {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.CustomNodeCreatorModal_aiCompanionPanel__ryGxO {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  padding: 24px;
  overflow: hidden;
}

/* AI Companion Header */
.CustomNodeCreatorModal_aiCompanionHeader__AtHbu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  flex-shrink: 0;
}

.CustomNodeCreatorModal_aiCompanionTitle__FU9yM {
  display: flex;
  align-items: center;
  gap: 10px;
}

.CustomNodeCreatorModal_aiCompanionTitle__FU9yM svg {
  color: #a78bfa;
}

.CustomNodeCreatorModal_aiCompanionTitle__FU9yM h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiCompanionStep__TPCdf {
  font-size: 0.75rem;
  color: #9ca3af;
  background: rgba(139, 92, 246, 0.15);
  padding: 4px 10px;
  border-radius: 12px;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiCompanionActions__XQ\+W\+ {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CustomNodeCreatorModal_aiCompanionClearBtn__ZkHfE,
.CustomNodeCreatorModal_aiCompanionCloseBtn__9X-dP {
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_aiCompanionClearBtn__ZkHfE:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.CustomNodeCreatorModal_aiCompanionCloseBtn__9X-dP:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

/* AI Companion Messages */
.CustomNodeCreatorModal_aiCompanionMessages__kU52C {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.CustomNodeCreatorModal_aiCompanionMessages__kU52C::-webkit-scrollbar {
  width: 6px;
}

.CustomNodeCreatorModal_aiCompanionMessages__kU52C::-webkit-scrollbar-track {
  background: transparent;
}

.CustomNodeCreatorModal_aiCompanionMessages__kU52C::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

/* Welcome State */
.CustomNodeCreatorModal_aiCompanionWelcome__wrC5a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.CustomNodeCreatorModal_aiCompanionWelcome__wrC5a svg {
  color: #a78bfa;
  margin-bottom: 16px;
}

.CustomNodeCreatorModal_aiCompanionWelcome__wrC5a h4 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiCompanionWelcome__wrC5a p {
  margin: 0 0 20px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiCompanionSuggestions__iekyk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.CustomNodeCreatorModal_aiCompanionSuggestions__iekyk button {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  color: #c4b5fd;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.CustomNodeCreatorModal_aiCompanionSuggestions__iekyk button:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  color: #ddd6fe;
}

/* Message Bubbles */
.CustomNodeCreatorModal_aiMessage__ptgNV {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
  max-width: 85%;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.CustomNodeCreatorModal_aiMessageUser__V6zYw {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
  align-self: flex-end;
  margin-left: auto;
}

.CustomNodeCreatorModal_aiMessageAssistant__MIREy {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #e5e7eb;
  align-self: flex-start;
}

.CustomNodeCreatorModal_aiMessageLoading__wQXjy {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
}

/* Markdown Formatting Styles */
.CustomNodeCreatorModal_aiBold__Y8e15 {
  font-weight: 700;
  color: #f3f4f6;
}

.CustomNodeCreatorModal_aiItalic__3zV8- {
  font-style: italic;
  color: #d1d5db;
}

.CustomNodeCreatorModal_aiInlineCode__0THbl {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85em;
  color: #c4b5fd;
}

/* List styling in messages */
.CustomNodeCreatorModal_aiMessageAssistant__MIREy ul,
.CustomNodeCreatorModal_aiMessageAssistant__MIREy ol {
  margin: 8px 0;
  padding-left: 20px;
}

.CustomNodeCreatorModal_aiMessageAssistant__MIREy li {
  margin: 4px 0;
}

/* Bullet item styling */
.CustomNodeCreatorModal_aiBulletItem__3pWUl {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
}

.CustomNodeCreatorModal_aiBulletDot__zVaiH {
  color: #a78bfa;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 1px;
}

.CustomNodeCreatorModal_aiBulletContent__TMVBy {
  flex: 1 1;
}

/* Error Message */
.CustomNodeCreatorModal_aiCompanionError__i3rvE {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
}

/* Input Area */
.CustomNodeCreatorModal_aiCompanionInputArea__8cVIr {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  flex-shrink: 0;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1 {
  flex: 1 1;
  background: rgba(30, 30, 35, 0.8);
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px 16px;
  color: #e5e7eb;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  height: 44px;
  min-height: 44px;
  max-height: 150px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  resize: none;
  overflow-y: hidden;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1::-webkit-scrollbar {
  width: 4px;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1::-webkit-scrollbar-track {
  background: transparent;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 2px;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1::placeholder {
  color: #6b7280;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.CustomNodeCreatorModal_aiCompanionSendBtn__Q7QoC {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 44px;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.3),
    rgba(236, 72, 153, 0.3)
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  color: #c4b5fd;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_aiCompanionSendBtn__Q7QoC:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.4),
    rgba(236, 72, 153, 0.4)
  );
  border-color: rgba(139, 92, 246, 0.6);
  color: #ddd6fe;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.CustomNodeCreatorModal_aiCompanionSendBtn__Q7QoC:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Browse Mode Toggle Button */
.CustomNodeCreatorModal_aiCompanionModeBtn__rFgwv {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_aiCompanionModeBtn__rFgwv:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
}

.CustomNodeCreatorModal_aiCompanionModeBtnActive__jmzI7 {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}

.CustomNodeCreatorModal_aiCompanionModeBtnActive__jmzI7:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  color: #bbf7d0;
}

.CustomNodeCreatorModal_aiCompanionModeBtnSmart__\+oXzm {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fcd34d;
}

.CustomNodeCreatorModal_aiCompanionModeBtnSmart__\+oXzm:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: rgba(251, 191, 36, 0.6);
  color: #fde68a;
}

/* Permission Panel */
.CustomNodeCreatorModal_aiPermissionPanel__9wBON {
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.08),
    rgba(139, 92, 246, 0.08)
  );
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.CustomNodeCreatorModal_aiPermissionHeader__h0Gbl {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #86efac;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  margin-bottom: 12px;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 197, 94, 0.3) transparent;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9::-webkit-scrollbar {
  width: 4px;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9::-webkit-scrollbar-track {
  background: transparent;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.3);
  border-radius: 2px;
}

.CustomNodeCreatorModal_aiPermissionAction__GOSne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(30, 30, 35, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.CustomNodeCreatorModal_aiPermissionActionIcon__J-k-t {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 6px;
  color: #c4b5fd;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_aiPermissionActionInfo__U5U6h {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.CustomNodeCreatorModal_aiPermissionActionTitle__An0b6 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiPermissionActionDesc__2MpqA {
  font-size: 0.75rem;
  color: #9ca3af;
  font-family: 'Inconsolata', monospace;
  word-break: break-word;
}

.CustomNodeCreatorModal_aiPermissionButtons__tr\+R2 {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.CustomNodeCreatorModal_aiPermissionRejectBtn__bxT1C,
.CustomNodeCreatorModal_aiPermissionApproveBtn__ot2oH {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_aiPermissionRejectBtn__bxT1C {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.CustomNodeCreatorModal_aiPermissionRejectBtn__bxT1C:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}

.CustomNodeCreatorModal_aiPermissionApproveBtn__ot2oH {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.2),
    rgba(139, 92, 246, 0.2)
  );
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}

.CustomNodeCreatorModal_aiPermissionApproveBtn__ot2oH:hover {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.3),
    rgba(139, 92, 246, 0.3)
  );
  border-color: rgba(34, 197, 94, 0.6);
  color: #bbf7d0;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .CustomNodeCreatorModal_aiCompanionOverlay__QYYUZ {
    width: 100%;
    border-right: none;
  }
}

/* src/MainApp/ModalContent/canvas/GroupCreationModal.module.css */

.GroupCreationModal_modalContent__GzsXJ {
  background: transparent;
  padding: 32px;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.GroupCreationModal_title__giT06 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Urbanist', sans-serif;
}

.GroupCreationModal_description__POWm6 {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #a0a0a0;
  color: var(--text-secondary, #a0a0a0);
  font-family: 'Urbanist', sans-serif;
}

.GroupCreationModal_form__duzp4 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

.GroupCreationModal_inputGroup__0tSzI {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.GroupCreationModal_label__xRIws {
  font-size: 14px;
  font-weight: 500;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Urbanist', sans-serif;
}

.GroupCreationModal_optional__cxttC {
  font-weight: 400;
  color: #666;
  color: var(--text-tertiary, #666);
  font-size: 12px;
}

.GroupCreationModal_input__sLjcE,
.GroupCreationModal_textarea__VQj6O {
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid #444;
  border: 1px solid var(--border-color, #444);
  border-radius: 8px;
  background: #1a1a1a;
  background: var(--input-bg, #1a1a1a);
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  transition: border-color 0.2s;
  font-family: 'Urbanist', sans-serif;
}

.GroupCreationModal_textarea__VQj6O {
  resize: none;
  min-height: 60px;
}

.GroupCreationModal_input__sLjcE:focus,
.GroupCreationModal_textarea__VQj6O:focus {
  outline: none;
  border-color: #8b5cf6;
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.GroupCreationModal_input__sLjcE::placeholder,
.GroupCreationModal_textarea__VQj6O::placeholder {
  color: #666;
  color: var(--text-tertiary, #666);
}

.GroupCreationModal_colorGrid__\+N2NI {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.GroupCreationModal_colorOption__WUmA\+ {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background-color: transparent;
}

.GroupCreationModal_colorOption__WUmA\+:hover {
  transform: scale(1.1);
}

.GroupCreationModal_colorSelected__r34CH {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.GroupCreationModal_colorInner__T-LHF {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.GroupCreationModal_actions__Fgvti {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.GroupCreationModal_cancelButton__hpgOE,
.GroupCreationModal_confirmButton__5FQ-8 {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: 'Urbanist', sans-serif;
}

.GroupCreationModal_cancelButton__hpgOE {
  background: transparent;
  color: #a0a0a0;
  color: var(--text-secondary, #a0a0a0);
  border: 1px solid #444;
  border: 1px solid var(--border-color, #444);
}

.GroupCreationModal_cancelButton__hpgOE:hover {
  background: rgba(255, 255, 255, 0.05);
}

.GroupCreationModal_confirmButton__5FQ-8 {
  background: #8b5cf6;
  background: var(--accent-color, #8b5cf6);
  color: white;
}

.GroupCreationModal_confirmButton__5FQ-8:hover {
  background: #7c3aed;
  background: var(--accent-color-hover, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Opacity slider */
.GroupCreationModal_opacityRow__4S2TQ {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.GroupCreationModal_opacitySlider__2GMSR {
  flex: 1 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #444;
  background: var(--border-color, #444);
  outline: none;
  cursor: pointer;
}

.GroupCreationModal_opacitySlider__2GMSR::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b5cf6;
  background: var(--accent-color, #8b5cf6);
  cursor: pointer;
  -webkit-transition: transform 0.15s ease;
  transition: transform 0.15s ease;
}

.GroupCreationModal_opacitySlider__2GMSR::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.GroupCreationModal_opacitySlider__2GMSR::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b5cf6;
  background: var(--accent-color, #8b5cf6);
  cursor: pointer;
  border: none;
}

.GroupCreationModal_opacityValue__5Xq4p {
  font-size: 13px;
  color: #a0a0a0;
  color: var(--text-secondary, #a0a0a0);
  min-width: 40px;
  text-align: right;
  font-family: 'Urbanist', sans-serif;
}

/* src/components/TopBar.module.css */

/* Main sidebar container - vertical on the left */
.TopBar_sidebarContainer__wim2x {
  position: fixed;
  top: 15px;
  left: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1001;
  gap: 8px;
}

/* Logo button - larger and acts as toggle */
.TopBar_logoButton__AwYsS {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.TopBar_logoButton__AwYsS:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.1);
}

.TopBar_logoLarge__i\+euy {
  width: 42px;
  height: 42px;
}

/* Icons list container */
.TopBar_iconsList__CclQG {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
}

.TopBar_iconsList__CclQG.TopBar_expanded__J7cUN {
  max-height: 500px;
  opacity: 1;
}

.TopBar_iconsList__CclQG.TopBar_collapsed__fud5D {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Sidebar icon button with hover label */
.TopBar_sidebarIconButton__mkOWb {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s ease;
  position: relative;
  overflow: visible;
  margin-left: 10px;
}

.TopBar_sidebarIconButton__mkOWb:hover {
  background-color: #000006;
}

/* Icon styling */
.TopBar_sidebarIcon__yxeyw {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Label that slides in from left on hover */
.TopBar_iconLabel__ihoxh {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    max-width 0.3s ease,
    opacity 0.25s ease,
    color 0.2s ease;
}

/* In light mode, label is dark */
[data-theme='light'] .TopBar_iconLabel__ihoxh {
  color: #1a1a1a;
}

.TopBar_sidebarIconButton__mkOWb:hover .TopBar_iconLabel__ihoxh {
  opacity: 1;
  max-width: 150px;
  color: #ffffff;
}

/* Avatar styling for sidebar */
.TopBar_avatarButtonSidebar__ZPwZR {
  padding: 6px 10px;
}

.TopBar_avatarImageSidebar__rWq2k {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Badges container - fixed next to sidebar */
.TopBar_badgesFixed__OkwmG {
  position: fixed;
  top: 19px;
  left: 75px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 10px;
  z-index: 1001;
}

/* Base styles for subscription and credit badges */
.TopBar_subscriptionBadge__10MM9,
.TopBar_creditBadge__MwGYi {
  padding: 5px 15px;
  border-radius: 10px;
  border: 1px solid var(--node-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  letter-spacing: 2px;
  margin-top: 10px;
}

.TopBar_subscriptionBadge__10MM9:hover,
.TopBar_creditBadge__MwGYi:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: var(--node-border-selected);
}

/* FREE subscription badge */
.TopBar_freeBadge__5Sshz {
  background: rgba(107, 114, 128, 0.1);
  border-color: #6b7280;
}

.TopBar_freeBadge__5Sshz .TopBar_subscriptionText__\+toDx {
  color: #6b7280;
}

.TopBar_freeBadge__5Sshz:hover {
  background: rgba(107, 114, 128, 0.2);
  border-color: #4b5563;
}

/* PRO subscription badge */
.TopBar_proBadge__T-h4y {
  background: linear-gradient(
    135deg,
    rgba(131, 58, 180, 0.1),
    rgba(253, 29, 29, 0.1),
    rgba(252, 176, 69, 0.1)
  );
  border-color: rgba(131, 58, 180, 0.5);
}

.TopBar_proBadge__T-h4y .TopBar_subscriptionText__\+toDx {
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.TopBar_proBadge__T-h4y:hover {
  background: linear-gradient(
    135deg,
    rgba(131, 58, 180, 0.2),
    rgba(253, 29, 29, 0.2),
    rgba(252, 176, 69, 0.2)
  );
  border-color: rgba(131, 58, 180, 0.8);
}

/* PREMIUM subscription badge */
.TopBar_premiumBadge__xMyIw {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.1),
    rgba(255, 69, 0, 0.1),
    rgba(255, 20, 147, 0.1)
  );
  border-color: rgba(255, 215, 0, 0.6);
}

.TopBar_premiumBadge__xMyIw .TopBar_subscriptionText__\+toDx {
  background: linear-gradient(
    45deg,
    #ffd700,
    #ff4500,
    #ff1493,
    #ff4500,
    #ffd700
  );
  background-size: 200% 200%;
  animation: TopBar_premiumGlow__KMno2 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.TopBar_premiumBadge__xMyIw:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.2),
    rgba(255, 69, 0, 0.2),
    rgba(255, 20, 147, 0.2)
  );
  border-color: rgba(255, 215, 0, 0.9);
}

@keyframes TopBar_premiumGlow__KMno2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Credit badge styling */
.TopBar_creditBadge__MwGYi {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  gap: 6px;
}

.TopBar_creditBadge__MwGYi span {
  color: var(--node-text);
}

.TopBar_creditBadge__MwGYi:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

/* Coin icon styling for the credit badge */
.TopBar_coinIcon__Cf4S- {
  width: 20px;
  height: 20px;
  opacity: 0.9;
  transition:
    filter 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

/* This style makes the icon WHITE (default for dark mode) */
.TopBar_lightbulbIcon__zHcoD {
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition:
    filter 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

/* This class is added in light mode to make the icon DARK */
.TopBar_darkTint__xXnsC {
  filter: brightness(0) invert(0);
  opacity: 0.6;
}

.TopBar_whiteTint__I6cil {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.TopBar_sidebarIconButton__mkOWb:hover .TopBar_lightbulbIcon__zHcoD {
  opacity: 1;
}

/* On hover in light mode, icons should become white */
.TopBar_sidebarIconButton__mkOWb:hover .TopBar_darkTint__xXnsC {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* On hover, whiteTint icons should be fully opaque */
.TopBar_sidebarIconButton__mkOWb:hover .TopBar_whiteTint__I6cil {
  opacity: 1;
}

.TopBar_creditBadge__MwGYi:hover .TopBar_coinIcon__Cf4S- {
  opacity: 1;
}

/* Automation badge button - next to credits */
.TopBar_automationBadge__SOOVe {
  padding: 6px 10px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px;
}

.TopBar_automationBadge__SOOVe:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  /* background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5); */
}

.TopBar_automationBadge__SOOVe:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.TopBar_automationIcon__YV2e8 {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.TopBar_automationIcon__YV2e8.TopBar_darkTint__xXnsC {
  filter: brightness(0) invert(0);
  opacity: 0.7;
}

.TopBar_automationBadge__SOOVe:hover .TopBar_automationIcon__YV2e8 {
  opacity: 1;
}

.TopBar_automationBadge__SOOVe:hover .TopBar_automationIcon__YV2e8.TopBar_darkTint__xXnsC {
  opacity: 0.9;
}

/* Horizontal Layout Styles */
.TopBar_horizontalContainer__bMU-6 {
  position: fixed;
  top: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1001;
}

.TopBar_horizontalLeft__tvTa2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.TopBar_horizontalLogo__3dZAY {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.TopBar_horizontalButtons__Eq2q9 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.TopBar_horizontalButton__YHXS0 {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.TopBar_horizontalButton__YHXS0:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.TopBar_horizontalIcon__Mx54O {
  width: 22px;
  height: 22px;
}

.TopBar_horizontalAvatar__npGYW {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
}

.TopBar_horizontalBadges__UZxaF {
  display: flex;
  align-items: center;
  gap: 12px;
}

.TopBar_horizontalBadges__UZxaF .TopBar_subscriptionBadge__10MM9,
.TopBar_horizontalBadges__UZxaF .TopBar_creditBadge__MwGYi {
  margin-top: 0;
  padding: 4px 12px;
}

.TopBar_horizontalBadges__UZxaF .TopBar_automationBadge__SOOVe {
  margin-top: 0;
  padding: 4px 8px;
}

/* Responsive design */
@media (max-width: 768px) {
  .TopBar_sidebarContainer__wim2x {
    top: 10px;
    left: 10px;
  }

  .TopBar_logoLarge__i\+euy {
    width: 36px;
    height: 36px;
  }

  .TopBar_sidebarIcon__yxeyw {
    width: 20px;
    height: 20px;
  }

  .TopBar_sidebarIconButton__mkOWb {
    padding: 8px;
  }

  .TopBar_iconLabel__ihoxh {
    font-size: 0.8rem;
  }

  .TopBar_badgesFixed__OkwmG {
    top: 14px;
    left: 60px;
    gap: 8px;
  }

  .TopBar_subscriptionBadge__10MM9,
  .TopBar_creditBadge__MwGYi {
    padding: 4px 12px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    gap: 4px;
  }

  .TopBar_coinIcon__Cf4S- {
    width: 14px;
    height: 14px;
  }
}

/* Legacy styles kept for compatibility */
.TopBar_topBarContainer__at3ZF {
  position: fixed;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
  padding: 8px;
  z-index: 1001;
  align-items: center;
  justify-content: flex-end;
}

.TopBar_rightSideButtons__oVrrT {
  display: flex;
  gap: 10px;
  align-items: center;
}

.TopBar_iconButton__eEzrb {
  background-color: transparent;
  border: none;
  color: #f9fafb;
  color: var(--node-text, #f9fafb);
  font-size: 1.3rem;
  font-family: 'Inconsolata', monospace;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.TopBar_iconButton__eEzrb:hover {
  background-color: #4b5563;
  background-color: var(--node-icon-bg, #4b5563);
  color: #60a5fa;
  color: var(--node-button-bg, #60a5fa);
}

.TopBar_logo__Sn5-o {
  width: 30px;
  height: 30px;
  justify-self: center;
  align-self: center;
}

.TopBar_badgeContainer__rlIgj {
  display: flex;
  gap: 10px;
}

.TopBar_icon__GfPxA {
  width: 20px;
  height: 20px;
}

.TopBar_addIcon__cCQYM {
  width: 25px;
  height: 25px;
}

.TopBar_questionIcon__Qak8O {
  width: 23px;
  height: 23px;
}

.TopBar_avatarButton__513PI {
  width: 42px;
  height: 42px;
  border-radius: 20%;
  overflow: hidden;
}

.TopBar_avatarEmoji__ZANvG {
  font-size: 1.2rem;
}

.TopBar_avatarImage__GXrbe {
  width: 110%;
  height: 110%;
  object-fit: contain;
  border-radius: 15%;
}

/* src/components/WorkflowPreview.module.css */

.WorkflowPreview_previewContainer__DL63A {
  position: relative;
  display: inline-block;
  margin: 1px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: transparent; /* Background color comes from canvas */
}

/* Override for project card context */
.WorkflowPreview_previewContainer__DL63A.WorkflowPreview_projectPreview__JmTc8 {
  box-shadow: none;
  border-radius: 0;
}

.WorkflowPreview_previewCanvas__MQrAg {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

.WorkflowPreview_previewEmpty__qP8fh,
.WorkflowPreview_previewError__fVrMc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
}

.WorkflowPreview_emptyIcon__6hTIQ,
.WorkflowPreview_errorIcon__HzR\+1 {
  font-size: 32px;
  opacity: 0.5;
}

.WorkflowPreview_emptyMessage__3REH2,
.WorkflowPreview_errorMessage__ya2Wa {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.WorkflowPreview_errorMessage__ya2Wa {
  color: #ef4444;
}

.WorkflowPreview_previewStats__3LX0r {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.WorkflowPreview_statItem__Tt-h5 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: white;
}

.WorkflowPreview_statIcon__zA\+cr {
  font-size: 12px;
}

.WorkflowPreview_statValue__iNqic {
  font-weight: 600;
  font-size: 12px;
}

.WorkflowPreview_statLabel__ji0As {
  opacity: 0.8;
  font-size: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .WorkflowPreview_previewStats__3LX0r {
    gap: 8px;
    padding: 4px 8px;
  }

  .WorkflowPreview_statItem__Tt-h5 {
    gap: 3px;
    font-size: 10px;
  }

  .WorkflowPreview_statIcon__zA\+cr {
    font-size: 11px;
  }

  .WorkflowPreview_statValue__iNqic {
    font-size: 11px;
  }

  .WorkflowPreview_statLabel__ji0As {
    font-size: 9px;
  }
}

/* Hover effect */
.WorkflowPreview_previewContainer__DL63A:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Loading state */
.WorkflowPreview_previewContainer__DL63A.WorkflowPreview_loading__9U5wC {
  opacity: 0.6;
  pointer-events: none;
}

.WorkflowPreview_previewContainer__DL63A.WorkflowPreview_loading__9U5wC::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid #3b82f6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: WorkflowPreview_spin__tznqQ 0.6s linear infinite;
}

@keyframes WorkflowPreview_spin__tznqQ {
  to {
    transform: rotate(360deg);
  }
}

/* Left Panel Styles */
.SellTemplateModal_leftPanel__al0sK {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 380px;
  justify-content: center;
}

.SellTemplateModal_leftHeader__OJSjr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.SellTemplateModal_shopIcon__qruSe {
  font-size: 28px;
  color: #22c55e;
}

.SellTemplateModal_leftTitle__rcW56 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #e5e7eb;
}

.SellTemplateModal_leftDescription__XeJFG {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #9ca3af;
}

/* Preview Section */
.SellTemplateModal_previewSection__7jLC5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.SellTemplateModal_previewLabel__jCm2T {
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: flex-start;
}

.SellTemplateModal_previewCard__qmjMb {
  width: 340px;
  height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.SellTemplateModal_emptyPreview__ba3v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
}

.SellTemplateModal_emptyPreview__ba3v2 svg {
  font-size: 32px;
  opacity: 0.5;
}

.SellTemplateModal_previewInfo__ne505 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.SellTemplateModal_previewName__zp8Dw {
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SellTemplateModal_previewStats__FjaLQ {
  font-size: 13px;
  color: #9ca3af;
}

/* Right Panel Styles */
.SellTemplateModal_rightPanel__efI6n {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 420px;
}

.SellTemplateModal_formTitle__6EBaK {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #e5e7eb;
}

.SellTemplateModal_form__gpZMS {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1;
}

.SellTemplateModal_inputGroup__bjPjB {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.SellTemplateModal_label__yxnNH {
  font-size: 13px;
  font-weight: 500;
  color: #d1d5db;
}

.SellTemplateModal_input__NiugJ,
.SellTemplateModal_textarea__SGnBc {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #374151;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #e5e7eb;
  transition: border-color 0.2s;
  font-family: inherit;
}

.SellTemplateModal_input__NiugJ:focus,
.SellTemplateModal_textarea__SGnBc:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.SellTemplateModal_input__NiugJ::placeholder,
.SellTemplateModal_textarea__SGnBc::placeholder {
  color: #6b7280;
}

.SellTemplateModal_textarea__SGnBc {
  resize: vertical;
  min-height: 70px;
}

.SellTemplateModal_hint__2KPcB {
  font-size: 11px;
  color: #6b7280;
  margin: 0;
}

.SellTemplateModal_error__\+5CTC {
  font-size: 12px;
  color: #ef4444;
  margin: 0;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tags Input */
.SellTemplateModal_tagsContainer__\+oWwy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #374151;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  min-height: 40px;
  cursor: text;
  transition: border-color 0.2s;
}

.SellTemplateModal_tagsContainer__\+oWwy:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.SellTemplateModal_tag__U1dNX {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 14px;
  font-size: 12px;
  color: #e5e7eb;
}

.SellTemplateModal_tagRemove__NR\+y9 {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s;
}

.SellTemplateModal_tagRemove__NR\+y9:hover {
  color: #ef4444;
}

.SellTemplateModal_tagInput__Y6Aj7 {
  flex: 1 1;
  min-width: 80px;
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 14px;
  outline: none;
  padding: 2px 0;
}

.SellTemplateModal_tagInput__Y6Aj7::placeholder {
  color: #6b7280;
}

/* Credits Input */
.SellTemplateModal_creditsInputContainer__VMElv {
  display: flex;
  align-items: center;
  gap: 8px;
}

.SellTemplateModal_creditsInput__IcuU3 {
  width: 100px;
  text-align: center;
}

.SellTemplateModal_creditsLabel__XN6-Z {
  font-size: 14px;
  color: #9ca3af;
}

/* Actions */
.SellTemplateModal_actions__GfEU9 {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 12px;
}

.SellTemplateModal_cancelButton__evfFe,
.SellTemplateModal_listButton__ACsRZ {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.SellTemplateModal_cancelButton__evfFe {
  background: transparent;
  color: #9ca3af;
  border: 1px solid #374151;
}

.SellTemplateModal_cancelButton__evfFe:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #4b5563;
}

.SellTemplateModal_listButton__ACsRZ {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.SellTemplateModal_listButton__ACsRZ:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}

.SellTemplateModal_listButton__ACsRZ:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.SellTemplateModal_listButton__ACsRZ svg {
  font-size: 16px;
}

/* Loading & Success States */
.SellTemplateModal_stateContainer__PPDZb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  text-align: center;
}

.SellTemplateModal_spinner__2SNoF {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(34, 197, 94, 0.2);
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: SellTemplateModal_spin__zdEaL 1s linear infinite;
}

@keyframes SellTemplateModal_spin__zdEaL {
  to {
    transform: rotate(360deg);
  }
}

.SellTemplateModal_loadingText__KnQIh {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
}

.SellTemplateModal_successIcon__SQl-3 {
  font-size: 56px;
  color: #22c55e;
}

.SellTemplateModal_successTitle__KNHQn {
  font-size: 22px;
  font-weight: 600;
  color: #e5e7eb;
  margin: 0;
}

.SellTemplateModal_successMessage__\+t0eB {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
  max-width: 280px;
}

.SellTemplateModal_successButton__6r1cm {
  margin-top: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: #22c55e;
  color: white;
}

.SellTemplateModal_successButton__6r1cm:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

/* Warning Note */
.SellTemplateModal_warningNote__ZqART {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #fbbf24;
}

.SellTemplateModal_warningIcon__Q0Gk2 {
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}

/* Base styles - Light mode by default */
.TemplateModeBar_templateModeBar__YtFlI {
  position: fixed;
  top: 70px; /* Position below the TopBar */
  right: 15px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.TemplateModeBar_leftSection__y476q {
  display: flex;
  align-items: center;
  gap: 12px;
}

.TemplateModeBar_indicator__UKYsc {
  display: flex;
  align-items: center;
  gap: 10px;
}

.TemplateModeBar_badge__LZlS\+ {
  background: rgba(139, 92, 246, 0.25);
  color: #5b21b6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Inconsolata', monospace;
}

.TemplateModeBar_templateName__Uuo0j {
  color: #4c1d95;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TemplateModeBar_stats__IdIW8 {
  color: #5b21b6;
  font-size: 12px;
  font-family: 'Inconsolata', monospace;
}

.TemplateModeBar_unsavedIndicator__0KSFp {
  color: #b45309;
  font-size: 12px;
  animation: TemplateModeBar_pulse__R411b 2s ease-in-out infinite;
}

@keyframes TemplateModeBar_pulse__R411b {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.TemplateModeBar_actions__O4rjz {
  display: flex;
  gap: 8px;
}

.TemplateModeBar_saveButton__dexBs,
.TemplateModeBar_sellButton__GtBrx,
.TemplateModeBar_exitButton__SoCg5,
.TemplateModeBar_infoButton__4R6\+5 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inconsolata', monospace;
}

.TemplateModeBar_saveButton__dexBs {
  background: rgba(139, 92, 246, 0.2);
  color: #4c1d95;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.TemplateModeBar_saveButton__dexBs:hover {
  background: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

.TemplateModeBar_sellButton__GtBrx {
  background: rgba(34, 197, 94, 0.2);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.TemplateModeBar_sellButton__GtBrx:hover {
  background: rgba(34, 197, 94, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.TemplateModeBar_exitButton__SoCg5 {
  background: rgba(0, 0, 0, 0.06);
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.TemplateModeBar_exitButton__SoCg5:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.TemplateModeBar_infoButton__4R6\+5 {
  background: rgba(0, 0, 0, 0.06);
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 6px 10px;
}

.TemplateModeBar_infoButton__4R6\+5:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.TemplateModeBar_saveButton__dexBs svg,
.TemplateModeBar_exitButton__SoCg5 svg,
.TemplateModeBar_infoButton__4R6\+5 svg {
  font-size: 14px;
}

/* Dark mode styles */
.TemplateModeBar_templateModeBar__YtFlI.TemplateModeBar_dark__JfqIO {
  background: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}

.TemplateModeBar_badge__LZlS\+.TemplateModeBar_dark__JfqIO {
  background: rgba(139, 92, 246, 0.5);
  color: #ffffff;
}

.TemplateModeBar_templateName__Uuo0j.TemplateModeBar_dark__JfqIO {
  color: #ffffff;
}

.TemplateModeBar_stats__IdIW8.TemplateModeBar_dark__JfqIO {
  color: #f5f5f5;
}

.TemplateModeBar_unsavedIndicator__0KSFp.TemplateModeBar_dark__JfqIO {
  color: #fbbf24;
}

.TemplateModeBar_saveButton__dexBs.TemplateModeBar_dark__JfqIO {
  background: #8b5cf6;
  color: #ffffff;
  border: 1px solid #a78bfa;
}

.TemplateModeBar_saveButton__dexBs.TemplateModeBar_dark__JfqIO:hover {
  background: #9f7aea;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.TemplateModeBar_sellButton__GtBrx.TemplateModeBar_dark__JfqIO {
  background: #22c55e;
  color: #ffffff;
  border: 1px solid #4ade80;
}

.TemplateModeBar_sellButton__GtBrx.TemplateModeBar_dark__JfqIO:hover {
  background: #16a34a;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.TemplateModeBar_exitButton__SoCg5.TemplateModeBar_dark__JfqIO {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.TemplateModeBar_exitButton__SoCg5.TemplateModeBar_dark__JfqIO:hover {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.TemplateModeBar_infoButton__4R6\+5.TemplateModeBar_dark__JfqIO {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.TemplateModeBar_infoButton__4R6\+5.TemplateModeBar_dark__JfqIO:hover {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .TemplateModeBar_templateModeBar__YtFlI {
    right: 10px;
    top: 65px;
    padding: 8px 12px;
    gap: 10px;
  }

  .TemplateModeBar_leftSection__y476q {
    gap: 8px;
  }

  .TemplateModeBar_indicator__UKYsc {
    gap: 6px;
  }

  .TemplateModeBar_templateName__Uuo0j {
    max-width: 100px;
    font-size: 13px;
  }

  .TemplateModeBar_stats__IdIW8 {
    display: none;
  }

  .TemplateModeBar_saveButton__dexBs span,
  .TemplateModeBar_sellButton__GtBrx span,
  .TemplateModeBar_exitButton__SoCg5 span {
    display: none;
  }

  .TemplateModeBar_saveButton__dexBs,
  .TemplateModeBar_sellButton__GtBrx,
  .TemplateModeBar_exitButton__SoCg5,
  .TemplateModeBar_infoButton__4R6\+5 {
    padding: 6px 8px;
  }
}

/* src/components/Modal.module.css */
.Modal2_modalOverlay__0Yp8R {
  position: fixed; /* Cover the whole viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.8); /* Default Web Style */
  display: flex;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  z-index: 1050; /* High z-index to be on top of page content */
  -webkit-backdrop-filter: blur(4px); /* Default Blur */
  backdrop-filter: blur(4px); /* Default Blur */
  opacity: 0; /* Start hidden for transition */
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

/* Electron Specific Overrides for Performance */
body.is-electron .Modal2_modalOverlay__0Yp8R {
  background-color: rgba(11, 15, 25, 0.95); /* Darker, more opaque */
  backdrop-filter: none; /* Disable blur */
  -webkit-backdrop-filter: none;
}

.Modal2_modalOverlay__0Yp8R.Modal2_open__w7Z85 {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease-in,
    visibility 0s linear 0s;
}

.Modal2_modalContent__PnVbb {
  /* background-color: var(--node-bg);  */
  color: var(--node-text);
  padding: 25px 30px;
  border-radius: 32px;
  border: 1px solid var(--node-border);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.3),
    0 8px 10px -6px rgba(0, 0, 0, 0.2);
  background-color: rgba(17, 24, 39, 0.95);
  overflow-y: auto;
  position: relative; /* Needed for z-index to apply */
  z-index: 2; /* Above particles */

  opacity: 0;
  transform: translateY(-25px) scale(0.93);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.Modal2_modalOverlay__0Yp8R.Modal2_open__w7Z85 .Modal2_modalContent__PnVbb {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.Modal2_closeButton__NfbMV {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  z-index: 3; /* Ensure close button is above other modal content if overlapping */
}
.Modal2_closeButton__NfbMV:hover {
  color: var(--node-error-text);
}

.Modal2_modalContent__PnVbb::-webkit-scrollbar {
  width: 6px;
}
.Modal2_modalContent__PnVbb::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}
.Modal2_modalContent__PnVbb::-webkit-scrollbar-thumb {
  background-color: var(--node-textarea-border);
  border-radius: 10px;
}

/* --- Particle Background Styles --- */
.Modal2_particleContainer__YMYaw {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* z-index relative to parent (.modalOverlay) stacking context */
  z-index: 1; /* Above overlay's direct background, below modalContent */
  pointer-events: none;
}

.Modal2_particle__UQCS6 {
  position: absolute;
  opacity: 0;
  animation-name: Modal2_popInOut__KjQAZ;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes Modal2_popInOut__KjQAZ {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Pastel Tint Filters for SVGs */
.Modal2_pastelFilter1__bKR8x {
  /* Light Blue-ish */
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}

.Modal2_pastelFilter2__3i4oc {
  /* Light Pink-ish */
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}

.Modal2_pastelFilter3__sBLcT {
  /* Light Green-ish */
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}

.Modal2_pastelFilter4__iabDk {
  /* Light Yellow-ish / Orange-ish */
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}

.Modal2_pastelFilter5__cZVr1 {
  /* Light Purple-ish */
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

/* src/MainApp/ModalContent/project/FullScreenProjectView.module.css */

.FullScreenProjectView_fullScreenContainer__M2j9k {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111827;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 1050;
  overflow: hidden;
}

/* Electron Specific Overrides for Performance */
body.is-electron .FullScreenProjectView_fullScreenContainer__M2j9k {
  background-color: #0b0f19;
}

.FullScreenProjectView_contentWrapper__igZ6p {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.FullScreenProjectView_leftPanel__SNNB8,
.FullScreenProjectView_rightPanel__NcXDB {
  flex: 1 1;
  color: #e5e7eb;
  padding: 40px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.FullScreenProjectView_leftPanel__SNNB8 {
  border-right: 1px solid #374151;
}

.FullScreenProjectView_rightPanel__NcXDB {
  /* No border needed, divider is on left panel */
}

/* Close Button */
.FullScreenProjectView_closeButton__r0Ioo {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.FullScreenProjectView_closeButton__r0Ioo:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

.FullScreenProjectView_closeButton__r0Ioo:active {
  transform: scale(0.95);
}

/* Custom Scrollbar for panels */
.FullScreenProjectView_leftPanel__SNNB8::-webkit-scrollbar,
.FullScreenProjectView_rightPanel__NcXDB::-webkit-scrollbar {
  width: 6px;
}

.FullScreenProjectView_leftPanel__SNNB8::-webkit-scrollbar-track,
.FullScreenProjectView_rightPanel__NcXDB::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}

.FullScreenProjectView_leftPanel__SNNB8::-webkit-scrollbar-thumb,
.FullScreenProjectView_rightPanel__NcXDB::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

.FullScreenProjectView_leftPanel__SNNB8::-webkit-scrollbar-thumb:hover,
.FullScreenProjectView_rightPanel__NcXDB::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* --- Particle Background Styles --- */
.FullScreenProjectView_particleContainer__Da-91 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.FullScreenProjectView_particle__1oMMx {
  position: absolute;
  opacity: 0;
  animation-name: FullScreenProjectView_popInOut__FlcS7;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes FullScreenProjectView_popInOut__FlcS7 {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(180deg);
    opacity: 0.3;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.15;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* --- Filter Styles --- */
.FullScreenProjectView_pastelFilter1__J7T9e {
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}
.FullScreenProjectView_pastelFilter2__xcr1J {
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}
.FullScreenProjectView_pastelFilter3__IL2mF {
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}
.FullScreenProjectView_pastelFilter4__znqI9 {
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}
.FullScreenProjectView_pastelFilter5__ppU23 {
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 1024px) {
  .FullScreenProjectView_leftPanel__SNNB8,
  .FullScreenProjectView_rightPanel__NcXDB {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .FullScreenProjectView_contentWrapper__igZ6p {
    flex-direction: column;
  }

  /* Hide the left panel on mobile to maximize space for the form */
  .FullScreenProjectView_leftPanel__SNNB8 {
    display: none;
  }

  /* Make the right panel (form) take full width and height */
  .FullScreenProjectView_rightPanel__NcXDB {
    flex: 1 1;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    min-height: auto;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Improve form elements for mobile */
  .FullScreenProjectView_rightPanel__NcXDB input,
  .FullScreenProjectView_rightPanel__NcXDB textarea,
  .FullScreenProjectView_rightPanel__NcXDB select {
    font-size: 16px;
    padding: 12px;
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .FullScreenProjectView_rightPanel__NcXDB button {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 6px;
    min-height: 44px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .FullScreenProjectView_rightPanel__NcXDB h2,
  .FullScreenProjectView_rightPanel__NcXDB h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .FullScreenProjectView_rightPanel__NcXDB {
    padding: 15px;
  }

  .FullScreenProjectView_rightPanel__NcXDB h2,
  .FullScreenProjectView_rightPanel__NcXDB h3 {
    font-size: 1.3rem;
  }
}

/* src/MainApp/MainComponents/LoadingSpinner.module.css */

/* Main overlay container */
.LoadingSpinner_spinnerOverlay__P3naS {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--canvas-bg);
  z-index: 9999;
  overflow: hidden;
}

/* Floating particles background */
.LoadingSpinner_particlesContainer__Ng\+Ck {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.LoadingSpinner_particle__1DCNy {
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.4),
    rgba(139, 92, 246, 0.4)
  );
  border-radius: 50%;
  animation: LoadingSpinner_floatParticle__32unE 8s ease-in-out infinite;
  animation-delay: 0s;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

.LoadingSpinner_particle__1DCNy:nth-child(1) {
  left: 15%;
  top: 20%;
}

.LoadingSpinner_particle__1DCNy:nth-child(2) {
  left: 85%;
  top: 30%;
}

.LoadingSpinner_particle__1DCNy:nth-child(3) {
  left: 25%;
  top: 70%;
}

.LoadingSpinner_particle__1DCNy:nth-child(4) {
  left: 75%;
  top: 80%;
}

.LoadingSpinner_particle__1DCNy:nth-child(5) {
  left: 50%;
  top: 15%;
}

.LoadingSpinner_particle__1DCNy:nth-child(6) {
  left: 40%;
  top: 85%;
}

@keyframes LoadingSpinner_floatParticle__32unE {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(-30px) scale(1.5);
    opacity: 0.4;
  }
  90% {
    opacity: 0.6;
  }
}

/* Main loader content */
.LoadingSpinner_loaderContent__4YJga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  animation: LoadingSpinner_fadeIn__U0KCD 0.6s ease-out;
}

@keyframes LoadingSpinner_fadeIn__U0KCD {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo container with orbital rings */
.LoadingSpinner_logoContainer__x4B10 {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer orbital ring */
.LoadingSpinner_orbitalRing__cwQ5x {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 2px solid transparent;
  border-top-color: rgba(99, 102, 241, 0.5);
  border-right-color: rgba(139, 92, 246, 0.3);
  border-radius: 50%;
  animation: LoadingSpinner_orbit__AfZkt 3s linear infinite;
}

.LoadingSpinner_orbitDot__5rw-O {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

/* Inner orbital ring */
.LoadingSpinner_orbitalRingInner__RB5Ho {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid transparent;
  border-bottom-color: rgba(236, 72, 153, 0.5);
  border-left-color: rgba(244, 114, 182, 0.3);
  border-radius: 50%;
  animation: LoadingSpinner_orbitReverse__nyf3Q 2.5s linear infinite;
}

.LoadingSpinner_orbitDotInner__rWSHb {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #ec4899, #f472b6);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

@keyframes LoadingSpinner_orbit__AfZkt {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes LoadingSpinner_orbitReverse__nyf3Q {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Logo wrapper with glow */
.LoadingSpinner_logoWrapper__Z-rW0 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.LoadingSpinner_logoGlow__6VyOA {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.3) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: LoadingSpinner_pulseGlow__MgcgW 2s ease-in-out infinite;
}

@keyframes LoadingSpinner_pulseGlow__MgcgW {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
}

.LoadingSpinner_logo__rGbUg {
  width: 64px;
  height: 64px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  animation: LoadingSpinner_logoFloat__vitlM 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.4));
}

@keyframes LoadingSpinner_logoFloat__vitlM {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Progress bar container */
.LoadingSpinner_progressContainer__Oc0nj {
  width: 200px;
}

.LoadingSpinner_progressBar__5AvUe {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(var(--node-text-rgb), 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.LoadingSpinner_progressFill__i7XA4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
  border-radius: 2px;
  animation: LoadingSpinner_progressSlide__WCS6C 2s ease-in-out infinite;
}

@keyframes LoadingSpinner_progressSlide__WCS6C {
  0% {
    left: -30%;
  }
  50% {
    left: 100%;
  }
  50.1% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

.LoadingSpinner_progressShimmer__87CCb {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: LoadingSpinner_shimmer__uUyZS 2s ease-in-out infinite;
}

@keyframes LoadingSpinner_shimmer__uUyZS {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Text container */
.LoadingSpinner_textContainer__D2cNe {
  display: flex;
  align-items: center;
  gap: 8px;
}

.LoadingSpinner_loadingText__duIVn {
  margin: 0;
  color: var(--node-text);
  font-family: 'Inconsolata', monospace;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* Loading dots animation */
.LoadingSpinner_loadingDots__9\+dFE {
  display: flex;
  gap: 4px;
  align-items: center;
}

.LoadingSpinner_dot__PnLvY {
  width: 5px;
  height: 5px;
  background: var(--node-text);
  border-radius: 50%;
  opacity: 0.4;
  animation: LoadingSpinner_dotPulse__rlwuF 1.4s ease-in-out infinite;
}

.LoadingSpinner_dot__PnLvY:nth-child(1) {
  animation-delay: 0s;
}

.LoadingSpinner_dot__PnLvY:nth-child(2) {
  animation-delay: 0.2s;
}

.LoadingSpinner_dot__PnLvY:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes LoadingSpinner_dotPulse__rlwuF {
  0%,
  80%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  40% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* Legacy spinner class for backwards compatibility */
.LoadingSpinner_spinner__tuXGR {
  border: 4px solid rgba(var(--node-text-rgb), 0.2);
  border-left-color: var(--node-border-selected);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: LoadingSpinner_spin__tKXS5 1s linear infinite;
}

@keyframes LoadingSpinner_spin__tKXS5 {
  to {
    transform: rotate(360deg);
  }
}

/* src/MainApp/MainComponents/IdeaSpark.module.css */
.IdeaSpark_overlay__WGxnE {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1040; /* Just below modals */
  cursor: pointer;
  overflow: hidden;
  animation: IdeaSpark_fadeIn__Sk\+Xd 0.5s ease-in-out forwards;
}

@keyframes IdeaSpark_fadeIn__Sk\+Xd {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.IdeaSpark_spark__6XFDN {
  position: absolute;
  color: #fff;
  padding: 12px 18px; /* Initial padding */
  border-radius: 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem; /* Initial font size */
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--node-border);
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
  max-width: 300px;
  text-align: center;

  /* MODIFIED: Add padding and font-size to the transition for a smooth effect */
  transition:
    padding 0.2s ease-out,
    font-size 0.2s ease-out,
    border-color 0.2s ease-out;

  animation:
    IdeaSpark_popIn__nt-VV 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    IdeaSpark_fadeOut__ezLHD 0.8s ease-in-out 4.2s forwards;
}

.IdeaSpark_spark__6XFDN:hover,
.IdeaSpark_spark__6XFDN.IdeaSpark_hovered__je4Rv {
  animation-play-state: paused, paused;
  opacity: 1;
  font-weight: bold;
  border-color: var(--node-border-selected);
  z-index: 1041;

  /* MODIFIED: Directly increase font size and padding instead of scaling */
  font-size: 0.85rem; /* Increase font size on hover */
  padding: 16px 22px; /* Increase padding on hover */
}

/* This keyframe handles the initial appearance */
@keyframes IdeaSpark_popIn__nt-VV {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* This keyframe now ONLY handles the fade-out opacity */
@keyframes IdeaSpark_fadeOut__ezLHD {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* MainApp/ModalContent/AutomationConfirmationModal.module.css */
@keyframes AutomationConfirmationModal_slideInFromRight__1zMg3 {
  from {
    transform: translate(100%, -50%);
    opacity: 0;
  }
  to {
    transform: translate(0, -50%);
    opacity: 1;
  }
}

.AutomationConfirmationModal_overlay__oZolL {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* The overlay container itself doesn't block clicks */
  pointer-events: none;
  z-index: 1050;
}

/* This pseudo-element creates the background on the right half */
.AutomationConfirmationModal_overlay__oZolL::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%; /* Cover the right half of the screen */
  background-color: rgba(17, 24, 39, 0.8); /* Default Web Style */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Electron Specific Overrides */
body.is-electron .AutomationConfirmationModal_overlay__oZolL::before {
  background-color: rgba(11, 15, 25, 0.95); /* Darker, more opaque */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.AutomationConfirmationModal_modal__PquTy {
  /* The modal itself is interactive */
  pointer-events: auto;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);

  background-color: var(--node-bg);
  color: var(--node-text);
  padding: 25px 30px;
  border-radius: 12px;
  border: 1px solid var(--node-border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 400px;
  font-family: 'Inconsolata', monospace;
  animation: AutomationConfirmationModal_slideInFromRight__1zMg3 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.AutomationConfirmationModal_header__Cs1W2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--node-border);
}

.AutomationConfirmationModal_header__Cs1W2 h3 {
  margin: 0;
  font-size: 1.25rem;
}

.AutomationConfirmationModal_progress__oe1Dd {
  background-color: var(--node-icon-bg);
  color: var(--node-label-text);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.AutomationConfirmationModal_content__9E-iq {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.AutomationConfirmationModal_nodeInfo__rSWkW {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.AutomationConfirmationModal_nodeType__3drFQ {
  font-weight: bold;
  font-size: 1rem;
  color: var(--node-text);
}

.AutomationConfirmationModal_nodeId__39Ip6 {
  font-size: 0.7rem;
  color: var(--node-label-text);
  background-color: var(--node-textarea-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.AutomationConfirmationModal_promptLabel__BwszW {
  margin: 0;
  font-size: 0.9rem;
  color: var(--node-label-text);
}

.AutomationConfirmationModal_promptDisplay__Bhnyu {
  background-color: var(--node-textarea-bg);
  border: 1px solid var(--node-textarea-border);
  border-radius: 6px;
  padding: 10px;
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.AutomationConfirmationModal_actions__agcO- {
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid var(--node-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.AutomationConfirmationModal_actions__agcO- button {
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  transition: all 0.2s ease;
}

.AutomationConfirmationModal_cancelButton__nCnWg {
  background-color: var(--node-error-text);
  color: white;
}

.AutomationConfirmationModal_cancelButton__nCnWg:hover {
  opacity: 0.85;
}

.AutomationConfirmationModal_approveButton__PEysW {
  background-color: var(--node-button-bg);
  color: var(--node-button-text);
}

.AutomationConfirmationModal_approveButton__PEysW:hover {
  background-color: var(--node-button-bg-hover);
}

/* Cookie Banner Styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid #e6c7c7;
  padding: 20px;
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
}

.cookie-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-banner-text {
  flex: 1 1;
}

.cookie-banner-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
  font-weight: 500;
}

.cookie-policy-link {
  background: none;
  border: none;
  color: #c79999;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  padding: 0;
  transition: color 0.2s ease;
}

.cookie-policy-link:hover {
  color: #b88888;
  text-decoration: none;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-cancel-btn {
  background: transparent;
  color: #666;
  border: 2px solid #ddd;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-cancel-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
  color: #555;
  transform: translateY(-1px);
}

.cookie-cancel-btn:active {
  transform: translateY(0);
}

.cookie-accept-btn {
  background: #e6c7c7;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-accept-btn:hover {
  background: #d4b3b3;
  transform: translateY(-1px);
}

.cookie-accept-btn:active {
  transform: translateY(0);
}

/* Animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .cookie-banner {
    padding: 16px;
  }

  .cookie-banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .cookie-banner-text p {
    font-size: 0.9rem;
    text-align: center;
  }

  .cookie-banner-actions {
    justify-content: center;
  }

  .cookie-cancel-btn,
  .cookie-accept-btn {
    flex: 1 1;
    max-width: 150px;
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    padding: 14px;
  }

  .cookie-banner-text p {
    font-size: 0.85rem;
  }

  .cookie-cancel-btn,
  .cookie-accept-btn {
    padding: 10px 20px;
    font-size: 0.85rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .cookie-banner {
    background: rgba(30, 30, 30, 0.98);
    border-top-color: #4a4a4a;
  }

  .cookie-banner-text p {
    color: #e0e0e0;
  }

  .cookie-cancel-btn {
    color: #ccc;
    border-color: #555;
  }

  .cookie-cancel-btn:hover {
    background: #3a3a3a;
    border-color: #666;
    color: #fff;
  }

  .cookie-policy-link {
    color: #e6c7c7;
  }

  .cookie-policy-link:hover {
    color: #d4b3b3;
  }
}

.StatusBanner_statusBanner__TrZxP {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 1005;
  pointer-events: auto;
}

.StatusBanner_statusIcon__c71mw {
  width: 40px;
  height: 40px;
  border-radius: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.StatusBanner_statusIcon__c71mw:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Status States */
.StatusBanner_saving__isxAy {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border-color: #2563eb;
}

.StatusBanner_saved__DMAix {
  /* background: linear-gradient(135deg, #10b981, #059669); */
  color: #00af8f;
  border-color: #047857;
}

.StatusBanner_pending__mOEeu {
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
  animation: StatusBanner_subtlePulse__7gxJ0 2s ease-in-out infinite;
}

.StatusBanner_pendingIcon__COSmd {
  color: #ef4444 !important;
  filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.3));
}

.StatusBanner_error__NrruO {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border-color: #b91c1c;
  animation: StatusBanner_shake__3BauZ 0.5s ease-in-out;
}

.StatusBanner_idle__NlGGX {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  border-color: #374151;
}

/* Animations */
@keyframes StatusBanner_shake__3BauZ {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

@keyframes StatusBanner_subtlePulse__7gxJ0 {
  0%,
  100% {
    opacity: 1;
    border-color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
  }
  50% {
    opacity: 0.8;
    border-color: #dc2626;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
  }
}

.StatusBanner_iconAnimate__Mzvml {
  animation: StatusBanner_pulse__15Ys1 1.5s ease-in-out infinite;
}

@keyframes StatusBanner_pulse__15Ys1 {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Dark mode support */
[data-theme='dark'] .StatusBanner_statusIcon__c71mw {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.2);
}

[data-theme='dark'] .StatusBanner_saving__isxAy {
  background: linear-gradient(135deg, #2563eb, #1e40af);
}

[data-theme='dark'] .StatusBanner_saved__DMAix {
  background: linear-gradient(135deg, #059669, #047857);
}

[data-theme='dark'] .StatusBanner_pending__mOEeu {
  background: transparent;
  color: #f87171;
  border-color: #f87171;
}

[data-theme='dark'] .StatusBanner_pendingIcon__COSmd {
  color: #f87171 !important;
  filter: drop-shadow(0 0 2px rgba(248, 113, 113, 0.3));
}

[data-theme='dark'] .StatusBanner_error__NrruO {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

[data-theme='dark'] .StatusBanner_idle__NlGGX {
  background: linear-gradient(135deg, #4b5563, #374151);
}

.StatusTooltip_tooltip__Fnl8Y {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px;
  width: 250px;
  font-size: 13px;
  color: #333;
  animation: StatusTooltip_fadeIn__qzvRU 0.2s ease-out;
  pointer-events: none;
}

@keyframes StatusTooltip_fadeIn__qzvRU {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.StatusTooltip_header__pqxm6 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.StatusTooltip_statusIcon__bBBju {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.StatusTooltip_headerText__eoHp4 {
  flex: 1 1;
}

.StatusTooltip_title__5G2mU {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  color: #1f2937;
}

.StatusTooltip_type__Pp8GG {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.StatusTooltip_content__0tBP\+ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.StatusTooltip_description__6lk3n {
  color: #4b5563;
  font-size: 12px;
  margin-bottom: 4px;
}

.StatusTooltip_progressSection__jBRL4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.StatusTooltip_progressBar__XIxMp {
  flex: 1 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.StatusTooltip_progressFill__Bw7jL {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.StatusTooltip_progressText__L0IcO {
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  min-width: 30px;
  text-align: right;
}

.StatusTooltip_statusMessage__3LVpw {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
  margin-bottom: 4px;
}

.StatusTooltip_details__WEaVC {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.StatusTooltip_detailRow__SHoTl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.StatusTooltip_label__AlJKH {
  color: #6b7280;
  font-weight: 500;
}

.StatusTooltip_value__rPWtJ {
  color: #374151;
  font-weight: 600;
}

.StatusTooltip_value__rPWtJ.StatusTooltip_saving__mqmo0 {
  color: #3b82f6;
}

.StatusTooltip_value__rPWtJ.StatusTooltip_saved__30gq\+ {
  color: #10b981;
}

.StatusTooltip_value__rPWtJ.StatusTooltip_pending__VK9k9 {
  color: #f59e0b;
}

.StatusTooltip_value__rPWtJ.StatusTooltip_error__0pGQB {
  color: #ef4444;
}

.StatusTooltip_value__rPWtJ.StatusTooltip_idle__JYlAL {
  color: #6b7280;
}

/* Tooltip Arrow */
.StatusTooltip_arrow__dsZ45 {
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
}

.StatusTooltip_arrowLeft__ofR5g {
  top: 18%;
  left: -6px;
  transform: translateY(-50%) rotate(45deg);
  border-top: none;
  border-right: none;
}

.StatusTooltip_arrowRight__sQgfh {
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}

/* Dark mode support */
[data-theme='dark'] .StatusTooltip_tooltip__Fnl8Y {
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(75, 85, 99, 0.3);
  color: #e5e7eb;
}

[data-theme='dark'] .StatusTooltip_title__5G2mU {
  color: #f9fafb;
}

[data-theme='dark'] .StatusTooltip_type__Pp8GG {
  color: #9ca3af;
}

[data-theme='dark'] .StatusTooltip_description__6lk3n {
  color: #d1d5db;
}

[data-theme='dark'] .StatusTooltip_statusMessage__3LVpw {
  color: #9ca3af;
}

[data-theme='dark'] .StatusTooltip_label__AlJKH {
  color: #9ca3af;
}

[data-theme='dark'] .StatusTooltip_value__rPWtJ {
  color: #e5e7eb;
}

[data-theme='dark'] .StatusTooltip_header__pqxm6,
[data-theme='dark'] .StatusTooltip_details__WEaVC {
  border-color: rgba(75, 85, 99, 0.3);
}

[data-theme='dark'] .StatusTooltip_progressBar__XIxMp {
  background: rgba(255, 255, 255, 0.1);
}

/* SettingsModalContent.module.css */

/* --- New Layout Styles --- */
.SettingsModalContent_leftNav__ULr0V {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 20px;
  /* border-right: 1px solid #374151; Always use dark theme border */
  height: 80vh;
}

.SettingsModalContent_leftNav__ULr0V h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #e5e7eb; /* Always use light text */
}

.SettingsModalContent_leftNav__ULr0V button {
  background: none;
  border: none;
  color: #9ca3af; /* Always use muted light text */
  padding: 12px 15px;
  text-align: left;
  font-size: 1rem;
  font-family: 'Inconsolata', monospace;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.SettingsModalContent_leftNav__ULr0V button:hover {
  background-color: #374151; /* Always use dark hover background */
  color: #e5e7eb; /* Always use light text on hover */
}

.SettingsModalContent_leftNav__ULr0V button.SettingsModalContent_active__j5Vl7 {
  background-color: #3b82f6; /* Always use blue active background */
  color: #ffffff; /* Always use white text when active */
  font-weight: 600;
}

.SettingsModalContent_navFooter__RQbbx {
  margin-top: auto; /* Pushes the done button to the bottom */
}

.SettingsModalContent_rightContent__rIDsX {
  padding-left: 20px;
  width: 95%;
  color: #e5e7eb; /* Always use light text */
}

.SettingsModalContent_rightContent__rIDsX h3 {
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #374151; /* Always use dark theme border */
}

.SettingsModalContent_rightContent__rIDsX p {
  margin-top: 0;
  margin-bottom: 25px;
  color: #9ca3af; /* Always use muted light text */
  font-size: 0.9rem;
}

/* --- Existing Styles --- */
.SettingsModalContent_settingRow__IYInZ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 5px;
  border-bottom: 1px solid #374151; /* Always use dark theme border */
}

.SettingsModalContent_settingLabel__ASaFN {
  font-size: 1rem;
  color: #e5e7eb; /* Always use light text */
}

.SettingsModalContent_toggleSwitch__nhxIj {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.SettingsModalContent_toggleSwitch__nhxIj input {
  opacity: 0;
  width: 0;
  height: 0;
}

.SettingsModalContent_toggleSlider__KATWR {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4b5563; /* Always use dark theme inactive color */
  transition: 0.4s;
  border-radius: 28px;
}

.SettingsModalContent_toggleSlider__KATWR:before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .SettingsModalContent_toggleSlider__KATWR {
  background-color: #3b82f6; /* Always use blue active color */
}

input:checked + .SettingsModalContent_toggleSlider__KATWR:before {
  transform: translateX(24px);
}

.SettingsModalContent_subscriptionSection__LfjJ1,
.SettingsModalContent_projectPermissionsSection__7q3wt {
  margin-top: 20px;
}

.SettingsModalContent_buttonContainer__Q8WY1 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.SettingsModalContent_historyButton__DSbUh,
.SettingsModalContent_changePaymentButton__6wUxj,
.SettingsModalContent_cancelButton__f11eU,
.SettingsModalContent_resumeButton__lqRN9,
.SettingsModalContent_permissionButton__ThXA\+ {
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  transition: opacity 0.2s ease;
  width: 100%;
}

/* Special styling for buttons in buttonContainer */
.SettingsModalContent_buttonContainer__Q8WY1 .SettingsModalContent_historyButton__DSbUh,
.SettingsModalContent_buttonContainer__Q8WY1 .SettingsModalContent_changePaymentButton__6wUxj,
.SettingsModalContent_buttonContainer__Q8WY1 .SettingsModalContent_cancelButton__f11eU,
.SettingsModalContent_buttonContainer__Q8WY1 .SettingsModalContent_resumeButton__lqRN9 {
  margin: 0;
}

.SettingsModalContent_historyButton__DSbUh {
  background-color: #6b7280; /* Always use neutral gray */
  color: #ffffff;
}

.SettingsModalContent_changePaymentButton__6wUxj {
  background-color: #3b82f6; /* Always use blue */
  color: #ffffff;
}

.SettingsModalContent_cancelButton__f11eU {
  background-color: #dc2626; /* Always use red */
  color: #ffffff;
}

.SettingsModalContent_resumeButton__lqRN9 {
  background-color: #22c55e; /* Already hardcoded green */
  color: white;
}

.SettingsModalContent_permissionButton__ThXA\+ {
  background-color: #3b82f6; /* Always use blue */
  color: #ffffff;
}

.SettingsModalContent_permissionStatusSuccess__M9aSn {
  color: #22c55e; /* Always use green for success */
  margin-top: 15px;
}

.SettingsModalContent_permissionStatusError__jzzRl {
  color: #dc2626; /* Always use red for error */
  margin-top: 15px;
}

.SettingsModalContent_doneButton__AGDQO {
  width: 100%;
  background-color: #3b82f6; /* Always use blue */
  color: #ffffff;
  padding: 12px 15px;
  font-size: 1rem;
  font-family: 'Inconsolata', monospace;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.SettingsModalContent_doneButton__AGDQO:hover {
  opacity: 0.9;
}

/* Account Management Styles */
.SettingsModalContent_dangerZone__Of\+8I {
  margin-top: 20px;
  padding: 20px;
  border: 2px solid #dc2626;
  border-radius: 8px;
  background-color: rgba(220, 38, 38, 0.1);
}

.SettingsModalContent_subscriptionWarning__wmdCy {
  background-color: rgba(255, 165, 0, 0.1);
  border: 2px solid #ff8c00;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.SettingsModalContent_subscriptionWarning__wmdCy p {
  margin: 5px 0;
  color: #ff8c00;
}

.SettingsModalContent_dangerZone__Of\+8I h4 {
  color: #dc2626;
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.SettingsModalContent_dangerZone__Of\+8I ul {
  color: #e5e7eb;
  margin: 15px 0;
  padding-left: 20px;
}

.SettingsModalContent_dangerZone__Of\+8I ul li {
  margin-bottom: 5px;
}

.SettingsModalContent_dangerButton__ee4in {
  background-color: #dc2626;
  color: #ffffff;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 15px;
}

.SettingsModalContent_dangerButton__ee4in:hover {
  background-color: #b91c1c;
}

.SettingsModalContent_deleteConfirmation__P18ra {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #374151;
}

.SettingsModalContent_confirmationInput__GkHLc {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 2px solid #374151;
  border-radius: 6px;
  background-color: #1f2937;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
}

.SettingsModalContent_confirmationInput__GkHLc:focus {
  outline: none;
  border-color: #dc2626;
}

.SettingsModalContent_deleteButtons__Pp5D- {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.SettingsModalContent_confirmDeleteButton__kgNEN {
  background-color: #dc2626;
  color: #ffffff;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_confirmDeleteButton__kgNEN:hover:not(:disabled) {
  background-color: #b91c1c;
}

.SettingsModalContent_confirmDeleteButton__kgNEN:disabled {
  background-color: #6b7280;
  cursor: not-allowed;
}

.SettingsModalContent_cancelDeleteButton__cc8rv {
  background-color: #6b7280;
  color: #ffffff;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_cancelDeleteButton__cc8rv:hover:not(:disabled) {
  background-color: #4b5563;
}

/* About Section Styles */
.SettingsModalContent_aboutSection__D-OHB {
  margin-top: 20px;
}

.SettingsModalContent_versionInfo__A2gJ3 {
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.SettingsModalContent_versionInfo__A2gJ3 h4 {
  color: #e5e7eb;
  margin: 0 0 15px 0;
  font-size: 1rem;
  font-weight: 600;
}

.SettingsModalContent_versionRow__20Eox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #374151;
}

.SettingsModalContent_versionRow__20Eox:last-child {
  border-bottom: none;
}

.SettingsModalContent_versionLabel__s-3PL {
  color: #9ca3af;
  font-size: 0.9rem;
}

.SettingsModalContent_versionValue__XxbTQ {
  color: #e5e7eb;
  font-weight: 500;
}

.SettingsModalContent_appInfo__0tbJl {
  color: #9ca3af;
  line-height: 1.6;
}

.SettingsModalContent_appInfo__0tbJl strong {
  color: #e5e7eb;
}

.SettingsModalContent_appInfo__0tbJl ul {
  color: #9ca3af;
}

.SettingsModalContent_appInfo__0tbJl ul li {
  margin-bottom: 8px;
}

/* Bug Report Section Styles */
.SettingsModalContent_bugReportSection__T9NV\+ {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  background-color: #1f2937;
  border-radius: 12px;
  border: 1px solid #374151;
}

.SettingsModalContent_bugReportInfo__-maZ2 {
  background-color: #111827;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #374151;
}

.SettingsModalContent_bugReportInfo__-maZ2 p {
  margin: 0;
  color: #d1d5db;
  line-height: 1.6;
}

.SettingsModalContent_bugReportInfo__-maZ2 ul {
  color: #9ca3af;
  line-height: 1.8;
}

.SettingsModalContent_bugReportInfo__-maZ2 li {
  margin-bottom: 4px;
}

.SettingsModalContent_systemInfo__hkY0H {
  background-color: #111827;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #374151;
}

.SettingsModalContent_systemInfo__hkY0H h4 {
  margin: 0 0 12px 0;
  color: #e5e7eb;
  font-size: 1rem;
  font-weight: 600;
}

.SettingsModalContent_infoRow__rRCoo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #374151;
}

.SettingsModalContent_infoRow__rRCoo:last-child {
  border-bottom: none;
}

.SettingsModalContent_infoLabel__1HL7V {
  color: #9ca3af;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 16px;
}

.SettingsModalContent_infoValue__7SnKo {
  color: #e5e7eb;
  text-align: right;
  flex: 1 1;
}

.SettingsModalContent_bugReportActions__Ep3fR {
  text-align: center;
  padding: 20px;
  background-color: #111827;
  border-radius: 8px;
  border: 1px solid #374151;
}

.SettingsModalContent_reportBugButton__9i9pu {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  margin-top: 20px;
  margin-bottom: 20px;
}

.SettingsModalContent_reportBugButton__9i9pu:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.SettingsModalContent_reportBugButton__9i9pu:active {
  transform: translateY(0);
}

.SettingsModalContent_helperText__kERb0 {
  margin-top: 30px;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.5;
}

.SettingsModalContent_alternativeContact__SjY14 {
  background-color: #111827;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #374151;
}

.SettingsModalContent_alternativeContact__SjY14 h4 {
  margin: 0 0 8px 0;
  color: #e5e7eb;
  font-size: 0.95rem;
  font-weight: 600;
}

.SettingsModalContent_alternativeContact__SjY14 p {
  margin: 0;
  color: #d1d5db;
  line-height: 1.6;
}

.SettingsModalContent_emailLink__VVcqS {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.SettingsModalContent_emailLink__VVcqS:hover {
  color: #60a5fa;
  text-decoration: underline;
}

/* Password Change Section Styles */
.SettingsModalContent_passwordSection__MAaim {
  background-color: #1f2937;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #374151;
  margin-bottom: 24px;
}

.SettingsModalContent_passwordSection__MAaim h4 {
  margin: 0 0 12px 0;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.SettingsModalContent_passwordSection__MAaim p {
  margin: 0 0 16px 0;
  color: #9ca3af;
  line-height: 1.6;
}

.SettingsModalContent_changePasswordButton__t5IXU {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.SettingsModalContent_changePasswordButton__t5IXU:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.SettingsModalContent_passwordForm__8oanw {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.SettingsModalContent_inputGroup__\+EtFw {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.SettingsModalContent_inputGroup__\+EtFw label {
  color: #e5e7eb;
  font-size: 0.9rem;
  font-weight: 500;
}

.SettingsModalContent_passwordInput__w5avw {
  background-color: #111827;
  border: 1px solid #374151;
  color: #e5e7eb;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.SettingsModalContent_passwordInput__w5avw:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.SettingsModalContent_passwordInput__w5avw:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.SettingsModalContent_passwordInput__w5avw::placeholder {
  color: #6b7280;
}

.SettingsModalContent_passwordError__u9AgF {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #dc2626;
  color: #fca5a5;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.SettingsModalContent_passwordSuccess__4Aamg {
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid #16a34a;
  color: #86efac;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  animation: SettingsModalContent_slideDown__T\+6Hc 0.3s ease-out;
}

@keyframes SettingsModalContent_slideDown__T\+6Hc {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.SettingsModalContent_passwordButtons__HDgEk {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.SettingsModalContent_savePasswordButton__hSjaA {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_savePasswordButton__hSjaA:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.SettingsModalContent_savePasswordButton__hSjaA:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.SettingsModalContent_cancelPasswordButton__tH5dp {
  background-color: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_cancelPasswordButton__tH5dp:hover:not(:disabled) {
  background-color: #4b5563;
  border-color: #6b7280;
}

.SettingsModalContent_cancelPasswordButton__tH5dp:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Password Input Wrapper with Show/Hide Button */
.SettingsModalContent_passwordInputWrapper__7gzpV {
  position: relative;
  display: flex;
  align-items: center;
}

.SettingsModalContent_passwordInputWrapper__7gzpV .SettingsModalContent_passwordInput__w5avw {
  flex: 1 1;
  padding-right: 45px; /* Make room for the toggle button */
}

.SettingsModalContent_togglePasswordButton__DyBwZ {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: color 0.2s ease;
  border-radius: 4px;
}

.SettingsModalContent_togglePasswordButton__DyBwZ:hover {
  color: #e5e7eb;
  background-color: rgba(255, 255, 255, 0.05);
}

.SettingsModalContent_togglePasswordButton__DyBwZ:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.SettingsModalContent_togglePasswordButton__DyBwZ:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Profile Section Styles */
.SettingsModalContent_profileSection__WtSir {
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.SettingsModalContent_profileSection__WtSir h4 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #e5e7eb;
  font-size: 1.1rem;
}

.SettingsModalContent_profileInfo__JgbGm {
  margin-bottom: 16px;
}

.SettingsModalContent_profileInfo__JgbGm p {
  margin: 8px 0;
  color: #d1d5db;
  font-size: 0.95rem;
}

.SettingsModalContent_profileInfo__JgbGm strong {
  color: #9ca3af;
  font-weight: 600;
  display: inline-block;
  min-width: 100px;
}

.SettingsModalContent_editProfileButton__T190D {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 12px;
}

.SettingsModalContent_editProfileButton__T190D:hover {
  background-color: #2563eb;
}

.SettingsModalContent_editProfileButton__T190D:active {
  background-color: #1d4ed8;
}

.SettingsModalContent_profileNote__PQ29n {
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Update Section Styles */
.SettingsModalContent_updateSection__B4ItI {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #374151;
}

.SettingsModalContent_updateButtonRow__7RM1U {
  display: flex;
  align-items: center;
  gap: 12px;
}

.SettingsModalContent_checkUpdateButton__u2kP7 {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.SettingsModalContent_checkUpdateButton__u2kP7:hover:not(:disabled) {
  background-color: #2563eb;
}

.SettingsModalContent_checkUpdateButton__u2kP7:active:not(:disabled) {
  background-color: #1d4ed8;
}

.SettingsModalContent_checkUpdateButton__u2kP7:disabled {
  background-color: #4b5563;
  cursor: not-allowed;
  opacity: 0.7;
}

.SettingsModalContent_updateAvailable__e8WgE {
  margin-top: 12px;
  padding: 12px 16px;
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
}

.SettingsModalContent_updateAvailable__e8WgE p {
  margin: 0 0 12px 0;
  color: #22c55e;
  font-size: 0.95rem;
}

.SettingsModalContent_installUpdateButton__S7lwh {
  background-color: #22c55e;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.SettingsModalContent_installUpdateButton__S7lwh:hover {
  background-color: #16a34a;
}

.SettingsModalContent_installUpdateButton__S7lwh:active {
  background-color: #15803d;
}

.SettingsModalContent_updateStatusSuccess__uqjZm {
  margin-top: 12px;
  color: #22c55e;
  font-size: 0.9rem;
}

.SettingsModalContent_updateStatusError__86IlF {
  margin-top: 12px;
  color: #ef4444;
  font-size: 0.9rem;
}

/* MainApp/ModalContent/PaymentHistoryModal.module.css */
.PaymentHistoryModal_container__fkdka {
  padding: 20px;
  color: var(--node-text);
  min-width: 600px;
}

.PaymentHistoryModal_header__INPyk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.PaymentHistoryModal_headerControls__Nl9Q6 {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.PaymentHistoryModal_lastUpdated__umvWK {
  font-size: 12px;
  color: #888;
  color: var(--node-secondary-text, #888);
  white-space: nowrap;
}

.PaymentHistoryModal_refreshButton__2qqKj {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: #3b82f6;
  background-color: var(--node-button-bg, #3b82f6);
  color: white;
  color: var(--node-button-text, white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.PaymentHistoryModal_refreshButton__2qqKj:hover:not(:disabled) {
  background-color: #2563eb;
  background-color: var(--node-button-bg-hover, #2563eb);
  transform: translateY(-1px);
}

.PaymentHistoryModal_refreshButton__2qqKj:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.PaymentHistoryModal_spinning__plu-i {
  animation: PaymentHistoryModal_spin__xTCxz 1s linear infinite;
}

@keyframes PaymentHistoryModal_spin__xTCxz {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.PaymentHistoryModal_errorText__pz\+ZB {
  color: var(--node-error-text);
}

.PaymentHistoryModal_section__AUgiJ {
  margin-bottom: 25px;
}

.PaymentHistoryModal_historyTable__D5N0y {
  width: 100%;
  border-collapse: collapse;
}

.PaymentHistoryModal_historyTable__D5N0y th,
.PaymentHistoryModal_historyTable__D5N0y td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--node-border);
}

.PaymentHistoryModal_historyTable__D5N0y th {
  font-weight: bold;
  background-color: var(--node-icon-bg);
  cursor: pointer;
}

.PaymentHistoryModal_historyTable__D5N0y th.PaymentHistoryModal_ascending__NaU7x::after {
  content: ' ▲';
  color: #22c55e;
}

.PaymentHistoryModal_historyTable__D5N0y th.PaymentHistoryModal_descending__hdcD3::after {
  content: ' ▼';
  color: #ef4444;
}

.PaymentHistoryModal_status__BLQke {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
}

.PaymentHistoryModal_succeeded__QC9aS,
.PaymentHistoryModal_active__S\+C7T {
  background-color: #22c55e;
  color: white;
}

.PaymentHistoryModal_failed__ylJNy,
.PaymentHistoryModal_canceled__6hNib {
  background-color: #ef4444;
  color: white;
}

.PaymentHistoryModal_pending__kX3eT,
.PaymentHistoryModal_trialing__G\+8lf {
  background-color: #f59e0b;
  color: white;
}

.PaymentHistoryModal_buttonContainer__Xe\+qG {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.PaymentHistoryModal_closeButton__4hg8r {
  padding: 10px 20px;
  cursor: pointer;
  background-color: var(--node-button-bg);
  color: var(--node-button-text);
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
}

/* Force dark theme styling */
.PaymentHistoryModal_forceDarkTheme__s7PWr {
  --canvas-bg: #15161b;
  /* --node-bg: #374151; cool-gray-700 */
  --node-border: #4b5563; /* cool-gray-600 */
  --node-border-selected: #60a5fa; /* blue-400 */
  --node-text: #f9fafb; /* cool-gray-50 */
  --node-text-rgb: 249, 250, 251;
  --node-label-text: #d1d5db; /* cool-gray-300 */
  --node-icon-bg: #4b5563; /* cool-gray-600 */
  --node-icon-color: #f9fafb; /* cool-gray-50 */
  --node-button-bg: #60a5fa; /* blue-400 */
  --node-button-bg-hover: #3b82f6; /* blue-500 */
  --node-button-text: #1f2937; /* cool-gray-800 */
  --node-textarea-bg: #4b5563; /* cool-gray-600 */
  --node-textarea-border: #6b7280; /* cool-gray-500 */
  --node-textarea-text: var(--node-text);
  --node-connected-data-bg: #4b5563; /* cool-gray-600 */
  --node-loading-text: #9ca3af; /* cool-gray-400 */
  --node-error-text: #f87171; /* red-400 */
  --handle-bg: #6b7280; /* cool-gray-500 */
  --handle-border: #4b5563; /* cool-gray-600 */
  --sidebar-bg: #374151;
  /*     
    background-color: var(--node-bg); */
  color: var(--node-text);
}

/* MainApp/ModalContent/AddProjectModalContent.module.css */
.AddProjectModalContent_modalContainer__ZMsIb {
  position: relative; /* For positioning the cloud project modal overlay */
  padding: 0;
  color: #fff;
  /* min-width: 500px; */
  height: 100%;
  min-height: 0; /* Important: allows flex children to shrink properly */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* Prevent scroll chaining */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.AddProjectModalContent_modalContainer__ZMsIb::-webkit-scrollbar {
  width: 6px;
}

.AddProjectModalContent_modalContainer__ZMsIb::-webkit-scrollbar-track {
  background: transparent;
}

.AddProjectModalContent_modalContainer__ZMsIb::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

.AddProjectModalContent_modalContainer__ZMsIb::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* .modalContainer > * {
  padding-left: 20px;
  padding-right: 20px;
}

.modalContainer > *:first-child {
  padding-top: 20px;
}

.modalContainer > *:last-child {
  padding-bottom: 20px;
} */

/* Common Header - Folder icon and project badges at top center */
.AddProjectModalContent_commonHeader__f5A25 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.AddProjectModalContent_pathSeparator__Cjl4H {
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 400;
}

.AddProjectModalContent_emailPath__HNZwC {
  font-size: 0.8rem;
  color: #ffffff;
  background-color: rgba(59, 130, 246, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Electron Override */
body.is-electron .AddProjectModalContent_emailPath__HNZwC {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(59, 130, 246, 0.25);
}

/* Tab Container */
.AddProjectModalContent_tabContainer__A9pAg {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #374151;
}

.AddProjectModalContent_tab__8gWvM {
  flex: 1 1;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.AddProjectModalContent_tab__8gWvM:hover {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.05);
}

.AddProjectModalContent_tabActive__clxle {
  color: #e5e7eb;
}

.AddProjectModalContent_tabActive__clxle::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
}

.AddProjectModalContent_warningBanner__Bw7VK {
  background-color: #fef3cd;
  border: 1px solid #fbbf24;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
  animation: AddProjectModalContent_pulseWarning__-BVwL 2s ease-in-out infinite;
}

@keyframes AddProjectModalContent_pulseWarning__-BVwL {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.AddProjectModalContent_headerContainer__RJdnW {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.AddProjectModalContent_titleWithButtons__Nvn27 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.AddProjectModalContent_modalContainer__ZMsIb h2 {
  margin: 0;
}

.AddProjectModalContent_rootDirectory__JTU6K {
  font-size: 0.8rem;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Electron Override */
body.is-electron .AddProjectModalContent_rootDirectory__JTU6K {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(255, 255, 255, 0.15);
}

.AddProjectModalContent_currentProjectName__OzAji {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(139, 92, 246, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Electron Override */
body.is-electron .AddProjectModalContent_currentProjectName__OzAji {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(139, 92, 246, 0.25);
}

.AddProjectModalContent_iconButton__giXQp {
  background: none;
  border: none;
  color: var(--node-label-text);
  cursor: pointer;
  font-size: 1.2rem;
  font-family: 'Inconsolata', monospace;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.AddProjectModalContent_iconButton__giXQp:hover {
  background-color: var(--node-icon-bg);
  color: var(--node-text);
}

.AddProjectModalContent_cloudGrid__GVdND {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-auto-rows: 110px;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 20px 10px 20px; /* Increased right padding from 10px to 20px */
  overflow-y: auto;
  overflow-x: auto; /* Changed from hidden to auto to allow horizontal scrolling if needed */
  width: 100%;
  max-height: 280px;
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: contain; /* Prevent horizontal scroll chaining */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}

/* Webkit scrollbar styling (Chrome, Safari, Edge) */
.AddProjectModalContent_cloudGrid__GVdND::-webkit-scrollbar {
  width: 6px; /* Vertical scrollbar */
  height: 6px; /* Horizontal scrollbar */
}

.AddProjectModalContent_cloudGrid__GVdND::-webkit-scrollbar-track {
  background: var(--node-textarea-bg);
  border-radius: 4px;
}

.AddProjectModalContent_cloudGrid__GVdND::-webkit-scrollbar-thumb {
  background: var(--node-border);
  border-radius: 4px;
}

.AddProjectModalContent_cloudGrid__GVdND::-webkit-scrollbar-thumb:hover {
  background: var(--node-border-selected);
}

.AddProjectModalContent_projectBox__nlfdR {
  height: 110px;
  width: 110px;
  min-width: 110px;
  min-height: 110px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: rgba(128, 128, 128, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0;
  text-align: center;
  color: #374151;
  flex-shrink: 0;
  margin-top: 5px;
  position: relative;
  box-sizing: border-box;
}

/* Electron Override */
body.is-electron .AddProjectModalContent_projectBox__nlfdR {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(128, 128, 128, 0.25);
}

[data-theme='dark'] .AddProjectModalContent_projectBox__nlfdR {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(128, 128, 128, 0.15);
  color: var(--node-text);
}

/* Project box with preview layout */
.AddProjectModalContent_projectBoxWithPreview__KSvGV {
  /* height handled by base class */
  overflow: hidden;
}

/* Preview container - takes 65% of the height */
.AddProjectModalContent_previewContainer__wRkBF {
  width: 100%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-bottom: none;
  overflow: hidden;
}

/* Project preview styling */
.AddProjectModalContent_projectPreview__dDThg {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border-radius: 0;
}

/* Project name container - takes 35% of the height */
.AddProjectModalContent_projectNameContainer__ZzDkg {
  width: 100%;
  height: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Adjust project name for preview layout */
.AddProjectModalContent_projectBoxWithPreview__KSvGV .AddProjectModalContent_projectName__zvIWT {
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  width: 100%;
  max-width: 100%;
}

.AddProjectModalContent_projectBox__nlfdR:hover {
  border-color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.AddProjectModalContent_createProjectBox__jyual {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.03); /* Slightly more transparent */
}

.AddProjectModalContent_createProjectBox__jyual:hover {
  background-color: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
}

.AddProjectModalContent_createProjectBox__jyual .AddProjectModalContent_icon__wZ7QK {
  font-size: 2rem;
  margin: 0 auto;
  color: var(--node-label-text);
  display: block;
  text-align: center;
  line-height: 1;
  width: 100%;
}

.AddProjectModalContent_projectName__zvIWT {
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
  color: #6b7280;
}

[data-theme='dark'] .AddProjectModalContent_projectName__zvIWT {
  color: inherit;
}

/* Empty project info (no preview) */
.AddProjectModalContent_emptyProjectInfo__RXnoF {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}

.AddProjectModalContent_emptyProjectIcon__e2toH {
  font-size: 2rem;
  opacity: 0.6;
  color: var(--node-label-text);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.AddProjectModalContent_emptyProjectInfo__RXnoF .AddProjectModalContent_projectName__zvIWT {
  width: auto;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.AddProjectModalContent_localActionsContainer__GJV\+J {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 40px;
}

.AddProjectModalContent_localActionRow__9B2b5 {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.AddProjectModalContent_localActionRow__9B2b5:first-child {
  flex-direction: row;
}

.AddProjectModalContent_localActionRow__9B2b5:last-child {
  flex-direction: row;
}

.AddProjectModalContent_localAction__dc9Wz {
  flex: 0 0 auto;
  max-width: 220px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.6),
    rgba(15, 23, 42, 0.8)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.AddProjectModalContent_localActionRow__9B2b5:first-child .AddProjectModalContent_localAction__dc9Wz {
  border-color: rgba(139, 92, 246, 0.3);
}

.AddProjectModalContent_localActionRow__9B2b5:last-child .AddProjectModalContent_localAction__dc9Wz {
  border-color: rgba(59, 130, 246, 0.3);
}

.AddProjectModalContent_localActionInfo__AJ7td {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 20px;
  min-width: 200px;
}

.AddProjectModalContent_localActionInfo__AJ7td h4 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.AddProjectModalContent_localActionRow__9B2b5:first-child .AddProjectModalContent_localActionInfo__AJ7td h4 {
  color: #a78bfa;
}

.AddProjectModalContent_localActionRow__9B2b5:last-child .AddProjectModalContent_localActionInfo__AJ7td h4 {
  color: #60a5fa;
}

.AddProjectModalContent_localActionInfo__AJ7td p {
  margin: 0 0 16px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #94a3b8;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.AddProjectModalContent_localActionInfo__AJ7td ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AddProjectModalContent_localActionInfo__AJ7td li {
  font-size: 0.85rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.AddProjectModalContent_localActionInfo__AJ7td li::before {
  content: '✓';
  font-size: 0.75rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.AddProjectModalContent_localActionRow__9B2b5:first-child .AddProjectModalContent_localActionInfo__AJ7td li::before {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
}

.AddProjectModalContent_localActionRow__9B2b5:last-child .AddProjectModalContent_localActionInfo__AJ7td li::before {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
}

.AddProjectModalContent_localAction__dc9Wz label {
  display: block;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: -0.3px;
}

.AddProjectModalContent_localActionRow__9B2b5:first-child .AddProjectModalContent_localAction__dc9Wz label {
  color: #a78bfa;
}

.AddProjectModalContent_localActionRow__9B2b5:last-child .AddProjectModalContent_localAction__dc9Wz label {
  color: #60a5fa;
}

.AddProjectModalContent_localAction__dc9Wz input {
  width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  transition: all 0.2s ease;
}

/* Electron Override */
body.is-electron .AddProjectModalContent_localAction__dc9Wz input {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(255, 255, 255, 0.1);
}

.AddProjectModalContent_localAction__dc9Wz input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.AddProjectModalContent_localAction__dc9Wz input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  background-color: rgba(255, 255, 255, 0.08);
}

.AddProjectModalContent_localAction__dc9Wz input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.AddProjectModalContent_localAction__dc9Wz button {
  margin-top: auto;
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.AddProjectModalContent_localActionRow__9B2b5:first-child .AddProjectModalContent_localAction__dc9Wz button {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.AddProjectModalContent_localActionRow__9B2b5:first-child .AddProjectModalContent_localAction__dc9Wz button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.AddProjectModalContent_localActionRow__9B2b5:last-child .AddProjectModalContent_localAction__dc9Wz button {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.AddProjectModalContent_localActionRow__9B2b5:last-child .AddProjectModalContent_localAction__dc9Wz button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.AddProjectModalContent_localAction__dc9Wz button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.AddProjectModalContent_localAction__dc9Wz button:active:not(:disabled) {
  transform: translateY(-1px);
}

.AddProjectModalContent_orDivider__4Ob4a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--node-label-text);
  padding-top: 30px;
  padding-bottom: 30px;
}

.AddProjectModalContent_orDivider__4Ob4a::before,
.AddProjectModalContent_orDivider__4Ob4a::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid var(--node-border);
}

.AddProjectModalContent_orDivider__4Ob4a:not(:empty)::before {
  margin-right: 0.25em;
}

.AddProjectModalContent_orDivider__4Ob4a:not(:empty)::after {
  margin-left: 0.25em;
}

.AddProjectModalContent_localActionLabel__tsHEQ {
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.AddProjectModalContent_loadingProjects__pta9X {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--node-label-text);
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
}

/* Delete Button Styles */
.AddProjectModalContent_deleteButton__izJOd {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

.AddProjectModalContent_projectBox__nlfdR:hover .AddProjectModalContent_deleteButton__izJOd {
  opacity: 1;
  transform: scale(1);
}

.AddProjectModalContent_deleteButton__izJOd:hover {
  background-color: #b91c1c;
  transform: scale(1.1);
}

.AddProjectModalContent_deleteButton__izJOd:active {
  transform: scale(0.95);
}

/* Loading States */
.AddProjectModalContent_projectLoading__\+C9XI {
  border-color: var(--node-border-selected) !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
  cursor: default !important;
}

.AddProjectModalContent_projectDisabled__4Pr5y {
  opacity: 0.5;
  pointer-events: none;
}

.AddProjectModalContent_projectDisabled__4Pr5y:hover {
  transform: none !important;
  box-shadow: none !important;
}

.AddProjectModalContent_loadingSpinner__EDrWr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.AddProjectModalContent_loadingSpinner__EDrWr span {
  font-size: 0.8rem;
  color: var(--node-border-selected);
  font-weight: 600;
}

.AddProjectModalContent_spinner__rxrtp {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid var(--node-border-selected);
  border-radius: 50%;
  animation: AddProjectModalContent_spin__eVe3N 1s linear infinite;
}

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

/* Disabled button styles */
.AddProjectModalContent_localAction__dc9Wz button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--node-textarea-bg);
  color: var(--node-label-text);
}

.AddProjectModalContent_localAction__dc9Wz input:disabled {
  opacity: 0.7;
}

/* Load More Button */
.AddProjectModalContent_loadMoreButton__1MukO {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin-top: 12px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  color: #667eea;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.AddProjectModalContent_loadMoreButton__1MukO:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.AddProjectModalContent_loadMoreButton__1MukO:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Load More Card - styled as a grid cell */
.AddProjectModalContent_loadMoreCard__m3Xy4 {
  height: 110px;
  width: 110px;
  min-width: 110px;
  min-height: 110px;
  max-height: 110px;
  flex-shrink: 0;
  border: 1px dashed rgba(102, 126, 234, 0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: rgba(102, 126, 234, 0.05);
  color: #667eea;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  box-sizing: border-box;
  padding: 0;
  margin-top: 5px; /* Match projectBox margin */
}

.AddProjectModalContent_loadMoreCard__m3Xy4:hover {
  background-color: rgba(102, 126, 234, 0.15);
  border-color: #667eea;
  transform: translateY(-2px);
}

.AddProjectModalContent_loadMoreCard__m3Xy4:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Upgrade overlay styles */
.AddProjectModalContent_upgradeOverlay__JrTHp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(139, 69, 19, 0.95),
    rgba(160, 82, 45, 0.95)
  );
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  color: white;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
}

.AddProjectModalContent_upgradeOverlay__JrTHp .AddProjectModalContent_upgradeIcon__LGs8o {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #fbbf24;
}

.AddProjectModalContent_upgradeOverlay__JrTHp .AddProjectModalContent_upgradeTitle__A1CyP {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.AddProjectModalContent_upgradeOverlay__JrTHp .AddProjectModalContent_upgradeSubtitle__cd5bH {
  font-size: 0.8rem;
  opacity: 0.9;
  line-height: 1.3;
}

.AddProjectModalContent_cloudGridContainer__NZa0G {
  position: relative;
  flex-shrink: 0;
  width: 100%; /* Ensure container takes full width */
  box-sizing: border-box; /* Include padding in width calculation */
}

.AddProjectModalContent_upgradeButton__63sVF {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  margin-top: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.AddProjectModalContent_upgradeButton__63sVF:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #d97706, #b45309);
}

.AddProjectModalContent_limitInfoBanner__m2fQz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1),
    rgba(37, 99, 235, 0.1)
  );
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  font-weight: 500;
}

.AddProjectModalContent_limitInfoText__c6rzi {
  flex: 1 1;
  text-align: center;
}

.AddProjectModalContent_limitReachedBanner__pGOp3 {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.1),
    rgba(220, 38, 38, 0.1)
  );
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.AddProjectModalContent_createProjectBoxDisabled__D15r- {
  opacity: 0.5;
  cursor: not-allowed !important;
  border-color: var(--node-textarea-border) !important;
  background-color: var(--node-textarea-bg) !important;
}

.AddProjectModalContent_createProjectBoxDisabled__D15r-:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--node-textarea-border) !important;
  background-color: var(--node-textarea-bg) !important;
}

/* Sign-in overlay styles for unauthenticated users */
.AddProjectModalContent_signInOverlay__6DWNl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  min-height: 210px;
  height: 240px;
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.8),
    rgba(15, 23, 42, 0.9)
  );
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  color: var(--node-text);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* margin-bottom: 20px; */
  box-sizing: border-box;
}

.AddProjectModalContent_signInTitle__xlqMf {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.AddProjectModalContent_signInSubtitle__dIbnZ {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 380px;
  font-weight: 400;
}

.AddProjectModalContent_signInButton__fwPiy {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  padding: 0 24px;
  width: auto;
  min-width: 240px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.AddProjectModalContent_signInButton__fwPiy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.4);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Temp Workflow styles for unauthenticated users */
.AddProjectModalContent_tempWorkflowContainer__\+xHlz {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
  min-height: 40%;
  height: 210px;
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.6),
    rgba(15, 23, 42, 0.8)
  );
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.AddProjectModalContent_tempWorkflowContainer__\+xHlz::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  /* background: linear-gradient(90deg, #667eea, #764ba2); */
}

.AddProjectModalContent_tempWorkflowInfo__Yk5l7 h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  letter-spacing: -0.3px;
}

.AddProjectModalContent_tempWorkflowInfo__Yk5l7 p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #94a3b8;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.AddProjectModalContent_tempWorkflowButton__6enhu {
  position: relative;
  background: rgba(102, 126, 234, 0.1);
  color: #818cf8;
  border: 1px solid rgba(102, 126, 234, 0.3);
  padding: 0 24px;
  width: auto;
  min-width: 240px;
  align-self: center;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  height: 44px;
  white-space: nowrap;
}

.AddProjectModalContent_tempWorkflowButton__6enhu:hover:not(:disabled) {
  background: rgba(102, 126, 234, 0.15);
  border-color: #818cf8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  color: #a5b4fc;
}

.AddProjectModalContent_tempWorkflowButton__6enhu:active:not(:disabled) {
  transform: translateY(-1px);
}

.AddProjectModalContent_tempWorkflowButton__6enhu:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.AddProjectModalContent_tempWorkflowIcon__GqxIf {
  font-size: 1.2rem;
  /* animation: pulse 2s ease-in-out infinite; */
}

@keyframes AddProjectModalContent_pulse__z6dWy {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.AddProjectModalContent_tempWorkflowNote__c0HJD {
  padding: 10px 12px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  color: #94a3b8;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.AddProjectModalContent_tempWorkflowNote__c0HJD strong {
  color: #eab308;
  font-weight: 600;
  white-space: nowrap;
}

/* Loading Overlay */
.AddProjectModalContent_loadingOverlay__GBWLc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/* Electron Override */
body.is-electron .AddProjectModalContent_loadingOverlay__GBWLc {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background-color: rgba(0, 0, 0, 0.85);
}

.AddProjectModalContent_loadingSpinner__EDrWr {
  /* background: white; */
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.AddProjectModalContent_loadingSpinner__EDrWr p {
  margin-top: 20px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.AddProjectModalContent_spinner__rxrtp {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: AddProjectModalContent_spin__eVe3N 1s linear infinite;
  margin: 0 auto;
}

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

/* Purchased Templates Section */
.AddProjectModalContent_purchasedTemplatesSection__0DFJT {
  margin-top: 20px;
}

.AddProjectModalContent_sectionHeader__4upOV {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.AddProjectModalContent_sectionTitle__ierE\+ {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--node-text);
  margin: 0;
}

.AddProjectModalContent_sectionTitleIcon__topyx {
  font-size: 1.2rem;
  color: #22c55e;
}

.AddProjectModalContent_refreshButton__SjUR5 {
  background: none;
  border: none;
  color: var(--node-label-text);
  cursor: pointer;
  font-size: 1rem;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.AddProjectModalContent_refreshButton__SjUR5:hover {
  background-color: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.AddProjectModalContent_refreshButton__SjUR5:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.AddProjectModalContent_refreshButtonSpinning__npMlV {
  animation: AddProjectModalContent_spin2__zemOC 1s linear infinite;
}

.AddProjectModalContent_templateGrid__LeDSa {
  display: grid;
  grid-template-rows: repeat(2, 110px);
  grid-auto-flow: column;
  grid-auto-columns: 110px;
  grid-gap: 12px;
  gap: 12px;
  padding: 10px 20px 10px 20px; /* Increased right padding from 10px to 20px */
  overflow-x: auto;
  overflow-y: auto; /* Changed from hidden to auto for consistency */
  width: 100%;
  max-height: 256px;
  scrollbar-width: thin;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.05),
    rgba(22, 163, 74, 0.05)
  );
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain; /* Prevent vertical scroll chaining */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}

.AddProjectModalContent_templateGrid__LeDSa::-webkit-scrollbar {
  width: 6px; /* Vertical scrollbar */
  height: 6px; /* Horizontal scrollbar */
}

.AddProjectModalContent_templateGrid__LeDSa::-webkit-scrollbar-track {
  background: var(--node-textarea-bg);
  border-radius: 4px;
}

.AddProjectModalContent_templateGrid__LeDSa::-webkit-scrollbar-thumb {
  background: var(--node-border);
  border-radius: 4px;
}

.AddProjectModalContent_templateGrid__LeDSa::-webkit-scrollbar-thumb:hover {
  background: var(--node-border-selected);
}

.AddProjectModalContent_templateBox__Mg8GM {
  height: 110px;
  width: 110px;
  min-width: 110px;
  min-height: 110px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: rgba(34, 197, 94, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0;
  text-align: center;
  color: var(--node-text);
  flex-shrink: 0;
  margin-top: 5px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.AddProjectModalContent_templateBox__Mg8GM:hover {
  border-color: #22c55e;
  background-color: rgba(34, 197, 94, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.AddProjectModalContent_templatePreviewContainer__LJBgm {
  width: 100%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  overflow: hidden;
}

.AddProjectModalContent_templateNameContainer__rfagE {
  width: 100%;
  height: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(34, 197, 94, 0.2);
}

.AddProjectModalContent_templateName__CeaXr {
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  width: 100%;
  max-width: 100%;
  font-weight: 600;
  color: var(--node-text);
}

.AddProjectModalContent_emptyTemplateBox__ZU9i5 {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}

.AddProjectModalContent_emptyTemplateIcon__6qxR8 {
  font-size: 2rem;
  opacity: 0.6;
  color: #22c55e;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.AddProjectModalContent_emptyTemplateBox__ZU9i5 .AddProjectModalContent_templateName__CeaXr {
  width: auto;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
}

.AddProjectModalContent_noTemplates__6EsWy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--node-label-text);
  text-align: center;
  gap: 10px;
}

.AddProjectModalContent_noTemplatesIcon__0CI3Z {
  font-size: 2rem;
  opacity: 0.5;
}

.AddProjectModalContent_noTemplatesText__fICyv {
  font-size: 0.9rem;
  opacity: 0.7;
}

.AddProjectModalContent_templateLoading__CPWNb {
  border-color: #22c55e !important;
  background-color: rgba(34, 197, 94, 0.2) !important;
  cursor: default !important;
}

.AddProjectModalContent_templateSelected__wYEYb {
  border-color: #22c55e !important;
  border-width: 2px !important;
  background-color: rgba(34, 197, 94, 0.25) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4) !important;
  transform: translateY(-2px);
}

.AddProjectModalContent_templateSelected__wYEYb::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  background: #22c55e;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
}

.AddProjectModalContent_templateDisabled__e9YC- {
  opacity: 0.5;
  pointer-events: none;
}

.AddProjectModalContent_templateHint__Dz5pO {
  font-size: 0.8rem;
  color: var(--node-label-text);
  text-align: center;
  margin-top: 10px;
  opacity: 0.8;
}

/* Overlay that covers only the right panel */
.NewCloudProjectModal_overlay__vRthF {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 24, 39, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: NewCloudProjectModal_fadeIn__H8fcz 0.2s ease-out;
}

@keyframes NewCloudProjectModal_fadeIn__H8fcz {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Electron Override */
body.is-electron .NewCloudProjectModal_overlay__vRthF {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(17, 24, 39, 0.97);
}

.NewCloudProjectModal_modalContent__sDDuf {
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.95),
    rgba(15, 23, 42, 0.98)
  );
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  margin: 0 auto;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: NewCloudProjectModal_slideIn__Uf8yA 0.25s ease-out;
}

@keyframes NewCloudProjectModal_slideIn__Uf8yA {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.NewCloudProjectModal_title__vegVF {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.NewCloudProjectModal_description__vmlMy {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #94a3b8;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.NewCloudProjectModal_form__8dNpC {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  align-items: center;
}

.NewCloudProjectModal_inputGroup__pFaWW {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.NewCloudProjectModal_label__tVpu4 {
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.NewCloudProjectModal_input__cFALX {
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: all 0.2s;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.NewCloudProjectModal_input__cFALX:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

.NewCloudProjectModal_input__cFALX::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.NewCloudProjectModal_input__cFALX:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.NewCloudProjectModal_hint__4qPDc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.NewCloudProjectModal_error__oHu5F {
  font-size: 12px;
  color: #ef4444;
  margin: 0;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

.NewCloudProjectModal_actions__A9FS8 {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.NewCloudProjectModal_cancelButton__W6y3E,
.NewCloudProjectModal_confirmButton__K5V8S {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  flex: 1 1;
}

.NewCloudProjectModal_cancelButton__W6y3E {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.NewCloudProjectModal_cancelButton__W6y3E:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.NewCloudProjectModal_cancelButton__W6y3E:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.NewCloudProjectModal_confirmButton__K5V8S {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.NewCloudProjectModal_confirmButton__K5V8S:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.NewCloudProjectModal_confirmButton__K5V8S:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.NewCloudProjectModal_confirmButton__K5V8S:active:not(:disabled) {
  transform: translateY(0);
}

.TemplateSelector_templateContainer__Ug-6N {
  padding: 20px 12px; /* Reduced horizontal padding from 20px to 12px */
  border-bottom: none;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.TemplateSelector_header__VMBRB {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 0; /* No extra padding needed */
}

.TemplateSelector_sectionTitle__GalL1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.TemplateSelector_headerActions__cb2Pi {
  display: flex;
  align-items: center;
  gap: 8px;
}

.TemplateSelector_searchButton__vxn5E {
  background: none;
  border: none;
  color: #8b5cf6;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.TemplateSelector_searchButton__vxn5E:hover {
  background: rgba(139, 92, 246, 0.1);
}

.TemplateSelector_searchButtonActive__OYeYG {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.TemplateSelector_searchInputWrapper__zHulH {
  position: relative;
  display: flex;
  align-items: center;
}

.TemplateSelector_searchInput__Ouo8k {
  width: 140px;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: #e5e5e5;
  font-size: 12px;
  outline: none;
  transition: all 0.2s;
  font-family: 'Inconsolata', monospace;
}

.TemplateSelector_searchInput__Ouo8k::placeholder {
  color: #888;
}

.TemplateSelector_searchInput__Ouo8k:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.TemplateSelector_clearSearchButton__ySzCS {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  transition: all 0.2s;
}

.TemplateSelector_clearSearchButton__ySzCS:hover {
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.1);
}

.TemplateSelector_addButton__u24i3 {
  background: none;
  border: none;
  color: #8b5cf6;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.TemplateSelector_addButton__u24i3:hover {
  background: rgba(139, 92, 246, 0.1);
}

.TemplateSelector_templateGrid__LVzX0 {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(110px, 1fr)
  ); /* Match template card size */
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  flex: 1 1;
  min-height: 0;
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  justify-items: stretch; /* Stretch items to fill grid cells */
  align-content: start;
}

/* Webkit scrollbar styling (Chrome, Safari, Edge) */
.TemplateSelector_templateGrid__LVzX0::-webkit-scrollbar {
  width: 6px; /* Vertical scrollbar */
  height: 6px; /* Horizontal scrollbar */
}

.TemplateSelector_templateGrid__LVzX0::-webkit-scrollbar-track {
  background: var(--node-textarea-bg);
  border-radius: 4px;
}

.TemplateSelector_templateGrid__LVzX0::-webkit-scrollbar-thumb {
  background: var(--node-border);
  border-radius: 4px;
}

.TemplateSelector_templateGrid__LVzX0::-webkit-scrollbar-thumb:hover {
  background: var(--node-border-selected);
}

.TemplateSelector_templateCard__6J-1Q {
  height: 110px;
  width: 100%; /* Allow card to stretch in grid */
  min-width: 110px; /* Minimum width */
  min-height: 110px; /* Ensure fixed height */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: rgba(128, 128, 128, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0; /* Remove padding to match preview card */
  text-align: center;
  color: #374151;
  position: relative;
  flex-shrink: 0;
  margin-top: 0;
  box-sizing: border-box;
}

[data-theme='dark'] .TemplateSelector_templateCard__6J-1Q {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(128, 128, 128, 0.15);
  color: var(--node-text);
}

.TemplateSelector_templateCard__6J-1Q:hover {
  border-color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.TemplateSelector_templateCard__6J-1Q.TemplateSelector_selected__4587U {
  border-color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.15);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
}

/* Template card with preview layout - matches cloud projects */
.TemplateSelector_templateCardWithPreview__C3Kfz {
  /* height: 110px; - Removed duplicate height */
  /* padding: 0; - Already set in base class */
  overflow: hidden;
}

/* Preview container - takes 65% of the height */
.TemplateSelector_previewContainer__Bro5E {
  width: 100%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-bottom: none;
  overflow: hidden;
}

/* Template preview styling */
.TemplateSelector_templatePreview__hFPmz {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border-radius: 0;
}

/* Template name container - takes 35% of the height */
.TemplateSelector_templateNameContainer__cLrRW {
  width: 100%;
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 1px; /* Reduced gap */
}

/* Template info for cards without preview */
.TemplateSelector_templateInfo__EI5TQ {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}

.TemplateSelector_emptyTemplateIcon__8CQhK {
  font-size: 2rem;
  opacity: 0.6;
  color: var(--node-label-text);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.TemplateSelector_templateName__6fAkM {
  font-weight: 600;
  font-size: 0.7rem; /* Slightly smaller */
  word-break: break-word;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0;
  color: #6b7280;
}

[data-theme='dark'] .TemplateSelector_templateName__6fAkM {
  color: inherit;
}

/* Specific positioning for Blank Template (inside templateInfo) */
.TemplateSelector_templateInfo__EI5TQ .TemplateSelector_templateName__6fAkM {
  width: auto;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.TemplateSelector_templateMeta__LhRss {
  font-size: 0.6rem;
  color: #6b7280;
  opacity: 0.8;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  line-height: 1.1;
}

[data-theme='dark'] .TemplateSelector_templateMeta__LhRss {
  color: var(--node-label-text);
}

.TemplateSelector_templateDescription__HIdXJ {
  display: none;
}

.TemplateSelector_defaultBadge__Qy12X {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #28a745;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.TemplateSelector_deleteButton__jB\+\+m {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(239, 68, 68, 0.8);
  border: none;
  color: white;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  padding: 0;
  font-size: 10px;
  z-index: 10;
}

.TemplateSelector_templateCard__6J-1Q:hover .TemplateSelector_deleteButton__jB\+\+m {
  opacity: 1;
}

.TemplateSelector_deleteButton__jB\+\+m:hover {
  background: rgb(239, 68, 68);
  transform: scale(1.1);
}

.TemplateSelector_loadingMessage__QkAtH {
  text-align: center;
  padding: 20px;
  color: #a0a0a0;
  color: var(--text-secondary, #a0a0a0);
  font-size: 14px;
}

.TemplateSelector_templateHint__PgQ\+E {
  margin: 8px 0 0 0;
  padding: 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  font-style: italic;
}

.RecentlyOpened_recentContainer__gGsgE {
  padding: 20px 12px; /* Reduced horizontal padding from 20px to 12px */
  flex: 1 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.RecentlyOpened_headerSection__SAHBF {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0; /* No extra padding needed */
}

.RecentlyOpened_sectionTitle__MmjFW {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #d9d9d9;
}

.RecentlyOpened_clearButton__rgf96 {
  background: none;
  border: 1px solid #ddd;
  color: #b5b5b5;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.RecentlyOpened_clearButton__rgf96:hover {
  background: #f5f5f5;
  color: #333;
}

.RecentlyOpened_emptyState__tJ1y1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #b7b7b7;
  flex: 1 1;
}

.RecentlyOpened_emptyIcon__kK1qw {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.RecentlyOpened_emptyText__Sap7u {
  margin: 0;
  font-size: 16px;
}

.RecentlyOpened_projectList__6PEo5 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  flex: 1 1;
  min-height: 0; /* Allow flex shrinking */
  overflow-y: auto;
  overflow-x: hidden; /* Changed back to hidden since grid handles wrapping */
  padding: 4px 0; /* Removed horizontal padding since parent container has it */
  align-content: start;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  box-sizing: border-box;
}

.RecentlyOpened_projectItem__wrmtZ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: rgba(128, 128, 128, 0.15);
  min-height: 100px;
  text-align: center;
}

.RecentlyOpened_projectItem__wrmtZ:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background-color: rgba(139, 92, 246, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
}

.RecentlyOpened_projectIcon__sqTj8 {
  font-size: 28px;
  margin-bottom: 10px;
  flex-shrink: 0;
  color: #007bff;
}

.RecentlyOpened_projectInfo__tf1zX {
  width: 100%;
  min-width: 0;
}

.RecentlyOpened_projectName__dpT1D {
  font-weight: 600;
  font-size: 13px;
  color: #d3d3d3;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.RecentlyOpened_projectDetails__tLmIA {
  font-size: 11px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.RecentlyOpened_loadingText__K6bW8 {
  color: #007bff;
  font-weight: 400;
  font-style: italic;
  font-size: 11px;
  display: block;
  margin-top: 4px;
}

.RecentlyOpened_projectItem__wrmtZ.RecentlyOpened_loading__VTiM5 {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.1);
}

/* Scrollbar styling */
.RecentlyOpened_projectList__6PEo5::-webkit-scrollbar {
  width: 6px; /* Vertical scrollbar */
  height: 6px; /* Horizontal scrollbar */
}

.RecentlyOpened_projectList__6PEo5::-webkit-scrollbar-track {
  background: var(--node-textarea-bg);
  border-radius: 4px;
}

.RecentlyOpened_projectList__6PEo5::-webkit-scrollbar-thumb {
  background: var(--node-border);
  border-radius: 4px;
}

.RecentlyOpened_projectList__6PEo5::-webkit-scrollbar-thumb:hover {
  background: var(--node-border-selected);
}

.NewTemplateModal_modalContent__ptPGZ {
  background: transparent;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.NewTemplateModal_title__If1eJ {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
}

.NewTemplateModal_description__umWmp {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #a0a0a0;
  color: var(--text-secondary, #a0a0a0);
}

.NewTemplateModal_form__U1i09 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  align-items: center;
}

.NewTemplateModal_inputGroup__YLx-h {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.NewTemplateModal_label__RsQgZ {
  font-size: 14px;
  font-weight: 500;
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
}

.NewTemplateModal_input__yJNnX {
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #444;
  border: 1px solid var(--border-color, #444);
  border-radius: 8px;
  background: #1a1a1a;
  background: var(--input-bg, #1a1a1a);
  color: #e0e0e0;
  color: var(--text-primary, #e0e0e0);
  transition: border-color 0.2s;
}

.NewTemplateModal_input__yJNnX:focus {
  outline: none;
  border-color: #8b5cf6;
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.NewTemplateModal_input__yJNnX::placeholder {
  color: #666;
  color: var(--text-tertiary, #666);
}

.NewTemplateModal_hint__NJJUp {
  font-size: 12px;
  color: #666;
  color: var(--text-tertiary, #666);
  margin: 0;
}

.NewTemplateModal_error__sCjKM {
  font-size: 12px;
  color: #ff4444;
  margin: 0;
}

.NewTemplateModal_actions__KMAeZ {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.NewTemplateModal_cancelButton__OF6Ix,
.NewTemplateModal_confirmButton__9PbHD {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.NewTemplateModal_cancelButton__OF6Ix {
  background: transparent;
  color: #a0a0a0;
  color: var(--text-secondary, #a0a0a0);
  border: 1px solid #444;
  border: 1px solid var(--border-color, #444);
}

.NewTemplateModal_cancelButton__OF6Ix:hover {
  background: rgba(255, 255, 255, 0.05);
}

.NewTemplateModal_confirmButton__9PbHD {
  background: #8b5cf6;
  background: var(--accent-color, #8b5cf6);
  color: white;
}

.NewTemplateModal_confirmButton__9PbHD:hover:not(:disabled) {
  background: #7c3aed;
  background: var(--accent-color-hover, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.NewTemplateModal_confirmButton__9PbHD:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.AddProjectLeftPanel_leftPanelContainer__q8tRk {
  height: 100%;
  min-height: 0; /* Important: allows flex children to shrink properly */
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* Prevent this container from scrolling - let children handle it */
}

.AddProjectLeftPanel_headerSection__-Cj7x {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px 20px;
  border-bottom: 1px solid #545454;
}

.AddProjectLeftPanel_userInfo__FPhl3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.AddProjectLeftPanel_userAvatar__QLdn3 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #007bff;
  padding: 5px;
}

.AddProjectLeftPanel_userDetails__nYYIg {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.AddProjectLeftPanel_userName__9Sj8R {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.AddProjectLeftPanel_userEmail__X56F8 {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.2;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme='dark'] .AddProjectLeftPanel_userEmail__X56F8 {
  color: #999;
}

.AddProjectLeftPanel_panelTitle__RMbgV {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #374151;
}

[data-theme='dark'] .AddProjectLeftPanel_panelTitle__RMbgV {
  color: #d9d9d9;
}

.AddProjectLeftPanel_logoutButton__KdJyC {
  background: none;
  border: 1px solid #dc3545;
  color: #dc3545;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
}

.AddProjectLeftPanel_logoutButton__KdJyC:hover {
  background: #dc3545;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

/* Guest/Unauthenticated user styles */
.AddProjectLeftPanel_guestContainer__5khOw {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.AddProjectLeftPanel_guestHeader__Eu6i\+ {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 5px;
}

.AddProjectLeftPanel_guestTitle__CqVtu {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #e2e8f0;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  letter-spacing: -0.5px;
}

.AddProjectLeftPanel_guestSubtitle__-ne2B {
  margin: 0;
  font-size: 1rem;
  color: #94a3b8;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.5;
}

.AddProjectLeftPanel_guestInfo__QUIi1 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.6),
    rgba(15, 23, 42, 0.8)
  );
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.AddProjectLeftPanel_infoIcon__k0\+KK {
  font-size: 1.6rem;
  flex-shrink: 0;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AddProjectLeftPanel_infoText__z4hIN {
  margin: 0;
  font-size: 0.95rem;
  color: #e2e8f0;
  line-height: 1.6;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 400;
}

.AddProjectLeftPanel_listsContainer__e9cHV {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}

.AddProjectLeftPanel_featureList__CnBsK {
  background: transparent;
  padding: 10px 5px;
  border: none;
  flex: 1 1;
}

.AddProjectLeftPanel_featureList__CnBsK h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  display: inline-block;
}

.AddProjectLeftPanel_featureList__CnBsK ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.AddProjectLeftPanel_featureList__CnBsK li {
  padding: 0;
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.5;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

.AddProjectLeftPanel_featureList__CnBsK li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #60a5fa;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

/* Tab Navigation Styles */
.AddProjectLeftPanel_tabContainer__08djJ {
  display: flex;
  border-bottom: 1px solid #545454;
  padding: 0 20px;
  gap: 0;
}

.AddProjectLeftPanel_tab__-otIW {
  flex: 1 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
}

.AddProjectLeftPanel_tab__-otIW:hover {
  color: #374151;
  background: rgba(102, 126, 234, 0.05);
}

[data-theme='dark'] .AddProjectLeftPanel_tab__-otIW:hover {
  color: #d9d9d9;
  background: rgba(102, 126, 234, 0.1);
}

.AddProjectLeftPanel_tabActive__xZvu8 {
  color: #667eea;
  border-bottom-color: #667eea;
}

[data-theme='dark'] .AddProjectLeftPanel_tabActive__xZvu8 {
  color: #667eea;
}

.AddProjectLeftPanel_tabContent__48W5N {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  gap: 20px;
  overscroll-behavior: contain; /* Prevent scroll chaining */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: thin;
}

/* Custom scrollbar for tab content */
.AddProjectLeftPanel_tabContent__48W5N::-webkit-scrollbar {
  width: 6px;
}

.AddProjectLeftPanel_tabContent__48W5N::-webkit-scrollbar-track {
  background: transparent;
}

.AddProjectLeftPanel_tabContent__48W5N::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

.AddProjectLeftPanel_tabContent__48W5N::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* Purchased Templates Section */
.AddProjectLeftPanel_purchasedTemplatesSection__ZS9bd {
  padding: 10px 12px 15px 12px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.AddProjectLeftPanel_purchasedHeader__cLP3E {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0; /* No extra padding needed */
}

.AddProjectLeftPanel_purchasedHeaderActions__GT6sk {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AddProjectLeftPanel_purchasedSearchButton__qL5Eg {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.AddProjectLeftPanel_purchasedSearchButton__qL5Eg:hover {
  background: rgba(102, 126, 234, 0.1);
}

.AddProjectLeftPanel_purchasedSearchButtonActive__8UZF6 {
  background: rgba(102, 126, 234, 0.2);
  color: #818cf8;
}

.AddProjectLeftPanel_purchasedSearchInputWrapper__fVtGr {
  position: relative;
  display: flex;
  align-items: center;
}

.AddProjectLeftPanel_purchasedSearchInput__y6EKr {
  width: 140px;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: #e5e5e5;
  font-size: 12px;
  outline: none;
  transition: all 0.2s;
  font-family: 'Inconsolata', monospace;
}

.AddProjectLeftPanel_purchasedSearchInput__y6EKr::placeholder {
  color: #888;
}

.AddProjectLeftPanel_purchasedSearchInput__y6EKr:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.AddProjectLeftPanel_clearPurchasedSearchButton__OJbwq {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  transition: all 0.2s;
}

.AddProjectLeftPanel_clearPurchasedSearchButton__OJbwq:hover {
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.1);
}

.AddProjectLeftPanel_purchasedTitle__C1gMF {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inconsolata', monospace;
}

[data-theme='dark'] .AddProjectLeftPanel_purchasedTitle__C1gMF {
  color: #ffffff;
}

.AddProjectLeftPanel_purchasedTitleIcon__I\+rMR {
  color: #667eea;
  font-size: 16px;
}

.AddProjectLeftPanel_refreshButton__PzR2U {
  background: none;
  border: 1px solid #545454;
  color: #6b7280;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.AddProjectLeftPanel_refreshButton__PzR2U:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  color: #667eea;
}

.AddProjectLeftPanel_refreshButton__PzR2U:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.AddProjectLeftPanel_refreshButtonSpinning__6ME-m {
  animation: AddProjectLeftPanel_spin__3U2Fc 1s linear infinite;
}

@keyframes AddProjectLeftPanel_spin__3U2Fc {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.AddProjectLeftPanel_purchasedGrid__-hpW3 {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(110px, 1fr)
  ); /* Match template card size */
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1;
  min-height: 0;
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  justify-items: stretch; /* Stretch items to fill grid cells */
  align-content: start;
}

.AddProjectLeftPanel_purchasedGrid__-hpW3::-webkit-scrollbar {
  width: 6px; /* Vertical scrollbar */
  height: 6px; /* Horizontal scrollbar */
}

.AddProjectLeftPanel_purchasedGrid__-hpW3::-webkit-scrollbar-track {
  background: var(--node-textarea-bg);
  border-radius: 4px;
}

.AddProjectLeftPanel_purchasedGrid__-hpW3::-webkit-scrollbar-thumb {
  background: var(--node-border);
  border-radius: 4px;
}

.AddProjectLeftPanel_purchasedGrid__-hpW3::-webkit-scrollbar-thumb:hover {
  background: var(--node-border-selected);
}

.AddProjectLeftPanel_purchasedCard__qolO3 {
  position: relative;
  background: rgba(128, 128, 128, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 110px;
  width: 100%; /* Allow card to stretch in grid */
  min-width: 110px; /* Minimum width */
  min-height: 110px;
  overflow: hidden;
}

.AddProjectLeftPanel_purchasedCard__qolO3:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.AddProjectLeftPanel_purchasedCardSelected__1mhit {
  border-color: #22c55e !important;
  border-width: 2px !important;
  background-color: rgba(34, 197, 94, 0.15) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3) !important;
}

.AddProjectLeftPanel_purchasedCardSelected__1mhit::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  background: #22c55e;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.AddProjectLeftPanel_purchasedPreviewContainer__Enrhm {
  width: 100%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.AddProjectLeftPanel_purchasedNameContainer__5\+ST6 {
  width: 100%;
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.AddProjectLeftPanel_purchasedName__jW-WX {
  font-size: 11px;
  color: #e5e5e5;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-family: 'Inconsolata', monospace;
}

[data-theme='dark'] .AddProjectLeftPanel_purchasedName__jW-WX {
  color: #e5e5e5;
}

.AddProjectLeftPanel_purchasedEmptyBox__gR8tu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}

.AddProjectLeftPanel_purchasedEmptyIcon__3iaZS {
  font-size: 2rem;
  color: var(--node-label-text);
  opacity: 0.6;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.AddProjectLeftPanel_purchasedEmptyBox__gR8tu .AddProjectLeftPanel_purchasedName__jW-WX {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  padding: 0 8px;
  text-align: center;
}

.AddProjectLeftPanel_purchasedHint__rzfSe {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  margin: 8px 0 0 0;
  padding: 0 4px;
  font-style: italic;
  font-family: 'Inconsolata', monospace;
}

[data-theme='dark'] .AddProjectLeftPanel_purchasedHint__rzfSe {
  color: #d1d5db;
}

/* Load More Button */
.AddProjectLeftPanel_loadMoreButton__mLy5k {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin-top: 12px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  color: #667eea;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.AddProjectLeftPanel_loadMoreButton__mLy5k:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.AddProjectLeftPanel_loadMoreButton__mLy5k:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Load More Card - styled as a grid cell */
.AddProjectLeftPanel_loadMoreCard__Axr5p {
  height: 110px;
  width: 100%; /* Allow card to stretch in grid */
  min-width: 110px; /* Minimum width */
  min-height: 110px;
  max-height: 110px;
  border: 1px dashed rgba(102, 126, 234, 0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: rgba(102, 126, 234, 0.05);
  color: #667eea;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.AddProjectLeftPanel_loadMoreCard__Axr5p:hover {
  background-color: rgba(102, 126, 234, 0.15);
  border-color: #667eea;
  transform: translateY(-2px);
}

.AddProjectLeftPanel_loadMoreCard__Axr5p:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Empty Purchased State */
.AddProjectLeftPanel_emptyPurchased__t-bts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
}

.AddProjectLeftPanel_emptyPurchasedIcon__xw1hN {
  font-size: 3rem;
  color: #4b5563;
  margin-bottom: 16px;
  opacity: 0.6;
}

.AddProjectLeftPanel_emptyPurchased__t-bts p {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #9ca3af;
}

.AddProjectLeftPanel_emptyPurchased__t-bts span {
  font-size: 0.85rem;
  color: #6b7280;
  max-width: 280px;
}

.UserProfileModalContent_container__Cx6oQ {
  padding: 20px;
  color: #f9fafb; /* Force dark mode text */
}

.UserProfileModalContent_header__pAuy- {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.UserProfileModalContent_title__PmGQJ {
  margin: 0;
  color: #f9fafb; /* Force dark mode text */
}

.UserProfileModalContent_errorText__p1L-n {
  color: #ef4444; /* Force red error color */
}

.UserProfileModalContent_profileContent__2pgOX {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  align-items: center;
  justify-content: space-between;
}

.UserProfileModalContent_avatarContainer__nzVeS {
  min-width: 30%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: #374151 solid 1px; /* Force dark mode border */
  margin-right: 20px;
  flex: 1 1;
}

.UserProfileModalContent_avatar__dc6t2 {
  font-size: 2.5rem;
  border: 2px solid #374151; /* Force dark mode border */
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: #1f2937; /* Force dark mode background */
  overflow: hidden;
}

.UserProfileModalContent_avatarImage__MsJwk {
  width: 50%;
  height: 50%;
  object-fit: contain;
  border-radius: 10%;
}

.UserProfileModalContent_noAvatar__71G9W {
  color: #9ca3af; /* Force dark mode muted text */
  font-size: 0.9rem;
  text-align: center;
}

.UserProfileModalContent_profileInfo__KAsZ2 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.UserProfileModalContent_subscriptionInfo__iB1vD {
  margin-top: 10px;
  padding-top: 10px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #374151; /* Force dark mode border */
}

.UserProfileModalContent_infoItem__15L64 {
  margin: 0;
  line-height: 1.4;
}

.UserProfileModalContent_infoItem__15L64 strong {
  color: #f9fafb; /* Force dark mode text */
}

.UserProfileModalContent_joinedDate__N4i2K {
  font-size: 0.8em;
  color: #9ca3af; /* Force dark mode muted text */
  margin-top: 8px;
}

.UserProfileModalContent_buttonContainer__OzcZ5 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.UserProfileModalContent_iconButton__1cWeC {
  background-color: transparent;
  border: none;
  color: #9ca3af; /* Force dark mode muted text */
  font-size: 1.5rem;
  font-family: 'Inconsolata', monospace;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: 40px;
  height: 40px;
}

.UserProfileModalContent_logoutButton__SFuGr,
.UserProfileModalContent_updateButton__QJoUD,
.UserProfileModalContent_closeButton__67cI0 {
  background-color: transparent;
  color: #9ca3af; /* Force dark mode muted text */
  font-family: 'Inconsolata', monospace;
}

.UserProfileModalContent_logoutButton__SFuGr:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444; /* Force red color */
}

.UserProfileModalContent_updateButton__QJoUD:hover {
  background-color: rgba(107, 114, 128, 0.1);
  color: #f9fafb; /* Force light text */
}

.UserProfileModalContent_closeButton__67cI0:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6; /* Force blue color */
}

/* Responsive design for smaller screens */
@media (max-width: 480px) {
  .UserProfileModalContent_profileContent__2pgOX {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .UserProfileModalContent_profileInfo__KAsZ2 {
    align-items: center;
  }
}

/* ApiKeysModalContent.module.css */

.ApiKeysModalContent_leftContent__TyHTH,
.ApiKeysModalContent_rightContent__qItyA {
  color: #e5e7eb; /* Always use light text */
  height: 100%;
}

.ApiKeysModalContent_leftContent__TyHTH {
  padding-right: 15px;
}

.ApiKeysModalContent_rightContent__qItyA {
  padding-left: 15px;
}

.ApiKeysModalContent_titleIcon__QCWCA {
  margin-right: 8px;
  vertical-align: middle;
}

.ApiKeysModalContent_errorMessage__gcCWO {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #dc2626;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.ApiKeysModalContent_inputGroup__1S8a8 {
  margin-top: 20px;
}

.ApiKeysModalContent_inputGroupSmall__Ivkza {
  margin-top: 15px;
}

.ApiKeysModalContent_label__Nx60S {
  display: block;
  margin-bottom: 5px;
  color: #e5e7eb;
  font-weight: 500;
}

.ApiKeysModalContent_input__WqZQk {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.ApiKeysModalContent_input__WqZQk:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ApiKeysModalContent_customKeysSection__qVU8k {
  margin-top: 25px;
  border-top: 1px solid #4b5563;
  padding-top: 20px;
}

.ApiKeysModalContent_customKeysSection__qVU8k h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #e5e7eb;
  font-size: 1.1rem;
}

.ApiKeysModalContent_customKeyRow__U-usq {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.ApiKeysModalContent_customKeyNameInput__HpgvY {
  flex: 1 1;
  padding: 8px;
  box-sizing: border-box;
  background-color: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.ApiKeysModalContent_customKeyNameInput__HpgvY:focus {
  outline: none;
  border-color: #3b82f6;
}

.ApiKeysModalContent_customKeyValueInput__s\+-kX {
  flex: 2 1;
  padding: 8px;
  box-sizing: border-box;
  background-color: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.ApiKeysModalContent_customKeyValueInput__s\+-kX:focus {
  outline: none;
  border-color: #3b82f6;
}

.ApiKeysModalContent_deleteButton__Zh0Wh {
  padding: 8px;
  cursor: pointer;
  background-color: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: 'Inconsolata', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.ApiKeysModalContent_deleteButton__Zh0Wh:hover {
  opacity: 0.9;
}

.ApiKeysModalContent_addButton__ft90E {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.ApiKeysModalContent_addButton__ft90E:hover {
  opacity: 0.9;
}

.ApiKeysModalContent_buttonContainer__H0-L\+ {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ApiKeysModalContent_cancelButton__MUEdM {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #6b7280;
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.ApiKeysModalContent_cancelButton__MUEdM:hover {
  opacity: 0.9;
}

.ApiKeysModalContent_saveButton__-fu2n {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.ApiKeysModalContent_saveButton__-fu2n:hover {
  opacity: 0.9;
}

.ApiKeysModalContent_saveButton__-fu2n:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Guide Styles for Right Panel */
.ApiKeysModalContent_guideSection__QBDj\+ {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #374151;
}

.ApiKeysModalContent_guideSection__QBDj\+:last-of-type {
  border-bottom: none;
  margin-bottom: 20px;
}

.ApiKeysModalContent_guideTitle__9CXMX {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.ApiKeysModalContent_providerIcon__3bGom {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  font-size: 18px;
}

.ApiKeysModalContent_steps__YtYKS {
  margin-left: 10px;
}

.ApiKeysModalContent_step__iSmL1 {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 8px 0;
}

.ApiKeysModalContent_stepNumber__gi2VD {
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
}

.ApiKeysModalContent_stepContent__BqCL4 {
  flex: 1 1;
}

.ApiKeysModalContent_stepContent__BqCL4 p {
  margin: 0;
  color: #d1d5db;
  line-height: 1.5;
}

.ApiKeysModalContent_link__63pSo {
  color: #60a5fa;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.ApiKeysModalContent_link__63pSo:hover {
  color: #3b82f6;
  text-decoration: underline;
}

.ApiKeysModalContent_linkIcon__HnCPD {
  font-size: 12px;
}

.ApiKeysModalContent_tips__zJNdC {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.ApiKeysModalContent_tips__zJNdC h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #e5e7eb;
  font-size: 1rem;
}

.ApiKeysModalContent_tips__zJNdC ul {
  margin: 0;
  padding-left: 20px;
}

.ApiKeysModalContent_tips__zJNdC li {
  color: #d1d5db;
  margin-bottom: 5px;
  line-height: 1.4;
}

/* -------- Modal Wrapper for Centering -------- */
.SubscriptionModalContent_modalWrapper__d9rkr {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
}

/* -------- Left Panel Styles -------- */
.SubscriptionModalContent_leftPanel__umqW8 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 70vh;
  width: 100%;
}

.SubscriptionModalContent_headerSection__sTFBE {
  margin-bottom: 8px;
}

.SubscriptionModalContent_mainTitle__5upii {
  text-align: left;
  font-size: 1.8rem;
  margin: 0;
  color: #ffffff;
  margin-bottom: 12px;
  font-weight: 600;
}

.SubscriptionModalContent_subTitle__kLDW5 {
  text-align: left;
  font-size: 0.95rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.5;
}

.SubscriptionModalContent_sectionLabel__i0KfP {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}

.SubscriptionModalContent_billingToggleSection__n7fd0 {
  padding: 14px 16px;
  background: rgba(55, 65, 81, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(75, 85, 99, 0.5);
}

.SubscriptionModalContent_warningsSection__mqhnX {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Warnings as simple bullet list */
.SubscriptionModalContent_warningsList__hDDX2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.SubscriptionModalContent_warningItem__eQM70 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  color: #9ca3af;
  line-height: 1.4;
}

.SubscriptionModalContent_warningItem__eQM70:first-child {
  color: #fca5a5;
}

.SubscriptionModalContent_warningItem__eQM70:first-child .SubscriptionModalContent_warningBullet__UL1Vk {
  color: #fca5a5;
}

.SubscriptionModalContent_warningBullet__UL1Vk {
  font-size: 0.9rem;
  flex-shrink: 0;
  color: #fcd34d;
  margin-top: 2px;
}

.SubscriptionModalContent_warningIcon__lnEFj {
  font-size: 1rem;
  flex-shrink: 0;
  color: #fca5a5;
}

.SubscriptionModalContent_infoIcon__rH8Ow {
  font-size: 0.95rem;
  flex-shrink: 0;
  color: #fcd34d;
}

.SubscriptionModalContent_renewalSection__6\+J3- {
  padding: 14px 16px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.SubscriptionModalContent_renewalLabel__6kDYt {
  color: #9ca3af;
  font-size: 0.9rem;
}

.SubscriptionModalContent_renewalDate__574FZ {
  color: #10b981;
  font-weight: 600;
  font-size: 1rem;
  margin-left: 8px;
}

/* -------- Right Panel Styles -------- */
.SubscriptionModalContent_rightPanel__ClJbV {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1;
  min-width: 0;
  overflow: visible;
}

.SubscriptionModalContent_currentPlanInfo__xqvEn {
  color: #ffffff;
  font-size: 0.9rem;
}

.SubscriptionModalContent_pendingChangeInfo__QpIPj {
  color: #fbbf24;
  font-size: 0.85rem;
  font-style: italic;
}

/* Message containers */
.SubscriptionModalContent_messageContainer__wKu-r {
  text-align: center;
  margin: 8px 0;
}

.SubscriptionModalContent_errorMessage__LKpHN {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0;
  font-size: 0.9rem;
}

.SubscriptionModalContent_successMessage__juBe- {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0;
  font-size: 0.9rem;
}

/* Renewal Date Info */
.SubscriptionModalContent_renewalDateInfo__4stGl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.95rem;
  font-family: 'Inconsolata', monospace;
}

.SubscriptionModalContent_contentWrapper__NRnND {
  display: flex;
  gap: 16px;
}

/* -------- Labels Column -------- */
.SubscriptionModalContent_featureLabelsColumn__kv8ek {
  display: flex;
  flex-direction: column;
  width: 140px;
  flex-shrink: 0;
  margin-top: 70px;
}

.SubscriptionModalContent_labelSpacerTop__Pf1r8 {
  height: 100px;
}

.SubscriptionModalContent_labelSpacerBottom__VA60Q {
  flex-grow: 1;
}

.SubscriptionModalContent_featureLabel__xaBw- {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #7d7d7d;
  padding-left: 8px;
}

/* -------- Plans -------- */
.SubscriptionModalContent_plansContainer__sARcm {
  display: flex;
  gap: 0;
  flex-grow: 1;
  flex-wrap: wrap;
  overflow: visible;
}

.SubscriptionModalContent_planColumn__5lefA {
  flex: 1 1;
  min-width: 140px;
  max-width: calc(33.33%);
  border: none;
  border-radius: 0;
  padding: 24px 16px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
  overflow: visible;
}

.SubscriptionModalContent_planColumn__5lefA .SubscriptionModalContent_creditFeature__RFGWG {
  animation: SubscriptionModalContent_creditUpdate__6\+Uma 0.5s ease-out;
}

@keyframes SubscriptionModalContent_creditUpdate__6\+Uma {
  0% {
    transform: scale(1);
    background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.3),
      rgba(16, 185, 129, 0.15)
    );
  }
  50% {
    transform: scale(1.05);
    background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.4),
      rgba(16, 185, 129, 0.2)
    );
  }
  100% {
    transform: scale(1);
    background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.2),
      rgba(16, 185, 129, 0.1)
    );
  }
}

.SubscriptionModalContent_planColumn__5lefA:hover {
  background: rgba(75, 85, 99, 0.15);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_selected__vKPLz {
  background: rgba(31, 41, 55, 0.6);
  border: 2px solid rgba(107, 114, 128, 0.8);
  border-radius: 16px;
  margin: 8px;
  padding: 20px 12px;
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_highlight__y4flz {
  /* Pro plan - subtle highlight */
  background: rgba(138, 43, 226, 0.05);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_highlight__y4flz.SubscriptionModalContent_selected__vKPLz {
  /* Enhanced selection for highlighted plans */
  background: rgba(138, 43, 226, 0.15);
  border-color: rgba(139, 92, 246, 0.8);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_premium__dkAMD.SubscriptionModalContent_selected__vKPLz {
  /* Enhanced selection for premium plan */
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.8);
}

/* Current plan styling */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_currentPlan__YANz4 {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1),
    rgba(16, 185, 129, 0.05)
  );
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_currentPlan__YANz4:hover {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.15),
    rgba(16, 185, 129, 0.08)
  );
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_currentPlan__YANz4.SubscriptionModalContent_selected__vKPLz {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.2),
    rgba(16, 185, 129, 0.1)
  );
  border-color: rgba(16, 185, 129, 0.8);
}

/* Pending plan styling */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_pendingPlan__TKVKF {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.1),
    rgba(251, 191, 36, 0.05)
  );
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_pendingPlan__TKVKF:hover {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.15),
    rgba(251, 191, 36, 0.08)
  );
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_pendingPlan__TKVKF.SubscriptionModalContent_selected__vKPLz {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.2),
    rgba(251, 191, 36, 0.1)
  );
  border-color: rgba(251, 191, 36, 0.8);
}

/* Disabled plan styling */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 {
  opacity: 0.5;
  background: rgba(128, 128, 128, 0.1);
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7:hover {
  background: rgba(128, 128, 128, 0.1);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 .SubscriptionModalContent_planTitle__tTWV5,
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 .SubscriptionModalContent_planPrice__fcVTq,
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 .SubscriptionModalContent_featureItem__Dmwke {
  color: #888 !important;
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7.SubscriptionModalContent_selected__vKPLz {
  background: rgba(128, 128, 128, 0.1);
}

.SubscriptionModalContent_planHeader__pf9z4 {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
  padding: 8px 0;
}

.SubscriptionModalContent_planTitle__tTWV5 {
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: #ffffff; /* Changed to white */
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.SubscriptionModalContent_planPrice__fcVTq {
  display: flex;
  align-items: flex-end;
  color: #ffffff; /* Changed to white */
}

.SubscriptionModalContent_priceAmount__A5nqQ {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff; /* Changed to white */
}

.SubscriptionModalContent_priceSuffix__bwMJE {
  font-size: 0.8rem;
  margin-left: 4px;
  color: #cccccc; /* Changed to light gray */
}

/* Action type indicators */
.SubscriptionModalContent_actionTypeIndicator__wT-cv {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.SubscriptionModalContent_upgradeIndicator__f9208 {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.SubscriptionModalContent_downgradeIndicator__CoT8w {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.SubscriptionModalContent_featuresList__b\+k5M {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  width: 100%;
  overflow: visible;
}

.SubscriptionModalContent_featureItem__Dmwke {
  height: 32px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 400;
  font-family: 'Inconsolata', monospace;
  color: #ffffff;
  transition: all 0.3s ease;
  gap: 10px;
  padding: 0 12px;
  position: relative;
}

.SubscriptionModalContent_featureIcon__7dxPK {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: rgba(156, 163, 175, 0.8);
  flex-shrink: 0;
  width: 18px;
}

.SubscriptionModalContent_featureIcon__7dxPK img {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  filter: brightness(0) invert(1);
}

.SubscriptionModalContent_featureText__8YRsW {
  text-align: left;
  flex: 1 1;
}

.SubscriptionModalContent_featureTooltip__GpoRQ {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(75, 85, 99, 0.6);
  border-radius: 8px;
  padding: 10px 14px;
  width: 220px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 12px;
  white-space: normal;
  text-align: left;
}

.SubscriptionModalContent_featureTooltip__GpoRQ::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(75, 85, 99, 0.6);
}

.SubscriptionModalContent_featureTooltip__GpoRQ strong {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
}

.SubscriptionModalContent_featureTooltip__GpoRQ span {
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1.4;
  display: block;
}

.SubscriptionModalContent_featureItem__Dmwke:hover .SubscriptionModalContent_featureTooltip__GpoRQ {
  opacity: 1;
  visibility: visible;
}

/* Position tooltip on the left for the last plan (Premium) */
.SubscriptionModalContent_planColumn__5lefA:last-child .SubscriptionModalContent_featureTooltip__GpoRQ {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 12px;
}

.SubscriptionModalContent_planColumn__5lefA:last-child .SubscriptionModalContent_featureTooltip__GpoRQ::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: rgba(75, 85, 99, 0.6);
}

.SubscriptionModalContent_creditFeature__RFGWG {
  font-weight: 500;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.2),
    rgba(16, 185, 129, 0.1)
  );
  border-radius: 8px;
  margin: 2px 0;
  padding: 4px 12px;
}

.SubscriptionModalContent_creditFeature__RFGWG .SubscriptionModalContent_featureIcon__7dxPK,
.SubscriptionModalContent_creditFeature__RFGWG .SubscriptionModalContent_featureText__8YRsW {
  color: #10b981;
}

/* Status badges */
.SubscriptionModalContent_statusBadge__0ptcd {
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.SubscriptionModalContent_currentBadge__C7r\+v {
  background: #10b981;
  color: #fff;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.SubscriptionModalContent_statusBadge__0ptcd:has-text('Annual Upgrade') {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  animation: SubscriptionModalContent_pulse__6pari 2s infinite;
}

.SubscriptionModalContent_statusBadge__0ptcd:has-text('Switch to Annual') {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

@keyframes SubscriptionModalContent_pulse__6pari {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 2px 16px rgba(139, 92, 246, 0.6);
  }
}

.SubscriptionModalContent_pendingBadge__HUvDq {
  background: #fbbf24;
  color: #fff;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
  animation: SubscriptionModalContent_pulse__6pari 2s infinite;
}

.SubscriptionModalContent_disabledBadge__zk7pC {
  background: #666;
  color: #ccc;
  box-shadow: 0 2px 4px rgba(102, 102, 102, 0.2);
}

@keyframes SubscriptionModalContent_pulse__6pari {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* -------- Cancellation Section -------- */
.SubscriptionModalContent_cancellationSection__TolgC {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #444;
}

.SubscriptionModalContent_cancellationCard__-GDUY {
  background: rgba(128, 128, 128, 0.1);
  border: 2px solid #666;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.SubscriptionModalContent_cancellationTitle__udphW {
  color: #ffffff;
  font-size: 1.2rem;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.SubscriptionModalContent_cancellationText__ynCp8 {
  color: #cccccc;
  font-size: 0.95rem;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.SubscriptionModalContent_cancellationButton__ht3nV {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.SubscriptionModalContent_cancellationButton__ht3nV:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* -------- Billing Toggle -------- */
.SubscriptionModalContent_billingToggleContainer__Wp0wW {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.SubscriptionModalContent_billingToggle__DUCY5 {
  display: flex;
  background: rgba(17, 24, 39, 0.6);
  border-radius: 8px;
  /* padding: 4px; */
  border: 1px solid rgba(75, 85, 99, 0.4);
  width: 100%;
  gap: 0;
}

.SubscriptionModalContent_billingOption__2T9Ej {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.SubscriptionModalContent_billingOption__2T9Ej.SubscriptionModalContent_active__x9cqb {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.SubscriptionModalContent_billingOption__2T9Ej:hover:not(.SubscriptionModalContent_active__x9cqb):not(.SubscriptionModalContent_disabled__JtFF8) {
  background: #444;
  color: #fff;
}

.SubscriptionModalContent_billingOption__2T9Ej.SubscriptionModalContent_disabled__JtFF8 {
  opacity: 0.5;
  cursor: not-allowed;
  background: #2a2a2a !important;
  color: #666 !important;
}

.SubscriptionModalContent_billingOption__2T9Ej.SubscriptionModalContent_disabled__JtFF8:hover {
  background: #2a2a2a !important;
  color: #666 !important;
}

.SubscriptionModalContent_crossedOut__1YiJq {
  text-decoration: line-through;
  -webkit-text-decoration-color: #ef4444;
          text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
}

.SubscriptionModalContent_billingNotice__yyHwM {
  color: #fcd34d;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
}

.SubscriptionModalContent_savingsTag__pG7wd {
  font-size: 0.65rem;
  background: #10b981;
  color: white;
  padding: 3px 6px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

/* -------- Savings Badge -------- */
.SubscriptionModalContent_savingsBadge__IBdDj {
  font-size: 0.75rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  margin-top: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* -------- Footer -------- */
.SubscriptionModalContent_footerActions__L3\+1V {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
}

/* Bottom section with renewal and buttons */
.SubscriptionModalContent_bottomSection__iRda6 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.SubscriptionModalContent_renewalInline__zJEs4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
}

.SubscriptionModalContent_buttonGroup__HbZyo {
  display: flex;
  gap: 12px;
}

.SubscriptionModalContent_noticesContainer__1P9EU {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.SubscriptionModalContent_nonRefundableNotice__e0zaA {
  color: #fca5a5;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
}

.SubscriptionModalContent_nonRefundableNotice__e0zaA small {
  display: flex;
  align-items: center;
  gap: 4px;
}

.SubscriptionModalContent_cancelButton__GxD3K,
.SubscriptionModalContent_confirmButton__ZhCfK {
  flex: 1 1;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.SubscriptionModalContent_cancelButton__GxD3K {
  background: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
  border: 1px solid rgba(75, 85, 99, 0.8);
}

.SubscriptionModalContent_cancelButton__GxD3K:hover {
  background: rgba(75, 85, 99, 0.8);
  border-color: rgba(107, 114, 128, 1);
}

.SubscriptionModalContent_confirmButton__ZhCfK {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.SubscriptionModalContent_confirmButton__ZhCfK:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
}

.SubscriptionModalContent_confirmButton__ZhCfK:disabled {
  background: rgba(75, 85, 99, 0.5);
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
}

/* -------- Animated Gradient -------- */
@keyframes SubscriptionModalContent_animated-gradient__qJlnM {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.SubscriptionModalContent_highlight__y4flz .SubscriptionModalContent_planTitle__tTWV5,
.SubscriptionModalContent_premium__dkAMD .SubscriptionModalContent_planTitle__tTWV5 {
  background-size: 200% 200%;
  animation: SubscriptionModalContent_animated-gradient__qJlnM 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.SubscriptionModalContent_highlight__y4flz .SubscriptionModalContent_planTitle__tTWV5 {
  background-image: linear-gradient(
    45deg,
    #dc143c,
    #adff2f,
    #40e0d0,
    #32cd32,
    #40e0d0,
    #adff2f,
    #dc143c
  );
}

.SubscriptionModalContent_premium__dkAMD .SubscriptionModalContent_planTitle__tTWV5 {
  background-image: linear-gradient(
    45deg,
    #ffd700,
    #ff4500,
    #ff1493,
    #ff4500,
    #ffd700
  );
}

/* Override gradient for current plan titles */
.SubscriptionModalContent_currentPlan__YANz4.SubscriptionModalContent_highlight__y4flz .SubscriptionModalContent_planTitle__tTWV5,
.SubscriptionModalContent_currentPlan__YANz4.SubscriptionModalContent_premium__dkAMD .SubscriptionModalContent_planTitle__tTWV5 {
  background-image: linear-gradient(
    45deg,
    #10b981,
    #059669,
    #047857,
    #059669,
    #10b981
  );
}

/* Override gradient for pending plan titles */
.SubscriptionModalContent_pendingPlan__TKVKF.SubscriptionModalContent_highlight__y4flz .SubscriptionModalContent_planTitle__tTWV5,
.SubscriptionModalContent_pendingPlan__TKVKF.SubscriptionModalContent_premium__dkAMD .SubscriptionModalContent_planTitle__tTWV5 {
  background-image: linear-gradient(
    45deg,
    #fbbf24,
    #f59e0b,
    #d97706,
    #f59e0b,
    #fbbf24
  );
}

/* Responsive design - handled by Modal3's mobile styles */
@media (max-width: 768px) {
  .SubscriptionModalContent_leftPanel__umqW8 {
    gap: 16px;
  }

  .SubscriptionModalContent_mainTitle__5upii {
    font-size: 1.5rem;
  }

  .SubscriptionModalContent_billingToggle__DUCY5 {
    flex-direction: column;
    width: 100%;
  }

  .SubscriptionModalContent_billingOption__2T9Ej {
    text-align: center;
    padding: 12px;
  }

  .SubscriptionModalContent_plansContainer__sARcm {
    flex-direction: column;
  }

  .SubscriptionModalContent_planColumn__5lefA {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-width: initial;
  }

  .SubscriptionModalContent_planHeader__pf9z4 {
    min-height: 120px;
  }

  .SubscriptionModalContent_buttonGroup__HbZyo {
    width: 100%;
  }

  .SubscriptionModalContent_renewalDateInfo__4stGl {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .SubscriptionModalContent_renewalDate__574FZ {
    margin-left: 0;
  }
}

.SubscriptionModalContent_toggleContainer__Ohsot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #ccc;
  font-size: 0.8rem;
}

.SubscriptionModalContent_toggleSwitch__MVfjC {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.SubscriptionModalContent_toggleSwitch__MVfjC input {
  opacity: 0;
  width: 0;
  height: 0;
}

.SubscriptionModalContent_slider__bv1vb {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4d4d4d;
  transition: 0.4s;
  border-radius: 20px;
}

.SubscriptionModalContent_slider__bv1vb:before {
  position: absolute;
  content: '';
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .SubscriptionModalContent_slider__bv1vb {
  background-color: #8b5cf6; /* Highlight color */
}

input:focus + .SubscriptionModalContent_slider__bv1vb {
  box-shadow: 0 0 1px #8b5cf6;
}

input:checked + .SubscriptionModalContent_slider__bv1vb:before {
  transform: translateX(14px);
}

/* Feature Strikethrough */
.SubscriptionModalContent_strikethrough__XSebe {
  text-decoration: line-through;
  -webkit-text-decoration-color: #ef4444;
          text-decoration-color: #ef4444; /* red-500 */
  text-decoration-thickness: 2px;
  opacity: 0.6;
}

/* Credits Modal Content Styles */
.CreditModalContent_modalContainer__XtRt8 {
  border-radius: 32px;
  padding: 24px;
  max-width: 90vw;
  max-height: 85vh;
  width: 900px;
  margin: auto;
  font-family: 'Inconsolata', monospace;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.CreditModalContent_mainTitle__qI36J {
  text-align: center;
  font-size: 1.8rem;
  margin: 0;
  color: #ffffff;
}

.CreditModalContent_subTitle__NXIhm {
  text-align: center;
  font-size: 1rem;
  color: #828282;
  margin: 0 0 16px;
}

.CreditModalContent_coinIcon__E1WXd {
  width: 30px;
  height: 30px;
}

/* Black tint for light backgrounds */
.CreditModalContent_darkTint__ggpXS {
  filter: brightness(0) invert(0);
  opacity: 0.6;
}

/* White tint for dark modal backgrounds */
.CreditModalContent_lightTint__i9NG5 {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.CreditModalContent_contentWrapper__OIceC {
  display: flex;
  gap: 16px;
}

/* -------- Labels Column -------- */
.CreditModalContent_featureLabelsColumn__h37If {
  display: flex;
  flex-direction: column;
  width: 100px;
  flex-shrink: 0;
  margin-top: 25px;
}

.CreditModalContent_labelSpacerTop__NoAnF {
  height: 100px;
}

.CreditModalContent_labelSpacerBottom__uZSsL {
  flex-grow: 1;
}

.CreditModalContent_featureLabel__\+8Wte {
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #7d7d7d;
  padding-left: 8px;
}

/* -------- Plans -------- */
.CreditModalContent_plansContainer__bY073 {
  display: flex;
  gap: 16px;
  flex-grow: 1;
  min-height: 50vh;
}

.CreditModalContent_planColumn__5UWxY {
  flex: 1 1;
  border: 2px solid #000;
  border-radius: 40px;
  width: 28.5%;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  position: relative;
}

.CreditModalContent_planColumn__5UWxY:hover {
  transform: translateY(-4px);
}

.CreditModalContent_planColumn__5UWxY.CreditModalContent_selected__FTIyZ {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border-color: #333;
  border-width: 3px;
  background: rgba(0, 0, 0, 0.02);
  transform: translateY(-6px) scale(1.02);
}

.CreditModalContent_planColumn__5UWxY.CreditModalContent_highlight__bb76B {
  /* Credits glow - golden theme */
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

.CreditModalContent_planColumn__5UWxY.CreditModalContent_highlight__bb76B.CreditModalContent_selected__FTIyZ {
  /* Enhanced selection for credit packs */
  box-shadow:
    0 8px 30px rgba(245, 158, 11, 0.6),
    0 0 20px rgba(245, 158, 11, 0.4);
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.CreditModalContent_planHeader__ZZWtZ {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.CreditModalContent_planTitle__dJU7G {
  font-size: 1.3rem;
  margin: 0 0 4px;
  color: #ffffff; /* Changed to white */
}

.CreditModalContent_planPrice__WxdeD {
  display: flex;
  align-items: flex-end;
  color: #ffffff; /* Changed to white */
}

.CreditModalContent_priceAmount__WRgdw {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff; /* Changed to white */
}

.CreditModalContent_priceSuffix__7C5-C {
  font-size: 0.8rem;
  margin-left: 4px;
  color: #cccccc; /* Changed to light gray */
}

.CreditModalContent_featuresList__7wOjT {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  width: 100%;
}

.CreditModalContent_featureItem__OHZx6 {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: #ffffff; /* Changed to white */
}

.CreditModalContent_bestValueBadge__qmnUb {
  margin-top: 8px;
  margin-bottom: 20px;
  padding: 4px 12px;
  background: #f59e0b;
  color: #fff;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.CreditModalContent_headerContainer__aPI7M {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* -------- Footer -------- */
.CreditModalContent_footerActions__XmnRQ {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.CreditModalContent_cancelButton__Mu\+a1,
.CreditModalContent_confirmButton__U\+Cuf {
  flex: 1 1;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.CreditModalContent_cancelButton__Mu\+a1 {
  background: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
  border: 1px solid rgba(75, 85, 99, 0.8);
}

.CreditModalContent_cancelButton__Mu\+a1:hover {
  background: rgba(75, 85, 99, 0.8);
  border-color: rgba(107, 114, 128, 1);
}

.CreditModalContent_confirmButton__U\+Cuf {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.CreditModalContent_confirmButton__U\+Cuf:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
}

.CreditModalContent_confirmButton__U\+Cuf:disabled {
  background: rgba(75, 85, 99, 0.5);
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
}

/* -------- Animated Gradient for Credits -------- */
@keyframes CreditModalContent_animated-gradient__B1gHu {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.CreditModalContent_highlight__bb76B .CreditModalContent_planTitle__dJU7G {
  background-size: 200% 200%;
  animation: CreditModalContent_animated-gradient__B1gHu 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(
    45deg,
    #f59e0b,
    #eab308,
    #facc15,
    #fde047,
    #facc15,
    #eab308,
    #f59e0b
  );
}

/* Responsive design */
@media (max-width: 768px) {
  .CreditModalContent_modalContainer__XtRt8 {
    width: 95vw;
    padding: 16px;
  }

  .CreditModalContent_contentWrapper__OIceC {
    flex-direction: column;
  }

  .CreditModalContent_featureLabelsColumn__h37If {
    display: none;
  }

  .CreditModalContent_plansContainer__bY073 {
    flex-direction: column;
  }

  .CreditModalContent_planColumn__5UWxY {
    width: 100%;
  }
}

/* TutorialOverlay.module.css */

/* Main overlay that covers the entire screen */
.TutorialOverlay_overlay__OJ\+Bl {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Blurred areas - now using SVG mask for perfect alignment */
.TutorialOverlay_blurredArea__TaAWp {
  pointer-events: none;
}

.TutorialOverlay_overlayContent__5RcbX {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Highlighted element border - enhanced for clip-path approach */
.TutorialOverlay_highlight__2S-w5 {
  position: absolute;
  border: 3px solid #3b82f6;
  border-radius: 16px;
  background: transparent;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.4),
    0 0 0 6px rgba(59, 130, 246, 0.2),
    0 0 20px rgba(59, 130, 246, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: TutorialOverlay_highlightPulse__QGClD 2s infinite;
  pointer-events: none;
  z-index: 10000;
  box-sizing: border-box;
}

/* Inner glow effect to enhance the cutout visibility */
.TutorialOverlay_innerGlow__E\+uMW {
  pointer-events: none;
}

@keyframes TutorialOverlay_highlightPulse__QGClD {
  0%,
  100% {
    border-color: #3b82f6;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.4),
      0 0 0 6px rgba(59, 130, 246, 0.2),
      0 0 20px rgba(59, 130, 246, 0.6),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  50% {
    border-color: #2563eb;
    box-shadow:
      0 0 0 5px rgba(59, 130, 246, 0.5),
      0 0 0 10px rgba(59, 130, 246, 0.3),
      0 0 30px rgba(59, 130, 246, 0.8),
      inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  }
}

/* Canvas highlight for when showing main workspace */
.TutorialOverlay_canvasHighlight__4Ppz0 {
  position: absolute;
  top: 80px;
  left: 10px;
  right: 10px;
  bottom: 100px;
  border: 3px dashed #3b82f6;
  border-radius: 12px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: TutorialOverlay_dashPulse__H0JiA 2s infinite;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.3),
    0 0 20px rgba(59, 130, 246, 0.4);
  z-index: 10000;
}

.TutorialOverlay_canvasLabel__OwD0e {
  background: #3b82f6;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

@keyframes TutorialOverlay_dashPulse__H0JiA {
  0%,
  100% {
    border-color: #3b82f6;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.3),
      0 0 20px rgba(59, 130, 246, 0.4);
  }
  50% {
    border-color: #2563eb;
    box-shadow:
      0 0 0 5px rgba(59, 130, 246, 0.4),
      0 0 30px rgba(59, 130, 246, 0.6);
  }
}

/* Tutorial tooltip */
.TutorialOverlay_tooltip__BaoDF {
  position: fixed;
  background: rgba(17, 24, 39, 0.98);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 180px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.5),
    0 10px 10px -5px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(59, 130, 246, 0.1);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  z-index: 10001;
  pointer-events: all;
  animation: TutorialOverlay_tooltipAppear__R0Ls6 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow-y: auto;
  box-sizing: border-box;
}

.TutorialOverlay_tooltipCentered__aDIZ0 {
  animation: TutorialOverlay_tooltipAppearCenter__KvZQ5 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes TutorialOverlay_tooltipAppear__R0Ls6 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes TutorialOverlay_tooltipAppearCenter__KvZQ5 {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.TutorialOverlay_tooltipHeader__1CLEY {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.TutorialOverlay_stepInfo__ihgCS {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inconsolata', monospace;
  color: #9ca3af;
  font-size: 0.85rem;
}

.TutorialOverlay_stepNumber__CLmk3 {
  background: #3b82f6;
  color: #ffffff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
}

.TutorialOverlay_stepTotal__-5mKV {
  color: #6b7280;
}

.TutorialOverlay_skipButton__oRywu {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.TutorialOverlay_skipButton__oRywu:hover {
  color: #e5e7eb;
  background: rgba(107, 114, 128, 0.1);
}

.TutorialOverlay_progressBar__U5N2P {
  width: 100%;
  height: 3px;
  background: #374151;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.TutorialOverlay_progressFill__etI6D {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.TutorialOverlay_tooltipContent__\+cKWO {
  margin-bottom: 20px;
}

.TutorialOverlay_stepTitle__VrEmq {
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.TutorialOverlay_stepDescription__PTi31 {
  color: #d1d5db;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.TutorialOverlay_copyButton__1VYxw {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.TutorialOverlay_copyButton__1VYxw:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.TutorialOverlay_copyButton__1VYxw:active {
  transform: translateY(0);
}

.TutorialOverlay_interactionStatus__h0Zv2 {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  color: #f59e0b;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.TutorialOverlay_interactionStatus__h0Zv2.TutorialOverlay_completed__M1gjr {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.TutorialOverlay_tooltipFooter__gQc37 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.TutorialOverlay_navButton__t\+Tmx,
.TutorialOverlay_completeButton__w4NYu {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: #374151;
  color: #e5e7eb;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.TutorialOverlay_navButton__t\+Tmx:hover:not(:disabled) {
  background: #4b5563;
}

.TutorialOverlay_navButton__t\+Tmx:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.TutorialOverlay_completeButton__w4NYu {
  background: #3b82f6;
  color: #ffffff;
  flex: 1 1;
}

.TutorialOverlay_completeButton__w4NYu:hover {
  background: #2563eb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .TutorialOverlay_tooltip__BaoDF {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    left: 20px !important;
    right: auto !important;
  }

  .TutorialOverlay_stepTitle__VrEmq {
    font-size: 1.1rem;
  }

  .TutorialOverlay_stepDescription__PTi31 {
    font-size: 0.9rem;
  }

  .TutorialOverlay_tooltipFooter__gQc37 {
    flex-direction: column;
    gap: 8px;
  }

  .TutorialOverlay_navButton__t\+Tmx,
  .TutorialOverlay_completeButton__w4NYu {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .TutorialOverlay_tooltip__BaoDF {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    left: 15px !important;
    padding: 16px;
  }

  .TutorialOverlay_canvasHighlight__4Ppz0 {
    top: 60px;
    left: 5px;
    right: 5px;
    bottom: 150px; /* More space for sidebar */
  }

  .TutorialOverlay_canvasLabel__OwD0e {
    padding: 8px 16px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .TutorialOverlay_tooltip__BaoDF {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 14px !important;
    left: 10px !important;
    right: auto !important;
  }

  /* Force tooltip to stay above sidebar on small screens */
  .TutorialOverlay_tooltip__BaoDF:not(.TutorialOverlay_tooltipCentered__aDIZ0) {
    max-height: calc(100vh - 200px) !important;
  }
}

/* High z-index to ensure it's above everything */
.TutorialOverlay_overlay__OJ\+Bl,
.TutorialOverlay_tooltip__BaoDF {
  z-index: 999999;
}

/* Ensure demo node is visible above everything */
.TutorialOverlay_demoNode__wDv4z {
  z-index: 1000000;
}

/* FallbackModal.module.css */
.FallbackModal_fallbackContent__zjUyn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  max-width: 500px;
  min-height: 200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.FallbackModal_hasTicket__5NXNe {
  position: relative;
}

.FallbackModal_sparkle__9jVQF {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0;
  animation: FallbackModal_sparkleFloat__WCNei 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes FallbackModal_sparkleFloat__WCNei {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  15% {
    opacity: 0.5;
    transform: translateY(-20px) scale(1) rotate(180deg);
  }
  30% {
    opacity: 0.5;
    transform: translateY(-40px) scale(0.8) rotate(360deg);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-60px) scale(0.6) rotate(540deg);
  }
  75% {
    opacity: 0.15;
    transform: translateY(-80px) scale(0.4) rotate(720deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.2) rotate(900deg);
  }
}

.FallbackModal_iconContainer__ZsQrL {
  margin-bottom: 1.5rem;
}

.FallbackModal_successIcon__Xp5Jt {
  font-size: 4rem;
  color: #10b981;
  animation: FallbackModal_successPulse__hoE4j 0.6s ease-in-out;
}

.FallbackModal_errorIcon__dDmaP {
  font-size: 4rem;
  color: #ef4444;
  animation: FallbackModal_errorShake__yTJHd 0.6s ease-in-out;
}

.FallbackModal_infoIcon__lD\+QA {
  font-size: 4rem;
  color: #3b82f6;
  animation: FallbackModal_infoBounce__p3KkO 0.6s ease-in-out;
}

@keyframes FallbackModal_successPulse__hoE4j {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes FallbackModal_errorShake__yTJHd {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes FallbackModal_infoBounce__p3KkO {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.FallbackModal_textContent__24HJi {
  margin-bottom: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.FallbackModal_title__1lY\+b {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.FallbackModal_message__h1uch {
  font-size: 1rem;
  color: var(--text-color-secondary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.FallbackModal_ticketHighlight__oW4Vn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1f2937;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  animation: FallbackModal_ticketGlow__RpA9k 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.FallbackModal_ticketIconInline__6TWub {
  width: 32px;
  height: 32px;
  filter: invert(12%) sepia(10%) saturate(1247%) hue-rotate(183deg)
    brightness(97%) contrast(91%);
  animation: FallbackModal_ticketIconPulse__EACef 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes FallbackModal_ticketIconPulse__EACef {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
}

@keyframes FallbackModal_ticketGlow__RpA9k {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  }
  50% {
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5);
  }
}

.FallbackModal_details__GBf6G {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--card-background);
  border-radius: 0.5rem;
  border-left: 4px solid var(--accent-color);
}

.FallbackModal_details__GBf6G p {
  font-size: 0.875rem;
  color: var(--text-color-secondary);
  margin: 0;
  text-align: left;
}

.FallbackModal_countdown__DVI9M {
  font-size: 0.875rem;
  color: var(--text-color-muted);
  margin-top: 1rem;
  font-style: italic;
}

.FallbackModal_actions__xPQ2s {
  display: flex;
  gap: 1rem;
  justify-content: center;
  width: 100%;
}

.FallbackModal_retryButton__H3kqM {
  padding: 0.75rem 1.5rem;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.FallbackModal_retryButton__H3kqM:hover {
  background-color: var(--accent-color-hover);
  transform: translateY(-1px);
}

.FallbackModal_closeButton__tkkYl {
  padding: 0.75rem 1.5rem;
  background-color: var(--button-secondary-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.FallbackModal_closeButton__tkkYl:hover {
  background-color: var(--button-secondary-hover);
  transform: translateY(-1px);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .FallbackModal_details__GBf6G {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-color);
  }
}

/* Force dark theme styling */
.FallbackModal_forceDarkTheme__yLIIu {
  --canvas-bg: #15161b;
  /* --node-bg: #374151; cool-gray-700 */
  --node-border: #4b5563; /* cool-gray-600 */
  --node-border-selected: #60a5fa; /* blue-400 */
  --node-text: #f9fafb; /* cool-gray-50 */
  --node-text-rgb: 249, 250, 251;
  --node-label-text: #d1d5db; /* cool-gray-300 */
  --node-icon-bg: #4b5563; /* cool-gray-600 */
  --node-icon-color: #f9fafb; /* cool-gray-50 */
  --node-button-bg: #60a5fa; /* blue-400 */
  --node-button-bg-hover: #3b82f6; /* blue-500 */
  --node-button-text: #1f2937; /* cool-gray-800 */
  --node-textarea-bg: #4b5563; /* cool-gray-600 */
  --node-textarea-border: #6b7280; /* cool-gray-500 */
  --node-textarea-text: var(--node-text);
  --node-connected-data-bg: #4b5563; /* cool-gray-600 */
  --node-loading-text: #9ca3af; /* cool-gray-400 */
  --node-error-text: #f87171; /* red-400 */
  --handle-bg: #6b7280; /* cool-gray-500 */
  --handle-border: #4b5563; /* cool-gray-600 */
  --sidebar-bg: #374151;

  /* Override CSS variables to use dark theme values */
  --text-color: var(--node-text);
  --text-color-secondary: var(--node-label-text);
  --text-color-muted: var(--node-loading-text);
  --card-background: var(--node-bg);
  --accent-color: var(--node-button-bg);
  --accent-color-hover: var(--node-button-bg-hover);
  --button-secondary-background: var(--node-icon-bg);
  --button-secondary-hover: var(--node-border);
  --border-color: var(--node-border);

  /* background-color: var(--node-bg); */
  color: var(--node-text);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .FallbackModal_fallbackContent__zjUyn {
    padding: 1.5rem 1rem;
  }

  .FallbackModal_successIcon__Xp5Jt,
  .FallbackModal_errorIcon__dDmaP,
  .FallbackModal_infoIcon__lD\+QA {
    font-size: 3rem;
  }

  .FallbackModal_title__1lY\+b {
    font-size: 1.25rem;
  }

  .FallbackModal_actions__xPQ2s {
    flex-direction: column;
    gap: 0.75rem;
  }

  .FallbackModal_retryButton__H3kqM,
  .FallbackModal_closeButton__tkkYl {
    width: 100%;
  }
}

/* LoginModal.module.css */

/* Left Panel - Logo and Welcome */
.LoginModal_leftContent__Bx9yp {
  color: #e5e7eb;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-right: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.LoginModal_logoSection__tsUTl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.LoginModal_logo__eQZde {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.LoginModal_welcomeSection__0Kb\+M h3 {
  margin: 0 0 15px 0;
  color: #e5e7eb;
  font-size: 1.8rem;
  font-weight: 700;
}

.LoginModal_welcomeSection__0Kb\+M p {
  color: #9ca3af;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* Right Panel - Login Form */
.LoginModal_rightContent__aLFOU {
  color: #e5e7eb;
  height: 100%;
  padding-left: 10px;
}

.LoginModal_rightContent__aLFOU h2 {
  margin: 0 0 25px 0;
  color: #e5e7eb;
  font-size: 1.8rem;
  text-align: center;
  border-bottom: 2px solid #374151;
  padding-bottom: 15px;
}

.LoginModal_errorMessage__2zJ7F {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #dc2626;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.LoginModal_successMessage__XHsxF {
  color: #10b981;
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid #10b981;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.4;
}

.LoginModal_loginForm__URlAT {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.LoginModal_inputGroup__ECTaw {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.LoginModal_inputGroup__ECTaw label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
}

.LoginModal_inputGroup__ECTaw input {
  padding: 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  background-color: #374151;
  color: #e5e7eb;
  font-size: 1rem;
  font-family: 'Inconsolata', monospace;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.LoginModal_inputGroup__ECTaw input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.LoginModal_inputGroup__ECTaw input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.LoginModal_loginButton__MJ\+EK {
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background-color: #3b82f6;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 15px;
}

.LoginModal_loginButton__MJ\+EK:hover:not(:disabled) {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.LoginModal_loginButton__MJ\+EK:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.LoginModal_googleButton__Sgilv {
  background-color: #4285f4;
  color: white;
}

.LoginModal_googleButton__Sgilv:hover:not(:disabled) {
  background-color: #357ae8;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
}

.LoginModal_googleIcon__YYPKx {
  font-size: 1.2rem;
}

.LoginModal_divider__CFFX3 {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
  margin: 20px 0;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.LoginModal_divider__CFFX3::before,
.LoginModal_divider__CFFX3::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #4b5563;
}

.LoginModal_divider__CFFX3:not(:empty)::before {
  margin-right: 0.25em;
}

.LoginModal_divider__CFFX3:not(:empty)::after {
  margin-left: 0.25em;
}

.LoginModal_buttonGroup__lczV1 {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.LoginModal_buttonGroup__lczV1 .LoginModal_loginButton__MJ\+EK {
  flex: 1 1;
  margin-bottom: 0;
}

.LoginModal_signUpButton__tc7WX {
  background-color: transparent;
  border: 2px solid #6b7280;
  color: #6b7280;
}

.LoginModal_signUpButton__tc7WX:hover:not(:disabled) {
  border-color: #4b5563;
  color: #4b5563;
  background-color: rgba(107, 114, 128, 0.1);
  box-shadow: none;
}

.LoginModal_forgotPasswordLink__d2V0X {
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  text-decoration: underline;
  margin-top: 6px;
  text-align: left;
  padding: 0;
  transition: color 0.2s ease;
}

.LoginModal_forgotPasswordLink__d2V0X:hover:not(:disabled) {
  color: #2563eb;
}

.LoginModal_forgotPasswordLink__d2V0X:disabled {
  color: #6b7280;
  cursor: not-allowed;
  text-decoration: none;
}

/* EmailVerificationModal.module.css */

/* Left Panel - Logo and Welcome Text */
.EmailVerificationModal_leftContent__NjZo9 {
  color: #e5e7eb;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-right: 10px;
}

.EmailVerificationModal_logoSection__E0B9r {
  text-align: center;
  margin-bottom: 30px;
}

.EmailVerificationModal_logo__qEaLM {
  height: 80px;
  width: auto;
}

.EmailVerificationModal_welcomeSection__J-C4o {
  text-align: center;
}

.EmailVerificationModal_welcomeSection__J-C4o h3 {
  margin: 0 0 20px 0;
  color: #3b82f6;
  font-size: 1.4rem;
  border-bottom: 2px solid #374151;
  padding-bottom: 15px;
}

.EmailVerificationModal_welcomeSection__J-C4o p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #d1d5db;
  font-size: 1rem;
}

.EmailVerificationModal_welcomeSection__J-C4o strong {
  color: #3b82f6;
  font-weight: 600;
}

/* Right Panel - Verification Status and Actions */
.EmailVerificationModal_rightContent__\+GJGo {
  color: #e5e7eb;
  height: 100%;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.EmailVerificationModal_rightContent__\+GJGo h2 {
  margin: 0 0 30px 0;
  color: #e5e7eb;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 2px solid #374151;
  padding-bottom: 15px;
}

/* Verification Status Styles */
.EmailVerificationModal_verificationStatus__DM-zb {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.EmailVerificationModal_checkingIndicator__lLjw0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #3b82f6;
  font-weight: 500;
}

.EmailVerificationModal_spinner__x3YAu {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: EmailVerificationModal_spin__CICn7 1s linear infinite;
}

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

/* Verification Note */
.EmailVerificationModal_verificationNote__XqDKY {
  background-color: rgba(59, 130, 246, 0.05);
  border-left: 3px solid #3b82f6;
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
}

.EmailVerificationModal_verificationNote__XqDKY p {
  margin: 0;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.6;
}

.EmailVerificationModal_verificationNote__XqDKY strong {
  color: #3b82f6;
  font-weight: 600;
}

/* Action Buttons */
.EmailVerificationModal_verificationActions__azv3x {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 30px 0 20px 0;
}

.EmailVerificationModal_checkButton__mdgEr {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
}

.EmailVerificationModal_checkButton__mdgEr:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
}

.EmailVerificationModal_resendButton__F\+EZM {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
}

.EmailVerificationModal_resendButton__F\+EZM:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
}

.EmailVerificationModal_resendButton__F\+EZM:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Account Actions */
.EmailVerificationModal_accountActions__Jlzhd {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #374151;
}

.EmailVerificationModal_logoutButton__Neybw {
  background: transparent;
  color: #6b7280;
  border: 2px solid #4b5563;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
}

.EmailVerificationModal_logoutButton__Neybw:hover {
  color: #e5e7eb;
  border-color: #6b7280;
  transform: translateY(-1px);
}

.EmailVerificationModal_deleteButton__vToQ5 {
  background: transparent;
  color: #dc2626;
  border: 2px solid #dc2626;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
}

.EmailVerificationModal_deleteButton__vToQ5:hover:not(:disabled) {
  background-color: rgba(220, 38, 38, 0.1);
  transform: translateY(-1px);
}

.EmailVerificationModal_deleteButton__vToQ5:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Error Message */
.EmailVerificationModal_errorMessage__J3WkI {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #dc2626;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 20px;
  line-height: 1.4;
}

/* SignUpModal.module.css */

/* Left Panel - Avatar Selection */
.SignUpModal_leftContent__1\+KWY {
  color: #e5e7eb;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 10px;
}

.SignUpModal_leftContent__1\+KWY h3 {
  margin: 0 0 15px 0;
  color: #e5e7eb;
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 2px solid #374151;
  padding-bottom: 10px;
}

.SignUpModal_avatarGrid__C0NmI {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 5px;
}

.SignUpModal_avatarGrid__C0NmI::-webkit-scrollbar {
  width: 6px;
}

.SignUpModal_avatarGrid__C0NmI::-webkit-scrollbar-track {
  background: transparent;
}

.SignUpModal_avatarGrid__C0NmI::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 10px;
}

.SignUpModal_avatarOption__c\+xH2 {
  border: 2px solid #374151;
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.SignUpModal_avatarOption__c\+xH2:hover {
  border-color: #60a5fa;
  transform: scale(1.05);
  background-color: #374151;
}

.SignUpModal_avatarSelected__ntAk- {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.SignUpModal_avatarImage__g5PSz {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.SignUpModal_selectedAvatarPreview__aMgqp {
  border-top: 1px solid #374151;
  padding-top: 15px;
  text-align: center;
}

.SignUpModal_selectedAvatarPreview__aMgqp h4 {
  margin: 0 0 10px 0;
  color: #e5e7eb;
  font-size: 1rem;
}

.SignUpModal_previewAvatar__NUA1b {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.SignUpModal_previewAvatarImage__hQfvO {
  width: 60px;
  height: 60px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  padding: 5px;
  background-color: rgba(59, 130, 246, 0.1);
}

/* Right Panel - Sign Up Form */
.SignUpModal_rightContent__qK2m1 {
  color: #e5e7eb;
  height: 100%;
  padding-left: 10px;
}

.SignUpModal_rightContent__qK2m1 h2 {
  margin: 0 0 20px 0;
  color: #e5e7eb;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 2px solid #374151;
  padding-bottom: 15px;
}

.SignUpModal_errorMessage__t3DxQ {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #dc2626;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.SignUpModal_signUpForm__ttng- {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.SignUpModal_nameRow__1Ex4z {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
}

.SignUpModal_passwordRow__soHyJ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
}

.SignUpModal_inputGroup__Rvw82 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.SignUpModal_inputGroup__Rvw82 label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
}

.SignUpModal_inputGroup__Rvw82 input {
  padding: 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  background-color: #374151;
  color: #e5e7eb;
  font-size: 1rem;
  font-family: 'Inconsolata', monospace;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.SignUpModal_nameInput__McNed {
  width: 90% !important;
}

.SignUpModal_passwordInputWrapper__GaPLS {
  position: relative;
  width: 100%;
}

.SignUpModal_passwordInput__sBPiT {
  padding-right: 40px !important;
  width: 80% !important;
}

.SignUpModal_togglePasswordButton__flmDV {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.SignUpModal_togglePasswordButton__flmDV:hover {
  color: #e5e7eb;
}

.SignUpModal_togglePasswordButton__flmDV:focus {
  outline: none;
}

.SignUpModal_inputGroup__Rvw82 input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.SignUpModal_inputGroup__Rvw82 input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.SignUpModal_signUpButton__kRhQU {
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background-color: #3b82f6;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 15px;
}

.SignUpModal_signUpButton__kRhQU:hover:not(:disabled) {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.SignUpModal_signUpButton__kRhQU:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.SignUpModal_buttonContainer__j0-t4 {
  display: flex;
  gap: 15px;
  margin-top: -25px;
  justify-content: space-between;
}

.SignUpModal_cancelButton__hFyvc {
  padding: 14px 20px;
  border: 2px solid #6b7280;
  border-radius: 8px;
  background-color: transparent;
  color: #6b7280;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 15px;
  flex: 1 1;
}

.SignUpModal_cancelButton__hFyvc:hover:not(:disabled) {
  border-color: #4b5563;
  color: #4b5563;
  background-color: rgba(107, 114, 128, 0.1);
  transform: translateY(-1px);
}

.SignUpModal_cancelButton__hFyvc:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.SignUpModal_signUpButton__kRhQU {
  flex: 1 1;
}

/* Date of Birth and Terms Acceptance Styles */
.SignUpModal_ageNote__sIw2b {
  color: #9ca3af;
  font-size: 0.8rem;
  margin-top: 5px;
  display: block;
}

.SignUpModal_checkboxGroup__NWm8t {
  margin: 10px 0;
  padding: 15px;
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.SignUpModal_checkboxLabel__oEhly {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #e5e7eb;
  line-height: 1.5;
}

.SignUpModal_checkbox__jrGOo {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.SignUpModal_checkboxText__lQXMO {
  flex: 1 1;
}

.SignUpModal_linkButton__4nYXc {
  background: none;
  border: none;
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.SignUpModal_linkButton__4nYXc:hover {
  color: #2563eb;
  text-decoration: none;
}

/* src/components/ProfileSetupModal.module.css */

/* Left Panel - Avatar Selection */
.ProfileSetupModal_leftContent__H9mCn {
  color: #e5e7eb;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 10px;
}

.ProfileSetupModal_leftContent__H9mCn h3 {
  margin: 0 0 15px 0;
  color: #e5e7eb;
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 2px solid #374151;
  padding-bottom: 10px;
}

/* Right Panel - Profile Form */
.ProfileSetupModal_rightContent__uxj2q {
  color: #e5e7eb;
  height: 100%;
  padding-left: 10px;
}

.ProfileSetupModal_rightContent__uxj2q h2 {
  margin: 0 0 25px 0;
  color: #e5e7eb;
  font-size: 1.8rem;
  text-align: center;
  border-bottom: 2px solid #374151;
  padding-bottom: 15px;
}

.ProfileSetupModal_nameRow__\+\+8r4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
}

.ProfileSetupModal_nameInput__bmzEn {
  width: 90% !important;
}

.ProfileSetupModal_profileSetupModalContent__ohvn- {
  padding: 25px; /* More padding */
  color: var(--node-text);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 480px;
  margin: auto;
}

.ProfileSetupModal_setupInstructions__95MP8 {
  font-size: 1rem;
  color: var(--node-label-text);
  text-align: center;
  margin-bottom: 10px;
}

.ProfileSetupModal_errorMessage__XBmrK {
  color: #ef4444;
  color: var(--node-error-text, #ef4444);
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border: 1px solid var(--node-error-text, #ef4444);
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

.ProfileSetupModal_profileSetupForm__yMw5- {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ProfileSetupModal_inputGroup__lKeew {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ProfileSetupModal_inputGroup__lKeew label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #4b5563;
  color: var(--node-label-text, #4b5563);
}

.ProfileSetupModal_inputGroup__lKeew input {
  padding: 10px;
  border: 1px solid #d1d5db;
  border: 1px solid var(--node-textarea-border, #d1d5db);
  border-radius: 4px;
  background-color: #f9fafb;
  background-color: var(--node-textarea-bg, #f9fafb);
  color: #1f2937;
  color: var(--node-text, #1f2937);
  font-size: 0.95rem;
}

.ProfileSetupModal_inputGroup__lKeew input:read-only {
  background-color: #e5e7eb;
  background-color: var(
    --node-icon-bg,
    #e5e7eb
  ); /* Different bg for readonly */
  cursor: not-allowed;
  opacity: 0.7;
}

.ProfileSetupModal_inputGroup__lKeew input:focus:not(:read-only) {
  outline: none;
  border-color: #3b82f6;
  border-color: var(--node-border-selected, #3b82f6);
  box-shadow: 0 0 0 1px #3b82f6;
  box-shadow: 0 0 0 1px var(--node-border-selected, #3b82f6);
}

.ProfileSetupModal_setupButton__tmxMA {
  padding: 12px 15px;
  border: none;
  border-radius: 6px;
  background-color: #3b82f6;
  background-color: var(--node-button-bg, #3b82f6);
  color: #ffffff;
  color: var(--node-button-text, #ffffff);
  font-size: 1rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 15px;
}

.ProfileSetupModal_setupButton__tmxMA:hover:not(:disabled) {
  background-color: #2563eb;
  background-color: var(--node-button-bg-hover, #2563eb);
}

.ProfileSetupModal_setupButton__tmxMA:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Avatar Section Styles */
.ProfileSetupModal_avatarSection__TQOdy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 10px 0;
}

.ProfileSetupModal_avatarSection__TQOdy label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #4b5563;
  color: var(--node-label-text, #4b5563);
}

.ProfileSetupModal_avatarGrid__ynr1x {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 8px;
  gap: 8px;
  max-height: 70%;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #d1d5db;
  border: 1px solid var(--node-textarea-border, #d1d5db);
  border-radius: 6px;
  background-color: #f9fafb;
  background-color: var(--node-textarea-bg, #f9fafb);
}

.ProfileSetupModal_avatarGrid__ynr1x::-webkit-scrollbar {
  width: 4px;
}

.ProfileSetupModal_avatarGrid__ynr1x::-webkit-scrollbar-track {
  background: transparent;
}

.ProfileSetupModal_avatarGrid__ynr1x::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  background-color: var(--node-border, #d1d5db);
  border-radius: 10px;
}

.ProfileSetupModal_avatarOption__wGCf8 {
  border: 2px solid #d1d5db;
  border: 2px solid var(--node-textarea-border, #d1d5db);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #ffffff;
  background-color: var(--node-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.ProfileSetupModal_avatarOption__wGCf8:hover {
  border-color: #3b82f6;
  border-color: var(--node-border-selected, #3b82f6);
  transform: scale(1.05);
  background-color: #e5e7eb;
  background-color: var(--node-icon-bg, #e5e7eb);
}

.ProfileSetupModal_avatarSelected__XU9cC {
  border-color: #3b82f6 !important;
  border-color: var(--node-border-selected, #3b82f6) !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.ProfileSetupModal_avatarImage__J2zKg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.ProfileSetupModal_selectedAvatarPreview__c5zvU {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border: 1px solid var(--node-textarea-border, #d1d5db);
  border-radius: 6px;
  background-color: #f9fafb;
  background-color: var(--node-textarea-bg, #f9fafb);
}

.ProfileSetupModal_selectedAvatarPreview__c5zvU span {
  font-size: 0.9rem;
  color: #4b5563;
  color: var(--node-label-text, #4b5563);
  font-weight: 500;
}

.ProfileSetupModal_previewAvatarImage__UCqnL {
  width: 32px;
  height: 32px;
  border: 1px solid #3b82f6;
  border: 1px solid var(--node-border-selected, #3b82f6);
  border-radius: 6px;
  padding: 2px;
  background-color: rgba(59, 130, 246, 0.1);
}

.ProfileSetupModal_ageNote__74dP3 {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 4px;
  font-style: italic;
}

/* Username validation styles */
.ProfileSetupModal_inputValid__u2BwE {
  border-color: #10b981 !important;
}

.ProfileSetupModal_inputInvalid__05z\+k {
  border-color: #ef4444 !important;
}

.ProfileSetupModal_usernameChecking__6o0oR {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 4px;
  display: block;
}

.ProfileSetupModal_usernameSuccess__NzuFQ {
  font-size: 0.8rem;
  color: #10b981;
  margin-top: 4px;
  display: block;
  font-weight: 500;
}

.ProfileSetupModal_usernameError__UHEiq {
  font-size: 0.8rem;
  color: #ef4444;
  margin-top: 4px;
  display: block;
}

.Editor_editorContainer__Ooiru {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: #f8fafc;
  background-color: var(--canvas-bg, #f8fafc);
  color: #1f2937;
  color: var(--node-text, #1f2937);
  font-family: 'Inconsolata', monospace;
  overflow: hidden;
}

.Editor_topSection__MDgp6 {
  display: flex;
  flex-grow: 1;
  min-height: 0;
}

.Editor_videoPreview__kPscZ {
  flex-basis: 60%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
  border-right: 1px solid var(--node-border, #e2e8f0);
}

.Editor_videoWrapper__ZZPC4 {
  flex-grow: 1;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  min-height: 0;
}

.Editor_videoElement__AACtN {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.Editor_noPreview__uYc\+p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  height: 100%;
  color: #6b7280;
  color: var(--node-label-text, #6b7280);
  font-family: 'Inconsolata', monospace;
  -webkit-user-select: none;
          user-select: none;
}

.Editor_noPreview__uYc\+p svg {
  font-size: 4rem;
  color: #cbd5e1;
  color: var(--node-border, #cbd5e1);
  opacity: 0.6;
}

.Editor_noPreview__uYc\+p p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #6b7280;
  color: var(--node-label-text, #6b7280);
}

.Editor_videoControls__EDRDN {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.Editor_videoControls__EDRDN button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--node-border);
  background-color: var(--node-bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  font-family: 'Inconsolata', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Editor_timeDisplay__uyVEu {
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  color: var(--node-label-text);
  background: var(--node-bg);
  padding: 0.5rem;
  border-radius: 4px;
}

.Editor_mediaLibrary__v2KCI {
  flex-basis: 40%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.Editor_libraryTabs__8wpXy {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--node-border);
  margin-bottom: 1rem;
}

.Editor_libraryTabs__8wpXy button {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Inconsolata', monospace;
  color: var(--node-label-text);
  transition:
    color 0.2s,
    border-color 0.2s;
}

.Editor_libraryTabs__8wpXy .Editor_activeTab__lLg6G {
  border-bottom-color: var(--node-border-selected);
  font-weight: bold;
  color: var(--node-text);
}

.Editor_libraryContent__glY0I {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(
    3,
    1fr
  ); /* MODIFIED: 3-column vertically scrolling grid */
  grid-gap: 1rem;
  gap: 1rem;
  overflow-y: auto; /* MODIFIED: Enable vertical scrolling */
  overflow-x: hidden;
  padding: 5px;
}

.Editor_mediaItem__X1XHn {
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: grab;
  display: flex;
  flex-direction: column; /* MODIFIED: Back to vertical card layout */
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  background-color: var(--node-icon-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 170px; /* ADDED: User request for max width */
  height: 140px;
}

/* Themed colors for each card type */
.Editor_mediaItem__X1XHn.Editor_video__Yz-Nw {
  border-color: #6366f180;
}
.Editor_mediaItem__X1XHn.Editor_image__na6DJ {
  border-color: #2dd4bf80;
}
.Editor_mediaItem__X1XHn.Editor_audio__AScBt {
  border-color: #7dd3fc80;
}
.Editor_mediaItem__X1XHn.Editor_music__fChn2 {
  border-color: #c4b5fd80;
}

.Editor_mediaItem__X1XHn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.Editor_mediaItemPreview__saMVm {
  width: 100%;
  aspect-ratio: 16 / 9; /* MODIFIED: Restore aspect ratio */
  background-color: #2d3748;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.Editor_mediaItemPreview__saMVm img,
.Editor_mediaItemPreview__saMVm video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}

.Editor_mediaItemPreview__saMVm.Editor_audio-placeholder__Zr\+cO {
  color: var(--node-icon-color);
  font-size: 2.5rem;
}

/* Colorize the audio placeholder backgrounds */
.Editor_mediaItem__X1XHn.Editor_audio__AScBt .Editor_mediaItemPreview__saMVm.Editor_audio-placeholder__Zr\+cO {
  background-color: #e0f2fe;
}
.Editor_mediaItem__X1XHn.Editor_music__fChn2 .Editor_mediaItemPreview__saMVm.Editor_audio-placeholder__Zr\+cO {
  background-color: #f5f3ff;
}

.Editor_playIconOverlay__Wjv1N {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.Editor_mediaItem__X1XHn:hover .Editor_playIconOverlay__Wjv1N {
  opacity: 1;
}
.Editor_playIconOverlay__Wjv1N.Editor_playing__YnWsx {
  opacity: 1;
}

.Editor_mediaItemInfo__BreM8 {
  padding: 0.5rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  min-height: 30px;
}

.Editor_mediaItemName__0vcqY {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.Editor_mediaItemDuration__W-IcC {
  flex-shrink: 0;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  color: var(--node-label-text);
  background-color: var(--canvas-bg);
  padding: 2px 5px;
  border-radius: 4px;
}

.Editor_dropZone__QDTyy {
  grid-column: 1 / -1;
  flex-grow: 1;
  border: 2px dashed var(--node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  padding: 1rem;
  text-align: center;
  min-height: 200px;
}
.Editor_dropZone__QDTyy svg {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.Editor_timelineSection__9sC-j {
  flex-basis: 300px;
  flex-shrink: 0;
  border-top: 1px solid var(--node-border);
  padding: 0.5rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: ew-resize;
}

.Editor_timelineRuler__bJfUr {
  position: relative;
  height: 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--node-border);
  margin-bottom: 0.5rem;
}

.Editor_rulerMark__O3Wm3 {
  position: absolute;
  bottom: 0;
  font-size: 0.7rem;
  color: var(--node-label-text);
  transform: translateX(-50%);
}
.Editor_rulerMark__O3Wm3::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--node-border);
}

.Editor_playhead__h21xQ {
  position: absolute;
  top: 0;
  bottom: -300px;
  width: 2px;
  background-color: red;
  background-color: var(--node-error-text, red);
  pointer-events: none;
  z-index: 10;
}

.Editor_timelineTrack__qcykp {
  border: 1px solid var(--node-border);
  border-radius: 8px;
  background: var(--node-bg);
  min-height: 60px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  position: relative;
}

.Editor_trackHover__uCOvC {
  background-color: var(--node-icon-bg);
}

.Editor_trackItemsWrapper__JGjIq {
  flex-grow: 1;
  overflow: hidden;
  height: 100%;
}

.Editor_trackItems__8ZkFh {
  display: flex;
  gap: 2px;
  height: 100%;
  align-items: center;
}

.Editor_timelineItem__JcHlw {
  height: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: grab;
  border: 1px solid;
  box-sizing: border-box;
}

.Editor_timelineItem__JcHlw.Editor_video__Yz-Nw {
  background: #a5b4fc;
  border-color: #6366f1;
  color: #3730a3;
}
.Editor_timelineItem__JcHlw.Editor_image__na6DJ {
  background: #99f6e4;
  border-color: #2dd4bf;
  color: #0f766e;
}
.Editor_timelineItem__JcHlw.Editor_audio__AScBt {
  background: #bae6fd;
  border-color: #7dd3fc;
  color: #0c4a6e;
}
.Editor_timelineItem__JcHlw.Editor_music__fChn2 {
  background: #ddd6fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}

.Editor_timelineItemName__nUNdk {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.Editor_timelineTrack__qcykp,
.Editor_timelineRuler__bJfUr {
  flex-shrink: 0;
}

.Editor_centeredMessage__4S4c6 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.2rem;
  color: var(--node-label-text);
}

.Editor_centeredMessageError__E1fsF {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.2rem;
  color: var(--node-error-text);
  padding: 2rem;
  text-align: center;
}

.Editor_videoPreview__kPscZ {
  position: relative;
}

.Editor_downloadButton__pGqgA {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.Editor_downloadButton__pGqgA:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.8);
}

.Editor_downloadButton__pGqgA:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Floating Toolbar */
.Editor_floatingToolbar__nm5-k {
  position: absolute;
  top: 5rem;
  right: 0.7rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 52px;
}

.Editor_floatingToolbar__nm5-k.Editor_expanded__NAsse {
  max-height: 500px;
}

.Editor_floatingToolbar__nm5-k.Editor_collapsed__TM\+XX {
  max-height: 44px;
}

.Editor_toolbarToggle__NGE\+k {
  padding: 0.5rem;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  border: 1px solid var(--node-border);
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}

.Editor_toolbarToggle__NGE\+k:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.Editor_toolbarContent__-JEZI {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.Editor_collapsed__TM\+XX .Editor_toolbarContent__-JEZI {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.Editor_expanded__NAsse .Editor_toolbarContent__-JEZI {
  opacity: 1;
  transform: translateY(0);
}

.Editor_toolButton__abSeM {
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  min-width: 44px;
  min-height: 44px;
}

.Editor_toolButton__abSeM:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.Editor_toolButtonActive__SQL8Y {
  background-color: rgba(59, 130, 246, 0.6);
  border-color: rgba(59, 130, 246, 0.8);
}

.Editor_toolButtonActive__SQL8Y:hover {
  background-color: rgba(59, 130, 246, 0.7);
}

.Editor_renderingOverlay__VTYdA {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.Editor_renderingBox__WoHQl {
  background-color: var(--node-bg);
  padding: 2rem 3rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.Editor_renderingBox__WoHQl h3 {
  margin-top: 0;
  color: var(--node-text);
}

.Editor_progressBar__81pww {
  width: 300px;
  height: 10px;
  background-color: var(--node-border);
  border-radius: 5px;
  overflow: hidden;
  margin: 1rem 0;
}

.Editor_progressFill__TI8rl {
  height: 100%;
  background-color: var(--node-border-selected);
  border-radius: 5px;
  transition: width 0.2s linear;
}

.Editor_renderingBox__WoHQl p {
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
}

/* Image Mode Styles */
.Editor_imagePreviewFull__4qjRj {
  flex-basis: 60%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
  border-right: 1px solid var(--node-border, #e2e8f0);
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* Ruler Styles */
.Editor_previewWithRulers__Y-5dh {
  flex-grow: 1;
  display: flex;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.Editor_verticalRuler__c3EYt {
  width: 30px;
  background-color: #f9fafb;
  background-color: var(--node-bg, #f9fafb);
  border-right: 1px solid #e2e8f0;
  border-right: 1px solid var(--node-border, #e2e8f0);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  z-index: 20;
}

.Editor_horizontalRuler__KddCP {
  height: 30px;
  background-color: #f9fafb;
  background-color: var(--node-bg, #f9fafb);
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--node-border, #e2e8f0);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  /* border-bottom-left-radius: 8px; */
  border-bottom-right-radius: 8px;
  z-index: 20;
}

.Editor_canvasWithHorizontalRuler__PoAKR {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.Editor_rulerMarkVertical__NoeRL {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Editor_rulerMarkHorizontal__mUx6R {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Editor_rulerLabel__VTn0C {
  font-size: 9px;
  color: #6b7280;
  color: var(--node-label-text, #6b7280);
  font-family: 'Inconsolata', monospace;
  background-color: #f9fafb;
  background-color: var(--node-bg, #f9fafb);
  padding: 1px 2px;
  white-space: nowrap;
}

.Editor_rulerTick__bleGI {
  width: 8px;
  height: 1px;
  background-color: #e2e8f0;
  background-color: var(--node-border, #e2e8f0);
  flex-shrink: 0;
}

.Editor_rulerMarkVertical__NoeRL .Editor_rulerTick__bleGI {
  width: 8px;
  height: 1px;
}

.Editor_rulerMarkHorizontal__mUx6R .Editor_rulerTick__bleGI {
  width: 1px;
  height: 8px;
}

.Editor_imageWrapperFull__pO4eF {
  flex-grow: 1;
  background-color: #000;
  border-top-right-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: visible;
  -webkit-user-select: none;
          user-select: none;
}

.Editor_sidePanel__REsnW {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.Editor_sidePanel__REsnW .Editor_mediaLibrary__v2KCI {
  flex: 1 1 50%;
  min-height: 0;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--node-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.Editor_effectsPanel__-6vhf {
  flex: 1 1 50%;
  padding: 1rem;
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--node-border, #e2e8f0);
  background-color: #f9fafb;
  background-color: var(--node-bg, #f9fafb);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: flex 0.3s ease;
}

/* Panel Size States */
.Editor_panel_normal__eIaJN {
  flex: 1 1 50%;
}

.Editor_panel_maximized__\+R5gJ {
  flex: 1 1 250% !important;
}

.Editor_panel_minimized__NNuPU {
  flex: 0 0 auto !important;
  overflow: hidden;
}

.Editor_panel_minimized__NNuPU .Editor_panelContent__pAeFi {
  display: none;
}

.Editor_effectsPanelTitle__F9D4W {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--node-text);
  font-family: 'Inconsolata', monospace;
}

.Editor_effectsPanelContent__OM9SS {
  color: var(--node-label-text);
  font-size: 0.9rem;
}

.Editor_effectsPanelContent__OM9SS p {
  margin: 0.5rem 0;
}

/* Image Canvas Styles */
.Editor_imageCanvas__ant36 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* Hidden, only used for rendering */
}

.Editor_layerPreview__YjMJa {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Editor_layerImage__fAuau {
  position: absolute;
  pointer-events: none;
  transform-origin: top left;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  /* No object-fit - we're setting explicit dimensions that match aspect ratio */
}

.Editor_layerImageSnapping__fRAmm {
  transition:
    left 0.15s ease-out,
    top 0.15s ease-out,
    width 0.15s ease-out,
    height 0.15s ease-out;
}

.Editor_layerText__JxR2R {
  position: absolute;
  pointer-events: none;
  white-space: pre;
  -webkit-user-select: none;
          user-select: none;
}

.Editor_layerShape__ZnOeK {
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.Editor_layerBackground__AH82p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.Editor_selectedLayer__c10w- {
  outline: 2px solid #3b82f6;
  outline: 2px solid var(--node-border-selected, #3b82f6);
  outline-offset: -2px;
}

.Editor_dropActive__O5low {
  background-color: rgba(59, 130, 246, 0.1);
  border: 2px dashed #3b82f6;
  border: 2px dashed var(--node-border-selected, #3b82f6);
}

/* Grid Overlay Styles */
.Editor_gridOverlay__94JeE {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Editor_gridLineVertical__mALSs {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.Editor_gridLineHorizontal__-itNh {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* Scale Handles */
.Editor_scaleHandle__39yhW {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: white;
  border: 2px solid #3b82f6;
  border: 2px solid var(--node-border-selected, #3b82f6);
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.Editor_scaleHandle__39yhW:hover {
  background-color: #3b82f6;
  background-color: var(--node-border-selected, #3b82f6);
  transform: translate(-50%, -50%) scale(1.2);
}

.Editor_scaleHandleNW__7Zci5,
.Editor_scaleHandleSE__QPhfp {
  cursor: nwse-resize;
}

.Editor_scaleHandleNE__6XQYw,
.Editor_scaleHandleSW__riguN {
  cursor: nesw-resize;
}

.Editor_scaleHandleN__bEjuq,
.Editor_scaleHandleS__Bw9V9 {
  cursor: ns-resize;
}

.Editor_scaleHandleE__XGSi0,
.Editor_scaleHandleW__kFQbJ {
  cursor: ew-resize;
}

/* Crop Tool Styles */
.Editor_aspectRatioSelector__CZlbx {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  background-color: #ffffff;
  background-color: var(--node-bg, #ffffff);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--node-border, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 25;
  transform: translateX(-50%);
}

.Editor_aspectRatioButton__sQmjM {
  padding: 0.4rem 0.8rem;
  background-color: transparent;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--node-border, #e2e8f0);
  border-radius: 4px;
  color: #1f2937;
  color: var(--node-text, #1f2937);
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s;
}

.Editor_aspectRatioButton__sQmjM:hover {
  background-color: #f3f4f6;
  background-color: var(--node-hover-bg, #f3f4f6);
  border-color: #3b82f6;
  border-color: var(--node-border-selected, #3b82f6);
}

.Editor_aspectRatioButton__sQmjM.Editor_active__3AFYL {
  background-color: #3b82f6;
  background-color: var(--node-border-selected, #3b82f6);
  color: white;
  border-color: #3b82f6;
  border-color: var(--node-border-selected, #3b82f6);
}

.Editor_cropOverlay__4NXjf {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
  pointer-events: none;
}

.Editor_cropRectangle__3wQMI {
  position: absolute;
  border: 2px solid #3b82f6;
  border: 2px solid var(--node-border-selected, #3b82f6);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  background-color: transparent;
  pointer-events: auto;
  cursor: move;
}

.Editor_cropRectangleSnapping__sktHC {
  transition:
    left 0.15s ease-out,
    top 0.15s ease-out,
    width 0.15s ease-out,
    height 0.15s ease-out;
}

.Editor_cropHandle__7hFC2 {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: white;
  border: 2px solid #3b82f6;
  border: 2px solid var(--node-border-selected, #3b82f6);
  border-radius: 50%;
  z-index: 22;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.Editor_cropHandle__7hFC2:hover {
  background-color: #3b82f6;
  background-color: var(--node-border-selected, #3b82f6);
  transform: scale(1.2);
}

.Editor_cropHandleNW__8kour {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.Editor_cropHandleNE__GrFp7 {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.Editor_cropHandleSW__wRNxS {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.Editor_cropHandleSE__xH7AP {
  bottom: -7px;
  right: -7px;
  cursor: nwse-resize;
}

.Editor_cropActions__n0IJv {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  z-index: 25;
  transform: translateX(-50%);
}

.Editor_cropApplyButton__1sVgy,
.Editor_cropCancelButton__zlyJ0 {
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.Editor_cropApplyButton__1sVgy {
  background-color: #3b82f6;
  background-color: var(--node-border-selected, #3b82f6);
  color: white;
}

.Editor_cropApplyButton__1sVgy:hover {
  background-color: #2563eb;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

.Editor_cropCancelButton__zlyJ0 {
  background-color: #ffffff;
  background-color: var(--node-bg, #ffffff);
  color: #1f2937;
  color: var(--node-text, #1f2937);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--node-border, #e2e8f0);
}

.Editor_cropCancelButton__zlyJ0:hover {
  background-color: #f3f4f6;
  background-color: var(--node-hover-bg, #f3f4f6);
}

/* Safe Area Overlays - Show cutoff zones outside the canvas */
.Editor_safeAreaOverlay__HQ65Q {
  position: absolute;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.05),
    rgba(255, 0, 0, 0.05) 10px,
    rgba(255, 0, 0, 0.1) 10px,
    rgba(255, 0, 0, 0.1) 20px
  );
  pointer-events: none;
  z-index: 15;
}

.Editor_safeAreaLeft__qT52G {
  left: -200px;
  top: -200px;
  bottom: -200px;
  width: 200px;
  border-right: 1px dashed rgba(255, 0, 0, 0.3);
}

.Editor_safeAreaRight__Xz9O7 {
  right: -200px;
  top: -200px;
  bottom: -200px;
  width: 200px;
  border-left: 1px dashed rgba(255, 0, 0, 0.3);
}

.Editor_safeAreaTop__5darU {
  left: -200px;
  right: -200px;
  top: -200px;
  height: 200px;
  border-bottom: 1px dashed rgba(255, 0, 0, 0.3);
}

.Editor_safeAreaBottom__sxhG\+ {
  left: -200px;
  right: -200px;
  bottom: -200px;
  height: 200px;
  border-top: 1px dashed rgba(255, 0, 0, 0.3);
}

/* Layer Management Styles */
.Editor_layerControls__W1zDM {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.Editor_layerButton__TkRQu {
  padding: 0.5rem 0.75rem;
  background-color: #3b82f6;
  background-color: var(--node-button-bg, #3b82f6);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s;
}

.Editor_layerButton__TkRQu:hover {
  background-color: #2563eb;
  background-color: var(--node-border-selected, #2563eb);
}

.Editor_layersList__06IXS {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(100% - 80px);
  overflow-y: auto;
}

.Editor_noLayers__QEh01 {
  text-align: center;
  color: var(--node-label-text);
  font-size: 0.9rem;
  padding: 1rem;
}

.Editor_layerItem__waU\+9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background-color: #f3f4f6;
  background-color: var(--node-icon-bg, #f3f4f6);
  border: 1px solid var(--node-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.Editor_layerItem__waU\+9:hover {
  background-color: #e5e7eb;
  background-color: var(--canvas-bg, #e5e7eb);
}

.Editor_selectedLayerItem__N7fh- {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  border-color: var(--node-border-selected, #3b82f6);
}

.Editor_layerInfo__EhHKy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1;
  min-width: 0;
}

.Editor_layerType__QHIq\+ {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--node-label-text);
  font-weight: 600;
}

.Editor_layerName__j-KN0 {
  font-size: 0.85rem;
  color: var(--node-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Editor_layerActions__DZrcd {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.Editor_layerActions__DZrcd button {
  padding: 0.25rem 0.5rem;
  background-color: transparent;
  border: 1px solid var(--node-border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s;
}

.Editor_layerActions__DZrcd button:hover:not(:disabled) {
  background-color: var(--node-icon-bg);
}

.Editor_layerActions__DZrcd button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Panel Tabs */
.Editor_panelTabs__SPAvG {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--node-border);
  margin-bottom: 1rem;
}

.Editor_panelTabsLeft__jHuZr {
  display: flex;
  gap: 0.5rem;
}

.Editor_panelControls__oifDZ {
  display: flex;
  gap: 0.25rem;
  padding-right: 0.5rem;
}

.Editor_panelControlBtn__NTPlK {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Editor_panelControlBtn__NTPlK:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.Editor_panelControlBtn__NTPlK.Editor_activeControl__mXyip {
  background: rgba(13, 153, 255, 0.15);
  color: #0d99ff;
  border-color: #0d99ff;
}

.Editor_panelTab__EmJef {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  color: var(--node-label-text);
  transition: all 0.2s;
}

.Editor_panelTab__EmJef:hover {
  color: var(--node-text);
}

.Editor_activePanelTab__89PlH {
  color: var(--node-text);
  border-bottom-color: #3b82f6;
  border-bottom-color: var(--node-border-selected, #3b82f6);
  font-weight: 600;
}

.Editor_panelContent__pAeFi {
  flex: 1 1;
  overflow-y: auto;
  padding: 0;
}

.Editor_panelSectionTitle__GMv-L {
  margin: 0;
  padding: 10px 12px 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  text-transform: capitalize;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: transparent;
}

/* Effects Grid */
.Editor_effectsGrid__CvHuv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.Editor_effectElement__Kh9m9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: #f3f4f6;
  background-color: var(--node-icon-bg, #f3f4f6);
  border: 1px solid var(--node-border);
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s;
  min-height: 80px;
}

.Editor_effectElement__Kh9m9:hover {
  background-color: #e5e7eb;
  background-color: var(--canvas-bg, #e5e7eb);
  border-color: #3b82f6;
  border-color: var(--node-border-selected, #3b82f6);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.Editor_effectElement__Kh9m9:active {
  cursor: grabbing;
}

.Editor_effectIcon__RuiQ3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--node-text);
}

.Editor_effectLabel__nAgwd {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--node-label-text);
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inspect Panel - Figma Style */
.Editor_inspectPanel__07eCJ {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  /* background-color: #1E1E1E; */
}

.Editor_inspectSection__3xEEO {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
}

.Editor_inspectSectionHeader__O8kza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  text-transform: capitalize;
}

.Editor_inspectGroup__d85Bb {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 4px 12px;
  min-height: 28px;
}

.Editor_inspectGroup__d85Bb:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.Editor_inspectRow__c1\+Ud {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.Editor_inspectLabel__BNjB4 {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 12px;
  text-align: center;
}

.Editor_inspectInput__M0bRI,
.Editor_inspectTextarea__VBIWn,
.Editor_inspectSelect__N6vbz {
  padding: 3px 6px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  font-size: 11px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  color: rgba(255, 255, 255, 0.9);
  flex: 1 1;
  min-width: 0;
  transition: all 0.1s ease;
}

.Editor_inspectInput__M0bRI:hover,
.Editor_inspectTextarea__VBIWn:hover,
.Editor_inspectSelect__N6vbz:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}

.Editor_inspectInput__M0bRI:focus,
.Editor_inspectTextarea__VBIWn:focus,
.Editor_inspectSelect__N6vbz:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #0d99ff;
  box-shadow: inset 0 0 0 1px #0d99ff;
}

.Editor_inspectSelect__N6vbz {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L5 5L9 1%27 stroke=%27rgba%28255,255,255,0.5%29%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.Editor_inspectTextarea__VBIWn {
  min-height: 60px;
  resize: vertical;
  max-width: none;
  flex: 1 1;
}

.Editor_inspectSlider__nId1l {
  flex: 1 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.Editor_inspectSlider__nId1l::-webkit-slider-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
}

.Editor_inspectSlider__nId1l::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  border: 1.5px solid #0d99ff;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  margin-top: -3.5px;
}

.Editor_inspectSlider__nId1l::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.2);
}

.Editor_inspectSlider__nId1l::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
}

.Editor_inspectSlider__nId1l::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  border: 1.5px solid #0d99ff;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -moz-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.Editor_inspectSlider__nId1l::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.2);
}

.Editor_inspectValue__ATljf {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  text-align: right;
  min-width: 40px;
  flex-shrink: 0;
}

.Editor_inspectColorPicker__7t59s {
  flex: 1 1;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.1s ease;
}

.Editor_inspectColorPicker__7t59s:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.04);
}

.Editor_inspectColorPicker__7t59s::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.Editor_inspectColorPicker__7t59s::-webkit-color-swatch {
  border: none;
  border-radius: 1px;
}

/* Light mode text visibility fixes for inspect panel */
body:not(.dark-theme) .Editor_panelSectionTitle__GMv-L {
  color: #1a1a1a;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body:not(.dark-theme) .Editor_inspectSectionHeader__O8kza {
  color: #1a1a1a;
}

body:not(.dark-theme) .Editor_inspectLabel__BNjB4 {
  color: #6b7280;
}

body:not(.dark-theme) .Editor_inspectInput__M0bRI,
body:not(.dark-theme) .Editor_inspectTextarea__VBIWn,
body:not(.dark-theme) .Editor_inspectSelect__N6vbz {
  color: #1f2937;
  border-color: rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.02);
}

body:not(.dark-theme) .Editor_inspectInput__M0bRI:hover,
body:not(.dark-theme) .Editor_inspectTextarea__VBIWn:hover,
body:not(.dark-theme) .Editor_inspectSelect__N6vbz:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}

body:not(.dark-theme) .Editor_inspectValue__ATljf {
  color: #6b7280;
}

body:not(.dark-theme) .Editor_panelControlBtn__NTPlK {
  color: #6b7280;
  border-color: rgba(0, 0, 0, 0.1);
}

body:not(.dark-theme) .Editor_panelControlBtn__NTPlK:hover {
  color: #1a1a1a;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}

body:not(.dark-theme) .Editor_inspectSection__3xEEO {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Light mode slider styles */
body:not(.dark-theme) .Editor_inspectSlider__nId1l {
  background: rgba(0, 0, 0, 0.15);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-webkit-slider-track {
  background: rgba(0, 0, 0, 0.15);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-webkit-slider-thumb {
  background: #1f2937;
  border-color: #0d99ff;
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-moz-range-track {
  background: rgba(0, 0, 0, 0.15);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-moz-range-thumb {
  background: #1f2937;
  border-color: #0d99ff;
}

/* LayerSettings Component Styles */
.Editor_layerSettings__471B0 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.Editor_settingsSection__eTxZB {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.Editor_settingsSectionHeader__H8irG {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  color: var(--node-text, #1f2937);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--node-border, rgba(255, 255, 255, 0.1));
}

/* Image Positioning Preset Buttons */
.Editor_presetButtonGrid__hCYrR {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.Editor_presetButtonGrid3__2THTC {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.Editor_presetButton__82tC4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #374151;
  background: var(--node-bg, #374151);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border: 2px solid var(--node-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  color: #e5e7eb;
  color: var(--node-text, #e5e7eb);
  font-size: 0.85rem;
  font-weight: 500;
}

.Editor_presetButton__82tC4:hover {
  background: #4b5563;
  background: var(--node-bg-hover, #4b5563);
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
  transform: translateY(-2px);
}

.Editor_presetButton__82tC4.Editor_presetButtonActive__GWg2x {
  background: #0d99ff;
  background: var(--accent-color, #0d99ff);
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(13, 153, 255, 0.3);
}

.Editor_presetIcon__\+D4p9 {
  font-size: 1.5rem;
}

/* Text Alignment Grid (3x3) */
.Editor_alignmentGrid__g8rp9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.3rem;
  gap: 0.3rem;
  max-width: 150px;
  margin: 0 auto;
}

.Editor_alignmentButton__-r-Mf {
  aspect-ratio: 1;
  padding: 0.25rem;
  background: #374151;
  background: var(--node-bg, #374151);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border: 2px solid var(--node-border, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
}

.Editor_alignmentButton__-r-Mf:hover {
  background: #4b5563;
  background: var(--node-bg-hover, #4b5563);
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
  transform: scale(1.05);
}

.Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k {
  background: #0d99ff;
  background: var(--accent-color, #0d99ff);
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
  box-shadow: 0 2px 4px rgba(13, 153, 255, 0.3);
}

.Editor_alignmentDot__HsTak {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0.15rem;
}

.Editor_alignmentDot__HsTak span {
  color: #e5e7eb;
  color: var(--node-text, #e5e7eb);
  font-size: 1rem;
  line-height: 1;
}

.Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k .Editor_alignmentDot__HsTak span {
  color: #ffffff;
}

/* Text Justify Buttons */
.Editor_buttonGroup__Qh5UN {
  display: flex;
  gap: 0.5rem;
}

.Editor_justifyButton__bYpJe,
.Editor_bgTypeButton__eJswL {
  flex: 1 1;
  padding: 0.5rem 1rem;
  background: #374151;
  background: var(--node-bg, #374151);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border: 2px solid var(--node-border, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  color: #e5e7eb;
  color: var(--node-text, #e5e7eb);
  font-size: 1rem;
  font-weight: 500;
}

.Editor_justifyButton__bYpJe:hover,
.Editor_bgTypeButton__eJswL:hover {
  background: #4b5563;
  background: var(--node-bg-hover, #4b5563);
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
}

.Editor_justifyButton__bYpJe.Editor_justifyButtonActive__6D0vF,
.Editor_bgTypeButton__eJswL.Editor_bgTypeButtonActive__HKLp7 {
  background: #0d99ff;
  background: var(--accent-color, #0d99ff);
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(13, 153, 255, 0.3);
}

/* Padding Grid */
.Editor_paddingGrid__dap8h {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.Editor_paddingInput__kvo53 {
  padding: 0.5rem;
  background: #374151;
  background: var(--node-bg, #374151);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border: 1px solid var(--node-border, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  color: #e5e7eb;
  color: var(--node-text, #e5e7eb);
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  text-align: center;
}

.Editor_paddingInput__kvo53:focus {
  outline: none;
  border-color: #0d99ff;
  border-color: var(--accent-color, #0d99ff);
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.2);
}

/* Light mode overrides for new controls */
body:not(.dark-theme) .Editor_presetButton__82tC4 {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
}

body:not(.dark-theme) .Editor_presetButton__82tC4:hover {
  background: #f9fafb;
  border-color: #0d99ff;
}

body:not(.dark-theme) .Editor_presetButton__82tC4.Editor_presetButtonActive__GWg2x {
  background: #0d99ff;
  color: #ffffff;
}

body:not(.dark-theme) .Editor_alignmentButton__-r-Mf {
  background: #ffffff;
  border-color: #e5e7eb;
}

body:not(.dark-theme) .Editor_alignmentButton__-r-Mf:hover {
  background: #f9fafb;
  border-color: #0d99ff;
}

body:not(.dark-theme) .Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k {
  background: #0d99ff;
}

body:not(.dark-theme) .Editor_alignmentDot__HsTak span {
  color: #1f2937;
}

body:not(.dark-theme)
  .Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k
  .Editor_alignmentDot__HsTak
  span {
  color: #ffffff;
}

body:not(.dark-theme) .Editor_justifyButton__bYpJe,
body:not(.dark-theme) .Editor_bgTypeButton__eJswL {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
}

body:not(.dark-theme) .Editor_justifyButton__bYpJe:hover,
body:not(.dark-theme) .Editor_bgTypeButton__eJswL:hover {
  background: #f9fafb;
  border-color: #0d99ff;
}

body:not(.dark-theme) .Editor_justifyButton__bYpJe.Editor_justifyButtonActive__6D0vF,
body:not(.dark-theme) .Editor_bgTypeButton__eJswL.Editor_bgTypeButtonActive__HKLp7 {
  background: #0d99ff;
  color: #ffffff;
}

body:not(.dark-theme) .Editor_paddingInput__kvo53 {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
}

body:not(.dark-theme) .Editor_settingsSectionHeader__H8irG {
  border-bottom-color: #e5e7eb;
  color: #1f2937;
}

/* src/MainApp/MainComponents/layout/EditorTabBar.module.css */
.EditorTabBar_editorTabBarContainer__4a6PX {
  position: fixed;
  top: 10px;
  right: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 1001;
  background: #1f2937;
  background: var(--node-bg, #1f2937);
  border: 1px solid #374151;
  border: 1px solid var(--node-border, #374151);
  border-radius: 12px;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.EditorTabBar_tabGroup__MlCVK {
  display: flex;
  align-items: center;
  gap: 8px;
}

.EditorTabBar_tab__UKOdf {
  background: transparent;
  border: none;
  color: #9ca3af;
  color: var(--node-text, #9ca3af);
  font-size: 0.95rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.EditorTabBar_tab__UKOdf:hover {
  background: rgba(75, 85, 99, 0.3);
  background: var(--node-icon-bg, rgba(75, 85, 99, 0.3));
  opacity: 0.9;
}

.EditorTabBar_activeTab__vYNji {
  background: #3b82f6;
  background: var(--node-button-bg, #3b82f6);
  color: #ffffff;
  color: var(--node-text, #ffffff);
  opacity: 1;
  font-weight: 600;
}

.EditorTabBar_activeTab__vYNji:hover {
  background: #3b82f6;
  background: var(--node-button-bg, #3b82f6);
  opacity: 1;
}

.EditorTabBar_tabIcon__0qjWx {
  width: 20px;
  height: 20px;
  transition: filter 0.2s ease;
}

.EditorTabBar_tabText__rZVna {
  letter-spacing: 0.5px;
}

.EditorTabBar_tabSeparator__VmpTl {
  color: #4b5563;
  color: var(--node-border, #4b5563);
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.5;
  padding: 0 4px;
}

/* Icon tinting */
.EditorTabBar_whiteTint__sEyZW {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.EditorTabBar_darkTint__bDrPw {
  filter: brightness(0) invert(0);
  opacity: 0.6;
}

.EditorTabBar_activeTab__vYNji .EditorTabBar_whiteTint__sEyZW,
.EditorTabBar_activeTab__vYNji .EditorTabBar_darkTint__bDrPw {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Responsive design */
@media (max-width: 768px) {
  .EditorTabBar_editorTabBarContainer__4a6PX {
    top: 10px;
    padding: 6px 10px;
    border-radius: 10px;
  }

  .EditorTabBar_tab__UKOdf {
    padding: 6px 12px;
    font-size: 0.85rem;
    gap: 6px;
  }

  .EditorTabBar_tabIcon__0qjWx {
    width: 18px;
    height: 18px;
  }

  .EditorTabBar_tabSeparator__VmpTl {
    font-size: 1rem;
    padding: 0 2px;
  }
}

@media (max-width: 480px) {
  .EditorTabBar_editorTabBarContainer__4a6PX {
    padding: 5px 8px;
  }

  .EditorTabBar_tab__UKOdf {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .EditorTabBar_tabIcon__0qjWx {
    width: 16px;
    height: 16px;
  }

  .EditorTabBar_tabText__rZVna {
    display: none; /* Hide text on very small screens, show only icons */
  }

  .EditorTabBar_tabSeparator__VmpTl {
    padding: 0;
  }
}

/* TimedAd.css */
.timedAdOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.timedAdContainer {
  background: white;
  border-radius: 16px;
  width: auto;
  max-width: 500px;
  min-width: 380px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    transform: translateY(100px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.timedAdHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 2px solid #e0e0e0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px 16px 0 0;
}

.timedAdHeader h3 {
  margin: 0;
  font-size: 20px;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.timedAdClose {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
  font-size: 28px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  font-weight: bold;
}

.timedAdClose:hover {
  background: white;
  color: #667eea;
  transform: rotate(90deg);
}

.timedAdCountdown {
  font-size: 16px;
  color: white;
  font-weight: 600;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  border: 2px solid white;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.timedAdContent {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  min-height: 250px;
}

.timedAdContent ins {
  width: 300px !important;
  height: 250px !important;
  display: inline-block !important;
}

.timedAdCloseButton {
  margin: 24px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.timedAdCloseButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.timedAdCloseButton:active {
  transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .timedAdContainer {
    width: 95%;
    min-width: 320px;
    max-width: 95%;
  }

  .timedAdHeader {
    padding: 16px 20px;
  }

  .timedAdHeader h3 {
    font-size: 16px;
  }

  .timedAdContent {
    padding: 20px;
    min-height: 250px;
  }

  .timedAdContent ins {
    width: 300px !important;
    height: 250px !important;
  }

  .timedAdCloseButton {
    margin: 20px;
    padding: 14px 28px;
    font-size: 16px;
  }

  .timedAdClose {
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .timedAdCountdown {
    font-size: 14px;
    padding: 8px 16px;
  }
}

.UnsupportedBrowser_container__GyERI {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.UnsupportedBrowser_content__YkFPZ {
  background: white;
  border-radius: 20px;
  padding: 40px;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: UnsupportedBrowser_slideUp__rENwD 0.5s ease-out;
}

@keyframes UnsupportedBrowser_slideUp__rENwD {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.UnsupportedBrowser_icon__GJ19W {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 20px;
}

.UnsupportedBrowser_title__SsocU {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #333;
  margin: 0 0 15px 0;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_subtitle__DwkuS {
  text-align: center;
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 30px 0;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_explanation__jHCNK {
  background: rgba(102, 126, 234, 0.1);
  border-left: 4px solid #667eea;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
}

.UnsupportedBrowser_explanation__jHCNK h2 {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 15px 0;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_explanation__jHCNK p {
  color: #555;
  line-height: 1.6;
  margin: 0 0 15px 0;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_explanation__jHCNK ul {
  color: #555;
  line-height: 1.8;
  margin: 0;
  padding-left: 25px;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_recommendations__1Tgfw {
  margin: 30px 0;
}

.UnsupportedBrowser_recommendations__1Tgfw h2 {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 20px 0;
  text-align: center;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_browserGrid__j0z-b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 20px;
}

.UnsupportedBrowser_browserCard__uGHDu {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.UnsupportedBrowser_browserCard__uGHDu:hover {
  transform: translateY(-5px);
  border-color: #667eea;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.UnsupportedBrowser_browserIcon__VItkJ {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.UnsupportedBrowser_browserName__E2jBv {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_technicalInfo__SD50s {
  margin: 30px 0;
}

.UnsupportedBrowser_technicalInfo__SD50s summary {
  cursor: pointer;
  font-weight: 600;
  color: #667eea;
  padding: 10px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_technicalInfo__SD50s summary:hover {
  background: rgba(102, 126, 234, 0.1);
}

.UnsupportedBrowser_debugInfo__v304E {
  background: #2d3748;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin-top: 10px;
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_footer__LtqTr {
  text-align: center;
  margin-top: 30px;
}

.UnsupportedBrowser_backButton__AizV8 {
  display: inline-block;
  padding: 12px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: 'Inconsolata', monospace;
}

.UnsupportedBrowser_backButton__AizV8:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .UnsupportedBrowser_content__YkFPZ {
    padding: 25px;
  }

  .UnsupportedBrowser_title__SsocU {
    font-size: 1.5rem;
  }

  .UnsupportedBrowser_subtitle__DwkuS {
    font-size: 1rem;
  }

  .UnsupportedBrowser_icon__GJ19W {
    font-size: 3rem;
  }

  .UnsupportedBrowser_browserGrid__j0z-b {
    grid-template-columns: repeat(2, 1fr);
  }

  .UnsupportedBrowser_explanation__jHCNK h2,
  .UnsupportedBrowser_recommendations__1Tgfw h2 {
    font-size: 1.1rem;
  }
}

/* src/styles/themes.css */

/* Default Light Theme Variables */
:root {
  --canvas-bg: #fffff5; /* slate-50 */
  --node-bg: #ffffff;
  --node-border: #e2e8f0; /* cool-gray-200 */
  --node-border-selected: #3b82f6; /* blue-500 */
  --node-text: #1f2937; /* cool-gray-800 */
  --node-text-rgb: 31, 41, 55; /* ADDED */
  --node-label-text: #4b5563; /* cool-gray-600 */
  --node-icon-bg: #f3f4f6; /* cool-gray-100 */
  --node-icon-color: #4b5563; /* cool-gray-600 */
  --node-button-bg: #3b82f6; /* blue-500 */
  --node-button-bg-hover: #2563eb; /* blue-600 */
  --node-button-text: #ffffff;
  --node-textarea-bg: #f9fafb; /* cool-gray-50 */
  --node-textarea-border: #d1d5db; /* cool-gray-300 */
  --node-textarea-text: var(--node-text);
  --node-connected-data-bg: #f3f4f6; /* cool-gray-100 */
  --node-loading-text: #6b7280; /* cool-gray-500 */
  --node-error-text: #ef4444; /* red-500 */
  --handle-bg: #9ca3af; /* cool-gray-400 */
  --handle-border: #e5e7eb; /* cool-gray-200 */
  --sidebar-bg: #434342; /* cool-gray-50 */
}

/* Dark Theme Variable Overrides */
.dark-theme {
  --canvas-bg: #15161b;
  --node-bg: #374151; /* cool-gray-700 */
  --node-border: #4b5563; /* cool-gray-600 */
  --node-border-selected: #60a5fa; /* blue-400 */
  --node-text: #f9fafb; /* cool-gray-50 */
  --node-text-rgb: 249, 250, 251; /* ADDED */
  --node-label-text: #d1d5db; /* cool-gray-300 */
  --node-icon-bg: #4b5563; /* cool-gray-600 */
  --node-icon-color: #f9fafb; /* cool-gray-50 */
  --node-button-bg: #60a5fa; /* blue-400 */
  --node-button-bg-hover: #3b82f6; /* blue-500 */
  --node-button-text: #1f2937; /* cool-gray-800 */
  --node-textarea-bg: #4b5563; /* cool-gray-600 */
  --node-textarea-border: #6b7280; /* cool-gray-500 */
  --node-textarea-text: var(--node-text);
  --node-connected-data-bg: #4b5563; /* cool-gray-600 */
  --node-loading-text: #9ca3af; /* cool-gray-400 */
  --node-error-text: #f87171; /* red-400 */
  --handle-bg: #6b7280; /* cool-gray-500 */
  --handle-border: #4b5563; /* cool-gray-600 */
  --sidebar-bg: #374151; /* cool-gray-50 */
}

/* src/App.css */ /* Make sure theme variables are imported */

/* Prevent text cursor and editing on non-editable elements (especially for Edge) */
html,
body,
div,
section,
article,
aside,
nav,
header,
footer,
main,
svg,
canvas,
img,
video {
  -webkit-user-modify: read-only !important;
}

/* Allow editing only in actual input elements */
input,
textarea,
[contenteditable='true'],
[contenteditable] {
  -webkit-user-modify: read-write !important;
}

/* Buttons should never show text cursor */
.react-flow__controls-button,
button:not(.nodeItem):not(.libraryNodeItem),
[role='button']:not(.nodeItem):not(.libraryNodeItem),
[type='button'],
[type='submit'] {
  cursor: pointer !important;
}

body {
  font-family: 'Inconsolata', monospace;
  margin: 0;
  background-color: var(--canvas-bg);
  /* background-color: #fffff5; */
}

.dark-theme body {
  background-color: #1f2937;
  color: #f9fafb;
}

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  padding: 0;
  display: flex;
}

main > div {
  width: 100%;
  height: 100vh;
}

/* --- Custom Cursor for Flow Canvas --- */
.react-flow__pane {
  cursor:
    url(/static/media/Arrow.36d01536755a514361aa.svg) 6 6,
    default;
}

/* --- Edge Styling --- */

/* Style the main path of the edge */
.react-flow__edge-path {
  stroke: #aaaaaa; /* Grey color like the image */
  stroke-width: 1.5px; /* Adjust thickness as needed */
}

/* Style for selected edges */
.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge:focus .react-flow__edge-path {
  stroke: var(--node-border-selected); /* Use theme color for selected edge */
  stroke-width: 2px;
}

/* Style for animated edges (dashed line moving) */
.react-flow__edge.animated .react-flow__edge-path {
  stroke-dasharray: 5; /* Length of dash and gap */
  animation: dashdraw 0.5s linear infinite;
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10; /* Starting offset */
  }
  to {
    stroke-dashoffset: 0; /* Ending offset (creates movement) */
  }
}

/* Remove default arrowheads if you don't want them */
/* .react-flow__arrowhead path {
  fill: none;
  stroke: none;
} */

/* --- Handle Styling (using variables) --- */
.react-flow__handle {
  background: var(--handle-bg);
  border: 1px solid var(--handle-border);
  width: 8px;
  height: 10px;
  border-radius: 2px;
}
.react-flow__handle-connecting {
  background: var(--node-border-selected);
}

:root {
  /* ... other light theme variables ... */
  --minimap-bg: #334155; /* slate-700 - Dark background for minimap */
  --minimap-mask-bg: rgba(51, 65, 85, 0.6); /* Semi-transparent dark mask */
}

.dark-theme {
  /* ... other dark theme variables ... */
  --minimap-bg: #334155; /* slate-700 - Dark background for minimap */
  --minimap-mask-bg: rgba(51, 65, 85, 0.6); /* Semi-transparent dark mask */
}

/* Optional: Style the mask color as well */
.react-flow__minimap-mask {
  fill: rgba(51, 65, 85, 0.6) !important;
  fill: var(--minimap-mask-bg) !important; /* Use important if needed */
}

.react-flow__controls {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  background-color: var(--node-bg); /* Use theme background */
  padding: 4px; /* Add some padding inside */
  border-radius: 8px; /* Rounded corners for the container */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Add a subtle shadow */
  border: 1px solid var(--node-border); /* Add a border matching theme */
}

/* Individual control buttons */
.react-flow__controls-button {
  background-color: transparent; /* Make button background transparent */
  border: none; /* Remove default button border */
  border-bottom: 1px solid var(--node-border); /* Add separator line */
  padding: 8px; /* Adjust padding */
  margin: 0; /* Remove default margin */
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.15s ease;
  width: 36px; /* Set a fixed width */
  height: 36px; /* Set a fixed height */
  box-sizing: border-box;
}

/* Remove border from the last button */
.react-flow__controls-button:last-child {
  border-bottom: none;
}

/* Style the SVG icons inside the buttons */
.react-flow__controls-button svg {
  width: 16px; /* Control icon size */
  height: 16px;
  fill: var(--node-label-text); /* Use theme color for icon */
}

/* Hover effect for buttons */
.react-flow__controls-button:hover {
  background-color: var(--node-icon-bg); /* Use theme hover color */
}

/* Disabled state for buttons */
.react-flow__controls-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.react-flow__controls-button:disabled:hover {
  background-color: transparent; /* No hover effect when disabled */
}

.explorerButton {
  /* position: absolute;
  bottom: 22vh; 
  right: 15px; */
  z-index: 10; /* Above minimap mask */
  background-color: var(--node-bg);
  color: var(--node-text);
  border: 1px solid var(--node-border);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.explorerButton:hover {
  border-color: var(--node-border-selected);
  color: var(--node-border-selected);
  transform: scale(1.05);
}

/* Hovered edge highlighting for drag-and-drop auto-insertion */
.react-flow__edge.hovered-edge path {
  stroke: #ec4899 !important;
  stroke-width: 3px !important;
  stroke-dasharray: 8, 4 !important;
  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.8)) !important;
  animation: pulse-edge 0.5s infinite alternate;
}

.react-flow__edge.hovered-edge .react-flow__edge-path {
  stroke: #ec4899 !important;
}

@keyframes pulse-edge {
  from {
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.8));
  }
  to {
    stroke-width: 3.5px;
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, 1));
  }
}

/* LandingPage.module.css */

.LandingPage_landingContainer__2RSUz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background:
    /* Bottom gradient fading to black */
    linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.8) 15%,
      rgba(0, 0, 0, 0) 35%
    ),
    /* Vignette effect - darkens edges */
      radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.7) 100%
      ),
    /* Dark overlay */ linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    /* Background image */ url(/static/media/scifi.d6e7d0330aab873a92a4.webp) center/cover no-repeat;
  color: var(--node-text);
  position: relative;
}

.LandingPage_textOverlay__04BdU {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  text-align: left;
  z-index: 2;
  pointer-events: none;
}

/* Reusable "pop up" keyframes */
@keyframes LandingPage_fadeInUp__oAg4x {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Title: no animation for faster LCP */
.LandingPage_mainTitle__iQ1Qg {
  font-size: 4rem;
  font-weight: 300;
  font-family: 'Inconsolata', monospace;
  color: rgba(255, 255, 255, 0.95); /* Light text for dark background */
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 0;
  content-visibility: auto; /* Only render when visible */
}

/* Hide logo on desktop */
.LandingPage_mobileLogo__1eBeh {
  display: none;
}

/* After subtitle's done, switch to slightly dimmed */
.LandingPage_titleDimmed__wy00e {
  color: rgba(255, 255, 255, 0.3); /* Lower opacity dimmed light text */
  font-size: 3.5rem;
  transition:
    color 0.3s ease-out,
    font-size 0.3s ease-out;
}

/* Subtitle container always in DOM; reserve its height up front */
.LandingPage_subtitleContainer__TSidP {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Inconsolata', monospace;
  color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  min-height: 2.2rem;
  contain: layout style; /* CSS containment for better performance */
}

/* Each word animates with its own delay */
.LandingPage_subtitleWord__Tc\+x- {
  opacity: 0;
  animation: LandingPage_fadeInUp__oAg4x 0.3s ease-out forwards;
  margin-right: 0.5em;
  transform: translate3d(0, 0, 0); /* Force GPU acceleration */
}

/* Remove will-change after animation to save resources */
@media (prefers-reduced-motion: reduce) {
  .LandingPage_mainTitle__iQ1Qg,
  .LandingPage_subtitleWord__Tc\+x- {
    animation: none;
    opacity: 1;
    will-change: auto;
    transform: none;
  }
}

/* Highlighted once title dims */
.LandingPage_subtitleHighlighted__LKjtr {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9); /* Brighter light text */
}

/* Top bar overlay */
.LandingPage_topBar__9PrJE {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: auto;
}

.LandingPage_topBarContent__phVJS {
  display: flex;
  align-items: center;
  gap: 15px;
}

.LandingPage_topBarLink__7MZ31 {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  font-size: 0.9rem;
  font-weight: 400;
  font-family: 'Inconsolata';
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 4px;
}

.LandingPage_topBarLink__7MZ31:hover {
  color: rgba(255, 255, 255, 1); /* Full white on hover */
  background: rgba(255, 255, 255, 0.1);
}

.LandingPage_topBarSeparator__8RfKk {
  color: rgba(255, 255, 255, 0.5); /* Light separator */
  font-size: 0.9rem;
  font-weight: 300;
}

/* Download Button */
.LandingPage_downloadButton__ISxrM {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.7); /* Light icon for dark background */
  background: transparent;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}

.LandingPage_downloadButton__ISxrM:hover {
  color: rgba(255, 255, 255, 1); /* Full white on hover */
  transform: translateY(-2px);
}

.LandingPage_downloadButton__ISxrM:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

/* Social Media Buttons */
.LandingPage_socialButtons__fEY-S {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  pointer-events: auto;
  opacity: 0;
  animation: LandingPage_fadeInUp__oAg4x 0.8s ease-out forwards;
  animation-delay: 1.5s;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0); /* Force GPU acceleration */
  contain: layout style; /* CSS containment for better performance */
}

.LandingPage_socialButton__bitYl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  text-decoration: none;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.9); /* Light icon color for dark theme */
  background: rgba(
    30,
    30,
    35,
    0.6
  ); /* Dark translucent background matching circles */
  border: 2px solid rgba(100, 100, 110, 0.5); /* Subtle border matching theme */
  border-radius: 50%;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* Prevent flickering */
  transform: translate3d(0, 0, 0); /* Force GPU acceleration */
}

.LandingPage_socialButton__bitYl:hover {
  color: white;
  background: rgba(50, 50, 55, 0.8); /* Slightly lighter on hover */
  border-color: rgba(140, 140, 150, 0.7); /* Brighter border on hover */
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.LandingPage_socialButton__bitYl:active {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
  .LandingPage_socialButton__bitYl {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Footer container */
.LandingPage_footer__5bdpm {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  z-index: 3;
}

.LandingPage_footerLink__YCumk {
  text-decoration: none;
  background: none;
  color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.LandingPage_footerLink__YCumk:hover {
  color: rgba(255, 255, 255, 1); /* Full white on hover */
}

.LandingPage_footerDot__wOCp7 {
  color: rgba(255, 255, 255, 0.5); /* Light dot */
  font-size: 0.9rem;
  font-weight: bold;
}

.LandingPage_versionButton__GmEF7 {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  font-size: 0.9rem;
  font-weight: bold;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.LandingPage_versionButton__GmEF7:hover {
  color: rgba(255, 255, 255, 1); /* Full white on hover */
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Use same background as desktop for mobile with vignette and bottom gradient */
  .LandingPage_landingContainer__2RSUz {
    background:
      /* Bottom gradient fading to black */
      linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 15%,
        rgba(0, 0, 0, 0) 35%
      ),
      /* Vignette effect - darkens edges */
        radial-gradient(
          ellipse at center,
          rgba(0, 0, 0, 0) 40%,
          rgba(0, 0, 0, 0.4) 70%,
          rgba(0, 0, 0, 0.7) 100%
        ),
      /* Dark overlay */ linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      /* Background image */ url(/static/media/scifi.d6e7d0330aab873a92a4.webp) center/cover no-repeat;
    color: var(--node-text);
  }

  .LandingPage_textOverlay__04BdU {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    pointer-events: none;
  }

  .LandingPage_mainTitle__iQ1Qg {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.95); /* Light text for dark background */
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }

  /* Show logo on mobile */
  .LandingPage_mobileLogo__1eBeh {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    animation: LandingPage_fadeInUp__oAg4x 0.8s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
  }

  .LandingPage_titleDimmed__wy00e {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4); /* Lower opacity dimmed light text */
  }

  .LandingPage_subtitleContainer__TSidP {
    font-size: 1rem;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  }

  .LandingPage_subtitleHighlighted__LKjtr {
    color: rgba(255, 255, 255, 0.9); /* Brighter light text */
  }

  .LandingPage_socialButtons__fEY-S {
    justify-content: center;
    margin-top: 20px;
  }

  .LandingPage_socialButton__bitYl {
    color: rgba(255, 255, 255, 0.9); /* Light icon color for dark theme */
    background: rgba(30, 30, 35, 0.6); /* Dark translucent background */
    border-color: rgba(100, 100, 110, 0.5);
  }

  .LandingPage_socialButton__bitYl:hover {
    color: white;
    background: rgba(50, 50, 55, 0.8);
    border-color: rgba(140, 140, 150, 0.7);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  }

  .LandingPage_topBar__9PrJE {
    width: 100%;
    left: 0;
    transform: none;
  }

  .LandingPage_topBarContent__phVJS {
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }

  .LandingPage_downloadButton__ISxrM {
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .LandingPage_topBarLink__7MZ31 {
    font-size: 0.8rem;
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  }

  .LandingPage_topBarLink__7MZ31:hover {
    color: rgba(255, 255, 255, 1); /* Full white on hover */
    background: rgba(255, 255, 255, 0.1);
  }

  .LandingPage_topBarSeparator__8RfKk {
    color: rgba(255, 255, 255, 0.5); /* Light separator */
  }

  .LandingPage_footer__5bdpm {
    width: 100%;
    left: 0;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
  }

  .LandingPage_footerLink__YCumk {
    color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  }

  .LandingPage_footerDot__wOCp7 {
    color: rgba(255, 255, 255, 0.5); /* Light dot */
  }

  .LandingPage_versionButton__GmEF7 {
    color: rgba(255, 255, 255, 0.7); /* Light text for dark background */
  }
}

/* Safari-specific performance optimizations */
@supports (-webkit-appearance: none) {
  .LandingPage_landingContainer__2RSUz {
    /* Force hardware acceleration for better performance */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Optimize for Safari's rendering engine */
    perspective: 1000px;
    /* Improve scroll performance */
    -webkit-overflow-scrolling: touch;
  }

  .LandingPage_mainTitle__iQ1Qg,
  .LandingPage_subtitleContainer__TSidP,
  .LandingPage_subtitleWord__Tc\+x- {
    /* Optimize text rendering for Safari */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Hardware acceleration for animations */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Optimize repaints */
    will-change: transform, opacity;
  }

  .LandingPage_socialButton__bitYl {
    /* Optimize button interactions for Safari */
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent visual glitches */
    transform-style: preserve-3d;
  }

  /* Reduce animation complexity on Safari */
  .LandingPage_subtitleWord__Tc\+x- {
    animation-timing-function: ease-out;
    /* Optimize for Safari's animation engine */
    animation-fill-mode: forwards;
  }

  /* Optimize for Safari */
  .LandingPage_socialButton__bitYl {
    /* Use simpler background on Safari for better performance */
    background: rgba(30, 30, 35, 0.6);
  }
}

.LandingCircles_landingCirclesContainer__ZUVe6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* Ensure circles are above Vanta canvas */
  pointer-events: none; /* Allow clicks to pass through container */
}

.LandingCircles_landingCirclesContainer__ZUVe6 canvas {
  pointer-events: auto; /* Re-enable pointer events on Matter.js canvas */
}

.LandingCircles_circle__3tIN7 {
  position: absolute;
  border-radius: 50%;
  overflow: visible; /* Allow ::before to be visible */
  pointer-events: auto; /* Allows mouse events on the circles */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease; /* Smooth transition for hover effects */
  border: 2px solid; /* Initial border will be set by JS */
}

.LandingCircles_circle__3tIN7:hover {
  transform: scale(1.1); /* Scales up the circle by 10% on hover */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
  /* border color handled by JS dynamically */
}

.LandingCircles_circleContent__XKx5e {
  display: flex;
  flex-direction: column; /* Stack icon and text vertically */
  justify-content: center;
  align-items: center;
  padding: 10px; /* Add some padding if needed */
  z-index: 2; /* Above the ::before overlay */
}

.LandingCircles_circleText__WQ2H8 {
  color: white; /* Text color for the circle labels */
  font-size: 1.5rem; /* Adjust font size as needed */
  font-family: 'Urbanist', sans-serif; /* Use your preferred font */
  text-align: center;
  -webkit-user-select: none;
          user-select: none; /* Prevent text selection */
  line-height: 1.2; /* Adjust line height for better spacing */
}

/* Style for all general icons within the circles */
.LandingCircles_circleIcon__AoU3q {
  width: 180%; /* Adjust as needed */
  height: 180%; /* Adjust as needed */
  /* Make SVGs white/light for dark background */
  filter: invert(100%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);
  pointer-events: none; /* Prevent icon from interfering with circle click */
  margin-bottom: 5px; /* Space between icon and text */
  opacity: 0.9;
}

/* Specific style for the small logo - ensures it retains its original colors */
.LandingCircles_smallLogo__Gnmf8 {
  width: 50%; /* Smaller width for the logo */
  height: 50%; /* Smaller height for the logo */
  filter: none; /* Do not apply any filter to the logo */
  opacity: 1;
}

.LandingCircles_circleLabel__MG1z8 {
  color: rgba(255, 255, 255, 0.9); /* Light text for dark background */
  font-size: 0.8rem; /* Smaller font size for the label */
  font-family: 'Urbanist', sans-serif;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  text-transform: uppercase; /* Optional: make label text uppercase */
  letter-spacing: 1px; /* Increased letter spacing for better readability */
}

.LandingCircles_mapIconSmall__vONCw {
  width: 120%; /* Adjust as needed */
  height: 120%;
}

.LandingCircles_disabledCircle__X-ty5 {
  filter: grayscale(100%);
}

.LandingCircles_disabledCircle__X-ty5:hover {
  transform: none !important;
}

.LandingCircles_disabledCircle__X-ty5 .LandingCircles_circleIcon__AoU3q {
  filter: grayscale(100%) brightness(0.7);
}

.LandingCircles_disabledCircle__X-ty5 .LandingCircles_circleLabel__MG1z8 {
  color: #666666 !important;
}

/* Landing Page/Docs/DocsPage.module.css */
.DocsPage_docsPageContainer__1WpsD {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.DocsPage_pageTitle__A5F\+C {
  position: absolute;
  top: -15px;
  left: 40px; /* Position from the left */
  transform: translateX(0); /* Remove horizontal centering */
  font-size: 3rem;
  font-weight: 100;
  color: #aaa;
  z-index: 5;
  font-family: 'Urbanist';
}

/* This is the container that you actually scroll */
.DocsPage_docsContentWrapper__jBiMo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.DocsPage_docsContentWrapper__jBiMo::-webkit-scrollbar {
  display: none;
}

/* These are the invisible, full-height divs that trigger the intersection observer */
.DocsPage_scrollTrigger__95idc {
  height: 100vh; /* Each trigger takes up the full screen height */
  width: 100%;
  pointer-events: none; /* Make them unclickable */
}

/* This is the fixed panel on the left that displays the active node */
.DocsPage_nodeViewer__DB-ID {
  position: fixed;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Allow clicks to pass through */
}

/* This is the fixed panel on the right that displays the text */
.DocsPage_textViewer__i3eTf {
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-start; /* Align content to the left of the panel */
  align-items: center;
  padding-left: 5%;
  box-sizing: border-box;
}

/* Animation containers for the node and text */
.DocsPage_nodeContainer__dA4yL,
.DocsPage_textContainer__yGtlU {
  animation: DocsPage_contentFadeIn__x19wK 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes DocsPage_contentFadeIn__x19wK {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Styling for the text content on the right */
.DocsPage_sectionTitle__FVe48 {
  font-size: 2.5rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
  font-family: 'Inconsolata';
}

.DocsPage_sectionDescription__SSc9k {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
  max-width: 450px;
  margin-bottom: 20px;
  font-family: 'Inconsolata';
}

.DocsPage_propertiesList__r44GJ {
  margin-top: 15px;
}

/* Animate each property item with a delay */
.DocsPage_propertyItem__HWyGt {
  opacity: 0;
  transform: translateY(20px);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 5px 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: #444;
  font-family: 'Inconsolata';
  width: -webkit-fit-content;
  width: fit-content;
  white-space: nowrap;
  animation: DocsPage_propertyFadeIn__d\+2Qc 0.5s ease-out forwards;
  transition: all 0.3s ease-out; /* Add transition for smooth property appearance */
}

@keyframes DocsPage_propertyFadeIn__d\+2Qc {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .DocsPage_docsPageContainer__1WpsD {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .DocsPage_pageTitle__A5F\+C {
    font-size: 3rem;
    left: 20px;
  }

  .DocsPage_mobileDocsContainer__8aH5j {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .DocsPage_mobileNavButton__qq9aX {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ddd;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
    margin: 0;
  }

  /* Icon styling within buttons */
  .DocsPage_mobileNavButton__qq9aX svg {
    width: 18px;
    height: 18px;
  }

  .DocsPage_mobileNavButton__qq9aX:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1);
    border-color: #bbb;
    color: #333;
    transform: translateY(-50%) scale(1.1);
  }

  .DocsPage_mobileNavButton__qq9aX:disabled {
    cursor: not-allowed;
  }

  .DocsPage_leftNav__npM35 {
    left: 15px;
  }

  .DocsPage_rightNav__g99WX {
    right: 15px;
  }

  .DocsPage_mobileNodeViewer__CnbB3 {
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px 10px 20px;
    min-height: 35vh;
    max-height: 40vh;
  }

  .DocsPage_mobileNodeContainer__CN0s2 {
    animation: DocsPage_contentFadeIn__x19wK 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    max-width: 100%;
    display: flex;
    justify-content: center;
    transform: scale(1) !important;
    transform-origin: center !important;
  }

  /* Force scaling on all node components in mobile */
  .DocsPage_mobileNodeContainer__CN0s2 > * {
    transform: scale(1) !important;
    transform-origin: center !important;
  }

  /* Global override for any doc node containers */
  .DocsPage_mobileDocsContainer__8aH5j [class*='nodeBase'],
  .DocsPage_mobileDocsContainer__8aH5j [class*='docContainer'] {
    transform: scale(0.8) !important;
    transform-origin: center !important;
  }

  .DocsPage_mobileTextViewer__OcHT\+ {
    flex: 1 1;
    padding: 20px 20px 60px 20px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .DocsPage_mobileTextContainer__MWHKv {
    animation: DocsPage_contentFadeIn__x19wK 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    max-width: 100%;
  }

  .DocsPage_mobileSectionTitle__dfqS- {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    font-family: 'Inconsolata';
    text-align: center;
  }

  .DocsPage_mobileSectionDescription__n2AUc {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 16px;
    font-family: 'Inconsolata';
    text-align: center;
  }

  .DocsPage_mobilePropertiesList__vqzAe {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .DocsPage_mobilePropertyItem__UmevZ {
    opacity: 0;
    transform: translateY(20px);
    padding: 10px 14px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #444;
    font-family: 'Inconsolata';
    text-align: center;
    animation: DocsPage_propertyFadeIn__d\+2Qc 0.5s ease-out forwards;
    transition: all 0.3s ease-out;
    font-size: 0.9rem;
  }

  .DocsPage_mobilePaginationIndicator__Vk1Fv {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 100;
  }

  .DocsPage_paginationDot__93JTh {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: all 0.3s ease;
  }

  .DocsPage_activeDot__mHaDF {
    background: #666;
    transform: scale(1.3);
  }

  /* Mobile-specific overrides for node components */
  .DocsPage_mobileNodeContainer__CN0s2 .imageContainer,
  .DocsPage_mobileNodeContainer__CN0s2 .videoContainer,
  .DocsPage_mobileNodeContainer__CN0s2 .mediaContainer {
    height: 5vh !important;
    min-height: 5vh !important;
  }

  /* Override for any preview containers in mobile docs */
  .DocsPage_mobileDocsContainer__8aH5j [class*='imageContainer'],
  .DocsPage_mobileDocsContainer__8aH5j [class*='videoContainer'],
  .DocsPage_mobileDocsContainer__8aH5j [class*='mediaContainer'],
  .DocsPage_mobileDocsContainer__8aH5j [class*='previewContainer'] {
    height: 5vh !important;
    min-height: 5vh !important;
    max-height: 5vh !important;
  }
}

/* Landing Page/Docs/CurvedScrollbar.module.css */
.CurvedScrollbar_scrollbarContainer__brwqj {
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 500px;
  width: 120px;
  z-index: 10;
}

.CurvedScrollbar_svgCanvas__l4Fio {
  overflow: visible;
  pointer-events: auto; /* Allow pointer events on the SVG */
}

.CurvedScrollbar_scrollbarTrack__zpM4a {
  fill: none;
  stroke: rgba(200, 200, 200, 0.6);
  stroke-width: 8;
  stroke-linecap: round;
  cursor: pointer;
}

.CurvedScrollbar_scrollbarThumb__um5AL {
  fill: #00000f;
  stroke: white;
  stroke-width: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  cursor: grab;
}

.CurvedScrollbar_scrollbarThumb__um5AL:active {
  cursor: grabbing;
}

/* DocStartNode.module.css - Matching current main app styling */
.DocStartNode_nodeBase__4u3tY {
  --start-node-bg: #f5d0fe; /* fuchsia-200 */
  --start-node-border: #e879f9; /* fuchsia-400 */
  --start-node-border-selected: #d946ef; /* fuchsia-500 */
  --start-node-text: #701a75; /* fuchsia-900 */
  --start-node-icon-bg: #fae8ff; /* fuchsia-100 */
  --start-node-icon-color: #86198f; /* fuchsia-800 */

  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 50px; /* Pill shape */
  background-color: var(--start-node-bg);
  border: 2px solid var(--start-node-border);
  color: var(--start-node-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.DocStartNode_iconWrapper__mgEQ9 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 1.2rem;
  color: var(--start-node-icon-color);
}

.DocStartNode_icon__wlRIO {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.DocStartNode_label__dlAB8 {
  line-height: 1;
}

/* Handle styles for potential future use */
.DocStartNode_handle__Qr1NE {
  width: 12px;
  height: 12px;
  background-color: var(--start-node-bg);
  border: 2px solid var(--start-node-icon-color);
  border-radius: 50%;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

.DocStartNode_handle__Qr1NE:hover {
  background-color: var(--start-node-icon-color);
  opacity: 1;
}

/* src/nodes/InputNode.module.css */
@keyframes DocInputNode_scaleInNode__o1WbP {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}
/* --- Light Theme Variables for InputNode --- */
/* Defines the color palette and reusable values for the node */
:root {
  /* Define variables on :root or .nodeBase if they should be scoped */
  --input-node-bg: #f0fdf4; /* emerald-50 - Light green background */
  --input-node-border: #86efac; /* emerald-300 - Visible green border */
  --input-node-border-selected: #22c55e; /* emerald-500 - Brighter when selected */
  --input-node-text: #14532d; /* emerald-900 - Dark text for readability */
  --input-node-label-text: #16a34a; /* emerald-600 - Green for labels */
  --input-node-icon-bg: #dcfce7; /* emerald-100 - Light icon background */
  --input-node-icon-color: #15803d; /* emerald-700 - Dark green for icons */
  --input-node-button-bg: #4ade80; /* emerald-400 - Green buttons */
  --input-node-button-bg-hover: #22c55e; /* emerald-500 - Darker on hover */
  --input-node-button-text: #14532d; /* emerald-900 - Dark text on buttons */
  --input-node-textarea-bg: #f6fef9; /* emerald-25 - Input background */
  --input-node-textarea-border: #bbf7d0; /* emerald-200 - Subtle border */
  --input-node-loading-text: var(--input-node-label-text);
  --input-node-error-text: #dc2626; /* red-600 - Red for errors */
  --input-node-connected-data-bg: #ecfdf5; /* emerald-75 - Connected data bg */

  /* Modal variables */
  --input-node-modal-bg: var(--input-node-bg);
  --input-node-modal-text: var(--input-node-text);
  --input-node-modal-border: var(--input-node-border);
  --input-node-modal-textarea-bg: var(--input-node-textarea-bg);
  --input-node-modal-textarea-border: var(--input-node-textarea-border);
  --input-node-modal-textarea-text: var(--input-node-text);
  --input-node-modal-button-bg: var(--input-node-button-bg);
  --input-node-modal-button-text: var(--input-node-button-text);
  --input-node-modal-button-hover: var(--input-node-button-bg-hover);
  --input-node-modal-cancel-bg: #e5e7eb; /* gray-200 - Cancel button */
  --input-node-modal-cancel-text: #374151; /* gray-700 - Cancel text */
  --input-node-modal-cancel-hover: #d1d5db; /* gray-300 - Cancel hover */

  /* Token counter variables */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */
}

/* --- Base Node Styling --- */
/* Styles for the main container of the input node */
.DocInputNode_nodeBase__I2tAE {
  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Layout and Box Model */
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 280px;
  max-width: 350px;
  width: 350px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid #86efac;
  border: 1px solid var(--input-node-border);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Colors and Typography */
  background-color: #f0fdf4;
  background-color: var(--input-node-bg);
  color: #14532d;
  color: var(--input-node-text);
  font-family: 'Inconsolata', monospace; /* Or your preferred font */

  /* Positioning Context */
  position: relative; /* Crucial: Establishes positioning context for absolute children like .floatingIcon */

  /* Transitions */
  transition: border-color 0.2s ease-in-out;
  animation: DocInputNode_scaleInNode__o1WbP 0.3s ease-out;
}

body.no-node-animation .DocInputNode_nodeBase__I2tAE {
  animation: none;
}

/* --- Selected Node State --- */
/* Overrides when the node is selected in React Flow */
.react-flow__node.selected .DocInputNode_nodeBase__I2tAE {
  border-color: #22c55e;
  border-color: var(--input-node-border-selected);
  box-shadow: 0 0 0 1px #22c55e;
  box-shadow: 0 0 0 1px var(--input-node-border-selected); /* Enhanced selection outline */
}

/* --- Node Animator --- */
.DocInputNode_nodeAnimator__Mbp5B {
  position: relative;
}

/* --- Floating Icon Styling --- */
/* Styles the icon positioned outside the top-left corner */
.DocInputNode_floatingIcon__b0tLX {
  /* Positioning */
  pointer-events: auto;
  z-index: 40;

  /* Appearance */
  background-color: #dcfce7;
  background-color: var(--input-node-icon-bg);
  color: #15803d;
  color: var(--input-node-icon-color);
  border-radius: 20%; /* Makes the background circular */
  border: 1px solid #86efac;
  border: 1px solid var(--input-node-border); /* Optional: Matches node border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Optional: Adds depth */

  /* Size and Alignment */
  width: 28px; /* Adjust size as needed */
  height: 28px; /* Adjust size as needed */
  padding: 0px; /* Adjust padding inside the icon background */
  display: flex; /* Needed for centering the icon inside */
  justify-content: center;
  align-items: center;
}

/* --- Node Header --- */
/* Contains elements at the top of the node (excluding floating icon) */
.DocInputNode_nodeHeader__N3OOK {
  display: flex;
  justify-content: space-between; /* Pushes buttons to the right */
  align-items: center; /* Vertically aligns items */
  min-height: 28px; /* Ensures consistent header height */
  width: 105%;
  position: absolute;
  top: -44px; /* Negative value moves it above the nodeBase top edge */
  left: -8px; /* Negative value moves it left of the nodeBase left edge */
  z-index: 50; /* Ensures it renders above the node border/content */
  pointer-events: none; /* Disable pointer events on the container */
}

/* --- Header Buttons --- */
/* Styles the wrapper and individual buttons in the header */
.DocInputNode_buttonsWrapper__hyvBU {
  display: flex;
  gap: 5px; /* Space between buttons */
  pointer-events: auto; /* Enable pointer events on buttons wrapper */
  position: relative;
  z-index: 60;
}

.DocInputNode_buttonsWrapper__hyvBU .DocInputNode_isolateButton__rYqsf {
  padding: 4px 8px;
  border: none;
  background-color: #cbd5e1; /* slate-300 */
  color: #475569; /* slate-600 */
  border-radius: 4px;
  cursor: not-allowed;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  opacity: 0.6;
}

.DocInputNode_buttonsWrapper__hyvBU button {
  /* Appearance */
  padding: 2px 8px;
  border: none;
  background-color: #4ade80;
  background-color: var(--input-node-button-bg);
  color: #14532d;
  color: var(--input-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;

  /* Typography */
  font-size: 0.7rem; /* Smaller font size for buttons */
  font-weight: 800;
  font-family: 'Inconsolata', monospace; /* Monospace font for buttons */

  /* Transitions and States */
  transition: background-color 0.2s ease;
  margin: 0; /* Reset default margin */
  pointer-events: auto; /* Enable pointer events on buttons */
  position: relative;
  z-index: 100;
}

.DocInputNode_buttonsWrapper__hyvBU button img {
  top: 1px;
  position: relative;
  justify-content: center;
  align-items: center;
}

.DocInputNode_buttonsWrapper__hyvBU button:hover {
  background-color: #22c55e;
  background-color: var(--input-node-button-bg-hover);
}

.DocInputNode_buttonsWrapper__hyvBU button:disabled {
  background-color: #16a34a;
  background-color: var(
    --input-node-label-text
  ); /* Different bg for disabled */
  color: #f0fdf4;
  color: var(--input-node-bg); /* Contrasting text for disabled */
  cursor: not-allowed;
  opacity: 0.6;
}

/* NEW: Active state for the cloud toggle */
.DocInputNode_buttonsWrapper__hyvBU .DocInputNode_cloudActive__x07nE {
  background-color: #22c55e;
  background-color: var(--input-node-border-selected);
  color: white; /* Make icon white for contrast */
  box-shadow: 0 0 8px #22c55e;
  box-shadow: 0 0 8px var(--input-node-border-selected);
}

/* --- Node Content Area --- */
/* Styles the main content section holding the textarea, etc. */
.DocInputNode_nodeContent__Mn6qi {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px; /* Space between textarea and other content elements */
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* --- Textarea Styling --- */
/* Styles the main prompt input textarea */
.DocInputNode_nodeContent__Mn6qi textarea {
  /* Box Model */
  width: calc(100% - 16px); /* Full width minus horizontal padding */
  padding: 8px;
  border: 1px solid #bbf7d0;
  border: 1px solid var(--input-node-textarea-border);
  border-radius: 4px;
  min-height: 100px; /* Minimum height before scrolling/resizing */
  resize: vertical; /* Allow vertical resizing */

  /* Colors and Typography */
  background-color: #f6fef9;
  background-color: var(--input-node-textarea-bg);
  color: #14532d;
  color: var(--input-node-text);
  font-family: 'Inconsolata', monospace; /* Monospace for code/prompt */

  /* Interactions */
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

/* --- Connected Data Display --- */
/* Styles the area showing data from connected upstream nodes */
.DocInputNode_connectedData__Zve8U {
  margin-top: 5px;
  padding: 5px;
  font-size: smaller;
  max-height: 50px; /* Limit height and allow scrolling */
  overflow-y: auto;
  background: #ecfdf5;
  background: var(--input-node-connected-data-bg);
  border-radius: 3px;
  border: 1px solid #bbf7d0;
  border: 1px solid var(--input-node-textarea-border);
  color: #16a34a;
  color: var(--input-node-label-text);
  word-break: break-all; /* Prevent long strings from overflowing */
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocInputNode_connectedData__Zve8U strong {
  color: #14532d;
  color: var(--input-node-text); /* Make the label stand out */
  margin-right: 4px;
}

.DocInputNode_coinIcon__vPJ58 {
  width: 20px;
  height: 20px;
  /* filter: brightness(0) invert(1); White by default for dark mode */
  opacity: 0.9;
  transition:
    filter 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  filter: brightness(0) invert(0);
  opacity: 0.6;
  /* filter: drop-shadow(0 0 2px rgba(256,256,256,0.5)); */
}

/* --- Loading/Error States --- */
/* Styles for text indicating loading or error messages */
.DocInputNode_loading__i76SA,
.DocInputNode_error__vjMkl {
  font-size: smaller;
  margin: 5px 0 0 0;
  font-family: 'Inconsolata', monospace;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocInputNode_loading__i76SA {
  color: #16a34a;
  color: var(--input-node-loading-text);
}

.DocInputNode_error__vjMkl {
  color: #dc2626;
  color: var(--input-node-error-text);
  font-weight: bold;
}

/* --- Token Counter Styling --- */
/* Styles the token counter positioned at the bottom of the node */
.DocInputNode_tokenCounter__8onvS {
  position: absolute;
  bottom: -38px; /* Position below the node */
  left: 0;
  right: 0;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background-color: #f0f9ff;

  background-color: var(--token-counter-bg);
  border: 1px solid #7dd3fc;
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  pointer-events: auto;
}

.DocInputNode_tokenInfo__hl85d {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  z-index: 15;
  position: relative;
}

.DocInputNode_creditInfo__Pzl-S {
  display: flex;
  align-items: center;
  pointer-events: auto;
  z-index: 15;
  position: relative;
  gap: 4px;
}

.DocInputNode_tokenCount__o9Vxb {
  color: #0c4a6e;
  color: var(--token-counter-text);
  font-weight: 600;
}

.DocInputNode_estimatedCost__eaZSg {
  color: #065f46;
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1); /* green with transparency */
  padding: 1px 4px;
  border-radius: 3px;
}

.DocInputNode_estimatedCredits__NIIWI {
  color: #065f46;
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1); /* blue with transparency */
  padding: 2px 6px;
  border-radius: 3px;
}

.DocInputNode_creditInfoIcon__tsWZw {
  color: #0c4a6e;
  color: var(--token-counter-text);
  font-size: 0.6rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.DocInputNode_creditInfoIcon__tsWZw:hover {
  opacity: 1;
  color: #22c55e;
  color: var(--input-node-border-selected);
}

.DocInputNode_tokenWarning__8CRhN {
  color: #92400e;
  color: var(--token-counter-warning-text);
  background-color: #fef3c7;
  background-color: var(--token-counter-warning);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom: -50px; /* Position below the main counter when warning appears */
  left: 0;
  right: 0;
}

.DocInputNode_freeModel__0WLyP {
  color: #0c4a6e;
  color: var(--token-counter-text);
  font-weight: 600;
}

/* Hide token counter when node is being dragged to avoid visual clutter */
.react-flow__node.dragging .DocInputNode_tokenCounter__8onvS {
  display: none;
}

.DocInputNode_schemaIcon__qptKZ {
  filter: brightness(0) invert(0); /* Default to black for light theme */
}

.DocInputNode_schemaIconBlack__3MqT8 {
  filter: brightness(0) invert(0); /* Black for normal contrast */
}

/* --- Modal Styling --- */
/* General styles for the modal overlay and content box */
/* These might be defined globally or scoped if needed */
.DocInputNode_modalOverlay__yzW0p {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Ensure modal is on top */
}

.DocInputNode_modalContent__g3mWo {
  /* Box Model and Appearance */
  background: #f0fdf4;
  background: var(--input-node-modal-bg);
  color: #14532d;
  color: var(--input-node-modal-text);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #86efac;
  border: 1px solid var(--input-node-modal-border);
  width: 90%;
  max-width: 600px; /* Limit maximum width */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* Specific Content Styling */
  /* Styles for elements specifically inside the modal */
}

.DocInputNode_modalContent__g3mWo h3 {
  margin-top: 0;
  color: #14532d;
  color: var(--input-node-modal-text); /* Use modal text color */
  margin-bottom: 15px; /* Space below heading */
}

.DocInputNode_modalContent__g3mWo textarea {
  /* Modal-specific textarea styles */
  width: calc(100% - 16px); /* Account for padding */
  background-color: #f6fef9;
  background-color: var(--input-node-modal-textarea-bg);
  color: #14532d;
  color: var(--input-node-modal-textarea-text);
  border: 1px solid #bbf7d0;
  border: 1px solid var(--input-node-modal-textarea-border);
  font-family: 'Inconsolata', monospace;
  font-size: 13px;
  padding: 8px;
  border-radius: 4px;
  /* rows attribute controls height, but can set min-height too */
}

/* --- Modal Actions/Buttons --- */
/* Styles for the button container at the bottom of the modal */
.DocInputNode_modalActions__LUNOC {
  text-align: right; /* Aligns buttons to the right by default */
  margin-top: 15px;
  display: flex;
  justify-content: flex-end; /* Explicitly align items to the end */
  gap: 10px; /* Space between modal buttons */
}

.DocInputNode_modalActions__LUNOC button {
  /* Appearance */
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* Typography */
  font-size: 0.75rem;

  /* Colors and Transitions */
  background-color: #4ade80;
  background-color: var(--input-node-modal-button-bg);
  color: #14532d;
  color: var(--input-node-modal-button-text);
  transition: background-color 0.2s ease;
  margin: 0; /* Reset default margin */
}

.DocInputNode_modalActions__LUNOC button:hover {
  background-color: #22c55e;
  background-color: var(--input-node-modal-button-hover);
}

/* Specific style for the cancel button */
.DocInputNode_modalActions__LUNOC button.DocInputNode_cancelButton__riN9w {
  background: #e5e7eb;
  background: var(--input-node-modal-cancel-bg);
  color: #374151;
  color: var(--input-node-modal-cancel-text);
}

.DocInputNode_modalActions__LUNOC button.DocInputNode_cancelButton__riN9w:hover {
  background: #d1d5db;
  background: var(--input-node-modal-cancel-hover);
}

/* Documentation Container */
.DocInputNode_docContainer__sStS8 {
  position: relative;
  display: block;
  z-index: 1;
}

/* Highlight effects for tooltip interactions */
.DocInputNode_textareaHighlight__zy0Y5 {
  border-color: #22c55e !important;
  border-color: var(--input-node-border-selected) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  background-color: #f6fef9 !important;
  background-color: var(--input-node-textarea-bg) !important;
  transition: all 0.2s ease !important;
}

/* Highlight effects for buttons */
.DocInputNode_buttonsWrapper__hyvBU button.DocInputNode_buttonHighlight__t8o\+a {
  background-color: #22c55e !important;
  background-color: var(--input-node-button-bg-hover) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* Highlight effects for token counter and credit info */
.DocInputNode_tokenInfo__hl85d.DocInputNode_componentHighlight__GBCpC,
.DocInputNode_creditInfo__Pzl-S.DocInputNode_componentHighlight__GBCpC {
  background-color: #dcfce7 !important;
  background-color: var(--input-node-icon-bg) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
}

/* Highlight animation */
@keyframes DocInputNode_pulseHighlight__QhfDZ {
  0% {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
  }
}

/* Schema Status and Regenerate Button */
.DocInputNode_schemaStatus__0I9rW {
  margin-top: 8px;
  padding: 8px;
  background-color: #dcfce7;
  background-color: var(--input-node-icon-bg);
  border: 1px solid #86efac;
  border: 1px solid var(--input-node-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.DocInputNode_schemaStatusText__l2i33 {
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  color: #16a34a;
  color: var(--input-node-label-text);
  margin: 0;
  text-align: center;
}

.DocInputNode_regenerateButton__vKtKR {
  padding: 6px 10px;
  border: none;
  background-color: #4ade80;
  background-color: var(--input-node-button-bg);
  color: #14532d;
  color: var(--input-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.DocInputNode_regenerateButton__vKtKR:hover:not(:disabled) {
  background-color: #22c55e;
  background-color: var(--input-node-button-bg-hover);
  transform: translateY(-1px);
}

.DocInputNode_regenerateButton__vKtKR:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes DocInputNode_spin__UuA96 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.DocInputNode_spinning__Abw4b {
  animation: DocInputNode_spin__UuA96 1s linear infinite;
}

/* Dynamic Tooltip for Documentation */
.DocTooltip_tooltip__0R4ko {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px;
  width: 280px;
  font-size: 13px;
  color: #333;
  position: absolute;
  top: 30px;
  z-index: 99999 !important; /* CRITICAL: Highest z-index to appear above everything */
  animation: DocTooltip_fadeInTooltip__inVsm 0.2s ease-out;
  pointer-events: none; /* Tooltip shouldn't block mouse events */
}

/* Button-specific positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_settingsTooltip__VUWgI {
  left: calc(160px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_textEditorTooltip__jSZhD {
  left: calc(200px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_fetchButtonTooltip__GjwW2 {
  left: calc(240px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_fetchTooltip__tBHS2 {
  left: calc(240px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_playTooltip__BxHhM {
  left: calc(280px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_modelTooltip__5ER6r {
  left: calc(320px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_cloudTooltip__XtdLa {
  left: calc(360px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_helpTooltip__SYZJv {
  left: calc(400px - 140px);
}

/* Transform node tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_generateTooltip__t1xv5 {
  left: calc(200px - 140px);
}

/* Video node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_refetchTooltip__iRRcf {
  left: calc(320px - 140px);
}

/* Audio node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_voiceTooltip__b7J1I {
  left: calc(280px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_instructionsTooltip__dGk3B {
  left: calc(50% - 140px);
  top: 220px;
}

/* Output node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_viewTextTooltip__DoqTL {
  left: calc(160px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_outputDisplayTooltip__Etujx {
  left: calc(50% - 140px);
  top: 180px;
}

/* Data node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_configIndicatorTooltip__WEr1a {
  left: calc(120px - 140px);
}

/* Image node specific tooltip positioning - use the actual hover component names */

.DocTooltip_tooltip__0R4ko.DocTooltip_textareaTooltip__i3O3c {
  left: calc(50% - 140px);
  top: 180px;
}

/* Input node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_cloudTooltip__XtdLa {
  left: calc(120px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_modelTooltip__5ER6r {
  left: calc(160px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_schemaTooltip__gMYP9 {
  left: calc(200px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_generateTooltip__t1xv5 {
  left: calc(280px - 140px);
}

.DocTooltip_tooltip__0R4ko.DocTooltip_tokenCounterTooltip__RmYl9 {
  left: -130px !important;
  top: 280px !important;
}

.DocTooltip_tooltip__0R4ko.DocTooltip_creditEstimatorTooltip__Go4pd {
  left: calc(200px - 140px);
  top: 280px;
}

/* Google Drive node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_connectButtonTooltip__w5Jqu {
  left: calc(50% - 140px);
  top: 30px;
}

.DocTooltip_tooltip__0R4ko.DocTooltip_uploadButtonTooltip__eeajN {
  left: calc(200px - 140px);
  top: 30px;
}

.DocTooltip_tooltip__0R4ko.DocTooltip_disconnectButtonTooltip__yZLRH {
  left: calc(240px - 140px);
  top: 30px;
}

.DocTooltip_tooltip__0R4ko.DocTooltip_filePreviewTooltip__aEks0 {
  left: calc(50% - 140px);
  top: 120px;
}

.DocTooltip_tooltip__0R4ko.DocTooltip_statusIndicatorTooltip__oHEcq {
  left: calc(50% - 140px);
  top: 320px;
}

/* Smart Transform node specific tooltip positioning */
.DocTooltip_tooltip__0R4ko.DocTooltip_regenerateButtonTooltip__gMVm\+ {
  left: calc(50% - 140px);
  top: 120px;
}

.DocTooltip_tooltip__0R4ko.DocTooltip_nodeContentTooltip__hNBMN {
  left: calc(50% - 140px);
  top: 80px;
}

@keyframes DocTooltip_fadeInTooltip__inVsm {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.DocTooltip_tooltipHeader__wqPbn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.DocTooltip_tooltipIcon__UnNJX {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.DocTooltip_tooltipTitle__KI567 {
  flex: 1 1;
}

.DocTooltip_title__aSKem {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  color: #1f2937;
}

.DocTooltip_subtitle__7-\+O\+ {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.DocTooltip_tooltipContent__Mdh2A {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.DocTooltip_description__v82vH {
  color: #4b5563;
  font-size: 12px;
  line-height: 1.4;
}

.DocTooltip_features__5JDw0 {
  margin-top: 4px;
}

.DocTooltip_featuresTitle__-bSHi {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.DocTooltip_featuresList__4g8gE {
  margin: 0;
  padding-left: 12px;
  list-style: none;
}

.DocTooltip_featuresList__4g8gE li {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 3px;
  position: relative;
  line-height: 1.3;
}

.DocTooltip_featuresList__4g8gE li::before {
  content: '•';
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: -8px;
}

.DocTooltip_action__rD8e3 {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.DocTooltip_actionText__B3VoW {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

.DocTooltip_tooltipArrow__t6jr0 {
  position: absolute;
  top: -6px;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
  border-bottom: none;
  border-left: none;
}

/* Arrow should be centered in each tooltip since tooltip is under the button */
.DocTooltip_tooltip__0R4ko .DocTooltip_tooltipArrow__t6jr0 {
  right: 15%;
}

/* Arrow positioning for right-aligned tooltips */
.DocTooltip_tooltip__0R4ko[style*='right:'] .DocTooltip_tooltipArrow__t6jr0 {
  left: 85% !important;
  right: auto !important;
}

/* Arrow positioning for bottom-positioned tooltips (above the node) */
.DocTooltip_tooltip__0R4ko[style*='bottom:'] .DocTooltip_tooltipArrow__t6jr0 {
  top: auto !important;
  bottom: -6px !important;
  transform: rotate(225deg) !important;
}

/* Dark mode support */
[data-theme='dark'] .DocTooltip_tooltip__0R4ko {
  background: rgba(31, 41, 55, 0.96);
  border-color: rgba(75, 85, 99, 0.3);
  color: #e5e7eb;
}

[data-theme='dark'] .DocTooltip_title__aSKem {
  color: #f9fafb;
}

[data-theme='dark'] .DocTooltip_subtitle__7-\+O\+ {
  color: #9ca3af;
}

[data-theme='dark'] .DocTooltip_description__v82vH {
  color: #d1d5db;
}

[data-theme='dark'] .DocTooltip_featuresTitle__-bSHi {
  color: #e5e7eb;
}

[data-theme='dark'] .DocTooltip_featuresList__4g8gE li {
  color: #9ca3af;
}

[data-theme='dark'] .DocTooltip_actionText__B3VoW {
  color: #60a5fa;
}

[data-theme='dark'] .DocTooltip_tooltipHeader__wqPbn,
[data-theme='dark'] .DocTooltip_action__rD8e3 {
  border-color: rgba(75, 85, 99, 0.3);
}

/* Updated to match current main app styling */
@keyframes DocDataNode_scaleInNode__e-wTY {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

:root {
  --data-node-bg: #fefce8; /* yellow-50 */
  --data-node-border: #fde047; /* yellow-300 */
  --data-node-border-selected: #facc15; /* yellow-400 */
  --data-node-text: #78350f; /* yellow-900 */
  --data-node-label-text: #b45309; /* yellow-800 */
  --data-node-icon-bg: #fef9c3; /* yellow-100 */
  --data-node-icon-color: #854d0e; /* yellow-800 */
  --data-node-button-bg: #fde047; /* yellow-300 */
  --data-node-button-bg-hover: #facc15; /* yellow-400 */
  --data-node-button-text: #78350f; /* yellow-900 */
  --data-node-textarea-bg: #fefdf8; /* yellow-25 */
  --data-node-textarea-border: #fef08a; /* yellow-200 */
}

.DocDataNode_nodeBase__gntLQ {
  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Layout and Box Model */
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 260px;
  max-width: 350px;
  width: 350px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid #fde047;
  border: 1px solid var(--data-node-border);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Colors and Typography */
  background-color: #fefce8;
  background-color: var(--data-node-bg);
  color: #78350f;
  color: var(--data-node-text);
  font-family: 'Inconsolata', monospace;

  /* Positioning Context */
  position: relative;

  /* Transitions */
  transition: border-color 0.2s ease-in-out;
  animation: DocDataNode_scaleInNode__e-wTY 0.3s ease-out;
  gap: 8px;
}

.DocDataNode_floatingIcon__pYdVl {
  background-color: #fef9c3;
  color: #854d0e;
  color: var(--data-node-icon-color);
  border-radius: 20%;
  border: 1px solid #fde047;
  border: 1px solid var(--data-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  z-index: 40;
}

.DocDataNode_nodeHeader__oO36E {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 50;
  pointer-events: none;
}

.DocDataNode_buttonsWrapper__WkXvS {
  display: flex;
  gap: 5px;
  align-items: center;
  pointer-events: auto;
  position: relative;
  z-index: 60;
}

.DocDataNode_buttonsWrapper__WkXvS .DocDataNode_isolateButton__eSi7l {
  padding: 4px 8px;
  border: none;
  background-color: #cbd5e1; /* slate-300 */
  color: #475569; /* slate-600 */
  border-radius: 4px;
  cursor: not-allowed;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  opacity: 0.6;
}

.DocDataNode_buttonsWrapper__WkXvS button {
  padding: 4px 8px;
  border: none;
  background-color: #fde047;
  background-color: var(--data-node-button-bg);
  color: #78350f;
  color: var(--data-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inconsolata', monospace;
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

.DocDataNode_buttonsWrapper__WkXvS button:hover {
  background-color: #facc15;
  background-color: var(--data-node-button-bg-hover);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.DocDataNode_buttonsWrapper__WkXvS button img {
  top: 1px;
  position: relative;
}

.DocDataNode_configIndicator__gND3h {
  width: 8px;
  height: 8px;
  background-color: #facc15;
  background-color: var(--data-node-border-selected);
  border-radius: 50%;
  box-shadow: 0 0 5px #facc15;
  box-shadow: 0 0 5px var(--data-node-border-selected);
}

.DocDataNode_nodeContent__Rb1UM {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

.DocDataNode_nodeContent__Rb1UM textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #fef08a;
  border: 1px solid var(--data-node-textarea-border);
  border-radius: 4px;
  background-color: #fefdf8;
  background-color: var(--data-node-textarea-bg);
  color: #78350f;
  color: var(--data-node-text);
  font-family: 'Inconsolata', monospace;
  min-height: 150px;
  flex-grow: 1;
  resize: vertical;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.DocDataNode_nodeContent__Rb1UM textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.DocDataNode_nodeContent__Rb1UM .DocDataNode_textareaHighlight__JQtC\+ {
  border-color: #facc15 !important;
  border-color: var(--data-node-border-selected) !important;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3) !important;
  background-color: #fffbeb !important;
  transition: all 0.2s ease !important;
}

.DocDataNode_error__oVc5I {
  font-size: smaller;
  color: #ef4444;
  font-weight: bold;
}

/* Documentation Container */
.DocDataNode_docContainer__o3ZJF {
  position: relative;
  display: block;
  z-index: 1;
}

/* Dynamic Tooltip for Documentation */
.DocDataNode_staticTooltip__Y08hu {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px;
  width: 280px;
  font-size: 13px;
  color: #333;
  position: absolute;
  top: 30px;
  z-index: 1000;
  animation: DocDataNode_fadeInTooltip__oO6Ia 0.2s ease-out;
}

/* Button-specific positioning */
.DocDataNode_staticTooltip__Y08hu.DocDataNode_settingsTooltip__cUWbf {
  left: calc(160px - 140px);
}

.DocDataNode_staticTooltip__Y08hu.DocDataNode_textEditorTooltip__OOrpc {
  left: calc(200px - 140px);
}

.DocDataNode_staticTooltip__Y08hu.DocDataNode_fetchButtonTooltip__sEkD6 {
  left: calc(240px - 140px);
}

.DocDataNode_staticTooltip__Y08hu.DocDataNode_textareaTooltip__CVvX0 {
  left: calc(50% - 140px);
  top: 180px;
}

@keyframes DocDataNode_fadeInTooltip__oO6Ia {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.DocDataNode_tooltipHeader__PrAfK {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.DocDataNode_tooltipIcon__-GjqT {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.DocDataNode_tooltipTitle__OnJ6l {
  flex: 1 1;
}

.DocDataNode_title__Goq0E {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  color: #1f2937;
}

.DocDataNode_subtitle__4Nolv {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.DocDataNode_tooltipContent__3ZdzI {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.DocDataNode_description__AEkm4 {
  color: #4b5563;
  font-size: 12px;
  line-height: 1.4;
}

.DocDataNode_features__uoiDF {
  margin-top: 4px;
}

.DocDataNode_featuresTitle__wGQeR {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.DocDataNode_featuresList__0hdWq {
  margin: 0;
  padding-left: 12px;
  list-style: none;
}

.DocDataNode_featuresList__0hdWq li {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 3px;
  position: relative;
  line-height: 1.3;
}

.DocDataNode_featuresList__0hdWq li::before {
  content: '•';
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: -8px;
}

.DocDataNode_action__cXQdR {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.DocDataNode_actionText__GLcJC {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

.DocDataNode_tooltipArrow__oXXkN {
  position: absolute;
  top: -6px;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
  border-bottom: none;
  border-left: none;
}

/* Arrow should be centered in each tooltip since tooltip is under the button */
.DocDataNode_staticTooltip__Y08hu .DocDataNode_tooltipArrow__oXXkN {
  right: 15%;
}

/* Component Labels */
.DocDataNode_componentLabels__NPgJa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.DocDataNode_label__Kz512 {
  position: absolute;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  z-index: 20;
}

.DocDataNode_labelText__iilWk {
  display: block;
  font-weight: 700;
  margin-bottom: 1px;
}

.DocDataNode_labelDesc__iLCQz {
  display: block;
  font-size: 8px;
  opacity: 0.9;
  font-weight: 400;
}

/* Dark mode support */
[data-theme='dark'] .DocDataNode_staticTooltip__Y08hu {
  background: rgba(31, 41, 55, 0.96);
  border-color: rgba(75, 85, 99, 0.3);
  color: #e5e7eb;
}

[data-theme='dark'] .DocDataNode_title__Goq0E {
  color: #f9fafb;
}

[data-theme='dark'] .DocDataNode_subtitle__4Nolv {
  color: #9ca3af;
}

[data-theme='dark'] .DocDataNode_description__AEkm4 {
  color: #d1d5db;
}

[data-theme='dark'] .DocDataNode_featuresTitle__wGQeR {
  color: #e5e7eb;
}

[data-theme='dark'] .DocDataNode_featuresList__0hdWq li {
  color: #9ca3af;
}

[data-theme='dark'] .DocDataNode_actionText__GLcJC {
  color: #60a5fa;
}

[data-theme='dark'] .DocDataNode_tooltipHeader__PrAfK,
[data-theme='dark'] .DocDataNode_action__cXQdR {
  border-color: rgba(75, 85, 99, 0.3);
}

/* Transform Node with tooltip support */
.DocTransformNode_docContainer__oksek {
  position: relative;
}

.DocTransformNode_nodeBase__7-oLS {
  --transform-node-bg: #f0fdfa;
  --transform-node-border: #99f6e4;
  --transform-node-text: #0f766e;
  --transform-node-icon-bg: #ccfbf1;
  --transform-node-button-bg: #5eead4;
  --transform-node-button-text: #134e4a;
  --transform-node-display-bg: #f8fffd;
  --transform-node-display-border: #ccfbf1;
  --transform-node-status-text: var(--transform-node-label-text);

  border-radius: 8px;
  border: 1px solid var(--transform-node-border);
  background-color: var(--transform-node-bg);
  color: var(--transform-node-text);
  padding: 10px;
  font-family: 'Inconsolata';
  min-width: 200px;
  max-width: 200px;
  position: relative;
  animation: DocTransformNode_scaleInNode__Vp-qM 0.4s ease-out;
}
.DocTransformNode_nodeHeader__NNB-A {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  top: -34px;
  left: -0px;
  width: 100%;
  z-index: 50;
  pointer-events: none;
}
.DocTransformNode_floatingIcon__aDLJ2 {
  background-color: var(--transform-node-icon-bg);
  border-radius: 20%;
  border: 1px solid var(--transform-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.DocTransformNode_buttonsWrapper__EJb0l {
  display: flex;
  gap: 5px;
  pointer-events: auto;
  z-index: 60;
}
.DocTransformNode_buttonsWrapper__EJb0l button {
  padding: 4px 8px;
  border: none;
  background-color: var(--transform-node-button-bg);
  color: var(--transform-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  pointer-events: auto;
  z-index: 100;
  transition: all 0.2s ease;
}

/* Button highlighting for tooltips */
.DocTransformNode_buttonsWrapper__EJb0l button.DocTransformNode_buttonHighlight__MOlco {
  background-color: var(--transform-node-button-bg) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}
.DocTransformNode_nodeContent__r\+ff3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}
.DocTransformNode_inputStatus__ligVO {
  font-size: smaller;
  color: var(--transform-node-status-text);
  margin: 0;
  padding: 5px;
  background-color: var(--transform-node-display-bg);
  border: 1px solid var(--transform-node-display-border);
  border-radius: 3px;
  word-break: break-all;
  max-height: 60px;
  overflow-y: auto;
  min-height: 85px;
}
@keyframes DocTransformNode_scaleInNode__Vp-qM {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Paste content from src/MainApp/nodes/Modify Node/SmartTransformNode.module.css */
.DocSmartTransformNode_nodeBase__bke\+3 {
  --smart-node-bg: #eef2ff;
  --smart-node-border: #a5b4fc;
  --smart-node-text: #3730a3;
  --smart-node-icon-bg: #e0e7ff;
  --smart-node-display-bg: #f8faff;
  --smart-node-display-border: #e0e7ff;
  --smart-node-status-text: #4f46e5;

  border-radius: 8px;
  border: 1px solid var(--smart-node-border);
  background-color: var(--smart-node-bg);
  color: var(--smart-node-text);
  padding: 10px;
  font-family: 'Inconsolata';
  min-width: 200px;
  max-width: 200px;
  position: relative;
  animation: DocSmartTransformNode_scaleInNode__KyRsy 0.4s ease-out;
}
.DocSmartTransformNode_nodeHeader__eFV0p {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  top: -34px;
  left: 0px;
  width: 100%;
  z-index: 10;
}
.DocSmartTransformNode_floatingIcon__uDee\+ {
  background-color: var(--smart-node-icon-bg);
  border-radius: 20%;
  border: 1px solid var(--smart-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.DocSmartTransformNode_nodeContent__fdbcV {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 80px;
  justify-content: center;
}
.DocSmartTransformNode_inputStatus__CTK1j {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--smart-node-status-text);
  margin: 0;
  padding: 20px;
  background-color: var(--smart-node-display-bg);
  border: 1px solid var(--smart-node-display-border);
  border-radius: 4px;
  text-align: center;
  min-height: 40px;
}
/* Documentation Container */
.DocSmartTransformNode_docContainer__eZdGS {
  position: relative;
  display: block;
  z-index: 100;
  min-height: 200px;
  pointer-events: auto;
}

/* Regenerate Button */
.DocSmartTransformNode_regenerateButton__MmFxS {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  background-color: #6366f1; /* indigo-500 */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.DocSmartTransformNode_regenerateButton__MmFxS:hover {
  background-color: #4f46e5; /* indigo-600 */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.DocSmartTransformNode_regenerateButton__MmFxS:disabled {
  background-color: #a5b4fc; /* indigo-300 */
  cursor: not-allowed;
  transform: none;
}

/* Tooltip Highlight Effects */
.DocSmartTransformNode_buttonHighlight__wREIr {
  background-color: #4f46e5 !important; /* indigo-600 */
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #c7d2fe; /* indigo-200 */
}

.DocSmartTransformNode_componentHighlight__0Ugzt {
  box-shadow: 0 0 0 2px #6366f1; /* indigo-500 */
  transform: scale(1.02);
}

@keyframes DocSmartTransformNode_scaleInNode__KyRsy {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* src/nodes/SchemaChildNode.module.css */
@keyframes DocSchemaChildNode_scaleInNode__dQ5in {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}
/* --- Pastel Theme Overrides for SchemaChildNode --- */
.DocSchemaChildNode_nodeBase__lnH2S {
  /* Define SchemaChildNode specific colors using pastel greys/slates */
  --schemachild-node-bg: #f8fafc; /* slate-50 */
  --schemachild-node-border: #cbd5e1; /* slate-300 */
  --schemachild-node-border-selected: #64748b; /* slate-500 */
  --schemachild-node-text: #1e293b; /* slate-800 */
  --schemachild-node-label-text: #475569; /* slate-600 */
  --schemachild-node-icon-bg: #f1f5f9; /* slate-100 */
  --schemachild-node-icon-color: #334155; /* slate-700 */
  --schemachild-node-display-bg: #ffffff; /* white */
  --schemachild-node-display-border: #e2e8f0; /* slate-200 */
  --schemachild-node-display-text: var(--schemachild-node-text);

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Apply the overrides */
  border-radius: 6px;
  border: 1px solid var(--schemachild-node-border); /* Use override */
  background-color: var(--schemachild-node-bg); /* Use override */
  color: var(--schemachild-node-text); /* Use override */
  padding: 8px 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  min-width: 200px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s ease-in-out;
  animation: DocSchemaChildNode_scaleInNode__dQ5in 0.3s ease-out;
  position: relative;
}

body.no-node-animation .DocSchemaChildNode_nodeBase__lnH2S {
  animation: none;
}

/* Selected state */
.react-flow__node.selected .DocSchemaChildNode_nodeBase__lnH2S {
  border-color: var(--schemachild-node-border-selected); /* Use override */
  box-shadow: 0 0 0 1px var(--schemachild-node-border-selected);
}

.DocSchemaChildNode_nodeHeader__FSg46 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: 0px;
  z-index: 10;
}

.DocSchemaChildNode_nodeHeader__FSg46 strong {
  font-size: 0.6rem;
  background-color: var(--schemachild-node-icon-bg); /* Use override */
  color: var(--schemachild-node-icon-color);
  font-weight: 500;
  font-family: 'Inconsolata', monospace;
  display: block;
  padding: 6px 15px;
  border-radius: 5px;
}

.DocSchemaChildNode_buttonsWrapper__jl93f {
  /* Empty but maintains layout */
}

.DocSchemaChildNode_iconWrapper__ZLjLx {
  background-color: var(--schemachild-node-icon-bg); /* Use override */
  color: var(--schemachild-node-icon-color); /* Use override */
  border-radius: 4px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.DocSchemaChildNode_nodeContent__UQ0pF {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Style the label (attribute name) */
.DocSchemaChildNode_nodeContent__UQ0pF strong {
  font-size: 0.8rem;
  color: var(--schemachild-node-label-text); /* Use override */
  font-weight: 600;
  display: block;
}

/* Style the value display */
.DocSchemaChildNode_valueDisplay__dqoBQ {
  font-size: 0.75rem;
  color: var(--schemachild-node-display-text); /* Use override */
  margin: 0;
  padding: 4px 6px;
  background-color: var(--schemachild-node-display-bg); /* Use override */
  border: 1px solid var(--schemachild-node-display-border); /* Use override */
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-y: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

/* Image node with tooltip support */
.DocImageNode_docContainer__WUbz3 {
  position: relative;
}

/* src/nodes/ImageGenerationNode.module.css */
@keyframes DocImageNode_scaleInNode__\+kwx6 {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocImageNode_nodeBase__NfjeG {
  /* New "Castle" color scheme using slates and indigos */
  --image-node-bg: #f1f5f9; /* slate-100 */
  --image-node-border: #cbd5e1; /* slate-300 */
  --image-node-border-selected: #4f46e5; /* indigo-600 */
  --image-node-text: #1e293b; /* slate-800 */
  --image-node-label-text: #334155; /* slate-700 */
  --image-node-icon-bg: #e2e8f0; /* slate-200 */
  --image-node-icon-color: #334155; /* slate-700 */
  --image-node-button-bg: #6366f1; /* indigo-500 */
  --image-node-button-bg-hover: #4f46e5; /* indigo-600 */
  --image-node-button-text: #e0e7ff; /* indigo-100 */
  --image-node-textarea-bg: #f8fafc; /* slate-50 */
  --image-node-textarea-border: #e2e8f0; /* slate-200 */
  --image-node-loading-text: var(--image-node-label-text);
  --image-node-error-text: #ef4444; /* red-500 */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  border-radius: 8px;
  border: 1px solid var(--image-node-border);
  background-color: var(--image-node-bg);
  color: var(--image-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DocImageNode_scaleInNode__\+kwx6 0.3s ease-out;
  position: relative;
}

body.no-node-animation .DocImageNode_nodeBase__NfjeG {
  animation: none;
}

.react-flow__node.selected .DocImageNode_nodeBase__NfjeG {
  border-color: var(--image-node-border-selected);
  box-shadow: 0 0 0 1px var(--image-node-border-selected);
}

.DocImageNode_floatingIcon__H6MNY {
  background-color: #e2e8f0;
  color: var(--image-node-icon-color);
  border-radius: 20%;
  border: 1px solid var(--image-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocImageNode_nodeHeader__fUnzj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 50;
  pointer-events: none;
}

.DocImageNode_buttonsWrapper__iF07r {
  display: flex;
  gap: 5px;
  pointer-events: auto;
  z-index: 60;
}

.DocImageNode_buttonsWrapper__iF07r .DocImageNode_isolateButton__v\+idA {
  padding: 4px 8px;
  border: none;
  background-color: #cbd5e1; /* slate-300 */
  color: #475569; /* slate-600 */
  border-radius: 4px;
  cursor: not-allowed;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  opacity: 0.6;
}

.DocImageNode_buttonsWrapper__iF07r button {
  padding: 4px 8px;
  border: none;
  background-color: var(--image-node-button-bg);
  color: var(--image-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: all 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  pointer-events: auto;
  z-index: 100;
}

/* Button highlighting for tooltips */
.DocImageNode_buttonsWrapper__iF07r button.DocImageNode_buttonHighlight__4WBMZ {
  background-color: var(--image-node-button-bg-hover) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* NEW: Active state for the cloud toggle */
.DocImageNode_buttonsWrapper__iF07r .DocImageNode_cloudActive__8Lm9W {
  background-color: #22c55e; /* A distinct green color */
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

/* NEW: Active state for the shop toggle */
.DocImageNode_buttonsWrapper__iF07r .DocImageNode_shopActive__8mkF2 {
  background-color: #3b82f6; /* Blue color for shop */
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

.DocImageNode_buttonsWrapper__iF07r button:hover {
  background-color: var(--image-node-button-bg-hover);
}

.DocImageNode_buttonsWrapper__iF07r button:disabled {
  background-color: var(--image-node-label-text);
  color: var(--image-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.DocImageNode_nodeContent__wZiUV {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.DocImageNode_nodeContent__wZiUV textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--image-node-textarea-border);
  border-radius: 4px;
  background-color: var(--image-node-textarea-bg);
  color: var(--image-node-text);
  font-family: inherit;
  min-height: 100px;
  resize: vertical;
  transition: all 0.2s ease;
}

/* Textarea highlighting for tooltips */
.DocImageNode_textareaHighlight__zLEXx {
  border-color: var(--image-node-border-selected) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  background-color: var(--image-node-textarea-bg) !important;
  transition: all 0.2s ease !important;
}

.DocImageNode_loading__dVjEo {
  font-size: smaller;
  color: var(--image-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.DocImageNode_error__Esu4V {
  font-size: smaller;
  color: var(--image-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocImageNode_imageContainer__KQd57 {
  margin-top: 5px;
  width: 100%;
  height: 200px;
  background-color: #1d1d1d;
  color: #4d4d4d;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--image-node-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.DocImageNode_imagePreview__1A\+mF {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.DocImageNode_imageActions__y7wTb {
  padding: 8px;
  background-color: var(--image-node-bg);
  width: 100%;
  text-align: center;
}

.DocImageNode_fullScaleLink__gqcLF {
  color: var(--image-node-button-bg);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.DocImageNode_fullScaleLink__gqcLF:hover {
  color: var(--image-node-button-bg-hover);
  text-decoration: underline;
}

.DocImageNode_tokenCounter__prK58 {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.DocImageNode_tokenInfo__2V412 {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.DocImageNode_creditInfo__8SgMy {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

/* Component highlighting for token counter and credit info */
.DocImageNode_tokenInfo__2V412.DocImageNode_componentHighlight__6ZWeR,
.DocImageNode_creditInfo__8SgMy.DocImageNode_componentHighlight__6ZWeR {
  background-color: var(--image-node-icon-bg) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
}

.DocImageNode_tokenCount__sbVwo {
  color: var(--token-counter-text);
  font-weight: 600;
}

.DocImageNode_estimatedCost__4ybIg {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.DocImageNode_estimatedCredits__3qXCV {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.DocImageNode_creditInfoIcon__hUme- {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.DocImageNode_creditInfoIcon__hUme-:hover {
  opacity: 1;
  color: var(--image-node-border-selected);
}

.DocImageNode_coinIcon__koEf\+ {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.DocImageNode_shopIcon__AKaHf {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Video node with tooltip support */
.DocVideoNode_docContainer__ehAk8 {
  position: relative;
}

/* src/nodes/VideoGenerationNode.module.css */
@keyframes DocVideoNode_scaleInNode__wryp\+ {
  from {
    transform: scale(0.8); /* Start slightly smaller */
    opacity: 0.5; /* Start slightly transparent */
  }
  to {
    transform: scale(1); /* Scale to normal size */
    opacity: 1; /* Fade to full opacity */
  }
}
/* --- Pastel Theme Overrides for VideoGenerationNode --- */
.DocVideoNode_nodeBase__ZBW-n {
  --node-floating-bg: #ffedd5;
  /* Define VideoGenerationNode specific colors using pastel oranges/corals */
  --video-node-bg: #fff7ed; /* orange-50 */
  --video-node-border: #fed7aa; /* orange-200 */
  --video-node-border-selected: #fb923c; /* orange-400 */
  --video-node-text: #7c2d12; /* orange-900 */
  --video-node-label-text: #c2410c; /* orange-700 */
  --video-node-icon-bg: #ffedd5; /* orange-100 */
  --video-node-icon-color: #9a3412; /* orange-800 */
  --video-node-button-bg: #fdba74; /* orange-300 */
  --video-node-button-bg-hover: #fb923c; /* orange-400 */
  --video-node-button-text: #7c2d12; /* orange-900 */
  --video-node-textarea-bg: #fffbf5; /* Lighter orange */
  --video-node-textarea-border: #ffead1; /* orange-100 */
  --video-node-loading-text: var(--video-node-label-text);
  --video-node-error-text: #ef4444; /* red-500 */
  --token-counter-bg: #f0f9ff; /* blue-50 */
  --token-counter-border: #7dd3fc; /* blue-300 */
  --token-counter-text: #0c4a6e; /* blue-900 */
  --token-counter-warning: #fef3c7; /* yellow-100 */
  --token-counter-warning-text: #92400e; /* yellow-800 */
  --token-counter-cost-text: #065f46; /* green-800 */
  --refetch-button-bg: #f59e0b; /* amber-500 */
  --refetch-button-bg-hover: #d97706; /* amber-600 */
  --refetch-button-text: #ffffff; /* white */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  /* Apply the overrides */
  border-radius: 8px;
  border: 1px solid var(--video-node-border); /* Use override */
  background-color: var(--video-node-bg); /* Use override */
  color: var(--video-node-text); /* Use override */
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DocVideoNode_scaleInNode__wryp\+ 0.3s ease-out;
  position: relative;
}

body.no-node-animation .DocVideoNode_nodeBase__ZBW-n {
  animation: none;
}

/* Selected state */
.react-flow__node.selected .DocVideoNode_nodeBase__ZBW-n {
  border-color: var(--video-node-border-selected); /* Use override */
  box-shadow: 0 0 0 1px var(--video-node-border-selected);
}

/* Styles the icon positioned outside the top-left corner */
.DocVideoNode_floatingIcon__a2lFF {
  /* Positioning */

  /* Appearance */
  background-color: var(--node-floating-bg);
  color: var(--video-node-icon-color);
  border-radius: 20%; /* Makes the background circular */
  border: 1px solid var(--video-node-border); /* Optional: Matches node border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Optional: Adds depth */

  /* Size and Alignment */
  width: 28px; /* Adjust size as needed */
  height: 28px; /* Adjust size as needed */
  padding: 0px; /* Adjust padding inside the icon background */
  display: flex; /* Needed for centering the icon inside */
  justify-content: center;
  align-items: center;
}

.DocVideoNode_nodeHeader__cd5yi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px; /* Negative value moves it above the nodeBase top edge */
  left: -0px; /* Negative value moves it left of the nodeBase left edge */
  z-index: 50;
  pointer-events: none;
}

.DocVideoNode_iconWrapper__Yjfd7 {
  background-color: var(--video-node-icon-bg); /* Use override */
  color: var(--video-node-icon-color); /* Use override */
  border-radius: 4px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.DocVideoNode_buttonsWrapper__21ZMC {
  display: flex;
  gap: 5px;
  pointer-events: auto;
  z-index: 60;
}

.DocVideoNode_buttonsWrapper__21ZMC .DocVideoNode_isolateButton__4eed0 {
  padding: 4px 8px;
  border: none;
  background-color: #cbd5e1; /* slate-300 */
  color: #475569; /* slate-600 */
  border-radius: 4px;
  cursor: not-allowed;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  opacity: 0.6;
}

/* Style buttons using specific video node variables */
.DocVideoNode_buttonsWrapper__21ZMC button {
  padding: 4px 8px;
  border: none;
  background-color: var(--video-node-button-bg); /* Use override */
  color: var(--video-node-button-text); /* Use override */
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: all 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  pointer-events: auto;
  z-index: 100;
}

/* Button highlighting for tooltips */
.DocVideoNode_buttonsWrapper__21ZMC button.DocVideoNode_buttonHighlight__OCDNq {
  background-color: var(--video-node-button-bg-hover) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* NEW: Active state for the cloud toggle */
.DocVideoNode_buttonsWrapper__21ZMC .DocVideoNode_cloudActive__QdQHH {
  background-color: #22c55e; /* A distinct green color */
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

/* NEW: Active state for the shop toggle */
.DocVideoNode_buttonsWrapper__21ZMC .DocVideoNode_shopActive__vzca3 {
  background-color: #3b82f6; /* Blue color for shop */
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

/* Refetch button styling */
.DocVideoNode_buttonsWrapper__21ZMC .DocVideoNode_refetchButton__e8Ed2 {
  background-color: var(--refetch-button-bg) !important;
  color: var(--refetch-button-text) !important;
  border: 1px solid var(--refetch-button-bg);
  animation: DocVideoNode_pulseRefetch__NzOAJ 2s infinite;
}

.DocVideoNode_buttonsWrapper__21ZMC .DocVideoNode_refetchButton__e8Ed2:hover {
  background-color: var(--refetch-button-bg-hover) !important;
  transform: scale(1.05);
}

@keyframes DocVideoNode_pulseRefetch__NzOAJ {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.DocVideoNode_buttonsWrapper__21ZMC button:hover {
  background-color: var(--video-node-button-bg-hover); /* Use override */
}

.DocVideoNode_buttonsWrapper__21ZMC button:disabled {
  background-color: var(--video-node-label-text); /* Use override */
  color: var(--video-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.DocVideoNode_nodeContent__oF\+jp {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.DocVideoNode_nodeContent__oF\+jp label {
  font-size: 0.8rem;
  color: var(--video-node-label-text); /* Use override */
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.DocVideoNode_nodeContent__oF\+jp textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--video-node-textarea-border); /* Use override */
  border-radius: 4px;
  background-color: var(--video-node-textarea-bg); /* Use override */
  color: var(--video-node-text); /* Use override */
  font-family: inherit;
  min-height: 100px;
  resize: vertical;
  transition: all 0.2s ease;
}

/* Textarea highlighting for tooltips */
.DocVideoNode_textareaHighlight__qhVhP {
  border-color: var(--video-node-border-selected) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  background-color: var(--video-node-textarea-bg) !important;
  transition: all 0.2s ease !important;
}

/* Style the video player */
.DocVideoNode_videoPlayer__ezbbt {
  margin-top: 5px;
  width: 100%;
  background-color: #000; /* Keep black background */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--video-node-border); /* Add border */
}

.DocVideoNode_videoPlayer__ezbbt video {
  display: block;
  width: 100%;
  max-height: 200px;
}

/* Loading/Error states */
.DocVideoNode_loading__-cRD5 {
  font-size: smaller;
  color: var(--video-node-loading-text); /* Use override */
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.DocVideoNode_error__ySdGX {
  font-size: smaller;
  color: var(--video-node-error-text); /* Use override */
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocVideoNode_tokenCounter__lECDZ {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.DocVideoNode_tokenInfo__bMbBy {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.DocVideoNode_creditInfo__\+YmOd {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

/* Component highlighting for token counter and credit info */
.DocVideoNode_tokenInfo__bMbBy.DocVideoNode_componentHighlight__2obQN,
.DocVideoNode_creditInfo__\+YmOd.DocVideoNode_componentHighlight__2obQN {
  background-color: var(--video-node-icon-bg) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
}

.DocVideoNode_tokenCount__VzaCa {
  color: var(--token-counter-text);
  font-weight: 600;
}

.DocVideoNode_estimatedCost__7j4DK {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.DocVideoNode_estimatedCredits__J60mz {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.DocVideoNode_creditInfoIcon__4Ydn0 {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.DocVideoNode_creditInfoIcon__4Ydn0:hover {
  opacity: 1;
  color: var(--video-node-border-selected);
}

.DocVideoNode_coinIcon__xCC52 {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.DocVideoNode_shopIcon__q9AUb {
  filter: brightness(0) saturate(100%) invert(27%) sepia(9%) saturate(586%)
    hue-rotate(359deg) brightness(92%) contrast(86%);
}

.DocVideoNode_buttonsWrapper__21ZMC .DocVideoNode_shopActive__vzca3 .DocVideoNode_shopIcon__q9AUb {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.high-contrast .DocVideoNode_shopIcon__q9AUb {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

.DocVideoNode_thumbnailContainer__1ysTS {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 150px;
  background-color: #272727;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--video-node-border);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.DocVideoNode_thumbnailImage__tOWpB {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  transition:
    transform 0.2s ease-in-out,
    filter 0.2s ease-in-out;
}

.DocVideoNode_thumbnailContainer__1ysTS:hover .DocVideoNode_thumbnailImage__tOWpB {
  transform: scale(1.03);
  filter: brightness(0.7);
}

.DocVideoNode_playButtonOverlay__o1Wx2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  pointer-events: none; /* Let clicks pass through to the container */
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.DocVideoNode_thumbnailContainer__1ysTS:hover .DocVideoNode_playButtonOverlay__o1Wx2 {
  background-color: rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Audio node with tooltip support */
.DocAudioNode_docContainer__QWiIl {
  position: relative;
}

/* Updated to match current main app styling */
@keyframes DocAudioNode_scaleInNode__1gU6i {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

:root {
  --audio-node-bg: #e0f2fe; /* sky-100 */
  --audio-node-border: #7dd3fc; /* sky-300 */
  --audio-node-border-selected: #0ea5e9; /* sky-500 */
  --audio-node-text: #0c4a6e; /* sky-900 */
  --audio-node-label-text: #0369a1; /* sky-700 */
  --audio-node-icon-bg: #cffafe; /* cyan-100 */
  --audio-node-icon-color: #0e7490; /* cyan-700 */
  --audio-node-button-bg: #67e8f9; /* cyan-300 */
  --audio-node-button-bg-hover: #22d3ee; /* cyan-400 */
  --audio-node-button-text: #155e75; /* cyan-800 */
  --audio-node-textarea-bg: #f0f9ff; /* sky-50 */
  --audio-node-textarea-border: #bae6fd; /* sky-200 */
  --audio-node-loading-text: var(--audio-node-label-text);
  --audio-node-error-text: #f43f5e; /* rose-500 */
}

.DocAudioNode_nodeBase__1bPsU {
  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Layout and Box Model */
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 300px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid #7dd3fc;
  border: 1px solid var(--audio-node-border);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Colors and Typography */
  background-color: #e0f2fe;
  background-color: var(--audio-node-bg);
  color: #0c4a6e;
  color: var(--audio-node-text);
  font-family: 'Inconsolata', monospace;

  /* Positioning Context */
  position: relative;

  /* Transitions */
  transition: border-color 0.2s ease-in-out;
  animation: DocAudioNode_scaleInNode__1gU6i 0.3s ease-out;
}

.DocAudioNode_nodeHeader__5sH\+2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 50;
  pointer-events: none;
}

.DocAudioNode_floatingIcon__yvcMN {
  background-color: #d7f3fd;
  color: #0e7490;
  color: var(--audio-node-icon-color);
  border-radius: 20%;
  border: 1px solid #7dd3fc;
  border: 1px solid var(--audio-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.DocAudioNode_buttonsWrapper__msQvi {
  display: flex;
  gap: 5px;
  align-items: center;
  pointer-events: auto;
  z-index: 60;
}

.DocAudioNode_buttonsWrapper__msQvi .DocAudioNode_isolateButton__VwGlO {
  padding: 4px 8px;
  border: none;
  background-color: #cbd5e1; /* slate-300 */
  color: #475569; /* slate-600 */
  border-radius: 4px;
  cursor: not-allowed;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  opacity: 0.6;
}

.DocAudioNode_buttonsWrapper__msQvi button {
  padding: 4px 8px;
  border: none;
  background-color: #67e8f9;
  background-color: var(--audio-node-button-bg);
  color: #155e75;
  color: var(--audio-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: all 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  pointer-events: auto;
  z-index: 100;
}

/* Button highlighting for tooltips */
.DocAudioNode_buttonsWrapper__msQvi button.DocAudioNode_buttonHighlight__w9I77 {
  background-color: #22d3ee !important;
  background-color: var(--audio-node-button-bg-hover) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

.DocAudioNode_buttonsWrapper__msQvi button:hover {
  background-color: #22d3ee;
  background-color: var(--audio-node-button-bg-hover);
}

.DocAudioNode_buttonsWrapper__msQvi button img {
  top: 1px;
  position: relative;
}

.DocAudioNode_cloudActive__OLme7 {
  background-color: #22c55e !important;
  color: white !important;
  box-shadow: 0 0 8px #22c55e;
}

.DocAudioNode_shopActive__Z06k- {
  background-color: #3b82f6 !important;
  color: white !important;
  box-shadow: 0 0 8px #3b82f6;
}

.DocAudioNode_voiceSelectButton__wyb9E {
  padding: 4px 10px !important;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.DocAudioNode_voiceSelectButton__wyb9E:hover {
  background-color: #22d3ee;
  background-color: var(--audio-node-button-bg-hover);
}

.DocAudioNode_nodeContent__vbLXK {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.DocAudioNode_textareaInput__yH0rs {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #bae6fd;
  border: 1px solid var(--audio-node-textarea-border);
  border-radius: 4px;
  background-color: #f0f9ff;
  background-color: var(--audio-node-textarea-bg);
  color: #0c4a6e;
  color: var(--audio-node-text);
  font-family: 'Inconsolata', monospace;
  min-height: 80px;
  resize: vertical;
  transition: all 0.2s ease;
}

/* Textarea highlighting for tooltips */
.DocAudioNode_textareaHighlight__LRrHO {
  border-color: #0ea5e9 !important;
  border-color: var(--audio-node-border-selected) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  background-color: #f0f9ff !important;
  background-color: var(--audio-node-textarea-bg) !important;
  transition: all 0.2s ease !important;
}

.DocAudioNode_instructionWrapper__e45-\+ {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.DocAudioNode_instructionHeader__heg4e {
  display: flex;
  align-items: center;
  gap: 5px;
}

.DocAudioNode_instructionLabel__uSunZ {
  font-size: 0.9rem;
  color: #0369a1;
  color: var(--audio-node-label-text);
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.DocAudioNode_infoIconSmall__d9XNX {
  color: #0369a1;
  color: var(--audio-node-label-text);
  cursor: help;
  font-size: 0.8rem;
}

.DocAudioNode_infoIconSmall__d9XNX:hover {
  color: #0ea5e9;
  color: var(--audio-node-border-selected);
}

.DocAudioNode_instructionWrapper__e45-\+ .DocAudioNode_textareaInput__yH0rs {
  min-height: 40px;
}

.DocAudioNode_placeholderContainer__0\+hNP {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
  padding: 10px;
  border: 1px dashed #bae6fd;
  border: 1px dashed var(--audio-node-textarea-border);
  border-radius: 4px;
  background-color: #f0f9ff;
  background-color: var(--audio-node-textarea-bg);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  color: #0369a1;
  color: var(--audio-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.DocAudioNode_placeholderContainer__0\+hNP:hover {
  background-color: #e0f2fe;
  background-color: var(--audio-node-bg);
  border-color: #0ea5e9;
  border-color: var(--audio-node-border-selected);
  color: #0c4a6e;
  color: var(--audio-node-text);
}

.DocAudioNode_playIcon__LHazN {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.DocAudioNode_placeholderContainer__0\+hNP:hover .DocAudioNode_playIcon__LHazN {
  transform: scale(1.1);
}

.DocAudioNode_tokenCounter__-n5Ch {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f9ff;
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.DocAudioNode_tokenInfo__7iGMv {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.DocAudioNode_creditInfo__r\+8Ib {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

/* Component highlighting for token counter and credit info */
.DocAudioNode_tokenInfo__7iGMv.DocAudioNode_componentHighlight__DQKQ7,
.DocAudioNode_creditInfo__r\+8Ib.DocAudioNode_componentHighlight__DQKQ7 {
  background-color: #cffafe !important;
  background-color: var(--audio-node-icon-bg) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
}

.DocAudioNode_tokenCount__0lzNP {
  color: #0c4a6e;
  font-weight: 600;
}

.DocAudioNode_estimatedCredits__rSaWK {
  color: #065f46;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.DocAudioNode_creditInfoIcon__XsIqi {
  color: #0c4a6e;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.DocAudioNode_creditInfoIcon__XsIqi:hover {
  opacity: 1;
  color: #0ea5e9;
  color: var(--audio-node-border-selected);
}

.DocAudioNode_coinIcon__d1mxo {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.DocAudioNode_shopIcon__8ZHvr {
  filter: brightness(0) saturate(100%) invert(27%) sepia(9%) saturate(586%)
    hue-rotate(359deg) brightness(92%) contrast(86%);
}

.DocAudioNode_buttonsWrapper__msQvi .DocAudioNode_shopActive__Z06k- .DocAudioNode_shopIcon__8ZHvr {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.high-contrast .DocAudioNode_shopIcon__8ZHvr {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Music node with tooltip support */
.DocMusicNode_docContainer__M5xDB {
  position: relative;
}

/* Highlight effects for tooltips */
.DocMusicNode_buttonHighlight__l0TMa {
  background-color: var(--music-node-button-bg-hover) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

.DocMusicNode_textareaHighlight__gqSKr {
  border-color: var(--music-node-border-selected) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
}

.DocMusicNode_componentHighlight__kxaCA {
  background-color: var(--music-node-icon-bg) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
}

/* src/nodes/MusicNode.module.css */
@keyframes DocMusicNode_scaleInNode__LYLZ0 {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocMusicNode_nodeBase__63gAM {
  --music-node-floating-bg: #ddd6fe;
  --music-node-bg: #f5f3ff;
  --music-node-border: #c4b5fd;
  --music-node-border-selected: #8b5cf6;
  --music-node-text: #5b21b6;
  --music-node-label-text: #7c3aed;
  --music-node-icon-bg: #ede9fe;
  --music-node-icon-color: #6d28d9;
  --music-node-button-bg: #a78bfa;
  --music-node-button-bg-hover: #8b5cf6;
  --music-node-button-text: #4c1d95;
  --music-node-textarea-bg: #fafaff;
  --music-node-textarea-border: #ddd6fe;
  --music-node-loading-text: var(--music-node-label-text);
  --music-node-error-text: #ef4444;
  --token-counter-bg: #f0f9ff;
  --token-counter-border: #7dd3fc;
  --token-counter-text: #0c4a6e;
  --token-counter-warning: #fef3c7;
  --token-counter-warning-text: #92400e;
  --token-counter-cost-text: #065f46;

  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  border-radius: 8px;
  border: 1px solid var(--music-node-border);
  background-color: var(--music-node-bg);
  color: var(--music-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DocMusicNode_scaleInNode__LYLZ0 0.3s ease-out;
  position: relative;
}

.react-flow__node.selected .DocMusicNode_nodeBase__63gAM {
  border-color: var(--music-node-border-selected);
  box-shadow: 0 0 0 1px var(--music-node-border-selected);
}

.DocMusicNode_nodeHeader__xUsmw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 50;
  pointer-events: none;
}

.DocMusicNode_buttonsWrapper__qMSl6 {
  display: flex;
  gap: 5px;
  pointer-events: auto;
  z-index: 60;
}

.DocMusicNode_buttonsWrapper__qMSl6 .DocMusicNode_isolateButton__QDATI {
  padding: 4px 8px;
  border: none;
  background-color: #cbd5e1; /* slate-300 */
  color: #475569; /* slate-600 */
  border-radius: 4px;
  cursor: not-allowed;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  opacity: 0.6;
}

.DocMusicNode_buttonsWrapper__qMSl6 button {
  padding: 4px 8px;
  border: none;
  background-color: var(--music-node-button-bg);
  color: var(--music-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: all 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata', monospace;
  pointer-events: auto;
  z-index: 100;
}

.DocMusicNode_buttonsWrapper__qMSl6 .DocMusicNode_cloudActive__G6STw {
  background-color: #22c55e;
  color: white;
  box-shadow: 0 0 8px #22c55e;
}

.DocMusicNode_buttonsWrapper__qMSl6 .DocMusicNode_shopActive__dcBK- {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 0 8px #3b82f6;
}

.DocMusicNode_floatingIcon__B2giH {
  background-color: var(--music-node-floating-bg);
  border-radius: 20%;
  border: 1px solid var(--music-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocMusicNode_buttonsWrapper__qMSl6 button:hover {
  background-color: var(--music-node-button-bg-hover);
}

.DocMusicNode_buttonsWrapper__qMSl6 button:disabled {
  background-color: var(--music-node-label-text);
  color: var(--music-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.DocMusicNode_nodeContent__V1e7p {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.DocMusicNode_nodeContent__V1e7p textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--music-node-textarea-border);
  border-radius: 4px;
  background-color: var(--music-node-textarea-bg);
  color: var(--music-node-text);
  font-family: inherit;
  min-height: 100px;
  resize: vertical;
  transition: all 0.2s ease;
}

.DocMusicNode_audioPlayer__2CnII {
  margin-top: 5px;
  width: 100%;
}

.DocMusicNode_audioPlayer__2CnII audio {
  width: 100%;
  height: 40px;
}

.DocMusicNode_loading__jl9df {
  font-size: smaller;
  color: var(--music-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.DocMusicNode_error__t1ygJ {
  font-size: smaller;
  color: var(--music-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocMusicNode_tokenCounter__w3k8o {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.DocMusicNode_tokenInfo__0IG5f {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.DocMusicNode_creditInfo__V8gFj {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.DocMusicNode_tokenCount__G\+88T {
  color: var(--token-counter-text);
  font-weight: 600;
}

.DocMusicNode_estimatedCost__LZVGa {
  color: var(--token-counter-cost-text);
  font-size: 0.65rem;
  background-color: rgba(34, 197, 94, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.DocMusicNode_estimatedCredits__kVG3H {
  color: var(--token-counter-cost-text);
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.DocMusicNode_creditInfoIcon__\+3o\+Q {
  color: var(--token-counter-text);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.DocMusicNode_creditInfoIcon__\+3o\+Q:hover {
  opacity: 1;
  color: var(--music-node-border-selected);
}

.DocMusicNode_coinIcon__Ynilf {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  filter: brightness(0) invert(0);
}

.DocMusicNode_shopIcon__ve9Ea {
  filter: brightness(0) saturate(100%) invert(27%) sepia(9%) saturate(586%)
    hue-rotate(359deg) brightness(92%) contrast(86%);
}

.DocMusicNode_buttonsWrapper__qMSl6 .DocMusicNode_shopActive__dcBK- .DocMusicNode_shopIcon__ve9Ea {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.high-contrast .DocMusicNode_shopIcon__ve9Ea {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

.DocMusicNode_placeholderContainer__ZehUb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
  padding: 10px;
  border: 1px dashed var(--music-node-textarea-border);
  border-radius: 4px;
  background-color: var(--music-node-textarea-bg);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  color: var(--music-node-label-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
}

.DocMusicNode_placeholderContainer__ZehUb:hover {
  background-color: var(--music-node-bg);
  border-color: var(--music-node-border-selected);
  color: var(--music-node-text);
}

.DocMusicNode_playIcon__9MBxj {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.DocMusicNode_placeholderContainer__ZehUb:hover .DocMusicNode_playIcon__9MBxj {
  transform: scale(1.1);
}

.DocMusicNode_refetchButton__evrzC {
  background-color: #f59e0b !important; /* amber-500 - Debug color */
  color: white !important;
  margin-left: 4px;
  animation: DocMusicNode_pulse__zwdfJ 2s infinite;
}

.DocMusicNode_refetchButton__evrzC:hover {
  background-color: #d97706 !important; /* amber-600 - Darker on hover */
}

@keyframes DocMusicNode_pulse__zwdfJ {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* DocMediaPreviewNode.module.css - Light blue theme for Media Preview */
@keyframes DocMediaPreviewNode_scaleInNode__ohWKx {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

:root {
  --media-node-bg: #eff6ff; /* blue-50 */
  --media-node-border: #bfdbfe; /* blue-200 */
  --media-node-border-selected: #60a5fa; /* blue-400 */
  --media-node-text: #1e3a8a; /* blue-800 */
  --media-node-label-text: #1d4ed8; /* blue-700 */
  --media-node-icon-bg: #dbeafe; /* blue-100 */
  --media-node-icon-color: #1e40af; /* blue-800 */
  --media-node-button-bg: #93c5fd; /* blue-300 */
  --media-node-button-bg-hover: #60a5fa; /* blue-400 */
  --media-node-button-text: #1e3a8a; /* blue-800 */
}

.DocMediaPreviewNode_nodeBase__sIitQ {
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  border: 1px solid var(--media-node-border);
  background-color: #eff6ff;
  background-color: var(--media-node-bg);
  color: #1e3a8a;
  color: var(--media-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 220px;
  max-width: 320px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  animation: DocMediaPreviewNode_scaleInNode__ohWKx 0.3s ease-out forwards;
  position: relative;
}

.DocMediaPreviewNode_nodeHeader__veMIh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 10;
}

.DocMediaPreviewNode_floatingIcon__4nvl6 {
  background-color: #dbeafe;
  background-color: var(--media-node-icon-bg);
  color: #1e40af;
  color: var(--media-node-icon-color);
  border-radius: 20%;
  border: 1px solid #bfdbfe;
  border: 1px solid var(--media-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocMediaPreviewNode_buttonsWrapper__vXTsP {
  display: flex;
  gap: 5px;
}

.DocMediaPreviewNode_buttonsWrapper__vXTsP button {
  padding: 2px 8px;
  border: none;
  background-color: #93c5fd;
  background-color: var(--media-node-button-bg);
  color: #1e3a8a;
  color: var(--media-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: background-color 0.2s ease;
}

.DocMediaPreviewNode_buttonsWrapper__vXTsP button:hover {
  background-color: #60a5fa;
  background-color: var(--media-node-button-bg-hover);
}

.DocMediaPreviewNode_nodeContent__5-4bM {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.DocMediaPreviewNode_mediaContainer__4TcQy {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border: 1px solid var(--media-node-border);
  background-color: #f8fafc;
}

.DocMediaPreviewNode_mediaPlaceholder__sctrb {
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #1d4ed8;
  color: var(--media-node-label-text);
  font-size: 0.8rem;
}

.DocMediaPreviewNode_mediaInfo__D6AQr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
}

.DocMediaPreviewNode_mediaType__\+CPZJ {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1d4ed8;
  color: var(--media-node-label-text);
}

.DocMediaPreviewNode_fileName__TcOcK {
  color: #1e3a8a;
  color: var(--media-node-text);
  font-weight: 600;
  word-break: break-all;
}

/* Video Frame Extraction doc node with tooltip support */
.DocVideoFrameExtractionNode_docContainer__jCuck {
  position: relative;
}

/* src/nodes/DocVideoFrameExtractionNode.module.css */
@keyframes DocVideoFrameExtractionNode_scaleInNode__Dq4R- {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocVideoFrameExtractionNode_nodeBase__JT1w5 {
  /* Unique "Amber Frame" color scheme for video frame extraction */
  --frame-node-bg: #fef3c7; /* amber-100 */
  --frame-node-border: #f59e0b; /* amber-500 */
  --frame-node-border-selected: #d97706; /* amber-600 */
  --frame-node-text: #92400e; /* amber-800 */
  --frame-node-label-text: #b45309; /* amber-700 */
  --frame-node-icon-bg: #fde68a; /* amber-200 */
  --frame-node-icon-color: #b45309; /* amber-700 */
  --frame-node-button-bg: #f59e0b; /* amber-500 */
  --frame-node-button-bg-hover: #d97706; /* amber-600 */
  --frame-node-button-text: #fffbeb; /* amber-50 */
  --frame-node-textarea-bg: #fffbeb; /* amber-50 */
  --frame-node-textarea-border: #fde68a; /* amber-200 */
  --frame-node-loading-text: var(--frame-node-label-text);
  --frame-node-error-text: #dc2626; /* red-600 */
  --token-counter-bg: #fef3c7; /* amber-100 */
  --token-counter-border: #f59e0b; /* amber-500 */
  --token-counter-text: #92400e; /* amber-800 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */

  border-radius: 8px;
  border: 1px solid var(--frame-node-border);
  background-color: var(--frame-node-bg);
  color: var(--frame-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DocVideoFrameExtractionNode_scaleInNode__Dq4R- 0.3s ease-out;
  position: relative;
}

body.no-node-animation .DocVideoFrameExtractionNode_nodeBase__JT1w5 {
  animation: none;
}

.react-flow__node.selected .DocVideoFrameExtractionNode_nodeBase__JT1w5 {
  border-color: var(--frame-node-border-selected);
  box-shadow: 0 0 0 1px var(--frame-node-border-selected);
}

.DocVideoFrameExtractionNode_floatingIcon__t3Z27 {
  background-color: var(--frame-node-icon-bg);
  color: var(--frame-node-icon-color);
  border-radius: 20%;
  border: 1px solid var(--frame-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocVideoFrameExtractionNode_nodeHeader__tETcY {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 10;
}

.DocVideoFrameExtractionNode_buttonsWrapper__5uGLV {
  display: flex;
  gap: 5px;
}

.DocVideoFrameExtractionNode_buttonsWrapper__5uGLV button {
  padding: 4px 8px;
  border: none;
  background-color: var(--frame-node-button-bg);
  color: var(--frame-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  margin: 0;
  font-family: 'Inconsolata';
}

.DocVideoFrameExtractionNode_buttonsWrapper__5uGLV button:hover {
  background-color: var(--frame-node-button-bg-hover);
}

.DocVideoFrameExtractionNode_buttonsWrapper__5uGLV button:disabled {
  background-color: var(--frame-node-label-text);
  color: var(--frame-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.DocVideoFrameExtractionNode_nodeContent__jjlYm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.DocVideoFrameExtractionNode_nodeContent__jjlYm textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid var(--frame-node-textarea-border);
  border-radius: 4px;
  background-color: var(--frame-node-textarea-bg);
  color: var(--frame-node-text);
  font-family: inherit;
  min-height: 60px;
  resize: vertical;
}

.DocVideoFrameExtractionNode_loading__jsCTU {
  font-size: smaller;
  color: var(--frame-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocVideoFrameExtractionNode_error__sF1He {
  font-size: smaller;
  color: var(--frame-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.DocVideoFrameExtractionNode_imageContainer__tDnfS {
  margin-top: 5px;
  width: 100%;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--frame-node-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.DocVideoFrameExtractionNode_imagePreview__xZsbI {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.DocVideoFrameExtractionNode_frameInfo__5pqAA {
  background-color: var(--frame-node-bg);
  color: var(--frame-node-text);
  padding: 4px 8px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: center;
  border-top: 1px solid var(--frame-node-border);
}

/* Video input indicator styling */
.DocVideoFrameExtractionNode_videoInputIndicator__lYp5B {
  font-size: 0.8rem;
  color: var(--frame-node-border-selected);
  background-color: var(--token-counter-bg);
  border: 1px solid var(--token-counter-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin: 4px 0;
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: help;
  transition: all 0.2s ease;
}

.DocVideoFrameExtractionNode_videoInputIndicator__lYp5B:hover {
  background-color: var(--frame-node-icon-bg);
  border-color: var(--frame-node-border-selected);
}

.DocVideoFrameExtractionNode_requirementText__aKNz0 {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: normal;
  margin-top: 2px;
}

.DocVideoFrameExtractionNode_noVideoInput__zqxx3 {
  opacity: 0.7;
  font-style: italic;
}

/* Google Drive Node - Matching OutputNode Style */
@keyframes DocGoogleDriveNode_scaleInNode__Itj7z {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Documentation Container - CRITICAL for tooltip positioning */
.DocGoogleDriveNode_docContainer__Dpwvd {
  position: relative;
  display: block;
  z-index: 100; /* High z-index to ensure tooltips appear above everything */
  min-height: 400px; /* Ensure container has height for tooltip positioning */
  pointer-events: auto; /* Ensure mouse events are captured */
}

/* Google Drive Node Theme - Green/Teal - ALWAYS LIGHT MODE */
.DocGoogleDriveNode_nodeBase__O4X2e {
  /* Performance optimizations */
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  /* Apply styling - matching OutputNode - ALWAYS LIGHT MODE */
  border-radius: 8px;
  border: 1px solid #bbf7d0; /* green-200 */
  background-color: #f0fdf4; /* green-50 */
  color: #14532d; /* green-900 */
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  width: 320px;
  max-width: 320px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DocGoogleDriveNode_scaleInNode__Itj7z 0.3s ease-out;
  position: relative;
  z-index: 10; /* Ensure node is above any background elements */
  pointer-events: auto; /* Ensure all mouse events work */
}

body.no-node-animation .DocGoogleDriveNode_nodeBase__O4X2e {
  animation: none;
}

/* Floating Icon - matches OutputNode */
.DocGoogleDriveNode_floatingIcon__Az9ef {
  background-color: #dcfce7; /* green-100 */
  color: #166534; /* green-800 */
  border-radius: 20%;
  border: 1px solid #bbf7d0; /* green-200 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Node Header - matches OutputNode exactly */
.DocGoogleDriveNode_nodeHeader__1qNrv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  position: absolute;
  top: -34px; /* Floats above the card */
  left: 0px;
  z-index: 10;
  width: 100%;
}

/* Buttons Wrapper - matches OutputNode */
.DocGoogleDriveNode_buttonsWrapper__YaktA {
  display: flex;
  gap: 5px;
}

.DocGoogleDriveNode_buttonsWrapper__YaktA button {
  padding: 3px 8px;
  border: none;
  background-color: #f2fff6; /* lime-50 */
  color: #166534; /* green-800 */
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  margin: 0;
  display: flex;
  position: relative;
  z-index: 20; /* Ensure buttons are clickable and hoverable */
  pointer-events: auto;
}

.DocGoogleDriveNode_buttonsWrapper__YaktA button:hover:not(:disabled) {
  background-color: #bbf7d0; /* green-200 */
}

.DocGoogleDriveNode_buttonsWrapper__YaktA button:disabled {
  background-color: #15803d; /* green-700 */
  color: #f0fdf4; /* green-50 */
  cursor: not-allowed;
  opacity: 0.6;
}

/* Disconnect button - red styling */
.DocGoogleDriveNode_buttonsWrapper__YaktA button.DocGoogleDriveNode_disconnectButton__Sit1M {
  background-color: #fee2e2; /* red-100 */
  color: #dc2626; /* red-600 */
}

.DocGoogleDriveNode_buttonsWrapper__YaktA button.DocGoogleDriveNode_disconnectButton__Sit1M:hover:not(:disabled) {
  background-color: #fecaca; /* red-200 */
  color: #b91c1c; /* red-700 */
}

/* Main Content Area */
.DocGoogleDriveNode_contentArea__Od2MX {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}

.DocGoogleDriveNode_messageContainer__vpO5Z {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: #f2fff6; /* lime-50 */
  border: 1px solid #d9f99d; /* lime-200 */
  border-radius: 4px;
  min-height: 80px;
}

.DocGoogleDriveNode_messageText__nKzpf {
  font-size: 0.85rem;
  color: #14532d; /* green-900 */
  margin: 0;
  line-height: 1.4;
}

.DocGoogleDriveNode_messageTextSmall__Wvvfr {
  font-size: 0.75rem;
  color: #15803d; /* green-700 */
  margin: 0;
  opacity: 0.8;
}

.DocGoogleDriveNode_errorBadge__wRC8H {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: #fee2e2;
  color: #dc2626; /* red-600 */
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  width: -webkit-fit-content;
  width: fit-content;
}

.DocGoogleDriveNode_primaryButton__YA0iC {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  background-color: #22c55e; /* green-500 */
  color: white;
  width: 100%;
}

.DocGoogleDriveNode_primaryButton__YA0iC:hover {
  background-color: #16a34a;
  transform: translateY(-1px);
}

/* Connected Content */
.DocGoogleDriveNode_connectedContent__7l3zR {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #f2fff6; /* lime-50 */
  border: 1px solid #d9f99d; /* lime-200 */
  border-radius: 4px;
  min-height: 80px;
}

.DocGoogleDriveNode_uploadSection__-Cey- {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.DocGoogleDriveNode_uploadButton__N4F7J {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  background-color: #22c55e; /* green-500 */
  color: white;
  width: 100%;
}

.DocGoogleDriveNode_uploadButton__N4F7J:hover:not(:disabled) {
  background-color: #16a34a;
  transform: translateY(-1px);
}

.DocGoogleDriveNode_uploadButton__N4F7J:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.DocGoogleDriveNode_previewText__bbmgH {
  font-size: 0.8rem;
  color: #15803d; /* green-700 */
  text-align: center;
  padding: 10px;
  background-color: #dcfce7; /* green-100 */
  border-radius: 4px;
  border: 1px dashed #bbf7d0; /* green-200 */
  font-weight: 500;
}

.DocGoogleDriveNode_emptyState__Hu9E7 {
  font-size: 0.85rem;
  color: #15803d; /* green-700 */
  text-align: center;
  padding: 20px 12px;
  opacity: 0.7;
}

.DocGoogleDriveNode_statusMessage__h\+Xja {
  font-size: 0.85rem;
  color: #15803d; /* green-700 */
  text-align: center;
  padding: 12px;
  background-color: #dcfce7; /* green-100 */
  border-radius: 4px;
  font-weight: 500;
}

.DocGoogleDriveNode_successMessage__7zckv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #16a34a; /* green-600 */
  font-size: 0.85rem;
  padding: 12px;
  background-color: #dcfce7; /* green-100 */
  border-radius: 4px;
  font-weight: 600;
}

.DocGoogleDriveNode_errorMessageSmall__2Sjm1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #dc2626; /* red-600 */
  font-size: 0.75rem;
  padding: 8px;
  background-color: #fee2e2;
  border-radius: 4px;
  font-weight: 600;
}

/* Bottom Status Bar */
.DocGoogleDriveNode_bottomBar__etKEu {
  background-color: #f2fff6; /* lime-50 */
  border: 1px solid #d9f99d; /* lime-200 */
  border-radius: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
  position: relative;
  z-index: 15; /* Ensure status bar captures hover events */
  pointer-events: auto;
}

.DocGoogleDriveNode_statusInfo__r2qes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
}

.DocGoogleDriveNode_statusIcon__9TgwF {
  color: #16a34a; /* green-600 */
  font-size: 16px;
  flex-shrink: 0;
}

.DocGoogleDriveNode_statusText__z2sfe {
  font-size: 0.8rem;
  color: #15803d; /* green-700 */
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Preview Container */
.DocGoogleDriveNode_previewContainer__-uXc9 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 15; /* Ensure preview area captures hover events */
  pointer-events: auto;
}

.DocGoogleDriveNode_fileTypeBadge__B5r1O {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: #dcfce7; /* green-100 */
  border: 1px solid #bbf7d0; /* green-200 */
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #15803d; /* green-700 */
}

.DocGoogleDriveNode_fileTypeIcon__PaI66 {
  font-size: 1rem;
  line-height: 1;
}

.DocGoogleDriveNode_fileTypeText__snCl8 {
  font-family: 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

.DocGoogleDriveNode_mediaPreview__Uk2I\+ {
  width: 94%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2fff6; /* lime-50 */
  border: 1px solid #d9f99d; /* lime-200 */
  border-radius: 4px;
  padding: 8px;
  max-height: 200px;
  overflow: hidden;
}

.DocGoogleDriveNode_previewImage__oAL8l {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 4px;
}

.DocGoogleDriveNode_previewVideo__nK6Qj {
  max-width: 100%;
  max-height: 180px;
  border-radius: 4px;
}

.DocGoogleDriveNode_previewAudio__V6do0 {
  width: 100%;
  height: 40px;
}

.DocGoogleDriveNode_textPreview__sH4RX {
  font-size: 0.75rem;
  color: #15803d; /* green-700 */
  background-color: #f2fff6; /* lime-50 */
  border: 1px solid #d9f99d; /* lime-200 */
  border-radius: 4px;
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.4;
}

.DocGoogleDriveNode_readyText__xW4tx {
  font-size: 0.8rem;
  color: #16a34a; /* green-600 */
  text-align: center;
  padding: 8px;
  background-color: #dcfce7; /* green-100 */
  border-radius: 4px;
  font-weight: 600;
}

/* Tooltip Highlight Effects */
.DocGoogleDriveNode_buttonHighlight__4AnNO {
  background-color: #22c55e !important; /* green-500 */
  color: white !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #bbf7d0; /* green-200 */
}

.DocGoogleDriveNode_componentHighlight__bIZjc {
  box-shadow: 0 0 0 2px #22c55e; /* green-500 */
  transform: scale(1.02);
}

/* Output node with tooltip support */
.DocOutputNode_docContainer__OWIfu {
  position: relative;
}

/* Highlight effects for tooltips */
.DocOutputNode_buttonHighlight__zXf3f {
  background-color: var(--output-node-button-bg-hover) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

.DocOutputNode_componentHighlight__I-flY {
  background-color: var(--output-node-icon-bg) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
}

/* src/nodes/OutputNode.module.css */
@keyframes DocOutputNode_scaleInNode__dLmAr {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocOutputNode_nodeBase__DgCrc {
  --output-node-bg: #fff1f2; /* rose-50 */
  --output-node-border: #fecdd3; /* rose-200 */
  --output-node-border-selected: #f43f5e; /* rose-500 */
  --output-node-text: #881337; /* rose-900 */
  --output-node-label-text: #be123c; /* rose-700 */
  --output-node-icon-bg: #ffe4e6; /* rose-100 */
  --output-node-icon-color: #9f1239; /* rose-800 */
  --output-node-button-bg: #ffe4e6; /* rose-100 - matches icon bg */
  --output-node-button-bg-hover: #fecdd3; /* rose-200 - matches border */
  --output-node-button-text: #9f1239; /* rose-800 - matches icon color */
  --output-node-display-bg: #fff8f9; /* Lighter rose */
  --output-node-display-border: #ffe4e6; /* rose-100 */
  --output-node-display-text: var(--output-node-text);
  --output-node-pre-bg: #fff1f2; /* rose-50, same as node bg */
  --output-node-loading-text: var(--output-node-label-text);
  --output-node-error-text: #dc2626; /* red-600 (keep error distinct) */

  contain: layout style;
  will-change: transform;
  transform: translateZ(0);

  border-radius: 8px;
  border: 1px solid var(--output-node-border);
  background-color: var(--output-node-bg);
  color: var(--output-node-text);
  padding: 10px;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  min-width: 260px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease-in-out;
  animation: DocOutputNode_scaleInNode__dLmAr 0.3s ease-out;
  position: relative;
}

.react-flow__node.selected .DocOutputNode_nodeBase__DgCrc {
  border-color: var(--output-node-border-selected);
  box-shadow: 0 0 0 1px var(--output-node-border-selected);
}

.DocOutputNode_floatingIcon__LplpE {
  background-color: #ffe4e6;
  color: var(--input-node-icon-color);
  border-radius: 20%;
  border: 1px solid var(--output-node-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocOutputNode_nodeHeader__RE6pi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 50;
  width: 100%;
  pointer-events: none;
}

.DocOutputNode_buttonsWrapper__YaurB {
  display: flex;
  gap: 5px;
  pointer-events: auto;
  z-index: 60;
}

.DocOutputNode_buttonsWrapper__YaurB button {
  padding: 3px 8px;
  border: none;
  background-color: var(--output-node-button-bg);
  color: var(--output-node-button-text);
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  margin: 0;
  display: flex;
  pointer-events: auto;
  z-index: 100;
}

.DocOutputNode_buttonsWrapper__YaurB button:hover {
  background-color: var(--output-node-button-bg-hover);
}

.DocOutputNode_buttonsWrapper__YaurB button:disabled {
  background-color: var(--output-node-label-text);
  color: var(--output-node-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.DocOutputNode_nodeContent__CZirR {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 100px;
}

.DocOutputNode_nodeContent__CZirR > strong {
  font-size: 0.8rem;
  color: var(--output-node-label-text);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  text-align: left;
}

.DocOutputNode_outputDisplay__FrCaC {
  overflow-y: auto;
  margin-top: 0;
  background: var(--output-node-display-bg);
  color: var(--output-node-display-text);
  border: 1px solid var(--output-node-display-border);
  padding: 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: left;
  min-height: 80px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.DocOutputNode_outputDisplay__FrCaC strong {
  color: var(--output-node-text);
  font-weight: bold;
}
.DocOutputNode_outputDisplay__FrCaC p {
  margin: 0 0 10px 0;
  font-size: smaller;
}
.DocOutputNode_outputDisplay__FrCaC p:last-child {
  margin-bottom: 0;
}
.DocOutputNode_outputDisplay__FrCaC pre {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 5px 0;
  font-family: 'Inconsolata', monospace;
  font-size: 12px;
  padding: 5px;
  background-color: var(--output-node-pre-bg);
  border-radius: 3px;
  border: 1px dashed var(--output-node-border);
}
.DocOutputNode_outputDisplay__FrCaC div {
  margin-bottom: 5px;
  border-bottom: 1px dashed var(--output-node-display-border);
  padding-bottom: 5px;
}
.DocOutputNode_outputDisplay__FrCaC div:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.DocOutputNode_loading__xScbP {
  font-size: smaller;
  color: var(--output-node-loading-text);
  margin: 5px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.DocOutputNode_error__EqsOt {
  font-size: smaller;
  color: var(--output-node-error-text);
  margin: 5px 0 0 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

/* DocEndNode.module.css - Light red theme for End Node */
.DocEndNode_nodeBase__AigSg {
  --end-node-bg: #fee2e2; /* red-100 */
  --end-node-border: #fca5a5; /* red-300 */
  --end-node-border-selected: #ef4444; /* red-500 */
  --end-node-text: #991b1b; /* red-800 */
  --end-node-icon-bg: #fef2f2; /* red-50 */
  --end-node-icon-color: #b91c1c; /* red-700 */

  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 50px; /* Pill shape */
  background-color: var(--end-node-bg);
  border: 2px solid var(--end-node-border);
  color: var(--end-node-text);
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.DocEndNode_iconWrapper__0VAsv {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 1.2rem;
  color: var(--end-node-icon-color);
}

.DocEndNode_label__eJGHV {
  line-height: 1;
}

/* Handle styles for potential future use */
.DocEndNode_handle__zW\+4z {
  width: 12px;
  height: 12px;
  background-color: var(--end-node-bg);
  border: 2px solid var(--end-node-icon-color);
  border-radius: 50%;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

.DocEndNode_handle__zW\+4z:hover {
  background-color: var(--end-node-icon-color);
  opacity: 1;
}

.LandingCircles_landingCirclesContainer__fuqh0 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.LandingCircles_circle__RsqC5 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
  border: 3px solid;
  will-change: transform;
  padding: 10px;
  box-sizing: border-box;
}

.LandingCircles_circle__RsqC5:hover {
  transform: scale(1.05);
}

.LandingCircles_circleContent__VfKKK {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.LandingCircles_circleIcon__n23qL {
  width: 35px;
  height: 35px;
  filter: invert(0%) sepia(100%) saturate(0%) brightness(0%) contrast(100%);
  pointer-events: none;
  margin-bottom: 5px;
  object-fit: contain;
  -webkit-user-select: none;
          user-select: none;
}

.LandingCircles_circleText__4ZHRc {
  color: rgb(0, 0, 0);
  font-size: 0.7rem;
  font-family: 'Urbanist', sans-serif;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.GridView_gridViewContainer__1ZpJQ {
  padding: 40px;
  border-radius: 12px;
  /* background: #ffffff; */
  color: #333;
  font-family: 'Urbanist', sans-serif;
  animation: GridView_fadeIn__jBCGt 0.3s ease-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

@keyframes GridView_fadeIn__jBCGt {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.GridView_header__7tGEl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 24px;
}

.GridView_headerLeft__8EfcK {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.GridView_summaryToggle__kyPta {
  background: #a8b8a0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  align-self: flex-start;
}

.GridView_summaryToggle__kyPta:hover {
  background: #f9fafb;
  border-color: #a8b8a0;
  color: #a8b8a0;
}

.GridView_headerTitle__TZKOc {
  font-size: 2.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.GridView_closeButton__oogqs {
  background: transparent;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.GridView_closeButton__oogqs:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
}

/* Leaderboard Container */
.GridView_leaderboardContainer__FBQO\+ {
  border-radius: 16px;
  border: 1px solid rgba(168, 184, 160, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Leaderboard Header */
.GridView_leaderboardHeader__Pw68s {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #a8b8a0 0%, #9aab92 100%);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 0;
  border-bottom: 2px solid rgba(168, 184, 160, 0.3);
}

.GridView_headerCell__qL2Kt {
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-family: 'Urbanist', sans-serif;
}

/* Leaderboard Body */
.GridView_leaderboardBody__SqtvN {
  background: rgba(168, 184, 160, 0.1);
}

.GridView_leaderboardRow__Yylko {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(168, 184, 160, 0.15);
  transition: all 0.2s ease;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
}

.GridView_leaderboardRow__Yylko:nth-child(even) {
  background: rgba(255, 255, 255, 0.6);
}

.GridView_leaderboardRow__Yylko:hover {
  background: rgba(168, 184, 160, 0.15) !important;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 184, 160, 0.15);
}

.GridView_leaderboardRow__Yylko:last-child {
  border-bottom: none;
}

/* Rank Cell */
.GridView_rankCell__51qbd {
  width: 5%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.GridView_rankNumber__kOjyb {
  font-size: 1.125rem;
  font-weight: 700;
  color: #a8b8a0;
  font-family: 'Urbanist', sans-serif;
}

/* Model Cell */
.GridView_modelCell__YwoIM {
  width: 35%;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.GridView_modelInfo__c4Kf8 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.GridView_modelName__i\+IEu {
  font-weight: 700;
  color: #2d3748;
  font-size: 1rem;
  font-family: 'Urbanist', sans-serif;
  line-height: 1.3;
}

.GridView_modelDescription__AZBpb {
  color: #718096;
  font-size: 0.875rem;
  line-height: 1.4;
  font-family: 'Urbanist', monospace;
}

/* Pricing Cell */
.GridView_pricingCellNew__TgmZJ {
  width: 25%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.GridView_pricingContainer__y3yXC {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.8);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(168, 184, 160, 0.2);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: all 0.2s ease;
}

.GridView_priceContent__zgQv2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.GridView_priceInfo__YZ5Us {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
}

.GridView_pricingContainer__y3yXC:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(168, 184, 160, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 184, 160, 0.15);
}

.GridView_priceMain__wlcrC {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #2d3748;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.GridView_priceUnit__7lCfQ {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-top: 2px;
}

.GridView_detailsButton__vEeEF {
  background: rgba(168, 184, 160, 0.8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Urbanist', sans-serif;
}

.GridView_detailsButton__vEeEF:hover {
  background: rgba(168, 184, 160, 1);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(168, 184, 160, 0.3);
}

/* Provider Cell */
.GridView_providerCellNew__jKRFK {
  width: 20%;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.GridView_providerInfo__WGf99 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.GridView_providerLogo__ThdwX {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px;
  border: 1px solid rgba(168, 184, 160, 0.2);
}

.GridView_providerFallback__JhtOU {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(168, 184, 160, 0.8);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.GridView_providerName__TGZez {
  font-weight: 600;
  color: #4a5568;
  font-size: 0.875rem;
  font-family: 'Urbanist', sans-serif;
}

/* Tier Cell */
.GridView_tierCellNew__NpWRE {
  width: 15%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.GridView_pricingCell__Eg6jw {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.GridView_showAllButton__UOzRY {
  background: #a8b8a0;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.GridView_showAllButton__UOzRY:hover {
  background: #9aab92;
}

.GridView_pricingText__MsYDr {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.4;
  font-family: 'Inconsolata', monospace;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 2px solid #edffe4;
  border-left: 3px solid #a8b8a0;
  width: 100%;
}

/* Tier Badges */
.GridView_tierBadge1__y9bAK,
.GridView_tierBadge2__c12Fc,
.GridView_tierBadge3__v53FE,
.GridView_tierBadge4__WQgjj,
.GridView_tierBadge5__yG9HF {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: white;
  font-family: 'Urbanist', sans-serif;
  border: 2px solid;
  transition: all 0.2s ease;
}

.GridView_tierBadge1__y9bAK {
  background: linear-gradient(135deg, #a8b8a0 0%, #9aab92 100%);
  border-color: rgba(168, 184, 160, 0.5);
}

.GridView_tierBadge2__c12Fc {
  background: linear-gradient(135deg, #9aab92 0%, #8c9e84 100%);
  border-color: rgba(154, 171, 146, 0.5);
}

.GridView_tierBadge3__v53FE {
  background: linear-gradient(135deg, #8c9e84 0%, #7e9176 100%);
  border-color: rgba(140, 158, 132, 0.5);
}

.GridView_tierBadge4__WQgjj {
  background: linear-gradient(135deg, #7e9176 0%, #708468 100%);
  border-color: rgba(126, 145, 118, 0.5);
}

.GridView_tierBadge5__yG9HF {
  background: linear-gradient(135deg, #708468 0%, #62775a 100%);
  border-color: rgba(112, 132, 104, 0.5);
}

.GridView_tierBadge1__y9bAK:hover,
.GridView_tierBadge2__c12Fc:hover,
.GridView_tierBadge3__v53FE:hover,
.GridView_tierBadge4__WQgjj:hover,
.GridView_tierBadge5__yG9HF:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(168, 184, 160, 0.3);
}

/* Responsive design */
@media (max-width: 1200px) {
  .GridView_leaderboardHeader__Pw68s {
    font-size: 0.8rem;
    padding: 14px 0;
  }

  .GridView_leaderboardRow__Yylko {
    padding: 14px 0;
  }

  .GridView_headerCell__qL2Kt,
  .GridView_rankCell__51qbd,
  .GridView_modelCell__YwoIM,
  .GridView_pricingCellNew__TgmZJ,
  .GridView_providerCellNew__jKRFK,
  .GridView_tierCellNew__NpWRE {
    padding: 0 16px;
  }

  .GridView_modelName__i\+IEu {
    font-size: 0.9rem;
  }

  .GridView_modelDescription__AZBpb {
    font-size: 0.8rem;
  }

  .GridView_pricingContainer__y3yXC {
    padding: 10px 14px;
  }

  .GridView_priceContent__zgQv2 {
    gap: 10px;
  }

  .GridView_priceMain__wlcrC {
    font-size: 1rem;
  }

  .GridView_priceUnit__7lCfQ {
    font-size: 0.7rem;
  }

  .GridView_detailsButton__vEeEF {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  .GridView_providerName__TGZez {
    font-size: 0.8rem;
  }

  .GridView_tierBadge1__y9bAK,
  .GridView_tierBadge2__c12Fc,
  .GridView_tierBadge3__v53FE,
  .GridView_tierBadge4__WQgjj,
  .GridView_tierBadge5__yG9HF {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .GridView_gridViewContainer__1ZpJQ {
    padding: 8px; /* Reduced from 24px for more content width */
  }

  .GridView_headerTitle__TZKOc {
    font-size: 2rem;
  }

  .GridView_headerLeft__8EfcK {
    gap: 12px;
  }

  .GridView_header__7tGEl {
    margin-bottom: 16px; /* Reduced from 32px */
    padding-bottom: 12px; /* Reduced from 24px */
  }

  .GridView_summaryToggle__kyPta {
    font-size: 0.8rem;
    padding: 8px 14px;
  }

  /* Make the leaderboard horizontally scrollable */
  .GridView_leaderboardContainer__FBQO\+ {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .GridView_leaderboardHeader__Pw68s,
  .GridView_leaderboardRow__Yylko {
    min-width: 600px; /* Ensure minimum width to maintain layout */
  }

  /* Add custom scrollbar styling */
  .GridView_leaderboardContainer__FBQO\+::-webkit-scrollbar {
    height: 8px;
  }

  .GridView_leaderboardContainer__FBQO\+::-webkit-scrollbar-track {
    background: rgba(168, 184, 160, 0.1);
    border-radius: 4px;
  }

  .GridView_leaderboardContainer__FBQO\+::-webkit-scrollbar-thumb {
    background: rgba(168, 184, 160, 0.6);
    border-radius: 4px;
  }

  .GridView_leaderboardContainer__FBQO\+::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 184, 160, 0.8);
  }

  .GridView_pricingTable__JDQNt th,
  .GridView_pricingTable__JDQNt td {
    padding: 12px 10px;
    font-size: 0.8rem;
  }

  .GridView_modelName__i\+IEu {
    min-width: 120px;
  }

  .GridView_description__Dt0HA {
    max-width: 160px;
    font-size: 0.8rem;
  }

  .GridView_pricingContainer__y3yXC {
    padding: 8px 12px;
  }

  .GridView_priceContent__zgQv2 {
    gap: 8px;
  }

  .GridView_priceMain__wlcrC {
    font-size: 0.9rem;
  }

  .GridView_priceUnit__7lCfQ {
    font-size: 0.65rem;
  }

  .GridView_providerBadge__7EuuA {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  .GridView_tierPill__QHjM1 {
    font-size: 0.7rem;
    padding: 6px 12px;
    min-width: 60px;
  }

  .GridView_footerStats__Njxbi {
    flex-direction: column;
    gap: 8px;
  }

  .GridView_footerStat__rOQuA {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .GridView_legendItems__leWiN {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .GridView_legendTitle__PEO4M {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .GridView_legendItem__cW-c6 {
    font-size: 0.8rem;
  }

  .GridView_legendIndicator__RGujD {
    font-size: 0.7rem;
    padding: 3px 5px;
  }

  .GridView_legendText__WfhLr {
    font-size: 0.75rem;
  }

  .GridView_showAllButton__UOzRY {
    font-size: 0.7rem;
    padding: 4px 8px;
  }
}

.GridView_footer__9LvIR {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.GridView_footerStats__Njxbi {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.GridView_footerStat__rOQuA {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  transition: all 0.2s ease;
}

.GridView_footerStat__rOQuA:hover {
  background: #f3f4f6;
  border-color: #a8b8a0;
  color: #a8b8a0;
}

/* Pricing Legend */
.GridView_pricingLegend__j9ipP {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(168, 184, 160, 0.2);
}

.GridView_legendTitle__PEO4M {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
  margin: 0 0 16px 0;
  font-family: 'Urbanist', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.GridView_legendItems__leWiN {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.GridView_legendItem__cW-c6 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.GridView_legendIndicator__RGujD {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  color: #a8b8a0;
  background: rgba(168, 184, 160, 0.1);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  min-width: 20px;
  text-align: center;
  border: 1px solid rgba(168, 184, 160, 0.2);
}

.GridView_legendText__WfhLr {
  color: #718096;
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
}

/* Removed 480px breakpoint - keep table layout for all mobile sizes */

.PricingSummaryCard_summaryCard__tKoET {
  /* background: rgba(255, 255, 255, 0.95); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(58, 87, 58, 0.142);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 30px;
  /* box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.08),
      0 -2px 10px rgba(0, 0, 0, 0.04); */
  font-family: 'Urbanist', sans-serif;
  animation: PricingSummaryCard_slideInFromTop__bmPRG 0.5s ease-out;
}

@keyframes PricingSummaryCard_slideInFromTop__bmPRG {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.PricingSummaryCard_cardHeader__W\+IST {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.PricingSummaryCard_cardTitle__\+Qkm5 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.PricingSummaryCard_modelCount__DkT-l {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow:
    0 4px 12px rgba(102, 126, 234, 0.3),
    0 -1px 4px rgba(102, 126, 234, 0.2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.PricingSummaryCard_statsGrid__iWw5\+ {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.PricingSummaryCard_statGroup__W8oLZ {
  /* background: rgba(248, 249, 250, 0.8); */
  /* border-radius: 12px; */
  padding: 18px;
  /* border-left: 4px solid #667eea; */
  border-right: 1px solid #4a4a4b3f;
  /* box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.05),
      0 -1px 4px rgba(0, 0, 0, 0.02); */
  transition: all 0.3s ease;
  border-radius: 16px 0 0 16px;
}

.PricingSummaryCard_statGroup__W8oLZ:last-child {
  border-right: none;
}

.PricingSummaryCard_statGroup__W8oLZ:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 -2px 6px rgba(0, 0, 0, 0.04);
}

.PricingSummaryCard_statTitle__sXSEc {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Provider styles */
.PricingSummaryCard_providerList__crjVl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.PricingSummaryCard_providerItem__ypD9u {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #a8b8a0;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.PricingSummaryCard_providerItem__ypD9u:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
  border-color: rgba(102, 126, 234, 0.2);
}

.PricingSummaryCard_providerDot__Nsiv5 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.PricingSummaryCard_providerName__GTela {
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  flex: 1 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PricingSummaryCard_providerCount__uYlc- {
  background: rgba(0, 0, 0, 0.1);
  color: #555;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

/* Tier styles */
.PricingSummaryCard_tierList__DqCqc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.PricingSummaryCard_tierItem__TSewX {
  display: flex;
  align-items: center;
  gap: 10px;
}

.PricingSummaryCard_tierName__LCRwu {
  font-size: 0.8rem;
  font-weight: 500;
  color: #666;
  min-width: 60px;
}

.PricingSummaryCard_tierBar__rrgyW {
  flex: 1 1;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.PricingSummaryCard_tierFill__RVTjB {
  height: 100%;
  background: linear-gradient(
    90deg,
    #a5d4a5,
    #667eea,
    #d4d4a5,
    #d4a5a5,
    #a5d4d4
  );
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.PricingSummaryCard_tierCount__5K8aK {
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  min-width: 20px;
  text-align: center;
}

/* Pricing stats styles */
.PricingSummaryCard_pricingStats__ByHoc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.PricingSummaryCard_pricingItem__HgbyL {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.PricingSummaryCard_pricingLabel__eCyfi {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.PricingSummaryCard_pricingValue__pmlqP {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  font-family: 'Inconsolata', monospace;
}

.PricingSummaryCard_progressBar__5rxw9 {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0;
}

.PricingSummaryCard_progressFill__RWiA9 {
  height: 100%;
  background: linear-gradient(90deg, #10a37f, #667eea);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.PricingSummaryCard_percentage__9c-TZ {
  font-size: 0.9rem;
  font-weight: 600;
  color: #10a37f;
  text-align: center;
}

/* Responsive design */
@media (max-width: 768px) {
  .PricingSummaryCard_summaryCard__tKoET {
    padding: 18px;
    margin-bottom: 20px;
  }

  .PricingSummaryCard_cardHeader__W\+IST {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .PricingSummaryCard_modelCount__DkT-l {
    align-self: flex-start;
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .PricingSummaryCard_statsGrid__iWw5\+ {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .PricingSummaryCard_cardTitle__\+Qkm5 {
    font-size: 1.2rem;
  }

  .PricingSummaryCard_statGroup__W8oLZ {
    padding: 14px;
  }

  .PricingSummaryCard_providerItem__ypD9u {
    padding: 6px 10px;
    gap: 10px;
  }

  .PricingSummaryCard_providerDot__Nsiv5 {
    width: 10px;
    height: 10px;
  }

  .PricingSummaryCard_tierItem__TSewX {
    gap: 10px;
  }

  .PricingSummaryCard_progressBar__5rxw9 {
    height: 8px;
  }
}

@media (max-width: 480px) {
  .PricingSummaryCard_tierItem__TSewX {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .PricingSummaryCard_tierBar__rrgyW {
    width: 100%;
    height: 6px;
  }

  .PricingSummaryCard_providerItem__ypD9u {
    gap: 8px;
    padding: 6px 8px;
  }

  .PricingSummaryCard_modelCount__DkT-l {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .PricingSummaryCard_statGroup__W8oLZ {
    padding: 12px;
  }
}

.PricingModal_modalOverlay__AYST5 {
  position: fixed; /* Changed from absolute to fixed */
  top: 0;
  left: 0;
  right: 0; /* Added for better coverage */
  bottom: 0; /* Added for better coverage */
  width: 100vw; /* Ensure full viewport width */
  height: 100vh; /* Ensure full viewport height */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999; /* Maximum z-index to ensure it's above everything */
  animation: PricingModal_fadeIn__dWCKZ 0.3s ease-out;
  padding: 20px;
  box-sizing: border-box; /* Added to ensure padding is included in dimensions */
  overflow: auto; /* Allow scrolling within modal if content is too large */
}

@keyframes PricingModal_fadeIn__dWCKZ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.PricingModal_modalContent__ldk\+\+ {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 -4px 16px rgba(0, 0, 0, 0.06);
  font-family: 'Urbanist', sans-serif;
  animation: PricingModal_slideIn__LMhjC 0.3s ease-out;
  position: relative; /* Ensure it's positioned relative to the overlay */
  margin: auto; /* Additional centering */
  flex-shrink: 0; /* Prevent shrinking */
}

@keyframes PricingModal_slideIn__LMhjC {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.PricingModal_modalHeader__TkkN\+ {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 30px 20px 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.8),
    rgba(248, 249, 250, 0.6)
  );
}

.PricingModal_modelInfo__cdQdi {
  flex: 1 1;
}

.PricingModal_modelName__N\+6W6 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.PricingModal_modelDescription__HnNZR {
  font-size: 1rem;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.PricingModal_modelMeta__kjM9W {
  display: flex;
  gap: 12px;
  align-items: center;
}

.PricingModal_providerBadge__K1LFk {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-width: 1px;
  border-style: solid;
}

.PricingModal_tierBadge__smSJi {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.PricingModal_closeButton__oaUP3 {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(204, 204, 204, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
  margin-left: 20px;
}

.PricingModal_closeButton__oaUP3:hover {
  background: #e6c7c7;
  border-color: #e6c7c7;
  color: #fff;
  transform: rotate(90deg);
}

.PricingModal_modalBody__\+1Gzr {
  padding: 30px;
  overflow-y: auto;
  max-height: calc(80vh - 160px);
}

.PricingModal_pricingSection__6A\+gI {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.PricingModal_pricingGroup__AkKxS {
  background: rgba(248, 249, 250, 0.8);
  border-radius: 15px;
  padding: 20px;
  border-left: 4px solid #667eea;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 -1px 4px rgba(0, 0, 0, 0.02);
}

.PricingModal_groupTitle__xV5C8 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PricingModal_qualitySection__Xiq7W {
  margin-bottom: 20px;
}

.PricingModal_qualitySection__Xiq7W:last-child {
  margin-bottom: 0;
}

.PricingModal_qualityTitle__fg89O {
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 12px 0;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.PricingModal_priceGrid__eLVfu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.PricingModal_resolutionGrid__riEPp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.PricingModal_priceItem__54zQm,
.PricingModal_resolutionItem__qby6Y {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.PricingModal_priceItem__54zQm:hover,
.PricingModal_resolutionItem__qby6Y:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.PricingModal_priceLabel__Co6PN,
.PricingModal_resolutionLabel__nc1yd {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.PricingModal_priceValue__hf99M,
.PricingModal_resolutionPrice__buspq {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  font-family: 'Inconsolata', monospace;
  background: linear-gradient(135deg, #667eea, #10a37f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.PricingModal_modalFooter__VUlAR {
  padding: 20px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.8),
    rgba(248, 249, 250, 0.6)
  );
  text-align: center;
}

.PricingModal_pricingUnit__Xyg1o {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .PricingModal_modalOverlay__AYST5 {
    padding: 10px;
  }

  .PricingModal_modalContent__ldk\+\+ {
    max-height: 90vh;
    border-radius: 15px;
  }

  .PricingModal_modalHeader__TkkN\+ {
    padding: 20px 20px 16px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .PricingModal_closeButton__oaUP3 {
    align-self: flex-end;
    margin-left: 0;
    margin-top: -10px;
  }

  .PricingModal_modelName__N\+6W6 {
    font-size: 1.5rem;
  }

  .PricingModal_modalBody__\+1Gzr {
    padding: 20px;
    max-height: calc(90vh - 140px);
  }

  .PricingModal_pricingGroup__AkKxS {
    padding: 16px;
  }

  .PricingModal_priceGrid__eLVfu,
  .PricingModal_resolutionGrid__riEPp {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .PricingModal_priceGrid__eLVfu::-webkit-scrollbar,
  .PricingModal_resolutionGrid__riEPp::-webkit-scrollbar {
    height: 6px;
  }

  .PricingModal_priceGrid__eLVfu::-webkit-scrollbar-track,
  .PricingModal_resolutionGrid__riEPp::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  .PricingModal_priceGrid__eLVfu::-webkit-scrollbar-thumb,
  .PricingModal_resolutionGrid__riEPp::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.5);
    border-radius: 3px;
  }

  .PricingModal_priceItem__54zQm,
  .PricingModal_resolutionItem__qby6Y {
    padding: 10px 12px;
    min-width: 200px;
    flex-shrink: 0;
  }

  .PricingModal_groupTitle__xV5C8 {
    font-size: 1.1rem;
  }

  .PricingModal_modalFooter__VUlAR {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .PricingModal_modalHeader__TkkN\+ {
    padding: 16px;
  }

  .PricingModal_modalBody__\+1Gzr {
    padding: 16px;
  }

  .PricingModal_modelName__N\+6W6 {
    font-size: 1.3rem;
  }

  .PricingModal_modelDescription__HnNZR {
    font-size: 0.9rem;
  }

  .PricingModal_pricingGroup__AkKxS {
    padding: 14px;
  }

  .PricingModal_priceItem__54zQm,
  .PricingModal_resolutionItem__qby6Y {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 180px;
  }

  .PricingModal_priceValue__hf99M,
  .PricingModal_resolutionPrice__buspq {
    align-self: flex-end;
  }
}

/* Container */
.Home3Page_container__VJNYf {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, rgb(0, 0, 0), rgb(0, 0, 0));
  color: white;
  font-family: 'Arial', sans-serif;
  overflow-x: hidden;
}

/* Floating Header */
.Home3Page_pageTitle__g8pUK {
  position: fixed;
  top: 25px;
  left: 40px;
  font-size: 3rem;
  font-weight: 100;
  color: #aaa;
  z-index: 990;
  font-family: 'Urbanist', sans-serif;
  margin: 0;
  letter-spacing: 0.1em;
}

/* Header */
.Home3Page_header__ctkj0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.Home3Page_logoContainer__\+aXIg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Home3Page_globe__IwlLi {
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  position: relative;
}

.Home3Page_globe__IwlLi::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: white;
  transform: translateY(-50%);
}

.Home3Page_globe__IwlLi::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  transform: translateX(-50%);
}

.Home3Page_logoText__7mtlk {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.Home3Page_nav__ldTsp {
  display: flex;
  gap: 2rem;
}

.Home3Page_nav__ldTsp a {
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.3s;
}

.Home3Page_nav__ldTsp a:hover {
  opacity: 0.7;
}

.Home3Page_bookBtn__3gZVY {
  padding: 0.6rem 2rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.Home3Page_bookBtn__3gZVY:hover {
  background: white;
  color: black;
}

.Home3Page_socialIcons__8YuAZ {
  display: flex;
  gap: 1rem;
}

.Home3Page_socialIcon__TyoNE {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  transition: opacity 0.3s;
}

.Home3Page_socialIcon__TyoNE:hover {
  opacity: 0.7;
}

/* Hero Section */
.Home3Page_hero__A9K5h {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: url(/static/media/scifi.d6e7d0330aab873a92a4.webp) center/cover no-repeat;
  background-blend-mode: overlay;
  animation: Home3Page_heroFadeIn__DK-vN 1s ease-out;
}

@keyframes Home3Page_heroFadeIn__DK-vN {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.Home3Page_hero__A9K5h::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgb(0, 0, 0));
}

.Home3Page_heroSubtitle__SXSHA {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  animation: Home3Page_slideInTop__agY7X 0.8s ease-out 0.2s both;
}

@keyframes Home3Page_slideInTop__agY7X {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.Home3Page_heroTitle__WDhU- {
  font-size: 10rem;
  font-weight: 900;
  font-family: 'urbanist', monospace;
  letter-spacing: 0.1em;
  margin: 0 0 3rem 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
  animation: Home3Page_scaleIn__pmaBU 1s ease-out 0.4s both;
}

@keyframes Home3Page_scaleIn__pmaBU {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.Home3Page_highlights__4jQ1y {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.Home3Page_highlightCard__ILXyB {
  width: 150px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: Home3Page_fadeInUp__YFD8W 0.6s ease-out both;
}

.Home3Page_highlightCard__ILXyB:nth-child(1) {
  animation-delay: 0.6s;
}
.Home3Page_highlightCard__ILXyB:nth-child(2) {
  animation-delay: 0.7s;
}
.Home3Page_highlightCard__ILXyB:nth-child(3) {
  animation-delay: 0.8s;
}
.Home3Page_highlightCard__ILXyB:nth-child(4) {
  animation-delay: 0.9s;
}
.Home3Page_highlightCard__ILXyB:nth-child(5) {
  animation-delay: 1s;
}

@keyframes Home3Page_fadeInUp__YFD8W {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.Home3Page_highlightCard__ILXyB:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
  animation: Home3Page_shake__3LOKA 0.5s ease-in-out;
}

@keyframes Home3Page_shake__3LOKA {
  0%,
  100% {
    transform: translateY(-10px) scale(1.05) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) scale(1.05) rotate(-2deg);
  }
  75% {
    transform: translateY(-10px) scale(1.05) rotate(2deg);
  }
}

.Home3Page_highlightCard__ILXyB img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin: 0 auto;
  display: block;
  padding: 1rem 0;
}

.Home3Page_highlightCard__ILXyB p {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  font-family: 'Inconsolata', monospace;
  color: white;
}

.Home3Page_heroActions__OTQHp {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.Home3Page_heroLogo__-LiFZ {
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: all 0.3s ease;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
  animation: Home3Page_float__JbEFr 3s ease-in-out infinite;
}

@keyframes Home3Page_float__JbEFr {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.Home3Page_heroLogo__-LiFZ:hover {
  transform: scale(1.1) rotate(360deg);
  filter: drop-shadow(0 8px 30px rgba(255, 255, 255, 0.3));
  animation: none;
}

.Home3Page_heroBookBtn__nTLMs {
  padding: 1rem 4rem;
  background: white;
  color: black;
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.Home3Page_heroBookBtn__nTLMs::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}

.Home3Page_heroBookBtn__nTLMs:hover::before {
  width: 300px;
  height: 300px;
}

.Home3Page_heroBookBtn__nTLMs:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

/* About Section */
.Home3Page_about__qoIiz {
  padding: 5rem 3rem;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
}

.Home3Page_sectionTitle__UHqYr {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin: 0 0 4rem 0;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 200;
  animation: Home3Page_slideInFromLeft__EJBwP 0.8s ease-out;
}

@keyframes Home3Page_slideInFromLeft__EJBwP {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.Home3Page_sectionTitle__UHqYr::before,
.Home3Page_sectionTitle__UHqYr::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 200px;
  height: 2px;
  background: white;
}

.Home3Page_sectionTitle__UHqYr::before {
  left: 0;
}

.Home3Page_sectionTitle__UHqYr::after {
  right: 0;
}

.Home3Page_aboutContent__IIA1i {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 200;
}

.Home3Page_aboutText__L\+UQT {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 20;
}

.Home3Page_aboutText__L\+UQT p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  line-height: 1.6;
}

.Home3Page_cities__Lx6bw {
  font-weight: bold;
  color: #ffa500;
}

/* Timeline */
.Home3Page_timeline__M1rjP {
  position: relative;
  padding: 4rem 0;
  margin: 4rem 0;
}

.Home3Page_timeline__M1rjP::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  transform: translateX(-50%);
}

.Home3Page_timelineItem__1cUSS {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 3rem;
  gap: 3rem;
  align-items: center;
  margin: 5rem 0;
  position: relative;
  min-height: 200px;
}

.Home3Page_timelineLeft__U8mMZ,
.Home3Page_timelineRight__BsMRu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.Home3Page_timelineLeft__U8mMZ {
  justify-content: flex-end;
}

.Home3Page_timelineRight__BsMRu {
  justify-content: flex-start;
}

.Home3Page_timelineDot__Ibx2N {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 0 4px black,
    0 0 0 6px white;
  flex-shrink: 0;
}

.Home3Page_timelineContent__GO8Zg {
  text-align: left;
}

.Home3Page_timelineDays__eMWvk {
  font-size: 0.9rem;
  opacity: 0.8;
  display: block;
  margin-bottom: 0.5rem;
}

.Home3Page_timelineCity__lR4KL {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
}

.Home3Page_timelineImages__0O7D5 {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.Home3Page_timelineImgWrapper__qpM2g {
  position: relative;
  width: 250px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.Home3Page_timelineImgWrapper__qpM2g:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.Home3Page_timelineImgWrapper__qpM2g::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.65) 25%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.15) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.Home3Page_timelineImg__lM8hJ {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.Home3Page_timelineImgSmallWrapper__\+XDR8 {
  position: relative;
  width: 150px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.Home3Page_timelineImgSmallWrapper__\+XDR8:hover {
  transform: scale(1.2) translate(30px, 30px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.Home3Page_timelineImgSmallWrapper__\+XDR8::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.65) 25%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.15) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.Home3Page_timelineImgSmall__EdH5j {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* Desktop: Overlapping images for Osaka and Tokyo */
.Home3Page_timelineLeft__U8mMZ .Home3Page_timelineImages__0O7D5,
.Home3Page_timelineRight__BsMRu .Home3Page_timelineImages__0O7D5 {
  position: relative;
  display: inline-block;
}

.Home3Page_timelineLeft__U8mMZ
  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImgWrapper__qpM2g):has(.Home3Page_timelineImgSmallWrapper__\+XDR8),
.Home3Page_timelineRight__BsMRu
  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImgWrapper__qpM2g):has(.Home3Page_timelineImgSmallWrapper__\+XDR8) {
  padding-right: 40px;
  padding-bottom: 40px;
  position: relative;
  display: inline-block;
}

.Home3Page_timelineLeft__U8mMZ .Home3Page_timelineImages__0O7D5 .Home3Page_timelineImgWrapper__qpM2g,
.Home3Page_timelineRight__BsMRu .Home3Page_timelineImages__0O7D5 .Home3Page_timelineImgWrapper__qpM2g {
  position: relative;
  z-index: 1;
  display: block;
}

.Home3Page_timelineLeft__U8mMZ .Home3Page_timelineImages__0O7D5 .Home3Page_timelineImgSmallWrapper__\+XDR8,
.Home3Page_timelineRight__BsMRu .Home3Page_timelineImages__0O7D5 .Home3Page_timelineImgSmallWrapper__\+XDR8 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  border: 3px solid rgba(0, 0, 0, 0.8);
  width: 140px;
  height: 140px;
  transform: translate(20px, 20px);
}

/* Enhanced hover effect when both images are present */
.Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImgWrapper__qpM2g):has(.Home3Page_timelineImgSmallWrapper__\+XDR8):hover
  .Home3Page_timelineImgWrapper__qpM2g {
  transform: scale(1.15) translate(-20px, -10px);
}

.Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImgWrapper__qpM2g):has(.Home3Page_timelineImgSmallWrapper__\+XDR8):hover
  .Home3Page_timelineImgSmallWrapper__\+XDR8 {
  transform: scale(1.25) translate(40px, 40px);
}

.Home3Page_aboutFooter__-m0tU {
  text-align: center;
  margin-top: 4rem;
}

.Home3Page_aboutFooter__-m0tU p {
  font-size: 1.1rem;
  margin: 0.5rem 0;
  line-height: 1.6;
}

/* Included Section */
.Home3Page_included__Hmq7y {
  padding: 5rem 3rem;
  margin-top: 5rem;
  background: rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.Home3Page_included__Hmq7y::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: linear-gradient(
    180deg,
    #000000 0%,
    rgba(0, 0, 0, 0.95) 20%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 100;
}

.Home3Page_included__Hmq7y::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: linear-gradient(
    0deg,
    #000000 0%,
    rgba(0, 0, 0, 0.95) 20%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 100;
}

.Home3Page_includedGrid__lacoY {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 200;
}

.Home3Page_includedCard__sL62v {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
}

.Home3Page_includedCard__sL62v:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-10px);
}

.Home3Page_includedIcon__xvav1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 126, 234, 0.15);
  border-radius: 12px;
  color: #667eea;
  margin-left: auto;
  margin-right: auto;
}

.Home3Page_includedCard__sL62v h3 {
  font-size: 1.5rem;
  margin: 1rem 0;
  font-weight: bold;
}

.Home3Page_includedCard__sL62v p {
  font-size: 1rem;
  margin: 0.3rem 0;
  opacity: 0.9;
}

/* Contact Section */
.Home3Page_contact__42pJJ {
  position: relative;
  min-height: 70vh;
  padding: 5rem 3rem;
  background: url(/static/media/jungle.14a7d217733e25452ff2.webp) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Home3Page_contact__42pJJ::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0.3));
}

.Home3Page_contactContent__HemcX {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.Home3Page_contactLeft__KgXXp {
  flex: 1 1;
}

.Home3Page_contactTitle__5srqP {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
}

.Home3Page_contactSubtitle__I9m9- {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 1rem 0 0 0;
}

.Home3Page_contactForm__5LEds {
  flex: 1 1;
  /* background: rgba(40, 40, 40, 0.75); */
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.Home3Page_formTitle__VXmbw {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
}

.Home3Page_successMessage__p-jTJ {
  background: rgba(46, 213, 115, 0.2);
  border: 1px solid rgba(46, 213, 115, 0.5);
  color: #2ed573;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 500;
}

.Home3Page_errorMessage__s9Kpr {
  background: rgba(255, 71, 87, 0.2);
  border: 1px solid rgba(255, 71, 87, 0.5);
  color: #ff4757;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
}

.Home3Page_formInput__zqB\+D,
.Home3Page_formTextarea__bXls- {
  width: 90%;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  background: rgba(50, 50, 50, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s ease;
}

.Home3Page_formInput__zqB\+D:disabled,
.Home3Page_formTextarea__bXls-:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.Home3Page_formSubmit__GZxLQ:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.Home3Page_formInput__zqB\+D::placeholder,
.Home3Page_formTextarea__bXls-::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.Home3Page_formInput__zqB\+D:focus,
.Home3Page_formTextarea__bXls-:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(60, 60, 60, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.Home3Page_formTextarea__bXls- {
  min-height: 150px;
  resize: vertical;
}

.Home3Page_formSubmit__GZxLQ {
  width: 100%;
  padding: 1.2rem;
  background: white;
  color: black;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.Home3Page_formSubmit__GZxLQ:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 255, 255, 0.3);
}

/* Models Section */
.Home3Page_models__BAES5 {
  padding: 5rem 3rem;
  margin-top: 5rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.95) 100%
  );
  position: relative;
}

.Home3Page_modelsContent__oqFpT {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.Home3Page_modelsText__VrC9K {
  font-size: 1.8rem;
  font-weight: 300;
  margin: 0 0 1rem 0;
  color: rgba(255, 255, 255, 0.9);
}

.Home3Page_modelsSubtext__JwNyi {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 0 3rem 0;
  color: rgba(255, 255, 255, 0.7);
}

.Home3Page_modelsCarouselWrapper__teo\+p {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* Pricing Section */
.Home3Page_pricing__ELF1z {
  padding: 5rem 3rem;
  margin-top: 5rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(10, 10, 30, 0.95) 50%,
    rgba(0, 0, 0, 0.95) 100%
  );
  position: relative;
}

.Home3Page_pricingContent__ckztq {
  max-width: 1400px;
  margin: 0 auto;
}

.Home3Page_pricingCategory__o8Vt0 {
  margin-bottom: 6rem;
}

.Home3Page_pricingCategory__o8Vt0:last-child {
  margin-bottom: 0;
}

.Home3Page_pricingCategoryTitle__G5Vnf {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 1rem 0;
  color: white;
  letter-spacing: 0.05em;
  font-family: 'Inconsolata', monospace;
}

.Home3Page_creditSubtext__A1\+5R {
  text-align: center;
  font-size: 1rem;
  color: #828282;
  margin: 0 0 3rem 0;
  font-family: 'Inconsolata', monospace;
}

/* Subscription Cards - Matching SubscriptionModalContent */
.Home3Page_pricingCards__1SC-v {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 3rem;
}

.Home3Page_pricingCard__G48yW {
  background: transparent;
  border: 2px solid #000;
  border-radius: 40px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
}

.Home3Page_pricingCard__G48yW:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.5);
  animation: Home3Page_wiggle__sxiM4 0.5s ease-in-out;
}

@keyframes Home3Page_wiggle__sxiM4 {
  0%,
  100% {
    transform: translateY(-8px) scale(1.02) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) scale(1.02) rotate(-1deg);
  }
  75% {
    transform: translateY(-8px) scale(1.02) rotate(1deg);
  }
}

.Home3Page_pricingCard__G48yW.Home3Page_featured__7MEP5 {
  box-shadow: 0 0 16px rgba(138, 43, 226, 0.5);
  border-color: #8b5cf6;
}

.Home3Page_pricingCard__G48yW.Home3Page_featured__7MEP5:hover {
  box-shadow:
    0 8px 30px rgba(138, 43, 226, 0.6),
    0 0 20px rgba(138, 43, 226, 0.4);
  border-color: #8b5cf6;
  background: rgba(138, 43, 226, 0.05);
  transform: translateY(-6px) scale(1.02);
}

.Home3Page_pricingCard__G48yW.Home3Page_premium__J1BXM {
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
}

.Home3Page_pricingCard__G48yW.Home3Page_premium__J1BXM:hover {
  box-shadow:
    0 8px 30px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 69, 0, 0.4);
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.05);
  transform: translateY(-6px) scale(1.02);
}

.Home3Page_popularBadge__zmhO6 {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.Home3Page_planName__KSToS {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: white;
  font-family: 'Urbanist', sans-serif;
  letter-spacing: 0.05em;
}

.Home3Page_planPrice__gFWAX {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: white;
}

.Home3Page_priceAmount__9UXa5 {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
}

.Home3Page_pricePeriod__k\+5LW {
  font-size: 0.8rem;
  color: #cccccc;
  margin-left: 4px;
}

.Home3Page_planFeatures__MlXCt {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  text-align: center;
  flex-grow: 1;
}

.Home3Page_planFeatures__MlXCt li {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  margin: 0.8rem 0;
  font-family: 'Inconsolata', monospace;
}

.Home3Page_planButton__olzTa {
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  font-family: 'Inconsolata', monospace;
}

.Home3Page_planButton__olzTa:hover {
  background: #333;
}

/* Animated Gradient for Pro Title */
@keyframes Home3Page_animated-gradient__MzmcF {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.Home3Page_pricingCard__G48yW.Home3Page_featured__7MEP5 .Home3Page_planName__KSToS {
  background-size: 200% 200%;
  animation: Home3Page_animated-gradient__MzmcF 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(
    45deg,
    #dc143c,
    #adff2f,
    #40e0d0,
    #32cd32,
    #40e0d0,
    #adff2f,
    #dc143c
  );
}

.Home3Page_pricingCard__G48yW.Home3Page_premium__J1BXM .Home3Page_planName__KSToS {
  background-size: 200% 200%;
  animation: Home3Page_animated-gradient__MzmcF 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(
    45deg,
    #ffd700,
    #ff4500,
    #ff1493,
    #ff4500,
    #ffd700
  );
}

/* Credit Cards - Matching CreditsModalContent */
.Home3Page_creditCards__b8Pn8 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 3rem;
}

.Home3Page_creditCard__41FgB {
  background: transparent;
  border: 2px solid #000;
  border-radius: 40px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  cursor: pointer;
}

.Home3Page_creditCard__41FgB:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: Home3Page_pulse__9Qz4d 0.6s ease-in-out;
}

@keyframes Home3Page_pulse__9Qz4d {
  0%,
  100% {
    transform: translateY(-8px) scale(1.03);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

.Home3Page_creditCard__41FgB.Home3Page_bestValue__9oe-v {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
  border-color: #f59e0b;
}

.Home3Page_creditCard__41FgB.Home3Page_bestValue__9oe-v:hover {
  box-shadow:
    0 8px 30px rgba(245, 158, 11, 0.6),
    0 0 20px rgba(245, 158, 11, 0.4);
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
  transform: translateY(-6px) scale(1.02);
}

.Home3Page_bestValueBadge__9vigR {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #f59e0b;
  color: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.Home3Page_creditAmount__65qWA {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: white;
}

.Home3Page_creditFeature__SaQIV {
  font-size: 0.9rem;
  color: white;
  margin: 0.5rem 0;
  font-family: 'Inconsolata', monospace;
}

.Home3Page_creditPrice__USWe\+ {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin: 1.5rem 0 0 0;
}

.Home3Page_creditSuffix__-FaMb {
  font-size: 0.8rem;
  color: #cccccc;
  margin: 0.3rem 0 0 0;
}

/* Animated Gradient for Best Value Credits */
.Home3Page_creditCard__41FgB.Home3Page_bestValue__9oe-v .Home3Page_creditAmount__65qWA {
  background-size: 200% 200%;
  animation: Home3Page_animated-gradient__MzmcF 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(
    45deg,
    #f59e0b,
    #eab308,
    #facc15,
    #fde047,
    #facc15,
    #eab308,
    #f59e0b
  );
}

/* Footer */
.Home3Page_footer__iA9xd {
  background: rgba(0, 0, 0, 0.95);
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.Home3Page_footerLink__qbk9G {
  text-decoration: none;
  background: none;
  border: none;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    color 0.3s ease,
    background 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-family: inherit;
}

.Home3Page_footerLink__qbk9G:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.Home3Page_footerDot__gWfvk {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  font-weight: bold;
}

.Home3Page_footerContent__Ycsfp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Home3Page_footerLogo__yKwVJ {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Home3Page_footerNav__PeK1C {
  display: flex;
  gap: 2rem;
}

.Home3Page_footerNav__PeK1C a {
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.3s;
}

.Home3Page_footerNav__PeK1C a:hover {
  opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .Home3Page_heroTitle__WDhU- {
    font-size: 8rem;
  }

  .Home3Page_includedGrid__lacoY {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .Home3Page_pageTitle__g8pUK {
    font-size: 2rem;
    left: 20px;
    top: 20px;
  }

  .Home3Page_header__ctkj0 {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
  }

  .Home3Page_nav__ldTsp {
    display: none;
  }

  .Home3Page_socialIcons__8YuAZ {
    gap: 0.5rem;
  }

  .Home3Page_heroTitle__WDhU- {
    font-size: 4rem;
  }

  .Home3Page_highlights__4jQ1y {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    width: 100%;
    padding: 0 1rem;
    margin: 0 2rem;
    justify-content: space-between;
  }

  .Home3Page_highlightCard__ILXyB {
    width: calc(50% - 0.4rem);
    height: 140px;
    padding: 0.5rem;
    box-sizing: border-box;
  }

  .Home3Page_highlightCard__ILXyB:nth-child(n + 3) {
    width: calc(33.333% - 0.6rem);
  }

  .Home3Page_highlightCard__ILXyB img {
    width: 50px;
    height: 50px;
    padding: 0.5rem 0;
  }

  .Home3Page_highlightCard__ILXyB p {
    font-size: 0.65rem;
    margin: 0.3rem 0 0 0;
  }

  .Home3Page_heroActions__OTQHp {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    flex-direction: column;
    gap: 1rem;
  }

  .Home3Page_heroLogo__-LiFZ {
    width: 60px;
    height: 60px;
  }

  .Home3Page_heroBookBtn__nTLMs {
    padding: 0.8rem 3rem;
    font-size: 1rem;
    display: none;
  }

  .Home3Page_about__qoIiz {
    padding: 3rem 1.5rem;
  }

  .Home3Page_sectionTitle__UHqYr {
    font-size: 2rem;
  }

  .Home3Page_sectionTitle__UHqYr::before,
  .Home3Page_sectionTitle__UHqYr::after {
    width: 30px;
  }

  .Home3Page_aboutText__L\+UQT p {
    font-size: 1rem;
  }

  .Home3Page_includedGrid__lacoY {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .Home3Page_timeline__M1rjP {
    padding: 2rem 0;
    margin: 2rem 0;
  }

  .Home3Page_timeline__M1rjP::before {
    left: 10px;
  }

  .Home3Page_timelineItem__1cUSS {
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
    min-height: auto;
    padding-left: 0;
  }

  .Home3Page_timelineLeft__U8mMZ {
    display: contents;
  }

  .Home3Page_timelineRight__BsMRu {
    display: contents;
  }

  .Home3Page_timelineDot__Ibx2N {
    grid-column: 1;
    grid-row: 1;
    width: 16px;
    height: 16px;
    box-shadow:
      0 0 0 3px black,
      0 0 0 5px white;
    margin-top: 0;
    margin-left: 2px;
  }

  .Home3Page_timelineContent__GO8Zg {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }

  .Home3Page_timelineImages__0O7D5 {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    width: 100%;
    padding-left: 0;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 0;
  }

  .Home3Page_timelineImgWrapper__qpM2g {
    width: 100%;
    max-width: 100%;
    height: 200px;
  }

  .Home3Page_timelineImg__lM8hJ {
    width: 100%;
    height: 100%;
  }

  .Home3Page_timelineImgSmallWrapper__\+XDR8 {
    width: 140px;
    height: 140px;
    position: absolute;
    bottom: -20px;
    right: -20px;
    border: 3px solid black;
  }

  .Home3Page_timelineImgSmall__EdH5j {
    width: 100%;
    height: 100%;
  }

  /* For items with multiple images (Tokyo) */
  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImg__lM8hJ):has(.Home3Page_timelineImgSmall__EdH5j) {
    position: relative;
    padding-bottom: 40px;
  }

  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImg__lM8hJ):has(.Home3Page_timelineImgSmall__EdH5j) .Home3Page_timelineImg__lM8hJ {
    position: relative;
    z-index: 1;
  }

  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImg__lM8hJ):has(.Home3Page_timelineImgSmall__EdH5j) .Home3Page_timelineImgSmall__EdH5j {
    z-index: 2;
  }

  /* For items with only images (no small image) */
  .Home3Page_timelineImages__0O7D5:not(:has(.Home3Page_timelineImgSmall__EdH5j)) .Home3Page_timelineImg__lM8hJ {
    position: relative;
  }

  /* For items with multiple regular images (Osaka) */
  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImg__lM8hJ + .Home3Page_timelineImgSmall__EdH5j:not(:only-of-type)) {
    flex-direction: column;
    gap: 1rem;
  }

  .Home3Page_timelineImages__0O7D5:has(.Home3Page_timelineImg__lM8hJ):not(:has(.Home3Page_timelineImg__lM8hJ + .Home3Page_timelineImg__lM8hJ))
    .Home3Page_timelineImgSmall__EdH5j {
    position: absolute;
  }

  /* Osaka specific - overlapping effect (same as Tokyo) */
  .Home3Page_timelineItem__1cUSS:nth-child(1) .Home3Page_timelineImages__0O7D5 {
    position: relative;
    padding-bottom: 40px;
  }

  .Home3Page_timelineItem__1cUSS:nth-child(1) .Home3Page_timelineImgWrapper__qpM2g {
    position: relative;
    z-index: 1;
  }

  .Home3Page_timelineItem__1cUSS:nth-child(1) .Home3Page_timelineImgSmallWrapper__\+XDR8 {
    position: absolute;
    width: 140px;
    height: 140px;
    bottom: -20px;
    right: -20px;
    border: 3px solid black;
    z-index: 2;
  }

  /* Kyoto - single image */
  .Home3Page_timelineItem__1cUSS:nth-child(2) .Home3Page_timelineImages__0O7D5 {
    position: static;
  }

  /* Tokyo specific - overlapping effect */
  .Home3Page_timelineItem__1cUSS:nth-child(3) .Home3Page_timelineImages__0O7D5 {
    position: relative;
    padding-bottom: 40px;
  }

  .Home3Page_timelineItem__1cUSS:nth-child(3) .Home3Page_timelineImgWrapper__qpM2g {
    position: relative;
    z-index: 1;
  }

  .Home3Page_timelineItem__1cUSS:nth-child(3) .Home3Page_timelineImgSmallWrapper__\+XDR8 {
    position: absolute;
    width: 140px;
    height: 140px;
    bottom: -20px;
    right: -20px;
    border: 3px solid black;
    z-index: 2;
  }

  .Home3Page_timelineDays__eMWvk {
    font-size: 0.8rem;
  }

  .Home3Page_timelineCity__lR4KL {
    font-size: 1.8rem;
  }

  .Home3Page_aboutFooter__-m0tU {
    margin-top: 2rem;
  }

  .Home3Page_aboutFooter__-m0tU p {
    font-size: 0.95rem;
  }

  .Home3Page_included__Hmq7y {
    padding: 3rem 1.5rem;
  }

  .Home3Page_contact__42pJJ {
    padding: 3rem 1.5rem;
  }

  .Home3Page_contactContent__HemcX {
    flex-direction: column;
    gap: 2rem;
  }

  .Home3Page_contactLeft__KgXXp {
    text-align: center;
  }

  .Home3Page_contactTitle__5srqP {
    font-size: 2rem;
  }

  .Home3Page_contactSubtitle__I9m9- {
    font-size: 1.2rem;
  }

  .Home3Page_contactForm__5LEds {
    width: 100%;
  }

  .Home3Page_footer__iA9xd {
    padding: 1.5rem 1rem;
    gap: 0.5rem;
  }

  .Home3Page_footerLink__qbk9G {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  .Home3Page_footerDot__gWfvk {
    font-size: 0.85rem;
  }

  .Home3Page_footerContent__Ycsfp {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .Home3Page_footerNav__PeK1C {
    flex-direction: column;
    gap: 1rem;
  }

  /* Models Section - Mobile */
  .Home3Page_models__BAES5 {
    padding: 3rem 1.5rem;
  }

  .Home3Page_modelsText__VrC9K {
    font-size: 1.3rem;
  }

  .Home3Page_modelsSubtext__JwNyi {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .Home3Page_modelsCarouselWrapper__teo\+p {
    margin: 0 -1.5rem;
    width: calc(100% + 3rem);
  }

  /* Pricing Section - Mobile */
  .Home3Page_pricing__ELF1z {
    padding: 3rem 1.5rem;
  }

  .Home3Page_pricingCategoryTitle__G5Vnf {
    font-size: 1.5rem;
  }

  .Home3Page_creditSubtext__A1\+5R {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .Home3Page_pricingCards__1SC-v {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .Home3Page_pricingCard__G48yW {
    padding: 2rem 1.5rem;
  }

  .Home3Page_pricingCard__G48yW.Home3Page_featured__7MEP5,
  .Home3Page_pricingCard__G48yW.Home3Page_premium__J1BXM {
    transform: none;
  }

  .Home3Page_pricingCard__G48yW.Home3Page_featured__7MEP5:hover,
  .Home3Page_pricingCard__G48yW.Home3Page_premium__J1BXM:hover {
    transform: translateY(-4px);
  }

  .Home3Page_popularBadge__zmhO6,
  .Home3Page_bestValueBadge__9vigR {
    top: -10px;
    font-size: 0.65rem;
    padding: 0.35rem 1rem;
  }

  .Home3Page_planName__KSToS {
    font-size: 1.2rem;
  }

  .Home3Page_priceAmount__9UXa5 {
    font-size: 1.6rem;
  }

  .Home3Page_pricePeriod__k\+5LW {
    font-size: 0.75rem;
  }

  .Home3Page_planFeatures__MlXCt li {
    font-size: 0.85rem;
    margin: 0.6rem 0;
  }

  .Home3Page_planButton__olzTa {
    font-size: 0.85rem;
    padding: 0.7rem 1.2rem;
    display: none;
  }

  .Home3Page_creditCards__b8Pn8 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .Home3Page_creditCard__41FgB {
    padding: 2rem 1.5rem;
  }

  .Home3Page_creditAmount__65qWA {
    font-size: 1.2rem;
  }

  .Home3Page_creditFeature__SaQIV {
    font-size: 0.85rem;
  }

  .Home3Page_creditPrice__USWe\+ {
    font-size: 1.6rem;
    margin: 1rem 0 0 0;
  }

  .Home3Page_creditSuffix__-FaMb {
    font-size: 0.75rem;
  }
}

.Home2Page_home2Page__G7Zl9 {
  min-height: 100vh;
  background: #fffff5;
  color: #1f2937;
  font-family: 'Inconsolata', monospace;
}

/* Navigation */
.Home2Page_navbar__0Ek0n {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  position: relative;
  z-index: 10;
}

.Home2Page_logo__xVd08 {
  display: flex;
  align-items: center;
}

.Home2Page_pageTitle__fcOGu {
  font-size: 3rem;
  font-weight: 100;
  color: #aaa;
  font-family: 'Urbanist';
  margin: 0;
}

.Home2Page_navLinks__A4osL {
  display: flex;
  gap: 15px;
  align-items: center;
}

.Home2Page_navLinks__A4osL a,
.Home2Page_navLink__ABLsk {
  background: none;
  border: none;
  color: #666;
  font-size: 0.9rem;
  font-weight: 400;
  font-family: 'Inconsolata';
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 4px;
}

.Home2Page_navLinks__A4osL a:hover,
.Home2Page_navLink__ABLsk:hover {
  color: #333;
  background: rgba(255, 255, 255, 0.1);
}

.Home2Page_navSeparator__j3bpE {
  color: #888;
  font-size: 0.9rem;
  font-weight: 300;
}

.Home2Page_headerRight__e7S4v {
  display: flex;
  align-items: center;
  gap: 15px;
}

.Home2Page_downloadBtn__uMOAC {
  background: #1f2937;
  color: white;
  border: 1px solid #1f2937;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.Home2Page_downloadBtn__uMOAC:hover {
  background: #374151;
  border-color: #374151;
}

.Home2Page_buttonLogo__EM3cO {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.Home2Page_closeButton__Au50l {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  transition: all 0.3s ease;
  cursor: pointer;
  color: #888;
}

.Home2Page_closeButton__Au50l:hover {
  background: #e6c7c7;
  border-color: #e6c7c7;
  color: #fff;
  transform: rotate(90deg);
}

/* Safari and mobile fixes for close button */
@supports (-webkit-appearance: none) {
  .Home2Page_closeButton__Au50l {
    /* Better centering for Safari */
    -webkit-box-align: center;
    -webkit-box-pack: center;
    /* Hardware acceleration */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Fix font rendering */
    -webkit-font-smoothing: antialiased;
    /* Ensure proper centering */
    text-align: center;
    vertical-align: middle;
  }

  .Home2Page_closeButton__Au50l:hover {
    /* Smoother rotation for Safari */
    transform: translateZ(0) rotate(90deg);
    transition: all 0.2s ease-out;
  }
}

@media (max-width: 768px) {
  .Home2Page_closeButton__Au50l {
    /* Better mobile sizing and centering */
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    /* Remove rotation effect on mobile - just scale */
    transition: all 0.2s ease;
    /* Ensure proper touch target */
    min-width: 44px;
    min-height: 44px;
    /* Better centering on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .Home2Page_closeButton__Au50l:hover,
  .Home2Page_closeButton__Au50l:active {
    /* Remove rotation on mobile, use scale instead */
    transform: scale(1.1);
    background: #e6c7c7;
    border-color: #e6c7c7;
    color: #fff;
    /* Better mobile interaction */
    -webkit-tap-highlight-color: transparent;
  }
}

/* Grid Container */
.Home2Page_gridContainer__GjGqv {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  padding: 20px 40px;
  height: calc(100vh - 120px);
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

/* Base card styles with transitions */
.Home2Page_card__Ezgfo {
  border-radius: 24px;
  padding: 30px 40px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
  z-index: 1;
}

/* Hover bounce animation for non-expanded cards */
.Home2Page_card__Ezgfo:not(.Home2Page_expanded__ZkCvm):hover {
  animation: Home2Page_cardBounce__W\+KXy 1.5s ease-in-out infinite;
}

/* Stop bounce animation when expanded */
.Home2Page_card__Ezgfo.Home2Page_expanded__ZkCvm {
  animation: none;
}

/* Bounce keyframes */
@keyframes Home2Page_cardBounce__W\+KXy {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.02);
  }
}

/* Background highlight effects - behind content */
.Home2Page_card__Ezgfo:not(.Home2Page_expanded__ZkCvm):hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(168, 85, 247, 0.1),
    rgba(193, 255, 114, 0.1),
    rgba(0, 255, 136, 0.1),
    rgba(79, 70, 229, 0.1)
  );
  background-size: 300% 300%;
  border-radius: 24px;
  z-index: -1;
  animation: Home2Page_highlightGlow__i6oCh 2s ease-in-out infinite;
}

/* Highlight glow animation */
@keyframes Home2Page_highlightGlow__i6oCh {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Background sparkle effects - behind content */
.Home2Page_card__Ezgfo:not(.Home2Page_expanded__ZkCvm):hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(
      circle at 20% 80%,
      rgba(193, 255, 114, 0.2) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(168, 85, 247, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(0, 255, 136, 0.2) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 60% 60%,
      rgba(79, 70, 229, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 15% 25%,
      rgba(193, 255, 114, 0.15) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(168, 85, 247, 0.15) 1px,
      transparent 1px
    );
  background-size:
    40px 40px,
    30px 30px,
    50px 50px,
    35px 35px,
    25px 25px,
    45px 45px;
  animation: Home2Page_sparkleMove__6rmHb 3s linear infinite;
  pointer-events: none;
  border-radius: 24px;
  z-index: -1;
}

/* Sparkle movement animation */
@keyframes Home2Page_sparkleMove__6rmHb {
  0% {
    background-position:
      0px 0px,
      10px 10px,
      20px 20px,
      30px 30px,
      5px 5px,
      15px 15px;
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position:
      40px 40px,
      30px 30px,
      50px 50px,
      35px 35px,
      25px 25px,
      45px 45px;
    opacity: 0.4;
  }
}

/* Hero Card (default spans 2 rows) */
.Home2Page_heroCard__Vgz5p {
  grid-row: 1 / 3;
  grid-column: 1;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8e7ff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1a1a1a;
  border: 1px solid #a855f7;
}

/* Hero card expanded state - takes full width */
.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm {
  grid-column: 1 / 4;
  z-index: 10;
  transform: scale(1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 40px 50px;
}

/* ReactFlow container styles */
.Home2Page_reactFlowContainer__gLIpg {
  width: 100%;
  max-width: 800px;
  height: 60vh;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(63, 63, 63, 0.15);
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto;
  /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); */
}

.Home2Page_reactFlow__DOgHV {
  width: 100%;
  height: 100%;
}

/* Demo node styles - copied from actual InputNode.module.css */
.Home2Page_nodeBase__y9ovc {
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid #059669;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: #f0fdf4;
  color: #15803d;
  font-family: 'Inconsolata', monospace;
  position: relative;
  transition: border-color 0.2s ease-in-out;
}

/* DataNode - Yellow Theme */
.Home2Page_dataNodeBase__6u\+tQ {
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid #fde047;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: #fefce8;
  color: #78350f;
  font-family: 'Inconsolata', monospace;
  position: relative;
  transition: border-color 0.2s ease-in-out;
}

/* OutputNode - Pink Theme */
.Home2Page_outputNodeBase__zY7xO {
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 280px;
  max-width: 350px;
  width: -webkit-fit-content;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  border: 1px solid #fecdd3;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: #fff1f2;
  color: #881337;
  font-family: 'Inconsolata', monospace;
  position: relative;
  transition: border-color 0.2s ease-in-out;
}

.Home2Page_floatingIcon__\+UYEC {
  background-color: #e2fbe8;
  color: #a7f3d0;
  border-radius: 20%;
  border: 1px solid #059669;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home2Page_dataFloatingIcon__be8oY {
  background-color: #fef9c3;
  color: #854d0e;
  border-radius: 20%;
  border: 1px solid #fde047;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home2Page_outputFloatingIcon__TwZG9 {
  background-color: #ffe4e6;
  color: #9f1239;
  border-radius: 20%;
  border: 1px solid #fecdd3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home2Page_nodeHeader__3jeeP {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: -0px;
  z-index: 10;
}

.Home2Page_buttonsWrapper__ZYqki {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.Home2Page_buttonsWrapper__ZYqki button {
  padding: 4px 12px;
  border: none;
  background-color: #059669;
  color: #f3f4f6;
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  margin: 0;
  min-width: 32px;
  min-height: 28px;
  display: flex;
}

.Home2Page_buttonsWrapper__ZYqki button:hover {
  background-color: #10b981;
}

.Home2Page_buttonsWrapper__ZYqki button:disabled {
  background-color: #6ee7b7;
  color: #1f2937;
  cursor: not-allowed;
  opacity: 0.6;
}

.Home2Page_buttonsWrapper__ZYqki .Home2Page_cloudActive__2c55V {
  background-color: #10b981;
  color: white;
  box-shadow: 0 0 8px #10b981;
}

/* DataNode Button Styles */
.Home2Page_dataButtonsWrapper__lxPM4 {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.Home2Page_dataButtonsWrapper__lxPM4 button {
  padding: 4px 12px;
  border: none;
  background-color: #fde047;
  color: #78350f;
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  margin: 0;
  min-width: 32px;
  min-height: 28px;
  display: flex;
}

.Home2Page_dataButtonsWrapper__lxPM4 button:hover {
  background-color: #facc15;
}

.Home2Page_dataButtonsWrapper__lxPM4 button:disabled {
  background-color: #fef08a;
  color: #78350f;
  cursor: not-allowed;
  opacity: 0.6;
}

/* OutputNode Button Styles */
.Home2Page_outputButtonsWrapper__BmILV {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.Home2Page_outputButtonsWrapper__BmILV button {
  padding: 4px 12px;
  border: none;
  background-color: #ffe4e6;
  color: #9f1239;
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.2s ease;
  margin: 0;
  min-width: 32px;
  min-height: 28px;
  display: flex;
}

.Home2Page_outputButtonsWrapper__BmILV button:hover {
  background-color: #fecdd3;
}

.Home2Page_outputButtonsWrapper__BmILV button:disabled {
  background-color: #fff1f2;
  color: #9f1239;
  cursor: not-allowed;
  opacity: 0.6;
}

.Home2Page_nodeContent__VpuX8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.Home2Page_nodeContent__VpuX8 textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  min-height: 100px;
  resize: vertical;
  background-color: #ecfdf5;
  color: #15803d;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_dataNodeContent__BkSnR textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #fef08a;
  border-radius: 4px;
  min-height: 100px;
  resize: vertical;
  background-color: #fefdf8;
  color: #78350f;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_outputNodeContent__WH2A\+ textarea {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #ffe4e6;
  border-radius: 4px;
  min-height: 100px;
  resize: vertical;
  background-color: #fff8f9;
  color: #881337;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_tokenCounter__CTkXY {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f9ff;
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
}

.Home2Page_tokenInfo__U8-hS {
  display: flex;
  align-items: center;
  gap: 8px;
}

.Home2Page_creditInfo__SQRGO {
  display: flex;
  align-items: center;
  gap: 4px;
}

.Home2Page_tokenCount__bkncE {
  color: #0c4a6e;
  font-weight: 600;
}

.Home2Page_estimatedCredits__sWn5v {
  color: #065f46;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.Home2Page_freeModel__\+ZKeV {
  color: #065f46;
  font-size: 0.7rem;
  font-weight: 600;
}

.Home2Page_coinIcon__Xl1Nz {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition:
    filter 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  filter: brightness(0) invert(0);
}

/* Welcome section styles */
.Home2Page_welcomeTitle__4K1JS {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #1a1a1a;
  transition: font-size 0.5s ease;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_welcomeTitle__4K1JS {
  font-size: 3rem;
}

.Home2Page_welcomeSubtitle__oYwsN {
  font-size: 1.1rem;
  color: #6b7280;
  margin-bottom: 30px;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
}

/* Waitlist CTA button */
.Home2Page_waitlistCTA__QL3hH {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 20px;
}

.Home2Page_waitlistCTA__QL3hH:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Expanded waitlist section */
.Home2Page_expandedWaitlistSection__t-kGP {
  /* margin-top: 40px; */
  /* padding-top: 30px; */
  border-top: 1px solid #e5e7eb;
  max-width: 500px;
}

/* Waitlist section in hero card (legacy) */
.Home2Page_waitlistSection__NCQts {
  margin-top: 40px;
  max-width: 420px;
}

/* Workflow description styles */
.Home2Page_workflowDescription__qPCvI {
  margin-top: 30px;
}

.Home2Page_sectionDescription__yMtWw {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
  font-family: 'Inconsolata', monospace;
}

/* Workflow features horizontal */
.Home2Page_workflowFeaturesHorizontal__SB3dt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.Home2Page_workflowFeatureHorizontal__cz4g2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 15px;
  opacity: 1;
  transform: translateY(0);
}

.Home2Page_workflowFeatureHorizontal__cz4g2 .Home2Page_featureIcon__onwbX {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #4ecdc4;
  font-size: 32px;
}

.Home2Page_workflowFeatureHorizontal__cz4g2 .Home2Page_featureIcon__onwbX svg {
  width: 32px;
  height: 32px;
  color: #4ecdc4;
}

.Home2Page_featureContent__JpJnV {
  flex: 1 1;
}

.Home2Page_workflowFeatureHorizontal__cz4g2 h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  font-family: 'Inconsolata';
}

.Home2Page_workflowFeatureHorizontal__cz4g2 p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
  font-family: 'Inconsolata';
}

/* Services Card */
.Home2Page_servicesCard__Mdesg {
  grid-row: 1;
  grid-column: 2;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8e7ff 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #1a1a1a;
  border: 1px solid #a855f7;
}

/* Services card expanded - takes 2x2 grid */
.Home2Page_servicesCard__Mdesg.Home2Page_expanded__ZkCvm {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  z-index: 10;
  transform: scale(1);
}

/* Service number container */
.Home2Page_serviceNumberContainer__DSaFv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

/* Service number styling */
.Home2Page_serviceNumber__kMTct {
  font-size: 4rem;
  font-weight: 800;
  color: #a855f7;
  text-align: center;
}

/* Service badge styling */
.Home2Page_serviceBadge__4e6Uo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
}

/* Services preview (collapsed state) */
.Home2Page_servicesPreview__aQq6z {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.Home2Page_serviceLogoSmall__3ch9\+ {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
  border: 1px solid #e2e8f0;
}

.Home2Page_serviceLogoSmall__3ch9\+ img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  filter: none;
}

/* Services grid (expanded state) */
.Home2Page_servicesGrid__kwHJ- {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.Home2Page_serviceCard__xeKr1 {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 20px 15px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  transition: all 0.3s ease;
}

.Home2Page_serviceCard__xeKr1:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.Home2Page_serviceLogo__85DcZ {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2);
  border: 1px solid #e2e8f0;
}

.Home2Page_serviceLogo__85DcZ img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  filter: none;
}

/* Specific service logo adjustments */
.Home2Page_serviceLogo__85DcZ img[alt='OpenAI'] {
  width: 24px !important;
  height: 24px !important;
}

.Home2Page_serviceLogoSmall__3ch9\+ img[alt='OpenAI'] {
  width: 20px !important;
  height: 20px !important;
}

.Home2Page_serviceContent__HpoaD {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1;
}

.Home2Page_serviceCard__xeKr1 h3 {
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-align: left;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_serviceDescription__9WOjq {
  color: #6b7280;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

/* AI Models Card */
.Home2Page_modelsCard__8Jp6t {
  grid-row: 2;
  grid-column: 2;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #1a1a1a;
  border: 1px solid #0ea5e9;
}

/* Models card expanded - takes 2x2 grid */
.Home2Page_modelsCard__8Jp6t.Home2Page_expanded__ZkCvm {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  z-index: 10;
  transform: scale(1);
}

/* Models preview (collapsed state) */
.Home2Page_modelsPreview__LV4qU {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.Home2Page_modelsCount__0tNGO {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.Home2Page_modelsNumber__A312H {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0ea5e9;
}

.Home2Page_modelsText__BxK8L {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 600;
}

/* Pill carousel styles */
.Home2Page_pillCarouselContainer__saUR0 {
  width: 100%;
  overflow: hidden;
  height: 40px;
  mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.Home2Page_pillCarouselTrack__E7fEQ {
  display: flex;
  gap: 12px;
  animation: Home2Page_scrollLeft__\+BTzB 40s linear infinite;
  width: -webkit-fit-content;
  width: fit-content;
}

.Home2Page_pillItem__M115X {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #333;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  flex-shrink: 0;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.Home2Page_pillItem__M115X:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.Home2Page_pillIcon__GC-IV {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Home2Page_pillLogoImage__QifEY {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.Home2Page_pillProviderBadge__EILX7 {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #333;
}

.Home2Page_pillName__I3n3V {
  font-family: 'Inconsolata', monospace;
}

/* Models expanded state */
.Home2Page_modelsExpanded__bi3VQ {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.Home2Page_modelsDescription__NoBxs {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
  margin: 0;
}

/* Hexa image styling */
.Home2Page_hexaImageContainer__QQ3-9 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.Home2Page_hexaImage__fAu5w {
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.Home2Page_hexaImage__fAu5w:hover {
  opacity: 1;
}

.Home2Page_hexaImageSmall__zoKQI {
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.Home2Page_hexaImageSmall__zoKQI:hover {
  opacity: 1;
}

.Home2Page_processLabel__AMcff {
  padding: 5px;
}

/* Carousel stats */
.Home2Page_carouselStats__mUJcq {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.Home2Page_statItem__Fq3v1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.Home2Page_statNumber__ct82q {
  font-size: 2.2rem;
  font-weight: 700;
  color: #333;
  font-family: 'Inconsolata';
}

.Home2Page_statLabel__PTH7R {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Inconsolata';
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Full carousel styles */
.Home2Page_fullCarouselContainer__ykVRg {
  width: 100%;
  overflow: hidden;
  mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  padding: 40px 0;
}

.Home2Page_fullCarouselTrack__gMhXv {
  display: flex;
  gap: 20px;
  animation: Home2Page_scrollLeft__\+BTzB 90s linear infinite;
  width: -webkit-fit-content;
  width: fit-content;
}

/* Keyframes for carousel animation */
@keyframes Home2Page_scrollLeft__\+BTzB {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Model square styles for full carousel */
.Home2Page_modelSquare__xLr7O {
  min-width: 280px;
  height: 180px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
}

.Home2Page_modelSquare__xLr7O:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.Home2Page_modelSquareInner__giNSG {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.Home2Page_modelIcon__n\+em- {
  font-size: 2.5rem;
  margin-bottom: 10px;
  align-self: flex-start;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Home2Page_providerLogoImage__FNr3S {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.Home2Page_modelInfo__Rqdn6 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}

.Home2Page_modelName__xYkYv {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  font-family: 'Inconsolata';
  line-height: 1.3;
  text-align: left;
}

.Home2Page_modelProvider__N0u9u {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  font-family: 'Inconsolata';
  text-align: left;
}

.Home2Page_providerBadge__334Nq {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.Home2Page_modelBadges__JNEjj {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.Home2Page_modelCategory__JgqfZ {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inconsolata';
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.Home2Page_accessBadge__Y2ew6 {
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Inconsolata';
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.Home2Page_accessBadge__Y2ew6.Home2Page_free__7CXik {
  background: rgba(76, 205, 196, 0.2);
  color: #4ecdc4;
  border: 1px solid rgba(76, 205, 196, 0.3);
}

.Home2Page_accessBadge__Y2ew6.Home2Page_pro__FZrNY {
  background: rgba(52, 152, 219, 0.2);
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.Home2Page_accessBadge__Y2ew6.Home2Page_premium__4Dx\+v {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, 0.3);
}

/* Process Card */
.Home2Page_processCard__-dpyy {
  grid-row: 1;
  grid-column: 3;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #0ea5e9;
}

/* Process card expanded - takes 2x2 grid from its position */
.Home2Page_processCard__-dpyy.Home2Page_expanded__ZkCvm {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  z-index: 10;
  transform: scale(1);
}

/* Process card title override */
.Home2Page_processCard__-dpyy .Home2Page_cardLabel__M\+p3G {
  color: #6b7280;
  align-self: flex-start;
  margin-bottom: 20px;
}

/* Process Rotator Styles */
.Home2Page_processRotatorContainer__Uz-GV {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex: 1 1;
}

.Home2Page_processIconContainer__eNy4A {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 25%;
  transition: all 0.3s ease;
}

.Home2Page_rotatingIcon__brhkN {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.344));
}

.Home2Page_rotatingTitle__Qyy6u {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_progressBar__nvSH7 {
  width: 120px;
  height: 4px;
  background: rgba(14, 165, 233, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.Home2Page_progressFill__Y92Id {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #06b6d4);
  border-radius: 2px;
  transition: width 0.05s ease-out;
  will-change: width;
}

/* Process Grid Styles */
.Home2Page_processGrid__MQZCn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
  padding: 20px;
  width: 100%;
  height: 100%;
}

/* Mobile: Make process grid vertical */
@media (max-width: 768px) {
  .Home2Page_processGrid__MQZCn {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }

  .Home2Page_processSquare__GuHUt {
    min-height: auto;
    padding: 20px 15px;
  }

  .Home2Page_processSquareInner__aBKmv {
    text-align: center;
  }

  .Home2Page_processIcon__Fb9cx {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }

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

  .Home2Page_processDescription__tRDP6 {
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.4;
  }

  .Home2Page_processDetails__XLDds {
    text-align: left;
    gap: 6px;
  }

  .Home2Page_processDetail__j-uXe {
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

.Home2Page_processSquare__GuHUt {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.Home2Page_processSquare__GuHUt:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(14, 165, 233, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.1);
}

.Home2Page_processSquareInner__aBKmv {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.Home2Page_processIcon__Fb9cx {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.Home2Page_processTitle__TQku- {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_processDescription__tRDP6 {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 12px 0;
  line-height: 1.4;
  font-family: 'Inconsolata', monospace;
}

.Home2Page_processDetails__XLDds {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.Home2Page_processDetail__j-uXe {
  font-size: 0.75rem;
  color: #374151;
  text-align: left;
  font-family: 'Inconsolata', monospace;
}

/* Community Card */
.Home2Page_communityCard__HktdL {
  grid-row: 2;
  grid-column: 3;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #f59e0b;
}

/* Community header for horizontal layout in expanded view */
.Home2Page_communityHeaderExpanded__\+eVht {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 15px;
}

.Home2Page_communityHeaderExpanded__\+eVht .Home2Page_communityIcon__ku7E7 {
  flex-shrink: 0;
  margin-bottom: 0;
}

.Home2Page_communityContentExpanded__Y2LM8 {
  flex: 1 1;
}

.Home2Page_communityContentExpanded__Y2LM8 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.Home2Page_communityContentExpanded__Y2LM8 p {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Community card expanded - takes 2x2 grid from its position */
.Home2Page_communityCard__HktdL.Home2Page_expanded__ZkCvm {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  z-index: 10;
  transform: scale(1);
}

/* Hide other cards when one is hovered */
.Home2Page_card__Ezgfo.Home2Page_hidden__qZ-8m {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  z-index: 0;
}

/* Fade effect for non-hovered cards */
.Home2Page_card__Ezgfo.Home2Page_faded__FVqNV {
  opacity: 0.3;
  transform: scale(0.98);
  z-index: 0;
}

/* Hero logo styles */
.Home2Page_heroLogo__sjOkU {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
}

.Home2Page_logoImage__0F8Wg {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_logoImage__0F8Wg {
  width: 100px;
  height: 100px;
}

/* Content styles */
.Home2Page_heroContent__ZWDDU {
  flex: 1 1;
  max-width: 60%;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroContent__ZWDDU {
  max-width: 45%;
  padding-right: 30px;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm {
  padding: 40px 50px;
}

/* Desktop expanded hero content layout */
@media (min-width: 769px) {
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroContent__ZWDDU {
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 0;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowDescription__qPCvI {
    margin-top: 20px;
  }

  /* Hide original features in workflowDescription on desktop expanded */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowDescription__qPCvI .Home2Page_workflowFeaturesHorizontal__SB3dt {
    display: none;
  }

  /* Keep description at top, then horizontal highlights */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_sectionDescription__yMtWw {
    margin-bottom: 20px;
  }

  /* Create horizontal container for features and ReactFlow below highlights */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroImage__NGG-n {
    display: flex;
    width: 100%;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
  }

  /* Features container on the left */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroImage__NGG-n .Home2Page_workflowFeaturesHorizontal__SB3dt {
    flex: 1 1;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
  }

  /* ReactFlow container on the right */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_reactFlowContainer__gLIpg {
    flex: 1 1;
    max-width: 50%;
    height: 400px;
    margin: 0;
  }

  /* Style the feature items */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroImage__NGG-n .Home2Page_workflowFeatureHorizontal__cz4g2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.15);
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroImage__NGG-n .Home2Page_featureIcon__onwbX {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Hide logo when hero card is expanded on desktop to prevent overlap */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroLogo__sjOkU {
    display: none;
  }
}

.Home2Page_tagline__rByXm {
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: block;
}

.Home2Page_heroTitle__CVwDs {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #1a1a1a;
  transition: font-size 0.5s ease;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroTitle__CVwDs {
  font-size: 4rem;
}

.Home2Page_inlineIcon__17UcM {
  color: #a855f7;
  font-size: 2.5rem;
  vertical-align: middle;
  margin: 0 8px;
}

.Home2Page_getStartedBtn__eRJcT {
  background: #c1ff72;
  color: #1a1a1a;
  border: none;
  padding: 16px 32px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.Home2Page_getStartedBtn__eRJcT:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(193, 255, 114, 0.3);
}

.Home2Page_heroImage__NGG-n {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroImage__NGG-n {
  min-height: 500px;
  flex: 1.2 1;
}

.Home2Page_mockupDevice__-KGoV {
  width: 200px;
  height: 300px;
  background: #1a1a1a;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.5s ease;
}

.Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_mockupDevice__-KGoV {
  width: 250px;
  height: 350px;
}

.Home2Page_deviceIcon__\+H-SF {
  font-size: 4rem;
  color: #a855f7;
}

.Home2Page_brainImage__sug0T {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(168, 85, 247, 0.3));
  transition: all 0.3s ease;
}

.Home2Page_brainImage__sug0T:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(168, 85, 247, 0.4));
}

.Home2Page_cardLabel__M\+p3G {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* Override for services card specifically */
.Home2Page_servicesCard__Mdesg .Home2Page_cardLabel__M\+p3G {
  color: #6b7280;
}

/* Override for models card specifically */
.Home2Page_modelsCard__8Jp6t .Home2Page_cardLabel__M\+p3G {
  color: #6b7280;
}

.Home2Page_ratingScore__-9poN {
  font-size: 4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  transition: font-size 0.5s ease;
}

.Home2Page_ratingCard__JTeFL.Home2Page_expanded__ZkCvm .Home2Page_ratingScore__-9poN {
  font-size: 5rem;
}

.Home2Page_star__jPxM3 {
  font-size: 2rem;
}

.Home2Page_ratingInfo__YTrJG {
  display: flex;
  align-items: center;
  gap: 12px;
}

.Home2Page_userAvatar__M09GS {
  width: 40px;
  height: 40px;
  background: #c1ff72;
  border-radius: 50%;
}

.Home2Page_ratingText__IHWVC {
  display: flex;
  flex-direction: column;
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.3;
}

.Home2Page_featureTitle__\+Rgbt {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
  transition: font-size 0.5s ease;
}

.Home2Page_featureCard__9FJJG.Home2Page_expanded__ZkCvm .Home2Page_featureTitle__\+Rgbt {
  font-size: 2rem;
}

.Home2Page_playButton__DrVLO {
  background: #1f2937;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 600;
  align-self: flex-start;
  transition: all 0.3s;
}

.Home2Page_playButton__DrVLO:hover {
  transform: translateY(-2px);
}

.Home2Page_playIcon__3aH0i {
  width: 20px;
  height: 20px;
  background: #c1ff72;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-size: 0.8rem;
}

.Home2Page_analyticsHeader__xKkbl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.Home2Page_timeSelect__0lO0h {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.Home2Page_analyticsMetric__O8aEZ {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #00ff88;
  transition: font-size 0.5s ease;
}

.Home2Page_analyticsCard__3dMiV.Home2Page_expanded__ZkCvm .Home2Page_analyticsMetric__O8aEZ {
  font-size: 5rem;
}

.Home2Page_analyticsChart__VzbOV {
  height: 60px;
  margin-bottom: 15px;
}

.Home2Page_chartSvg__mpG9I {
  width: 100%;
  height: 100%;
}

.Home2Page_chartLegend__dkYAh {
  display: flex;
  gap: 20px;
  font-size: 0.85rem;
  color: #6b7280;
}

.Home2Page_legendDot__weLBK {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.Home2Page_communityIcon__ku7E7 {
  font-size: 2.5rem;
  color: #4ade80;
  transition: font-size 0.5s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.Home2Page_communityCard__HktdL.Home2Page_expanded__ZkCvm .Home2Page_communityIcon__ku7E7 {
  font-size: 3.5rem;
}

.Home2Page_communityContent__vqHQ5 h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.Home2Page_communityContent__vqHQ5 p {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 15px;
  line-height: 1.4;
}

.Home2Page_communityStats__o96HQ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.Home2Page_communityStats__o96HQ span {
  color: #a855f7;
  font-size: 0.85rem;
  font-weight: 600;
}

.Home2Page_joinBtn__OMyMh {
  background: #22c55e;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.Home2Page_joinBtn__OMyMh:hover {
  background: #16a34a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* Waitlist expanded in community card */
.Home2Page_waitlistExpanded__uA9fq {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(251, 191, 36, 0.3);
}

.Home2Page_communityCard__HktdL.Home2Page_expanded__ZkCvm .Home2Page_waitlistExpanded__uA9fq {
  max-width: none;
}

/* Curtain Overlay Styles */
.Home2Page_curtainOverlay__yWYcU {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home2Page_curtainVisible__Lnd2a {
  animation: Home2Page_curtainSlideLeftToRight__G129r 1.5s ease-out forwards;
}

.Home2Page_curtainHidden__\+Of3\+ {
  display: none;
}

.Home2Page_curtainContent__xe-xE {
  text-align: center;
  color: white;
  z-index: 1001;
}

.Home2Page_curtainText__JfW0N {
  font-size: 4rem;
  font-weight: 700;
  font-family: 'Urbanist', sans-serif;
  margin-bottom: 20px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: Home2Page_fadeInUp__5thYC 0.6s ease-out 0.2s both;
}

.Home2Page_curtainSubtext__-xd7C {
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.9;
  font-family: 'Inconsolata', monospace;
  animation: Home2Page_fadeInUp__5thYC 0.6s ease-out 0.4s both;
}

@keyframes Home2Page_curtainSlideLeftToRight__G129r {
  0% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(0%);
  }
  70% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes Home2Page_fadeInUp__5thYC {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .Home2Page_gridContainer__GjGqv {
    pointer-events: none;
  }

  .Home2Page_card__Ezgfo {
    pointer-events: auto;
  }

  .Home2Page_card__Ezgfo.Home2Page_expanded__ZkCvm {
    grid-column: 1 / 3 !important;
  }
}

@media (max-width: 768px) {
  .Home2Page_navbar__0Ek0n {
    padding: 20px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .Home2Page_navLinks__A4osL {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  /* Hide LAUNCH APP button on mobile */
  .Home2Page_downloadBtn__uMOAC {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .Home2Page_gridContainer__GjGqv {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    height: auto;
  }

  .Home2Page_card__Ezgfo {
    width: 80%;
    max-width: 80%;
    height: 400px;
    min-height: 400px;
    margin: 0 auto;
    aspect-ratio: auto;
  }

  .Home2Page_card__Ezgfo.Home2Page_expanded__ZkCvm {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: auto;
    min-height: 500px;
  }

  /* Hero card expanded state mobile optimization */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm {
    min-height: auto;
    height: auto;
    padding: 40px 30px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroContent__ZWDDU {
    max-width: 100%;
    padding-right: 0;
    text-align: center;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowDescription__qPCvI {
    margin-top: 15px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_sectionDescription__yMtWw {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #6b7280;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowFeaturesHorizontal__SB3dt {
    gap: 15px;
    margin-top: 15px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowFeatureHorizontal__cz4g2 {
    gap: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.1);
    text-align: left;
    margin: 0 auto;
    max-width: 100%;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_featureIcon__onwbX {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    font-size: 18px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowFeatureHorizontal__cz4g2 h4 {
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 5px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_workflowFeatureHorizontal__cz4g2 p {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.4;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_platformHighlights__2i4v7 {
    margin-top: 20px;
    gap: 10px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_highlightRow__wFczD {
    padding: 8px 0;
    gap: 10px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_highlightBadge__W6YNW,
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_highlightBadgeComingSoon__TYorj {
    min-width: 100px;
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_highlightText__Wu\+sO {
    font-size: 0.85rem;
  }

  /* Make hero card content stack vertically on mobile */
  .Home2Page_heroCard__Vgz5p {
    flex-direction: column;
    text-align: center;
    padding: 50px 30px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8e7ff 50%, #f0f4ff 100%);
    position: relative;
    overflow: hidden;
    display: flex;
  }

  /* Add decorative elements for mobile hero card */
  .Home2Page_heroCard__Vgz5p::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background: linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.1),
      rgba(76, 205, 196, 0.1)
    );
    border-radius: 50%;
    z-index: 1;
  }

  .Home2Page_heroCard__Vgz5p::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 80px;
    height: 80px;
    background: linear-gradient(
      135deg,
      rgba(193, 255, 114, 0.15),
      rgba(168, 85, 247, 0.1)
    );
    border-radius: 50%;
    z-index: 1;
  }

  .Home2Page_heroContent__ZWDDU {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%;
    z-index: 2;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .Home2Page_heroImage__NGG-n {
    display: none; /* Hide the ReactFlow/mockup on mobile */
  }

  .Home2Page_reactFlowContainer__gLIpg {
    display: none; /* Hide ReactFlow on mobile */
  }

  .Home2Page_tagline__rByXm {
    font-size: 0.85rem;
    color: #8b5cf6;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    text-transform: uppercase;
  }

  .Home2Page_heroTitle__CVwDs {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a1a 0%, #4c1d95 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .Home2Page_welcomeSubtitle__oYwsN {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #6b7280;
    font-weight: 400;
  }

  .Home2Page_getStartedBtn__eRJcT {
    margin-top: 25px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #c1ff72 0%, #4ade80 100%);
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(193, 255, 114, 0.4);
    border: none;
    color: #1a1a1a;
    transition: all 0.3s ease;
  }

  /* Add mobile-specific logo positioning */
  .Home2Page_heroLogo__sjOkU {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
  }

  .Home2Page_logoImage__0F8Wg {
    width: 60px;
    height: 60px;
  }

  /* Hide logo when hero card is expanded on mobile to prevent overlap */
  .Home2Page_heroCard__Vgz5p.Home2Page_expanded__ZkCvm .Home2Page_heroLogo__sjOkU {
    display: none;
  }

  /* Services card mobile adjustments */
  .Home2Page_servicesCard__Mdesg {
    padding: 30px 20px;
  }

  /* Models card mobile adjustments */
  .Home2Page_modelsCard__8Jp6t {
    padding: 30px 20px;
  }

  /* Process card mobile adjustments */
  .Home2Page_processCard__-dpyy {
    padding: 30px 20px;
  }

  /* Community card mobile adjustments */
  .Home2Page_communityCard__HktdL {
    padding: 30px 20px;
  }

  .Home2Page_pageTitle__fcOGu {
    font-size: 2rem;
  }
}

/* Platform Highlights Styles */
.Home2Page_platformHighlights__2i4v7 {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.Home2Page_highlightRow__wFczD {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 280px;
  flex: 1 1;
  max-width: 320px;
}

.Home2Page_highlightBadge__W6YNW {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  min-width: 110px;
  text-align: center;
}

.Home2Page_highlightText__Wu\+sO {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
}

.Home2Page_highlightBadgeComingSoon__TYorj {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  min-width: 110px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.Home2Page_statusIcon__4HH7p {
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* AI Hub Showcase Styles */
.Home2Page_aiHubShowcase__FoBUU {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  text-align: center;
}

.Home2Page_hubHeader__VfqTb {
  margin-bottom: 10px;
}

.Home2Page_hubTitle__Yv125 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.Home2Page_providerLogos__Feyxj {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.Home2Page_providerBadge__334Nq {
  padding: 6px 12px;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #667eea;
}

.Home2Page_hubStats__kbap- {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}

.Home2Page_statHighlight__ESiG2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  padding: 4px 8px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* AI Integration Grid */
.Home2Page_aiIntegrationGrid__fVlsn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  margin: 20px 0;
}

.Home2Page_integrationFeature__Q3EWS {
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(102, 126, 234, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.Home2Page_integrationFeature__Q3EWS:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.Home2Page_integrationIconContainer__ZF3UC {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.Home2Page_integrationIcon__zqFtM {
  font-size: 1.2rem;
  color: white;
}

.Home2Page_integrationFeature__Q3EWS h4 {
  margin: 0 0 5px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
}

.Home2Page_integrationFeature__Q3EWS p {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.4;
}

.Home2Page_featureStatus__RasOb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  position: absolute;
  top: 10px;
  right: 10px;
  line-height: 1;
}

.Home2Page_featureStatusComingSoon__JXAFK {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  position: absolute;
  top: 10px;
  right: 10px;
  line-height: 1;
}

/* Model Categories */
.Home2Page_modelCategories__aKsF9 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
}

.Home2Page_categoryBadge__itZ8M {
  padding: 6px 12px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(5, 150, 105, 0.1) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #10b981;
}

/* Subscription Showcase Styles */
.Home2Page_subscriptionShowcase__wmcfe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

.Home2Page_subscriptionHeader__20Tr2 {
  margin-bottom: 5px;
}

.Home2Page_subscriptionTitle__txYlp {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.Home2Page_pricingHighlight__BNxIB {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.1) 0%,
    rgba(217, 119, 6, 0.1) 100%
  );
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: 16px;
  margin: 5px 0;
}

.Home2Page_savingsAmount__zVosA {
  font-size: 2rem;
  font-weight: 900;
  color: #f59e0b;
  line-height: 1;
  margin-bottom: 8px;
}

.Home2Page_savingsLabel__zV0q6 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #d97706;
  margin-top: -5px;
}

.Home2Page_pricingSubtext__1I8ZJ {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 500;
}

.Home2Page_subscriptionIconContainer__z-slJ {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
  margin-left: auto;
  margin-right: auto;
}

.Home2Page_subscriptionIcon__rzLod {
  font-size: 1.5rem;
  color: white;
}

/* Security Features Styles */
.Home2Page_securityFeaturesExpanded__7-vZL {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.Home2Page_securityFeature__m4ItF {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.Home2Page_securityFeature__m4ItF:hover {
  background: rgba(16, 185, 129, 0.1);
  transform: translateX(5px);
}

.Home2Page_securityIconContainer__WlXuY {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.Home2Page_securityIcon__Z5e2m {
  font-size: 1.1rem;
  color: white;
}

.Home2Page_securityFeature__m4ItF h4 {
  margin: 0 0 5px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.Home2Page_securityFeature__m4ItF p {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.4;
}

.Home2Page_securityBadges__ERB60 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
}

.Home2Page_securityBadge__NjXeS {
  padding: 6px 12px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(5, 150, 105, 0.1) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #10b981;
  text-align: center;
}

/* Automation Disclaimer */
.Home2Page_automationDisclaimer__yhu94 {
  text-align: center;
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.Home2Page_automationDisclaimer__yhu94 p {
  margin: 0;
  font-size: 0.8rem;
  color: #d97706;
  font-style: italic;
  font-weight: 500;
}

/* Workflow Demo Node Styling */
.Home2Page_nodeIconContainer__a1huJ {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.Home2Page_nodeIcon__hKzef {
  font-size: 0.7rem;
  color: white;
}

.RoadMapPage_roadmapContainer__abSAR {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 246, 0.9);
}

/* Header Styles - Fixed */
.RoadMapPage_header__42K40 {
  flex-direction: column;
  flex: 1 1;
  /* background: rgba(255, 255, 246, 0.9); */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-align: left;
  padding: 20px;
  z-index: 50;
  opacity: 0;
  animation: RoadMapPage_fadeInDown__HRDWn 0.8s ease-out forwards;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.RoadMapPage_mainTitle__pxuWm {
  margin-left: 20px;
  transform: translateX(0); /* Remove horizontal centering */
  font-size: 3rem;
  font-weight: 100;
  color: #aaa;
  z-index: 5;
  font-family: 'Urbanist';
}

.RoadMapPage_titleAccent__jP1tn {
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.RoadMapPage_subtitle__P3oOu {
  font-family: 'Urbanist', sans-serif;
  font-size: 1rem;
  color: #666;
  margin: 0;
  position: absolute;
  left: 40px;
}

/* Close Button */
.RoadMapPage_closeButton__wWEKA {
  position: fixed;
  top: 25px;
  right: 25px;
  background: transparent;
  color: #888;
  border: 2px solid #ccc;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  z-index: 100;
}

.RoadMapPage_closeButton__wWEKA:hover {
  background: #e6c7c7;
  color: #fff;
  border-color: #e6c7c7;
  transform: rotate(90deg);
}

/* Scrollable Container */
.RoadMapPage_scrollContainer__AYHZd {
  flex-grow: 1; /* Allows container to fill available space */
  overflow-x: auto;
  overflow-y: hidden; /* Keep this to enforce horizontal scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.RoadMapPage_scrollContainer__AYHZd::-webkit-scrollbar {
  height: 8px;
}

.RoadMapPage_scrollContainer__AYHZd::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.RoadMapPage_scrollContainer__AYHZd::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 4px;
}

.RoadMapPage_scrollContainer__AYHZd::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* Roadmap Wrapper */
.RoadMapPage_roadmapWrapper__3NwTR {
  position: relative;
  width: 1800px; /* Fixed width for horizontal scroll */
  height: 100%;
  min-height: 600px; /* Increased min-height to prevent clipping */
  display: flex;
  align-items: center;
  padding: 0 50px; /* Removed vertical padding */
}

/* Start and Goal Markers */
.RoadMapPage_startMarker__6eyqj,
.RoadMapPage_goalMarker__AWW2U {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 20;
  opacity: 0;
  animation: RoadMapPage_fadeIn__g8gvO 0.8s ease-out 0.3s forwards;
}

.RoadMapPage_startMarker__6eyqj {
  left: 30px;
  top: 19%; /* Adjusted to align with SVG path start */
}

.RoadMapPage_goalMarker__AWW2U {
  right: 80px;
  top: 53%; /* Adjusted to align with SVG path end */
}

.RoadMapPage_markerBadge__aIDoX {
  width: 60px;
  height: 60px;
  background: #333;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border: 3px solid white;
  position: relative;
  overflow: hidden;
}

.RoadMapPage_goalMarker__AWW2U .RoadMapPage_markerBadge__aIDoX {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
}

.RoadMapPage_markerBadge__aIDoX::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

.RoadMapPage_markerIcon__XBHZm {
  font-size: 1.5rem;
  color: white;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.RoadMapPage_markerText__P1BCa {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #333;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* Winding Road SVG */
.RoadMapPage_windingRoad__h-Axm {
  position: absolute;
  width: 100%;
  height: 350px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  animation: RoadMapPage_roadDraw__6MBGy 1.5s ease-out 0.5s forwards;
}

.RoadMapPage_roadPath__HGAfK {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

.RoadMapPage_centerLine__aWjPO {
  opacity: 0;
  animation: RoadMapPage_dashAppear__q8oYH 1s ease-out 1.5s forwards;
}

/* Feature Nodes */
.RoadMapPage_featureNode__GA45q {
  position: absolute;
  z-index: 25;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.RoadMapPage_nodeVisible__hYPkh {
  animation: RoadMapPage_nodeAppear__oT-Ln 0.6s ease-out calc(0.3s + 0 * 0.2s)
    forwards;
  animation: RoadMapPage_nodeAppear__oT-Ln 0.6s ease-out calc(0.3s + var(--node-index, 0) * 0.2s)
    forwards;
}

.RoadMapPage_nodeBadge__V-lT3 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgb(68, 68, 68);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 225, 0.1) 0%,
    transparent 100%
  );
}

.RoadMapPage_featureNode__GA45q:hover .RoadMapPage_nodeBadge__V-lT3 {
  /* Hover effect on the whole node, not just badge */
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(139, 92, 246, 0.3);
}

.RoadMapPage_nodeBadge__V-lT3::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.2;
  animation: RoadMapPage_pulse__WY5XX 2s ease-in-out infinite;
}

.RoadMapPage_nodeIcon__L6Lz\+ {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* FIX: Hide nodeInfo by default */
.RoadMapPage_nodeInfo__Fncd9 {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 18px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  min-width: 180px;
  max-width: 220px;
  text-align: center;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
  position: absolute;
  top: 100%; /* Position below the badge */
  margin-top: 20px; /* Space between badge and info card */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

/* FIX: Show nodeInfo on hover */
.RoadMapPage_featureNode__GA45q:hover .RoadMapPage_nodeInfo__Fncd9 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.RoadMapPage_nodeInfo__Fncd9::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #8b5cf6,
    transparent
  );
  background: linear-gradient(
    90deg,
    transparent,
    var(--status-color, #8b5cf6),
    transparent
  );
  border-radius: 16px 16px 0 0;
  opacity: 0.5;
}

.RoadMapPage_nodeTitle__h7HIk {
  font-family: 'Inconsolata', monospace;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.RoadMapPage_nodeSubtitle__0OxW8 {
  font-weight: 400;
  color: #666;
  display: block;
  font-size: 0.95rem;
}

.RoadMapPage_nodeDescription__LvJfB {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.RoadMapPage_nodeMeta__N7XQR {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.RoadMapPage_statusTag__IKewc {
  padding: 3px 10px;
  border-radius: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.RoadMapPage_priorityTag__nt3Jj {
  padding: 3px 10px 3px 8px;
  border-radius: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #000000;
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(0, 0, 0, 0.05); /* FIX: Removed problematic opacity */
}

.RoadMapPage_priorityDot__IZdMm {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Scroll Indicator */
.RoadMapPage_scrollIndicator__Ej9zQ {
  position: absolute;
  bottom: 100px; /* Adjusted to not overlap footer */
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  font-family: 'Urbanist', sans-serif;
  font-size: 0.85rem;
  color: #666;
  opacity: 0;
  animation:
    RoadMapPage_fadeInSlide__-IIIz 1s ease-out 2s forwards,
    RoadMapPage_bounce__KiNo9 2s ease-in-out 3s infinite;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Footer Stats - Fixed */
.RoadMapPage_footer__ET-qQ {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 246, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 15px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  animation: RoadMapPage_fadeInUp__Ejorr 0.8s ease-out 2s forwards;
  z-index: 50;
}

.RoadMapPage_stats__Mk7VY {
  display: flex;
  justify-content: center;
  gap: 50px;
}

.RoadMapPage_stat__wPlGM {
  text-align: center;
}

.RoadMapPage_statNumber__seVCn {
  display: block;
  font-family: 'Inconsolata', monospace;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}

.RoadMapPage_statLabel__PPTKy {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Animations */
@keyframes RoadMapPage_fadeInDown__HRDWn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes RoadMapPage_fadeInUp__Ejorr {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes RoadMapPage_fadeIn__g8gvO {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes RoadMapPage_fadeInSlide__-IIIz {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes RoadMapPage_roadDraw__6MBGy {
  0% {
    opacity: 0;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    stroke-dasharray: 3000;
    stroke-dashoffset: 0;
    transform: translateY(-50%);
  }
}

@keyframes RoadMapPage_dashAppear__q8oYH {
  from {
    opacity: 0;
    stroke-dashoffset: 100;
  }
  to {
    opacity: 0.8;
    stroke-dashoffset: 0;
  }
}

@keyframes RoadMapPage_nodeAppear__oT-Ln {
  0% {
    opacity: 0;
    transform: scale(0) translateY(20px);
  }
  70% {
    transform: scale(1.1) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes RoadMapPage_pulse__WY5XX {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}

@keyframes RoadMapPage_bounce__KiNo9 {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .RoadMapPage_mainTitle__pxuWm {
    font-size: 2rem;
  }

  .RoadMapPage_nodeBadge__V-lT3 {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .RoadMapPage_nodeInfo__Fncd9 {
    min-width: 160px;
    max-width: 200px;
    padding: 14px;
  }
}

@media (max-width: 968px) {
  .RoadMapPage_header__42K40 {
    padding: 15px 0;
  }

  .RoadMapPage_mainTitle__pxuWm {
    font-size: 3rem;
  }

  .RoadMapPage_subtitle__P3oOu {
    font-size: 0.9rem;
  }

  .RoadMapPage_stats__Mk7VY {
    gap: 30px;
  }

  .RoadMapPage_statNumber__seVCn {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .RoadMapPage_roadmapContainer__abSAR {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .RoadMapPage_header__42K40 {
    padding: 20px 0;
  }

  .RoadMapPage_mainTitle__pxuWm {
    font-size: 3rem;
  }

  .RoadMapPage_subtitle__P3oOu {
    display: none; /* Hide subtitle on mobile to match DOCS style */
  }

  .RoadMapPage_roadmapWrapper__3NwTR {
    width: 1600px; /* Slightly smaller for mobile */
  }

  /* Adjust middle 3 items to have less gap and prevent overlap with road */
  .RoadMapPage_featureNode__GA45q:nth-child(3) {
    /* Item 2: Real-Time Collaboration */
    left: 200px !important;
  }

  .RoadMapPage_featureNode__GA45q:nth-child(4) {
    /* Item 3: Market Place */
    left: 360px !important;
  }

  .RoadMapPage_featureNode__GA45q:nth-child(5) {
    /* Item 4: API & Webhooks */
    left: 520px !important;
  }

  .RoadMapPage_featureNode__GA45q:nth-child(6) {
    /* Item 4: API & Webhooks */
    left: 680px !important;
  }

  .RoadMapPage_nodeBadge__V-lT3 {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    border-width: 3px;
  }

  .RoadMapPage_nodeInfo__Fncd9 {
    min-width: 140px;
    max-width: 180px;
    padding: 12px;
  }

  .RoadMapPage_nodeTitle__h7HIk {
    font-size: 1rem;
  }

  .RoadMapPage_nodeSubtitle__0OxW8 {
    font-size: 0.85rem;
  }

  .RoadMapPage_nodeDescription__LvJfB {
    font-size: 0.75rem;
  }

  .RoadMapPage_scrollIndicator__Ej9zQ {
    bottom: 80px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .RoadMapPage_header__42K40 {
    padding: 20px 0;
  }

  .RoadMapPage_mainTitle__pxuWm {
    font-size: 3rem;
  }

  .RoadMapPage_subtitle__P3oOu {
    font-size: 0.8rem;
  }

  .RoadMapPage_markerBadge__aIDoX {
    width: 45px;
    height: 45px;
  }

  .RoadMapPage_markerIcon__XBHZm {
    font-size: 1.2rem;
  }

  .RoadMapPage_markerText__P1BCa {
    font-size: 0.75rem;
  }

  .RoadMapPage_nodeBadge__V-lT3 {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .RoadMapPage_nodeInfo__Fncd9 {
    min-width: 120px;
    max-width: 160px;
    padding: 10px;
  }

  .RoadMapPage_footer__ET-qQ {
    padding: 12px 0;
  }

  .RoadMapPage_stats__Mk7VY {
    gap: 20px;
  }

  .RoadMapPage_statNumber__seVCn {
    font-size: 1.5rem;
  }

  .RoadMapPage_statLabel__PPTKy {
    font-size: 0.7rem;
  }
}

/* Performance Optimizations */
.RoadMapPage_nodeBadge__V-lT3,
.RoadMapPage_nodeInfo__Fncd9 {
  will-change: transform;
}

.RoadMapPage_roadmapContainer__abSAR * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .RoadMapPage_scrollContainer__AYHZd {
    scroll-behavior: auto;
  }

  .RoadMapPage_windingRoad__h-Axm,
  .RoadMapPage_centerLine__aWjPO,
  .RoadMapPage_featureNode__GA45q,
  .RoadMapPage_scrollIndicator__Ej9zQ {
    opacity: 1;
    transform: none;
  }
}

.TeamPage_teamContainer__h2\+ZN {
  min-height: 100vh;
  width: 100vw;
  overflow-y: auto;
  position: relative;
  padding: 0;
  scroll-behavior: smooth;
}

.TeamPage_header__JfLh5 {
  position: relative;
  text-align: center;
  padding: 60px 20px 60px;
  z-index: 5;
}

.TeamPage_pageTitle__mwb6y {
  font-size: 4rem;
  font-weight: 300;
  color: #333;
  font-family: 'Inconsolata', monospace;
  margin: 0;
  opacity: 0;
  animation: TeamPage_titleFadeIn__9RXs6 1s ease-out 0.2s forwards;
}

.TeamPage_subtitle__fyUK5 {
  margin-top: 15px;
  opacity: 0;
  animation: TeamPage_subtitleFadeIn__m5P5S 0.8s ease-out 0.8s forwards;
}

.TeamPage_subtitleText__hcdik {
  font-size: 1.1rem;
  color: #666;
  font-family: 'Inconsolata', monospace;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

.TeamPage_teamGrid__qJyM7 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 40px;
  gap: 40px;
  justify-items: center;
}

.TeamPage_memberCard__A2G6Z {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  max-width: 350px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.TeamPage_memberCard__A2G6Z::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #8b5cf6);
  opacity: 0.7;
}

.TeamPage_memberCard__A2G6Z.TeamPage_visible__EGdRd {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.TeamPage_memberCard__A2G6Z:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

.TeamPage_memberImage__87nfB {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.TeamPage_memberImage__87nfB img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.TeamPage_memberCard__A2G6Z:hover .TeamPage_memberImage__87nfB img {
  transform: scale(1.1);
}

.TeamPage_imageOverlay__N305v {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.TeamPage_memberCard__A2G6Z:hover .TeamPage_imageOverlay__N305v {
  opacity: 1;
}

.TeamPage_socialLinks__ovTFO {
  display: flex;
  gap: 12px;
}

.TeamPage_socialLinks__ovTFO a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.TeamPage_socialLinks__ovTFO a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.TeamPage_socialIcon__L1KdX {
  font-size: 1.2rem;
}

.TeamPage_memberInfo__WhlUJ {
  text-align: center;
}

.TeamPage_memberName__ZgF8t {
  font-family: 'Inconsolata', monospace;
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
}

.TeamPage_memberRole__bLZy4 {
  font-family: 'Urbanist', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #8b5cf6;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.TeamPage_memberDescription__kW9PQ {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.TeamPage_footer__G0I61 {
  text-align: center;
  padding: 40px 20px 60px;
  opacity: 0;
  animation: TeamPage_footerFadeIn__lUSOH 0.6s ease-out 2s forwards;
}

.TeamPage_footerText__Qe1JU {
  font-family: 'Urbanist', sans-serif;
  font-size: 1rem;
  color: #666;
  margin: 0;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: inline-block;
  max-width: 500px;
}

/* Animations */
@keyframes TeamPage_titleFadeIn__9RXs6 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes TeamPage_subtitleFadeIn__m5P5S {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes TeamPage_footerFadeIn__lUSOH {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .TeamPage_teamContainer__h2\+ZN {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .TeamPage_pageTitle__mwb6y {
    font-size: 3rem;
  }

  .TeamPage_teamGrid__qJyM7 {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 15px 80px;
  }

  .TeamPage_memberCard__A2G6Z {
    padding: 24px;
    max-width: 100%;
  }

  .TeamPage_memberImage__87nfB {
    width: 120px;
    height: 120px;
  }

  .TeamPage_socialLinks__ovTFO {
    gap: 8px;
  }

  .TeamPage_socialLinks__ovTFO a {
    width: 32px;
    height: 32px;
  }

  .TeamPage_socialIcon__L1KdX {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .TeamPage_header__JfLh5 {
    padding: 40px 15px 40px;
  }

  .TeamPage_pageTitle__mwb6y {
    font-size: 2.5rem;
  }

  .TeamPage_subtitleText__hcdik {
    font-size: 1rem;
  }

  .TeamPage_memberCard__A2G6Z {
    padding: 20px;
  }

  .TeamPage_memberImage__87nfB {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
  }

  .TeamPage_memberName__ZgF8t {
    font-size: 1.3rem;
  }

  .TeamPage_memberRole__bLZy4 {
    font-size: 0.9rem;
  }

  .TeamPage_memberDescription__kW9PQ {
    font-size: 0.9rem;
  }
}

/* Custom scrollbar */
.TeamPage_teamContainer__h2\+ZN::-webkit-scrollbar {
  width: 8px;
}

.TeamPage_teamContainer__h2\+ZN::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.TeamPage_teamContainer__h2\+ZN::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.TeamPage_teamContainer__h2\+ZN::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Terms of Service Page Styles */
.TermsPage_termsContainer__qgebN {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.TermsPage_header__w6C0r {
  text-align: center;
  margin-bottom: 20px;
  z-index: 5;
  padding: 20px 20px 10px;
  flex-shrink: 0;
}

.TermsPage_pageTitle__1kVcd {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 6px;
  color: #000 !important;
  margin-bottom: 10px;
  text-transform: uppercase;
  opacity: 0;
  animation: TermsPage_fadeInUp__LjuAH 1s ease forwards;
  animation-delay: 0.3s;
}

.TermsPage_subtitle__2mPuN {
  opacity: 0;
  animation: TermsPage_fadeInUp__LjuAH 1s ease forwards;
  animation-delay: 0.6s;
}

.TermsPage_subtitleText__f79aG {
  font-size: 1.1rem;
  color: #000 !important;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
}

.TermsPage_content__AGzly {
  flex: 1 1;
  width: 100%;
  max-width: 700px;
  z-index: 5;
  opacity: 0;
  animation: TermsPage_fadeInUp__LjuAH 1s ease forwards;
  animation-delay: 0.9s;
  overflow-y: auto;
  padding: 20px 20px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 199, 199, 0.5) transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.TermsPage_content__AGzly::-webkit-scrollbar {
  width: 8px;
}

.TermsPage_content__AGzly::-webkit-scrollbar-track {
  background: transparent;
}

.TermsPage_content__AGzly::-webkit-scrollbar-thumb {
  background: rgba(230, 199, 199, 0.5);
  border-radius: 4px;
}

.TermsPage_content__AGzly::-webkit-scrollbar-thumb:hover {
  background: rgba(230, 199, 199, 0.8);
}

.TermsPage_section__IYCDz {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
}

.TermsPage_sectionTitle__3Qj2e {
  font-size: 1.6rem;
  font-weight: 500;
  color: #000 !important;
  margin-bottom: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid #e6c7c7;
  padding-bottom: 8px;
}

.TermsPage_sectionText__UYqP3 {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #6e6e6e !important;
  margin-bottom: 16px;
  font-weight: 500;
  text-align: left;
}

.TermsPage_sectionText__UYqP3:last-child {
  margin-bottom: 0;
}

.TermsPage_introText__PoLKG {
  font-size: 1rem;
  line-height: 1.8;
  color: #000 !important;
  margin-bottom: 18px;
  font-weight: 500;
  text-align: left;
  font-style: italic;
}

.TermsPage_introText__PoLKG:last-child {
  margin-bottom: 0;
}

.TermsPage_emailLink__na62e {
  color: #c79999 !important;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.TermsPage_emailLink__na62e:hover {
  color: #b88888 !important;
  text-decoration: none;
}

/* Bullet List Styling */
.TermsPage_bulletList__Fw3fg {
  margin: 15px 0;
  padding-left: 30px;
  color: #6e6e6e !important;
}

.TermsPage_bulletList__Fw3fg li {
  margin-bottom: 10px;
  line-height: 1.6;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Animations */
@keyframes TermsPage_fadeInUp__LjuAH {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .TermsPage_termsContainer__qgebN {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .TermsPage_header__w6C0r {
    padding: 20px 15px 10px;
  }

  .TermsPage_pageTitle__1kVcd {
    font-size: 2.2rem;
    letter-spacing: 4px;
  }

  .TermsPage_subtitleText__f79aG {
    font-size: 1rem;
  }

  .TermsPage_content__AGzly {
    padding: 15px 15px 30px;
    max-width: 90%;
  }

  .TermsPage_section__IYCDz {
    margin-bottom: 25px;
  }

  .TermsPage_sectionTitle__3Qj2e {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
  }

  .TermsPage_sectionText__UYqP3 {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .TermsPage_introText__PoLKG {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .TermsPage_header__w6C0r {
    padding: 15px 10px 5px;
  }

  .TermsPage_pageTitle__1kVcd {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .TermsPage_content__AGzly {
    padding: 10px 10px 20px;
    max-width: 95%;
  }

  .TermsPage_section__IYCDz {
    margin-bottom: 20px;
  }

  .TermsPage_sectionTitle__3Qj2e {
    font-size: 1.3rem;
  }

  .TermsPage_sectionText__UYqP3 {
    font-size: 0.85rem;
  }

  .TermsPage_introText__PoLKG {
    font-size: 0.9rem;
  }
}

/* Dark mode styles (if needed) */
@media (prefers-color-scheme: dark) {
  .TermsPage_pageTitle__1kVcd {
    color: #f0f0f0;
  }

  .TermsPage_subtitleText__f79aG {
    color: #ccc;
  }

  .TermsPage_sectionTitle__3Qj2e {
    color: #f0f0f0;
    border-bottom-color: #e6c7c7;
  }

  .TermsPage_sectionText__UYqP3,
  .TermsPage_introText__PoLKG {
    color: #ddd;
  }
}

/* Privacy Policy Page Styles */
.PrivacyPage_privacyContainer__V5TIy {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.PrivacyPage_header__-WLyG {
  text-align: center;
  margin-bottom: 20px;
  z-index: 5;
  padding: 20px 20px 10px;
  flex-shrink: 0;
}

.PrivacyPage_pageTitle__66D5z {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 6px;
  color: #000 !important;
  margin-bottom: 10px;
  text-transform: uppercase;
  opacity: 0;
  animation: PrivacyPage_fadeInUp__h8G31 1s ease forwards;
  animation-delay: 0.3s;
}

.PrivacyPage_subtitle__20Vzy {
  opacity: 0;
  animation: PrivacyPage_fadeInUp__h8G31 1s ease forwards;
  animation-delay: 0.6s;
}

.PrivacyPage_subtitleText__jyb4s {
  font-size: 1.1rem;
  color: #000 !important;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
}

.PrivacyPage_content__XLKNA {
  flex: 1 1;
  width: 100%;
  max-width: 700px;
  z-index: 5;
  opacity: 0;
  animation: PrivacyPage_fadeInUp__h8G31 1s ease forwards;
  animation-delay: 0.9s;
  overflow-y: auto;
  padding: 20px 20px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 199, 199, 0.5) transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.PrivacyPage_content__XLKNA::-webkit-scrollbar {
  width: 8px;
}

.PrivacyPage_content__XLKNA::-webkit-scrollbar-track {
  background: transparent;
}

.PrivacyPage_content__XLKNA::-webkit-scrollbar-thumb {
  background: rgba(230, 199, 199, 0.5);
  border-radius: 4px;
}

.PrivacyPage_content__XLKNA::-webkit-scrollbar-thumb:hover {
  background: rgba(230, 199, 199, 0.8);
}

.PrivacyPage_section__mGR7o {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
}

.PrivacyPage_sectionTitle__ZsXKE {
  font-size: 1.6rem;
  font-weight: 500;
  color: #000 !important;
  margin-bottom: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid #e6c7c7;
  padding-bottom: 8px;
}

.PrivacyPage_sectionText__xg6fN {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #6e6e6e !important;
  margin-bottom: 16px;
  font-weight: 500;
  text-align: left;
}

.PrivacyPage_sectionText__xg6fN:last-child {
  margin-bottom: 0;
}

.PrivacyPage_introText__kO8u\+ {
  font-size: 1rem;
  line-height: 1.8;
  color: #6e6e6e !important;
  margin-bottom: 18px;
  font-weight: 500;
  text-align: left;
  font-style: italic;
}

.PrivacyPage_introText__kO8u\+:last-child {
  margin-bottom: 0;
}

.PrivacyPage_emailLink__fsJms {
  color: #c79999 !important;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.PrivacyPage_emailLink__fsJms:hover {
  color: #b88888 !important;
  text-decoration: none;
}

/* Animations */
@keyframes PrivacyPage_fadeInUp__h8G31 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .PrivacyPage_privacyContainer__V5TIy {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .PrivacyPage_header__-WLyG {
    padding: 20px 15px 10px;
  }

  .PrivacyPage_pageTitle__66D5z {
    font-size: 2.2rem;
    letter-spacing: 4px;
  }

  .PrivacyPage_subtitleText__jyb4s {
    font-size: 1rem;
  }

  .PrivacyPage_content__XLKNA {
    padding: 15px 15px 30px;
    max-width: 90%;
  }

  .PrivacyPage_section__mGR7o {
    margin-bottom: 25px;
  }

  .PrivacyPage_sectionTitle__ZsXKE {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
  }

  .PrivacyPage_sectionText__xg6fN {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .PrivacyPage_introText__kO8u\+ {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .PrivacyPage_header__-WLyG {
    padding: 15px 10px 5px;
  }

  .PrivacyPage_pageTitle__66D5z {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .PrivacyPage_content__XLKNA {
    padding: 10px 10px 20px;
    max-width: 95%;
  }

  .PrivacyPage_section__mGR7o {
    margin-bottom: 20px;
  }

  .PrivacyPage_sectionTitle__ZsXKE {
    font-size: 1.3rem;
  }

  .PrivacyPage_sectionText__xg6fN {
    font-size: 0.85rem;
  }

  .PrivacyPage_introText__kO8u\+ {
    font-size: 0.9rem;
  }
}

/* Dark mode styles (if needed) */
@media (prefers-color-scheme: dark) {
  .PrivacyPage_pageTitle__66D5z {
    color: #f0f0f0;
  }

  .PrivacyPage_subtitleText__jyb4s {
    color: #ccc;
  }

  .PrivacyPage_sectionTitle__ZsXKE {
    color: #f0f0f0;
    border-bottom-color: #e6c7c7;
  }

  .PrivacyPage_sectionText__xg6fN,
  .PrivacyPage_introText__kO8u\+ {
    color: #ddd;
  }
}

/* Cookie Policy Page Styles */
.CookiePage_cookieContainer__XBo32 {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.CookiePage_header__D1ohz {
  text-align: center;
  margin-bottom: 20px;
  z-index: 5;
  padding: 20px 20px 10px;
  flex-shrink: 0;
}

.CookiePage_pageTitle__FMP3v {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 6px;
  color: #000 !important;
  margin-bottom: 10px;
  text-transform: uppercase;
  opacity: 0;
  animation: CookiePage_fadeInUp__-Wgss 1s ease forwards;
  animation-delay: 0.3s;
}

.CookiePage_subtitle__N5kEh {
  opacity: 0;
  animation: CookiePage_fadeInUp__-Wgss 1s ease forwards;
  animation-delay: 0.6s;
}

.CookiePage_subtitleText__Vm1ZU {
  font-size: 1.1rem;
  color: #000 !important;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
}

.CookiePage_content__ihzVo {
  flex: 1 1;
  width: 100%;
  max-width: 700px;
  z-index: 5;
  opacity: 0;
  animation: CookiePage_fadeInUp__-Wgss 1s ease forwards;
  animation-delay: 0.9s;
  overflow-y: auto;
  padding: 20px 20px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 199, 199, 0.5) transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.CookiePage_content__ihzVo::-webkit-scrollbar {
  width: 8px;
}

.CookiePage_content__ihzVo::-webkit-scrollbar-track {
  background: transparent;
}

.CookiePage_content__ihzVo::-webkit-scrollbar-thumb {
  background: rgba(230, 199, 199, 0.5);
  border-radius: 4px;
}

.CookiePage_content__ihzVo::-webkit-scrollbar-thumb:hover {
  background: rgba(230, 199, 199, 0.8);
}

.CookiePage_section__RwYyp {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
}

.CookiePage_sectionTitle__Ygr7s {
  font-size: 1.6rem;
  font-weight: 500;
  color: #000 !important;
  margin-bottom: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid #e6c7c7;
  padding-bottom: 8px;
}

.CookiePage_sectionText__bC2Ju {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #6e6e6e !important;
  margin-bottom: 16px;
  font-weight: 500;
  text-align: left;
}

.CookiePage_sectionText__bC2Ju:last-child {
  margin-bottom: 0;
}

.CookiePage_introText__w-hy6 {
  font-size: 1rem;
  line-height: 1.8;
  color: #000 !important;
  margin-bottom: 18px;
  font-weight: 500;
  text-align: left;
  font-style: italic;
}

.CookiePage_introText__w-hy6:last-child {
  margin-bottom: 0;
}

.CookiePage_emailLink__KadWm {
  color: #c79999 !important;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.CookiePage_emailLink__KadWm:hover {
  color: #b88888 !important;
  text-decoration: none;
}

/* Bullet List Styling */
.CookiePage_bulletList__KcMe9 {
  margin: 15px 0;
  padding-left: 30px;
  color: #6e6e6e !important;
}

.CookiePage_bulletList__KcMe9 li {
  margin-bottom: 10px;
  line-height: 1.6;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Animations */
@keyframes CookiePage_fadeInUp__-Wgss {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .CookiePage_cookieContainer__XBo32 {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .CookiePage_header__D1ohz {
    padding: 20px 15px 10px;
  }

  .CookiePage_pageTitle__FMP3v {
    font-size: 2.2rem;
    letter-spacing: 4px;
  }

  .CookiePage_subtitleText__Vm1ZU {
    font-size: 1rem;
  }

  .CookiePage_content__ihzVo {
    padding: 15px 15px 30px;
    max-width: 90%;
  }

  .CookiePage_section__RwYyp {
    margin-bottom: 25px;
  }

  .CookiePage_sectionTitle__Ygr7s {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
  }

  .CookiePage_sectionText__bC2Ju {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .CookiePage_introText__w-hy6 {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .CookiePage_header__D1ohz {
    padding: 15px 10px 5px;
  }

  .CookiePage_pageTitle__FMP3v {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .CookiePage_content__ihzVo {
    padding: 10px 10px 20px;
    max-width: 95%;
  }

  .CookiePage_section__RwYyp {
    margin-bottom: 20px;
  }

  .CookiePage_sectionTitle__Ygr7s {
    font-size: 1.3rem;
  }

  .CookiePage_sectionText__bC2Ju {
    font-size: 0.85rem;
  }

  .CookiePage_introText__w-hy6 {
    font-size: 0.9rem;
  }
}

/* Dark mode styles (if needed) */
@media (prefers-color-scheme: dark) {
  .CookiePage_pageTitle__FMP3v {
    color: #f0f0f0;
  }

  .CookiePage_subtitleText__Vm1ZU {
    color: #ccc;
  }

  .CookiePage_sectionTitle__Ygr7s {
    color: #f0f0f0;
    border-bottom-color: #e6c7c7;
  }

  .CookiePage_sectionText__bC2Ju,
  .CookiePage_introText__w-hy6 {
    color: #ddd;
  }
}

/* src/Landing Page/FAQ/FAQPage.module.css */

.FAQPage_faqContainer__aL03- {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fffff6;
  color: #333;
  position: relative;
  font-family: 'Inconsolata', monospace;
}

/* FAQ Header - Top Left */
.FAQPage_faqHeader__x5ycO {
  position: absolute;

  top: -40px;
  left: 20px;
  z-index: 10;
  pointer-events: auto;
}

.FAQPage_faqTitle__URWAi {
  transform: translateX(0); /* Remove horizontal centering */
  font-size: 3rem;
  font-weight: 100;
  color: #aaa;
  z-index: 5;
  font-family: 'Urbanist';
  animation: FAQPage_fadeInUp__bcVmu 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

@keyframes FAQPage_fadeInUp__bcVmu {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Top Right Controls */
.FAQPage_topRightControls__Z\+NUf {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 15px;
  pointer-events: auto;
}

/* Expandable Search */
.FAQPage_searchContainer__ErU2Y {
  display: flex;
  align-items: center;
}

.FAQPage_searchButton__qu-JX {
  background: none;
  border: none;
  color: #666;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.FAQPage_searchButton__qu-JX:hover {
  color: #333;
  background: rgba(255, 255, 246, 0.2);
}

.FAQPage_searchInputContainer__BZmZ3 {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid rgba(102, 102, 102, 0.2);
  animation: FAQPage_expandSearch__k3LOy 0.3s ease-out;
}

@keyframes FAQPage_expandSearch__k3LOy {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 250px;
    opacity: 1;
  }
}

.FAQPage_searchInputExpanded__fd3T4 {
  border: none;
  outline: none;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: transparent;
  width: 200px;
  font-family: 'Inconsolata';
}

.FAQPage_searchCloseButton__B8G35 {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  margin-top: 2px;
  font-size: 1rem;
}

.FAQPage_searchCloseButton__B8G35:hover {
  color: #333;
}

/* Main Content Area - Three Section Layout */
.FAQPage_mainContentArea__FahkV {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 20px;
  z-index: 5;
  pointer-events: auto;
}

/* Left Sidebar - Categories */
.FAQPage_leftSidebar__8tfLH {
  width: 250px;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 20px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 102, 102, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  transition:
    width 0.3s ease,
    padding 0.3s ease;
  display: flex;
  flex-direction: column;
}

.FAQPage_sidebarTitle__xBwpu {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 1.5rem 0;
  font-family: 'Urbanist', sans-serif;
  letter-spacing: 0.02em;
  padding-left: 0.5rem;
}

.FAQPage_categoryList__7czs1 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.FAQPage_categoryItem__RRAZr {
  background: transparent;
  border: none;
  padding: 0.85rem 1rem;
  text-align: left;
  border-radius: 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  color: #666;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.FAQPage_categoryItem__RRAZr:hover {
  background: rgba(102, 102, 102, 0.04);
  color: #333;
  transform: translateX(4px);
}

.FAQPage_categoryActive__hlDGd {
  background: #222 !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.FAQPage_categoryActive__hlDGd:hover {
  transform: none !important;
  background: #333 !important;
}

/* Right Section - Questions/Answer View */
.FAQPage_rightSection__WUR4w {
  flex: 1 1;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
}

/* Enhanced Two-column layout styles */
.FAQPage_rightSectionContent__UBa58 {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  /* background: #ffffff; */
  border-radius: 12px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Questions List Column (Left) */
.FAQPage_questionsColumn__IyH6a {
  padding: 1.5rem;
  overflow-y: auto;
  min-width: 250px;
  /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
  border-right: none;
  will-change: width;
}

/* Question Details Column (Right) */
.FAQPage_detailsColumn__E4zwc {
  padding: 2rem;
  overflow-y: auto;
  min-width: 300px;
  /* background: #ffffff; */
  will-change: width;
}

/* Draggable Resize Handle - Optimized for Performance */
.FAQPage_resizeHandle__tiqJ\+ {
  width: 2px;
  background: rgba(102, 102, 102, 0.1);
  cursor: col-resize;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition:
    background-color 0.15s ease,
    width 0.15s ease;
  will-change: background-color, width;
  flex-shrink: 0;
}

.FAQPage_resizeHandle__tiqJ\+:hover {
  background: rgba(102, 126, 234, 0.2);
  width: 12px;
}

.FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR {
  background: rgba(102, 126, 234, 0.4);
  width: 12px;
  box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

/* Performance optimization for dragging state */
body.FAQPage_dragging-resize__lxXmp {
  -webkit-user-select: none !important;
          user-select: none !important;
  cursor: col-resize !important;
}

body.FAQPage_dragging-resize__lxXmp * {
  pointer-events: none !important;
}

body.FAQPage_dragging-resize__lxXmp .FAQPage_resizeHandle__tiqJ\+ {
  pointer-events: auto !important;
}

.FAQPage_resizeHandleInner__\+8NF8 {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.FAQPage_resizeGrip__SUZAs {
  width: 3px;
  height: 40px;
  background: rgba(102, 102, 102, 0.4);
  border-radius: 2px;
  position: relative;
  transition: background-color 0.15s ease;
  will-change: background-color;
}

.FAQPage_resizeGrip__SUZAs::before,
.FAQPage_resizeGrip__SUZAs::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 40px;
  background: rgba(102, 102, 102, 0.4);
  border-radius: 2px;
  transition: background-color 0.15s ease;
  will-change: background-color;
}

.FAQPage_resizeGrip__SUZAs::before {
  left: -6px;
}

.FAQPage_resizeGrip__SUZAs::after {
  right: -6px;
}

.FAQPage_resizeHandle__tiqJ\+:hover .FAQPage_resizeGrip__SUZAs,
.FAQPage_resizeHandle__tiqJ\+:hover .FAQPage_resizeGrip__SUZAs::before,
.FAQPage_resizeHandle__tiqJ\+:hover .FAQPage_resizeGrip__SUZAs::after {
  background: rgba(102, 126, 234, 0.7);
}

.FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR .FAQPage_resizeGrip__SUZAs,
.FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR .FAQPage_resizeGrip__SUZAs::before,
.FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR .FAQPage_resizeGrip__SUZAs::after {
  background: rgba(102, 126, 234, 0.9);
}

/* Question Details View */
.FAQPage_questionDetails__49-dT {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.FAQPage_questionDetailsHeader__ro5iO {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(102, 102, 102, 0.2);
}

.FAQPage_questionDetailsTitle__OmTWD {
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
  /* margin: 0 0 0.75rem 0; */
  font-family: 'Inconsolata';
  line-height: 1.4;
}

.FAQPage_questionDetailsCategory__Jv8nq {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  /* background: rgba(102, 126, 234, 0.15); */
  color: #667eea;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.FAQPage_questionDetailsContent__Lfsrb {
  flex: 1 1;
}

.FAQPage_questionDetailsAnswer__8F-QD {
  color: #4b5563;
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.FAQPage_questionDetailsAnswer__8F-QD p {
  margin: 0 0 1rem 0;
}

.FAQPage_questionDetailsAnswer__8F-QD p:last-child {
  margin-bottom: 0;
}

.FAQPage_questionDetailsTags__PHoGD {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(102, 102, 102, 0.2);
}

.FAQPage_questionDetailsTagsList__UZiTH {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.FAQPage_questionDetailsTagsLabel__u6yc2 {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  margin-right: 0.5rem;
}

.FAQPage_questionDetailsTag__C20l1 {
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 0.8rem;
  color: #374151;
}

.FAQPage_questionDetailsMeta__TmN5c {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(102, 102, 102, 0.2);
  color: #6b7280;
  font-size: 0.8rem;
}

/* Empty Details State */
.FAQPage_emptyDetailsState__8V6kG {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #6b7280;
}

.FAQPage_emptyDetailsIcon__LO25d {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.FAQPage_emptyDetailsTitle__utVLu {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: #4b5563;
}

.FAQPage_emptyDetailsText__2ty7G {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Questions List View */
.FAQPage_questionsListView__p2\+sa {
  height: 100%;
}

/* Question View (when showing individual question) */
.FAQPage_questionView__eFiEy {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.FAQPage_questionViewHeader__tYvCK {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.FAQPage_backButton__oBvF0 {
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FAQPage_backButton__oBvF0:hover {
  color: #333;
  background: rgba(255, 255, 255, 0.3);
}

.FAQPage_questionViewTitle__t1r79 {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  margin: 0;
  flex: 1 1;
  font-family: 'Inconsolata';
}

.FAQPage_questionViewCategory__oSwJ1 {
  display: inline-block;
  padding: 0.5rem 1rem;
  /* background: rgba(102, 126, 234, 0.15); */
  color: #667eea;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.FAQPage_questionViewContent__y0nSB {
  flex: 1 1;
}

.FAQPage_questionViewAnswer__6qjgw {
  color: #4b5563;
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.FAQPage_questionViewAnswer__6qjgw p {
  margin: 0 0 1rem 0;
}

.FAQPage_questionViewAnswer__6qjgw p:last-child {
  margin-bottom: 0;
}

.FAQPage_questionViewTags__v87c- {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.FAQPage_questionViewTagsList__07jbt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.FAQPage_questionViewTagsLabel__oOrog {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  margin-right: 0.5rem;
}

.FAQPage_questionViewTag__60m5y {
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
  color: #374151;
}

/* Center Content - FAQ List (keeping for backwards compatibility) */
.FAQPage_centerContent__WYuYt {
  flex: 1 1;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 12px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

.FAQPage_sectionTitle__WrSgw {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 1.5rem 0;
  font-family: 'Inconsolata';
}

.FAQPage_faqListContainer__MxAwN {
  height: 100%;
}

.FAQPage_faqList__tMMr6 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.FAQPage_faqItem__BuJ3r {
  /* background: #ffffff; */
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.FAQPage_faqItem__BuJ3r:hover {
  background: #fffff3;
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(102, 126, 234, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.FAQPage_faqItemSelected__bTbgt {
  /* background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(102, 126, 234, 0.05) 100%); */
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
  box-shadow:
    0 4px 15px rgba(102, 126, 234, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

.FAQPage_faqItemSelected__bTbgt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px 0 0 2px;
}

.FAQPage_faqQuestion__VIz50 {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 0.5rem 0;
  font-family: 'Inconsolata';
  line-height: 1.4;
}

.FAQPage_faqCategory__uP9nv {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.6rem;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(102, 126, 234, 0.2);
  transition: all 0.2s ease;
}

.FAQPage_faqCategory__uP9nv:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.FAQPage_faqCategory__uP9nv::before {
  content: '📁';
  font-size: 0.7rem;
}

.FAQPage_faqTags__BcMJR {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.FAQPage_faqTag__zCwDq {
  padding: 0.3rem 0.6rem;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid rgba(102, 126, 234, 0.2);
  transition: all 0.2s ease;
}

.FAQPage_faqTag__zCwDq:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced Status Tags */
.FAQPage_faqTag__zCwDq.FAQPage_pending__SBaIP {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fbbf24;
}

.FAQPage_faqTag__zCwDq.FAQPage_pending__SBaIP::before {
  content: '❓';
  font-size: 0.8rem;
}

.FAQPage_faqTag__zCwDq.FAQPage_userSubmitted__85l3s {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #60a5fa;
}

.FAQPage_faqTag__zCwDq.FAQPage_userSubmitted__85l3s::before {
  content: '👤';
  font-size: 0.8rem;
}

.FAQPage_faqTag__zCwDq.FAQPage_approved__wMRQg {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #34d399;
}

.FAQPage_faqTag__zCwDq.FAQPage_approved__wMRQg::before {
  content: '✅';
  font-size: 0.8rem;
}

.FAQPage_faqTag__zCwDq.FAQPage_official__WY05q {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #818cf8;
}

.FAQPage_faqTag__zCwDq.FAQPage_official__WY05q::before {
  content: '🏢';
  font-size: 0.8rem;
}

/* Answer Tags in Details Section */
.FAQPage_answerTag__0pUsg {
  padding: 0.3rem 0.6rem;
  /* color: #667eea; */
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid rgba(102, 126, 234, 0.2);
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}

.FAQPage_answerTag__0pUsg:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Status-specific styling for answer tags */
.FAQPage_answerTag__0pUsg.FAQPage_pending__SBaIP {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fbbf24;
}

.FAQPage_answerTag__0pUsg.FAQPage_pending__SBaIP::before {
  content: '❓';
  font-size: 0.8rem;
}

.FAQPage_answerTag__0pUsg.FAQPage_userSubmitted__85l3s {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #60a5fa;
}

.FAQPage_answerTag__0pUsg.FAQPage_userSubmitted__85l3s::before {
  content: '👤';
  font-size: 0.8rem;
}

.FAQPage_answerTag__0pUsg.FAQPage_approved__wMRQg {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #34d399;
}

.FAQPage_answerTag__0pUsg.FAQPage_approved__wMRQg::before {
  content: '✅';
  font-size: 0.8rem;
}

.FAQPage_answerTag__0pUsg.FAQPage_official__WY05q {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #818cf8;
}

.FAQPage_answerTag__0pUsg.FAQPage_official__WY05q::before {
  content: '🏢';
  font-size: 0.8rem;
}

/* Question Header and Status Indicators */
.FAQPage_questionHeader__sXnFf {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
}

/* Report Button Styles */
.FAQPage_reportButton__HiBq7 {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FAQPage_reportButton__HiBq7:hover {
  background-color: rgba(220, 38, 38, 0.1);
  opacity: 1;
  transform: scale(1.1);
}

.FAQPage_faqItem__BuJ3r:hover .FAQPage_reportButton__HiBq7,
.FAQPage_mobileFaqItem__y0iGk:hover .FAQPage_reportButton__HiBq7 {
  opacity: 0.7;
}

.FAQPage_reportButton__HiBq7:hover {
  opacity: 1 !important;
}

.FAQPage_questionStatus__jKcQi {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.FAQPage_statusIndicator__X2E40 {
  display: inline-block;
  font-size: 1rem;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.FAQPage_statusIndicator__X2E40:hover {
  opacity: 1;
  transform: scale(1.1);
}

.FAQPage_faqQuestion__VIz50 {
  flex: 1 1;
  margin: 0;
}

/* Question Details View - Ultra Modern Design */
.FAQPage_questionDetailHeader__qx\+s- {
  /* margin-bottom: 3rem; */
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  position: relative;
}

.FAQPage_questionDetailHeader__qx\+s-::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.FAQPage_questionDetailTitle__TabET {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.5rem 0;
  font-family: 'Urbanist', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.FAQPage_questionDetailCategory__lha0G {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.FAQPage_questionDetailCategory__lha0G::before {
  content: '📂';
  font-size: 1rem;
}

.FAQPage_questionDetailCategory__lha0G::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.FAQPage_questionDetailCategory__lha0G:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
}

.FAQPage_questionDetailCategory__lha0G:hover::after {
  left: 100%;
}

.FAQPage_answerSection__HSVig {
  margin-bottom: 3rem;
  position: relative;
}

.FAQPage_answerSection__HSVig::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
  opacity: 0.6;
}

/* Enhanced Tags Section */
.FAQPage_tagsSection__44mqn {
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.03) 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
  overflow: hidden;
}

.FAQPage_tagsSection__44mqn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(102, 126, 234, 0.3),
    transparent
  );
}

.FAQPage_tagsSection__44mqn h4 {
  color: #1e293b;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  position: relative;
}

.FAQPage_tagsSection__44mqn h4::before {
  content: '🏷️';
  font-size: 1.1rem;
  filter: grayscale(0.3);
}

.FAQPage_tagsList__gx\+Nw {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Enhanced Answer Meta */
.FAQPage_answerMeta__FNtUH {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border-left: 4px solid #e2e8f0;
  color: #64748b;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.FAQPage_answerMeta__FNtUH::before {
  content: '📅';
  font-size: 1rem;
  opacity: 0.7;
}

.FAQPage_answerMeta__FNtUH::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(102, 126, 234, 0.2),
    transparent
  );
}

/* Enhanced No Answer Section */
.FAQPage_noAnswerSection__POrRh {
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.05) 0%,
    rgba(139, 92, 246, 0.05) 100%
  );
  border-radius: 20px;
  margin: 2rem 0;
  border: 1px solid rgba(226, 232, 240, 0.6);
  position: relative;
  overflow: hidden;
}

.FAQPage_noAnswerSection__POrRh::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(102, 126, 234, 0.4),
    transparent
  );
}

.FAQPage_noAnswerContent__RzDXP {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.FAQPage_noAnswerIcon__oyEMK {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.7;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  animation: FAQPage_float__2QYnD 3s ease-in-out infinite;
}

@keyframes FAQPage_float__2QYnD {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.FAQPage_noAnswerContent__RzDXP h4 {
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: 'Urbanist', sans-serif;
  background: linear-gradient(135deg, #334155 0%, #64748b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.FAQPage_noAnswerContent__RzDXP p {
  color: #64748b;
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
}

/* Right Sidebar - Conversation View (deprecated - keeping for compatibility) */
.FAQPage_rightSidebar__iLhkR {
  width: 350px;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 12px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

.FAQPage_conversationView__LiKe1 {
  height: 100%;
}

.FAQPage_conversationHeader__M\+GCd {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.FAQPage_conversationTitle__oH6a7 {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 0.5rem 0;
  font-family: 'Inconsolata';
  line-height: 1.4;
}

.FAQPage_conversationCategory__HW-BH {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  /* background: rgba(102, 126, 234, 0.1); */
  color: #667eea;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.FAQPage_conversationContent__iGhkH h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 0.75rem 0;
  font-family: 'Inconsolata';
}

.FAQPage_answerText__XZQlW {
  color: #374151;
  line-height: 1.8;
  margin-bottom: 2rem;
  font-size: 1.05rem;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue',
    Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.FAQPage_answerText__XZQlW p {
  margin: 0 0 1.2rem 0;
  text-align: justify;
}

.FAQPage_answerText__XZQlW p:last-child {
  margin-bottom: 0;
}

.FAQPage_answerText__XZQlW p:first-letter {
  font-size: 1.1em;
  font-weight: 500;
  color: #1f2937;
}

.FAQPage_conversationTags__cvWoV {
  margin-bottom: 1.5rem;
}

.FAQPage_tagsList__gx\+Nw {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.FAQPage_conversationTag__nVcq3 {
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-size: 0.75rem;
  color: #374151;
}

.FAQPage_conversationMeta__kXzcC {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  color: #6b7280;
  font-size: 0.8rem;
}

.FAQPage_noSelection__6SDSz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #6b7280;
}

.FAQPage_noSelectionIcon__2pDkK {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.FAQPage_noSelection__6SDSz h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: #4b5563;
}

.FAQPage_noSelection__6SDSz p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Floating Action Button */
.FAQPage_floatingButton__93Z-j {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FAQPage_floatingButton__93Z-j:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
}

.FAQPage_floatingButton__93Z-j:active {
  transform: scale(0.95);
}

/* Question Posting Modal Styles */
.FAQPage_modalLeftContent__ePMtJ {
  padding: 2.5rem;
  color: white;
  background: linear-gradient(135deg, #1a1c2e 0%, #2d3748 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.FAQPage_modalLeftContent__ePMtJ h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: white;
  font-family: 'Urbanist', sans-serif;
}

.FAQPage_modalLeftContent__ePMtJ p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  opacity: 0.9;
  font-family: 'Urbanist', sans-serif;
}

.FAQPage_modalTips__iJxkA {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.FAQPage_modalTips__iJxkA h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #fbbf24;
  font-family: 'Urbanist', sans-serif;
}

.FAQPage_modalTips__iJxkA ul {
  margin: 0;
  padding-left: 1.2rem;
}

.FAQPage_modalTips__iJxkA li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  opacity: 0.9;
  font-family: 'Urbanist', sans-serif;
}

.FAQPage_communityNote__z9\+A8 {
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 8px;
  border-left: 4px solid #10b981;
}

.FAQPage_communityNote__z9\+A8 small {
  font-size: 0.9rem;
  color: #ffffff !important;
  display: block;
  line-height: 1.5;
  font-weight: 400;
}

.FAQPage_communityNote__z9\+A8 small strong {
  color: #10b981;
  font-weight: 600;
}

.FAQPage_modalRightContent__XEcBQ {
  padding: 2.5rem;
  background: linear-gradient(135deg, #1a1c2e 0%, #2d3748 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  /* border-left: 1px solid rgba(255, 255, 255, 0.05); */
  border-radius: 12px;
}

.FAQPage_questionForm__I5m3n {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.FAQPage_formGroup__9L2En {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.FAQPage_formGroup__9L2En label {
  font-weight: 600;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-family: 'Urbanist', sans-serif;
}

.FAQPage_formInput__avWpD,
.FAQPage_formSelect__6TNEg,
.FAQPage_formTextarea__Ky\+E3 {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Urbanist', sans-serif;
  transition: all 0.2s ease;
  background-color: rgba(0, 0, 0, 0.2);
  color: #f8fafc;
  width: 93%;
}

.FAQPage_formInput__avWpD::placeholder,
.FAQPage_formTextarea__Ky\+E3::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.FAQPage_formInput__avWpD:focus,
.FAQPage_formSelect__6TNEg:focus,
.FAQPage_formTextarea__Ky\+E3:focus {
  outline: none;
  border-color: #667eea;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

.FAQPage_formTextarea__Ky\+E3 {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.FAQPage_formActions__i2fAq {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.FAQPage_cancelButton__6efDV {
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  font-family: 'Urbanist', sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_cancelButton__6efDV:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.FAQPage_submitButton__6LPDC {
  padding: 0.75rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Urbanist', sans-serif;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.FAQPage_submitButton__6LPDC:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.FAQPage_submitButton__6LPDC:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.FAQPage_submitIcon__RTGiP {
  font-size: 1.1rem;
}

/* Header Section */
.FAQPage_header__\+NXb7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
}

.FAQPage_titleSection__sdqCb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex: 1 1;
}

.FAQPage_headerIcon__AU1BM {
  font-size: 3rem;
  color: #fbbf24;
}

.FAQPage_title__f4SQ1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.FAQPage_subtitle__Fgu-n {
  font-size: 1.1rem;
  margin: 0.5rem 0 0 0;
  opacity: 0.9;
  font-weight: 400;
}

/* Controls Section */
.FAQPage_controls__AboS7 {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.FAQPage_searchSection__teXW5 {
  margin-bottom: 1.5rem;
}

.FAQPage_searchBox__oonMn {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.FAQPage_searchIcon__k5XFV {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 1.1rem;
}

.FAQPage_searchInput__l1SBe {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 3rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: #f9fafb;
}

.FAQPage_searchInput__l1SBe:focus {
  outline: none;
  border-color: #667eea;
  background-color: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.FAQPage_filterSection__m-Vzs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.FAQPage_categoryFilter__kmpwA {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_filterIcon__EKe65 {
  color: #6b7280;
  font-size: 1.1rem;
}

.FAQPage_categorySelect__V-daK {
  padding: 0.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background-color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.FAQPage_categorySelect__V-daK:focus {
  outline: none;
  border-color: #667eea;
}

.FAQPage_expandControls__gSu97 {
  display: flex;
  gap: 0.5rem;
}

.FAQPage_controlButton__Ddoh7 {
  padding: 0.5rem 1rem;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #374151;
}

.FAQPage_controlButton__Ddoh7:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

/* Content Section */
.FAQPage_content__ahdgi {
  /* background: white; */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.FAQPage_faqItem__BuJ3r {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.FAQPage_faqItem__BuJ3r:last-child {
  border-bottom: none;
}

.FAQPage_faqItem__BuJ3r:hover {
  background-color: #f9fafb;
}

.FAQPage_faqHeader__x5ycO {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.FAQPage_questionSection__dGRcK {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.FAQPage_question__VnrjS {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: #1f2937;
  line-height: 1.4;
}

.FAQPage_category__Gyjbc {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #ede9fe;
  color: #7c3aed;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: -webkit-fit-content;
  width: fit-content;
}

.FAQPage_expandIcon__RKufq {
  color: #6b7280;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  margin-left: 1rem;
}

.FAQPage_faqBody__qdZrt {
  padding: 0 1.5rem 1.5rem 1.5rem;
  animation: FAQPage_slideDown__2k2Fv 0.3s ease-out;
}

@keyframes FAQPage_slideDown__2k2Fv {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.FAQPage_answer__lYzB9 {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.FAQPage_answer__lYzB9 p {
  margin: 0 0 1rem 0;
}

.FAQPage_answer__lYzB9 p:last-child {
  margin-bottom: 0;
}

.FAQPage_tags__3--3\+ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.FAQPage_tagsLabel__PxCXf {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.FAQPage_tag__0f3QI {
  padding: 0.25rem 0.5rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #374151;
}

.FAQPage_lastUpdated__tpe87 {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
}

/* Loading State */
.FAQPage_loading__qRTeN {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.FAQPage_spinner__czvWO {
  width: 3rem;
  height: 3rem;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: FAQPage_spin__a7POT 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Error State */
.FAQPage_error__MusxS {
  text-align: center;
  padding: 4rem 2rem;
  color: #dc2626;
}

.FAQPage_errorIcon__TfcqU {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.FAQPage_error__MusxS h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.FAQPage_retryButton__W3aD5 {
  padding: 0.75rem 1.5rem;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 1rem;
}

.FAQPage_retryButton__W3aD5:hover {
  background-color: #5a67d8;
}

/* Load More Button */
.FAQPage_loadMoreContainer__Ojpyu {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
  margin-top: 1rem;
}

.FAQPage_loadMoreButton__yVhmm {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: 'Inconsolata';
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.FAQPage_loadMoreButton__yVhmm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.FAQPage_loadMoreButton__yVhmm:active:not(:disabled) {
  transform: translateY(0);
}

.FAQPage_loadMoreButton__yVhmm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.FAQPage_loadingSpinner__8-jwM {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: FAQPage_spin__a7POT 1s linear infinite;
}

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

.FAQPage_autoLoadHint__35YmW {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
  font-style: italic;
}

.FAQPage_autoLoadingIndicator__pysXy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.FAQPage_searchingIndicator__58p05 {
  display: inline-block;
  animation: FAQPage_pulse__5FB2r 1.5s ease-in-out infinite;
}

.FAQPage_searchQuery__fuXdz {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: #667eea;
  margin-top: 0.25rem;
  font-style: italic;
}

@keyframes FAQPage_pulse__5FB2r {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.FAQPage_clearSearchButton__-Y5ae {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Inconsolata';
}

.FAQPage_clearSearchButton__-Y5ae:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* No Results State */
.FAQPage_noResults__J4NSo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}

.FAQPage_noResultsIcon__J\+Q69 {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.FAQPage_noResults__J4NSo h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
}

/* Footer Section */
.FAQPage_footer__vSktA {
  margin-top: 3rem;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.FAQPage_helpSection__K3uQA h3 {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
  font-size: 1.25rem;
}

.FAQPage_helpSection__K3uQA p {
  margin: 0;
  color: #6b7280;
}

.FAQPage_contactLink__fxoDw {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.FAQPage_contactLink__fxoDw:hover {
  color: #5a67d8;
  text-decoration: underline;
}

/* Authentication Section */
.FAQPage_authSection__hw964 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.FAQPage_loginButton__p5O1i {
  background: none;
  border: none;
  color: #666;
  font-size: 0.9rem;
  font-weight: 400;
  font-family: 'Inconsolata';
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_loginButton__p5O1i:hover {
  color: #333;
  background: rgba(255, 255, 246, 0.2);
}

.FAQPage_loginIcon__WjhDf {
  font-size: 1rem;
}

.FAQPage_userInfo__y2IWC {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: rgba(255, 255, 246, 0.1);
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative; /* For dropdown positioning */
}

.FAQPage_userInfo__y2IWC:hover {
  background: rgba(255, 255, 246, 0.2);
}

.FAQPage_avatarImage__vdQD5 {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
}

.FAQPage_userIcon__08N5B {
  font-size: 1rem;
  color: #666;
}

.FAQPage_userDetails__6UGDt {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.FAQPage_userName__4zLwu {
  font-size: 0.8rem;
  font-weight: 400;
  color: #333;
  line-height: 1.2;
  font-family: 'Inconsolata';
}

.FAQPage_username__NbcSp {
  font-size: 0.7rem;
  font-weight: 300;
  color: #666;
  line-height: 1.2;
  font-family: 'Inconsolata';
}

/* Profile Dropdown Styles */
.FAQPage_profileDropdownIcon__-lR9W {
  font-size: 0.8rem;
  color: #666;
  transition: transform 0.2s ease;
}

.FAQPage_profileDropdownIconOpen__llgJz {
  transform: rotate(180deg);
}

.FAQPage_profileDropdown__-jcP5 {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid #374151;
  border-radius: 6px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 1000;
  min-width: 120px;
  animation: FAQPage_dropdownFadeIn__zCQn5 0.2s ease-out;
}

@keyframes FAQPage_dropdownFadeIn__zCQn5 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.FAQPage_signOutButton__srp7Z {
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 0.9rem;
  font-family: 'Inconsolata';
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.FAQPage_signOutButton__srp7Z:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.FAQPage_signOutIcon__PJUuD {
  font-size: 1rem;
}

/* Mobile-Specific Components */
.FAQPage_mobileContentWrapper__qRhTy {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

.FAQPage_mobileFaqDetail__9ir5u {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.FAQPage_mobileDetailHeader__WRoE7 {
  padding: 1rem;
  border-bottom: 2px solid rgba(102, 102, 102, 0.1);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.FAQPage_mobileBackButton__WfJN2 {
  background: none;
  border: none;
  color: #667eea;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Inconsolata';
}

.FAQPage_mobileBackButton__WfJN2:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #5a67d8;
}

.FAQPage_mobileDetailContent__Ziz6j {
  flex: 1 1;
  padding: 1rem;
  overflow-y: auto;
}

.FAQPage_mobileDetailContent__Ziz6j .FAQPage_userAnswersList__Fjyk2 {
  padding: 0.5rem;
  margin: 1.5rem 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.FAQPage_mobileDetailContent__Ziz6j .FAQPage_userAnswer__T7bpx {
  margin-bottom: 1.25rem;
  border-radius: 16px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(102, 126, 234, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.FAQPage_mobileDetailContent__Ziz6j .FAQPage_userAnswer__T7bpx:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  border-color: rgba(102, 126, 234, 0.3);
}

.FAQPage_mobileDetailContent__Ziz6j .FAQPage_userAnswer__T7bpx:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.25rem;
  width: 4px;
  height: 1.25rem;
  background: linear-gradient(to bottom, #667eea 0%, #a5b4fc 40%, #e2e8f0 100%);
  border-radius: 2px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

.FAQPage_mobileDetailContent__Ziz6j .FAQPage_userAnswer__T7bpx:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  bottom: -1.25rem;
  width: 8px;
  height: 1.25rem;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 4px;
  z-index: 2;
}

.FAQPage_mobileQuestionList__W0USI {
  flex: 1 1;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 16px;
  padding: 1rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

.FAQPage_mobileFaqItem__y0iGk {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(102, 102, 102, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.FAQPage_mobileFaqItem__y0iGk:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.FAQPage_mobileFaqItem__y0iGk:active {
  transform: translateY(0);
}

/* Enhanced Mobile-First Responsive Design */

/* Small Mobile Devices - 320px to 480px */
@media (max-width: 480px) {
  .FAQPage_faqContainer__aL03- {
    height: 100vh;
    overflow: hidden;
  }

  /* Mobile Header */
  .FAQPage_faqHeader__x5ycO {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 999;
    display: flex;
    align-items: center; /* Vertically center FAQ title and Cache Debug button */
  }

  .FAQPage_faqTitle__URWAi {
    font-size: 2rem;
    margin: 0;
    line-height: 1; /* Ensure consistent line height */
  }

  /* Mobile Top Controls - Keep Horizontal */
  .FAQPage_topRightControls__Z\+NUf {
    position: fixed;
    top: 35px; /* Match header top position */
    right: 15px;
    flex-direction: row;
    gap: 8px;
    z-index: 999;
    align-items: center;
  }

  /* Mobile Search - Better Width When Expanded */
  .FAQPage_searchInputContainer__BZmZ3 {
    width: calc(100vw - 40px); /* Leave space for close button and user info */
    position: fixed;
    top: 100px;
    left: 15px;
    z-index: 1000;
    animation: none;
    max-width: calc(100vw - 50px);
  }

  .FAQPage_searchInputExpanded__fd3T4 {
    width: 100%;
    max-width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Mobile Auth Section */
  .FAQPage_authSection__hw964 {
    flex-direction: row;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevent shrinking */
  }

  .FAQPage_userInfo__y2IWC {
    padding: 4px 6px;
    gap: 0.3rem;
    flex-shrink: 0; /* Prevent shrinking */
    min-width: auto;
  }

  .FAQPage_avatarImage__vdQD5 {
    width: 1.5rem;
    height: 1.5rem;
  }

  .FAQPage_userName__4zLwu {
    font-size: 0.75rem;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px; /* Limit width to prevent overlap */
  }

  .FAQPage_username__NbcSp {
    font-size: 0.65rem;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px; /* Limit width to prevent overlap */
  }

  .FAQPage_userDetails__6UGDt {
    gap: 0.1rem;
    max-width: 80px; /* Limit overall width */
  }

  /* Mobile Profile Dropdown */
  .FAQPage_profileDropdownIcon__-lR9W {
    font-size: 0.7rem;
  }

  .FAQPage_profileDropdown__-jcP5 {
    right: -10px; /* Adjust positioning for mobile */
    min-width: 100px;
  }

  .FAQPage_signOutButton__srp7Z {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  /* Mobile Main Content */
  .FAQPage_mainContentArea__FahkV {
    position: fixed;
    top: 100px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    flex-direction: column;
    gap: 10px;
  }

  /* Mobile Sidebar - Horizontal Scroll */
  .FAQPage_leftSidebar__8tfLH {
    width: 100%;
    max-width: 92%; /* Limit category container to 80% width */
    height: 80px;
    padding: 0.75rem;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
  }

  .FAQPage_categoryList__7czs1 {
    flex-direction: row;
    gap: 0.5rem;
    min-width: -webkit-max-content;
    min-width: max-content;
  }

  .FAQPage_categoryItem__RRAZr {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(102, 102, 102, 0.2);
  }

  /* Mobile Right Section - Full Height */
  .FAQPage_rightSection__WUR4w {
    flex: 1 1;
    min-height: 0;
    border-radius: 16px;
  }

  /* Mobile Two-Column Layout - Stack on Small Screens */
  .FAQPage_rightSectionContent__UBa58 {
    flex-direction: column;
    height: 100%;
  }

  .FAQPage_questionsColumn__IyH6a {
    width: 100% !important;
    max-height: 45vh;
    padding: 1rem;
    border-right: none;
    border-bottom: 2px solid rgba(102, 102, 102, 0.1);
    overflow-y: auto;
  }

  .FAQPage_detailsColumn__E4zwc {
    width: 100% !important;
    flex: 1 1;
    padding: 1rem;
    overflow-y: auto;
  }

  /* Hide resize handle on mobile */
  .FAQPage_resizeHandle__tiqJ\+ {
    display: none;
  }

  /* Mobile FAQ Items */
  .FAQPage_faqItem__BuJ3r {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
  }

  .FAQPage_faqQuestion__VIz50 {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .FAQPage_faqCategory__uP9nv {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  .FAQPage_faqTags__BcMJR {
    gap: 0.2rem;
  }

  .FAQPage_faqTag__zCwDq {
    padding: 0.2rem 0.4rem;
    font-size: 0.65rem;
  }

  /* Mobile Question Details */
  .FAQPage_questionDetailTitle__TabET {
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .FAQPage_questionDetailCategory__lha0G {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }

  .FAQPage_answerText__XZQlW {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Mobile Floating Button */
  .FAQPage_floatingButton__93Z-j {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  /* Mobile Answer Forms */
  .FAQPage_answerTextarea__KPBEd {
    min-height: 100px;
    font-size: 0.9rem;
  }

  .FAQPage_answerFormActions__DKCRF {
    flex-direction: column;
    gap: 0.5rem;
  }

  .FAQPage_addAnswerButton__k8wD8,
  .FAQPage_submitAnswerButton__YLmAs,
  .FAQPage_loginPromptButton__W2o0A {
    width: 100%;
    justify-content: center;
  }
}

/* Tablet Devices - 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .FAQPage_faqContainer__aL03- {
    height: 100vh;
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .FAQPage_faqHeader__x5ycO {
    top: 15px;
    left: 20px;
  }

  .FAQPage_faqTitle__URWAi {
    font-size: 2.5rem;
  }

  .FAQPage_topRightControls__Z\+NUf {
    top: 20px;
    right: 20px;
    gap: 12px;
  }

  .FAQPage_mainContentArea__FahkV {
    top: 90px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    gap: 15px;
  }

  .FAQPage_leftSidebar__8tfLH {
    width: 200px;
    height: auto;
  }

  .FAQPage_rightSectionContent__UBa58 {
    flex-direction: row;
  }

  .FAQPage_questionsColumn__IyH6a {
    width: 45% !important;
    border-right: 2px solid rgba(102, 102, 102, 0.1);
    border-bottom: none;
    max-height: none;
  }

  .FAQPage_detailsColumn__E4zwc {
    width: 53% !important;
  }

  .FAQPage_resizeHandle__tiqJ\+ {
    display: flex;
    width: 2%;
  }

  /* Tablet FAQ Items */
  .FAQPage_faqItem__BuJ3r {
    padding: 1rem;
  }

  .FAQPage_faqQuestion__VIz50 {
    font-size: 0.95rem;
  }

  .FAQPage_questionDetailTitle__TabET {
    font-size: 1.6rem;
  }
}

/* Landscape Mobile - Better handling for landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .FAQPage_faqContainer__aL03- {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .FAQPage_mainContentArea__FahkV {
    top: 80px;
  }

  .FAQPage_leftSidebar__8tfLH {
    height: 60px;
    width: 100%;
    max-width: 80%; /* Limit category container to 80% width */
  }

  .FAQPage_questionsColumn__IyH6a {
    max-height: 35vh;
  }

  .FAQPage_categoryList__7czs1 {
    flex-direction: row;
  }

  .FAQPage_faqTitle__URWAi {
    font-size: 1.8rem;
  }
}

/* Large Tablet/Small Desktop - 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .FAQPage_leftSidebar__8tfLH {
    width: 220px;
  }

  .FAQPage_questionsColumn__IyH6a {
    min-width: 280px;
  }

  .FAQPage_detailsColumn__E4zwc {
    min-width: 320px;
  }
}

/* Touch-friendly improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
  .FAQPage_faqItem__BuJ3r {
    min-height: 44px; /* Minimum touch target size */
  }

  .FAQPage_categoryItem__RRAZr {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  .FAQPage_searchButton__qu-JX,
  .FAQPage_loginButton__p5O1i {
    min-height: 44px;
    min-width: 44px;
  }

  .FAQPage_floatingButton__93Z-j {
    min-width: 56px;
    min-height: 56px;
  }

  /* Larger touch targets for buttons */
  .FAQPage_addAnswerButton__k8wD8,
  .FAQPage_submitAnswerButton__YLmAs,
  .FAQPage_cancelAnswerButton__VH3\+f,
  .FAQPage_loadMoreButton__yVhmm {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .FAQPage_searchInputContainer__BZmZ3 {
    animation: none;
  }

  .FAQPage_faqItem__BuJ3r {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .FAQPage_faqItem__BuJ3r {
    border-width: 2px;
    border-color: #000;
  }

  .FAQPage_categoryItem__RRAZr {
    border-width: 2px;
    border-color: #000;
  }

  .FAQPage_faqTitle__URWAi {
    color: #000;
  }
}

/* User Answer Submission Styles */
.FAQPage_userAnswersSection__0Mvbe {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-bottom: 1px solid rgba(102, 102, 102, 0.2);
}

.FAQPage_userAnswersSection__0Mvbe h4 {
  color: #666;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_userAnswersSection__0Mvbe h4::before {
  content: '👥';
  font-size: 1rem;
}

.FAQPage_userAnswersList__Fjyk2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.FAQPage_userAnswer__T7bpx {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.FAQPage_userAnswer__T7bpx:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.FAQPage_userAnswer__T7bpx:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.75rem;
  width: 2px;
  height: 0.75rem;
  background: linear-gradient(to bottom, #667eea, #e2e8f0);
  border-radius: 1px;
  z-index: 1;
}

.FAQPage_userAnswerHeader__5lIZH {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.FAQPage_userAnswerAuthor__MGgtc {
  font-weight: 600;
  color: #667eea;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_userAnswerAuthor__MGgtc::before {
  content: '👤';
  font-size: 0.8rem;
}

.FAQPage_userAnswerDate__gqgKb {
  font-size: 0.8rem;
  color: #999;
}

.FAQPage_answerStatus__7vsue {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.FAQPage_answerStatus__7vsue.FAQPage_pending__SBaIP {
  background: #fef3c7;
  color: #d97706;
}

.FAQPage_answerStatus__7vsue.FAQPage_approved__wMRQg {
  background: #d1fae5;
  color: #065f46;
}

.FAQPage_answerStatus__7vsue.FAQPage_rejected__wKn75 {
  background: #fecaca;
  color: #dc2626;
}

.FAQPage_userAnswerText__rKutU {
  color: #374151;
  line-height: 1.6;
  white-space: pre-line;
  font-size: 0.95rem;
}

.FAQPage_answerSubmissionSection__u-1mZ {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(102, 102, 102, 0.1);
}

.FAQPage_addAnswerButton__k8wD8 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.FAQPage_addAnswerButton__k8wD8:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

.FAQPage_addAnswerButton__k8wD8:active {
  transform: translateY(0);
}

.FAQPage_addAnswerButton__k8wD8 {
  margin-bottom: 2rem;
}

.FAQPage_answerForm__dFn3v {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.FAQPage_answerForm__dFn3v h4 {
  color: #333;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_answerForm__dFn3v h4::before {
  content: '✍️';
  font-size: 1rem;
}

.FAQPage_answerTextarea__KPBEd {
  width: 95%;
  min-height: 120px;
  padding: 1rem;
  border: 2px solid rgba(102, 102, 102, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.FAQPage_answerTextarea__KPBEd:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.FAQPage_answerTextarea__KPBEd::placeholder {
  color: #999;
}

.FAQPage_answerFormActions__DKCRF {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 10rem;
}

.FAQPage_cancelAnswerButton__VH3\+f {
  background: none;
  color: #666;
  border: 2px solid rgba(102, 102, 102, 0.2);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.FAQPage_cancelAnswerButton__VH3\+f:hover {
  background: rgba(102, 102, 102, 0.1);
  border-color: rgba(102, 102, 102, 0.3);
}

.FAQPage_submitAnswerButton__YLmAs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.FAQPage_submitAnswerButton__YLmAs:hover:not(:disabled) {
  background: #5a67d8;
}

.FAQPage_submitAnswerButton__YLmAs:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.FAQPage_loginPrompt__DqUX4 {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.FAQPage_loginPrompt__DqUX4 p {
  color: #666;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.FAQPage_loginPromptButton__W2o0A {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.FAQPage_loginPromptButton__W2o0A:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

/* Responsive Design for Answer Forms */
@media (max-width: 768px) {
  .FAQPage_faqContainer__aL03- {
    background-color: #fffff6; /* Same as Vanta background color for mobile */
  }

  .FAQPage_answerFormActions__DKCRF {
    flex-direction: column;
  }

  .FAQPage_answerTextarea__KPBEd {
    min-height: 100px;
  }

  .FAQPage_userAnswerHeader__5lIZH {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  /* Enhanced mobile thread-like styling for community answers */
  .FAQPage_userAnswersList__Fjyk2 {
    padding: 0 0.5rem;
    margin: 1rem 0;
  }

  .FAQPage_userAnswer__T7bpx {
    margin-bottom: 1rem;
    border-radius: 16px;
    padding: 1.25rem;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    position: relative;
  }

  .FAQPage_userAnswer__T7bpx:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .FAQPage_userAnswer__T7bpx:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1rem;
    width: 3px;
    height: 1rem;
    background: linear-gradient(
      to bottom,
      #667eea 0%,
      #a5b4fc 50%,
      #e2e8f0 100%
    );
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
  }

  .FAQPage_userAnswer__T7bpx:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    bottom: -1rem;
    width: 5px;
    height: 1rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 3px;
    z-index: 1;
  }

  .FAQPage_userAnswerAuthor__MGgtc {
    font-size: 0.95rem;
    font-weight: 700;
  }

  .FAQPage_userAnswerDate__gqgKb {
    font-size: 0.85rem;
    color: #64748b;
  }

  .FAQPage_userAnswerText__rKutU {
    font-size: 1rem;
    line-height: 1.7;
    color: #1e293b;
  }

  /* Mobile: Hide resize handle and stack columns */
  .FAQPage_resizeHandle__tiqJ\+ {
    display: none;
  }

  .FAQPage_rightSectionContent__UBa58 {
    flex-direction: column;
  }

  .FAQPage_questionsColumn__IyH6a,
  .FAQPage_detailsColumn__E4zwc {
    width: 100% !important;
    min-width: 0;
    min-width: initial;
  }

  .FAQPage_questionsColumn__IyH6a {
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
  }
}

/* Community-focused styling additions */
.FAQPage_loginPrompt__DqUX4 small {
  display: block;
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.85rem;
  font-style: italic;
}

.FAQPage_communityStats__1WJaM {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
  text-align: center;
}

.FAQPage_communityNote__z9\+A8 {
  margin-top: 1.5rem;
  padding: 1rem;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(59, 130, 246, 0.1) 100%
  );
  border-radius: 8px;
  border-left: 3px solid #22c55e;
}

.FAQPage_communityNote__z9\+A8 small {
  color: #374151;
  line-height: 1.4;
}

/* Report Modal Styles */
.FAQPage_reportModalOverlay__gDI9f {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: FAQPage_fadeIn__dKZlE 0.2s ease-out;
}

.FAQPage_reportModal__xt6p2 {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: FAQPage_slideIn__18kpV 0.3s ease-out;
}

.FAQPage_reportModalHeader__72eT9 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.FAQPage_reportModalIcon__wEyk8 {
  color: #dc2626;
  font-size: 1.5rem;
}

.FAQPage_reportModalHeader__72eT9 h3 {
  margin: 0;
  color: #333;
  font-weight: 600;
}

.FAQPage_reportModalContent__YHZut {
  margin-bottom: 1.5rem;
}

.FAQPage_reportModalContent__YHZut p {
  margin: 0 0 1rem 0;
  color: #666;
  line-height: 1.5;
}

.FAQPage_reportedQuestion__kSLsO {
  background: rgba(102, 126, 234, 0.1);
  border-left: 3px solid #667eea;
  padding: 0.75rem;
  border-radius: 4px;
  margin: 1rem 0;
}

.FAQPage_reportedQuestion__kSLsO strong {
  color: #333;
  font-style: italic;
}

.FAQPage_reportWarning__-rbNB {
  color: #dc2626;
  font-size: 0.9rem;
  font-weight: 500;
}

.FAQPage_reportModalActions__WaY5U {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.FAQPage_reportCancelButton__jxfxz,
.FAQPage_reportConfirmButton__9REbC {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.FAQPage_reportCancelButton__jxfxz {
  background: #f3f4f6;
  color: #374151;
}

.FAQPage_reportCancelButton__jxfxz:hover {
  background: #e5e7eb;
}

.FAQPage_reportConfirmButton__9REbC {
  background: #dc2626;
  color: white;
}

.FAQPage_reportConfirmButton__9REbC:hover {
  background: #b91c1c;
}

.FAQPage_reportCancelButton__jxfxz:disabled,
.FAQPage_reportConfirmButton__9REbC:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes FAQPage_fadeIn__dKZlE {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes FAQPage_slideIn__18kpV {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile report modal adjustments */
@media (max-width: 480px) {
  .FAQPage_reportModal__xt6p2 {
    margin: 1rem;
    padding: 1rem;
    max-width: none;
    width: calc(100% - 2rem);
  }

  .FAQPage_reportModalActions__WaY5U {
    flex-direction: column;
  }

  .FAQPage_reportCancelButton__jxfxz,
  .FAQPage_reportConfirmButton__9REbC {
    width: 100%;
    justify-content: center;
  }
}

/* Content Moderation Styles */
.FAQPage_moderationError__PJOhg {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #dc2626;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: #dc2626;
  line-height: 1.4;
  animation: FAQPage_slideIn__18kpV 0.3s ease-out;
}

.FAQPage_moderationError__PJOhg .FAQPage_errorIcon__TfcqU {
  color: #dc2626;
  margin-top: 2px;
  flex-shrink: 0;
}

.FAQPage_moderationLoading__rHCTE {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #3b82f6;
  animation: FAQPage_slideIn__18kpV 0.3s ease-out;
}

.FAQPage_moderationLoading__rHCTE .FAQPage_loadingSpinner__8-jwM {
  width: 16px;
  height: 16px;
  border: 2px solid #3b82f6;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: FAQPage_spin__a7POT 1s linear infinite;
}

/* Success state for moderation */
.FAQPage_moderationSuccess__V72UK {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid #10b981;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #10b981;
  animation: FAQPage_slideIn__18kpV 0.3s ease-out;
}

.FAQPage_moderationSuccess__V72UK::before {
  content: '✓';
  font-weight: bold;
  color: #10b981;
}

/* Mobile moderation styles */
@media (max-width: 768px) {
  .FAQPage_moderationError__PJOhg,
  .FAQPage_moderationLoading__rHCTE,
  .FAQPage_moderationSuccess__V72UK {
    margin: 8px 0;
    padding: 10px;
    font-size: 0.85rem;
  }

  .FAQPage_moderationLoading__rHCTE .FAQPage_loadingSpinner__8-jwM {
    width: 14px;
    height: 14px;
  }
}

/* src/Landing Page/Store/components/ShopBrowser.module.css */

.ShopBrowser_shopBrowser__ke2E5 {
  width: 100%;
  height: 100%;
  padding: 15px;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.ShopBrowser_accessDenied__-tU7k {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 400px;
}

.ShopBrowser_accessContent__ZWCjo {
  text-align: center;
  color: #666;
}

.ShopBrowser_accessContent__ZWCjo h3 {
  color: #333;
  margin-bottom: 10px;
}

.ShopBrowser_errorMessage__AmbXl {
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  color: #c66;
  text-align: center;
}

.ShopBrowser_retryButton__Hc2w\+ {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.ShopBrowser_retryButton__Hc2w\+:hover {
  background: #0056b3;
}

.ShopBrowser_loadingContainer__T8Prz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #666;
}

.ShopBrowser_loadingSpinner__xy6NB {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: ShopBrowser_spin__12gf9 1s linear infinite;
  margin-bottom: 15px;
}

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

.ShopBrowser_emptyState__ifAMh {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #666;
  text-align: center;
}

.ShopBrowser_emptyIcon__jRLXX {
  font-size: 4rem;
  margin-bottom: 20px;
}

.ShopBrowser_emptyState__ifAMh h3 {
  color: #333;
  margin-bottom: 10px;
}

.ShopBrowser_itemsGrid__xxbkD {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
  width: 97%;
}

.ShopBrowser_shopItem__q2wsd {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  width: 100%;
  margin: 0 auto;
  height: 200px;
  position: relative;
}

.ShopBrowser_shopItem__q2wsd:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ShopBrowser_shopItemContent__ozaH1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
  position: relative;
}

.ShopBrowser_shopItem__q2wsd.ShopBrowser_showPrompt__f1U1T .ShopBrowser_shopItemContent__ozaH1 {
  filter: blur(3px);
}

.ShopBrowser_shopItem__q2wsd .ShopBrowser_itemInfo__9ncJn {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.ShopBrowser_shopItem__q2wsd.ShopBrowser_showDetails__OeeVX .ShopBrowser_itemInfo__9ncJn {
  opacity: 1;
  visibility: visible;
}

.ShopBrowser_shopItem__q2wsd .ShopBrowser_mediaContainer__jW83f {
  width: 100%;
  min-width: 100%;
  transition:
    width 0.3s ease,
    min-width 0.3s ease;
}

.ShopBrowser_shopItem__q2wsd.ShopBrowser_showDetails__OeeVX .ShopBrowser_mediaContainer__jW83f {
  width: 140px;
  min-width: 140px;
}

.ShopBrowser_shopItem__q2wsd.ShopBrowser_playingVideo__EJlCY .ShopBrowser_mediaContainer__jW83f {
  width: 100%;
  min-width: 100%;
}

.ShopBrowser_shopItem__q2wsd.ShopBrowser_playingVideo__EJlCY .ShopBrowser_itemInfo__9ncJn {
  opacity: 0;
  visibility: hidden;
}

.ShopBrowser_mediaContainer__jW83f {
  position: relative;
  width: 140px;
  min-width: 140px;
  height: 100%;
  background: #f8f9fa;
  overflow: visible;
  flex-shrink: 0;
  border-radius: 12px 0 0 12px;
}

.ShopBrowser_creditsLabel__xlriU {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 241, 199, 0.197);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ShopBrowser_coinIcon__QdSy3 {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.ShopBrowser_purchasedLabel__wE4T- {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(34, 197, 94, 0.9);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.ShopBrowser_mediaSizeLabel__nRAUL {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  /* background: rgba(0, 0, 0, 0.75); */
  color: white;
  padding: 4px 5px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.ShopBrowser_mediaPreview__GHXtv {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.ShopBrowser_videoWrapper__dnH8- {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f9fa;
}

.ShopBrowser_videoLoading__tHfZR {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #f8f9fa;
  position: relative;
}

.ShopBrowser_audioPreview__U5eok,
.ShopBrowser_unknownPreview__qXFUo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.ShopBrowser_audioIcon__ozy-2,
.ShopBrowser_unknownIcon__lQ\+25 {
  font-size: 3rem;
}

/* Template Preview */
.ShopBrowser_templatePreview__wvmmY {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 10px;
  box-sizing: border-box;
}

.ShopBrowser_templatePreview__wvmmY canvas {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ShopBrowser_hiddenAudio__GS-W3 {
  display: none;
}

.ShopBrowser_mediaOverlay__LYoT8 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ShopBrowser_protectionOverlay__e4Jth {
  position: absolute;
  top: 8px;
  right: 8px;
  pointer-events: none;
  z-index: 5;
}

.ShopBrowser_previewWatermark__7b0oK {
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Inconsolata', monospace;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.ShopBrowser_mediaOverlay__LYoT8:hover {
  pointer-events: auto;
}

.ShopBrowser_shopItem__q2wsd:hover .ShopBrowser_mediaOverlay__LYoT8 {
  opacity: 1;
}

.ShopBrowser_previewButton__S5EkF,
.ShopBrowser_playButton__pfJUh {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.ShopBrowser_downloadButton__W39o6 {
  background: #007bff;
  color: white;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.ShopBrowser_downloadIcon__yQv0\+ {
  width: 16px;
  height: 16px;
}

.ShopBrowser_previewButton__S5EkF:hover,
.ShopBrowser_downloadButton__W39o6:hover,
.ShopBrowser_playButton__pfJUh:hover {
  background: #0056b3;
}

.ShopBrowser_playButton__pfJUh {
  background: #28a745;
}

.ShopBrowser_playButton__pfJUh:hover {
  background: #218838;
}

.ShopBrowser_itemInfo__9ncJn {
  /* padding: 15px; */
  padding: 0 15px;
  flex: 1 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ShopBrowser_itemName__4e-Zx {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  border-bottom: #c7c7c7 solid 1px;
}

.ShopBrowser_itemMeta__aM6dc {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ShopBrowser_ownerInfo__hzCSG {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-content: start;
  align-items: flex-start;
}

.ShopBrowser_ownerNameTitle__d\+lru {
  font-size: 0.7rem;
  color: #666;
  font-weight: 500;
}

.ShopBrowser_ownerAvatar__XzFTw {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  padding: 5px;
  background: #f8f9fa;
  border: #0056b3 solid 1px;
}

.ShopBrowser_ownerName__KpIBR {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.ShopBrowser_itemStats__cmqOI {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.ShopBrowser_stat__x5TNa {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #888;
}

.ShopBrowser_statIcon__hlODH {
  font-size: 0.8rem;
}

.ShopBrowser_fileInfo__nf9MF {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  gap: 10px;
  color: #999;
}

.ShopBrowser_fileSize__A95qp {
  font-weight: 500;
  margin-top: 4px;
}

.ShopBrowser_compression__P0Jht {
  color: #28a745;
  font-weight: 500;
}

.ShopBrowser_actionButtons__T6HU2 {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}

.ShopBrowser_promptButton__FO0OC {
  background: #007bff;
  color: white;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  font-weight: 700;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ShopBrowser_promptButton__FO0OC:hover {
  background: #0056b3;
}

.ShopBrowser_purchaseButton__x\+be2 {
  background: #28a745;
  color: white;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ShopBrowser_purchaseButton__x\+be2:hover {
  background: #218838;
}

.ShopBrowser_previewAudioButton__6NOc9 {
  background: #ffc107;
  color: white;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ShopBrowser_previewAudioButton__6NOc9:hover {
  background: #e0a800;
}

.ShopBrowser_shopIconSvg__gxdEM {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ShopBrowser_promptFullOverlay__3XkBu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
  border-radius: 12px;
}

.ShopBrowser_showPrompt__f1U1T .ShopBrowser_promptFullOverlay__3XkBu {
  opacity: 1;
  visibility: visible;
}

.ShopBrowser_promptContent__lBa40 {
  padding: 20px;
  max-width: 90%;
  text-align: center;
}

.ShopBrowser_promptLabel__P\+Y6W {
  font-size: 0.9rem;
  font-weight: 700;
  color: #007bff;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ShopBrowser_promptFullText__eIAR9 {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tags for templates */
.ShopBrowser_tagsContainer__J5z39 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  justify-content: center;
}

.ShopBrowser_tag__IgH3L {
  background: rgba(102, 126, 234, 0.15);
  color: #667eea;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.ShopBrowser_imagePreviewOverlay__aJPLv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 247, 0.95);
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
  border-radius: 12px;
  padding: 20px;
}

.ShopBrowser_showPreview__ccUUt .ShopBrowser_imagePreviewOverlay__aJPLv {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}

.ShopBrowser_imagePreviewOverlay__aJPLv * {
  pointer-events: none;
}

.ShopBrowser_previewImageContainer__GvyuH {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ShopBrowser_videoPreviewWrapper__nUMzB {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ShopBrowser_videoPreviewWrapper__nUMzB .ShopBrowser_videoWrapper__dnH8- {
  width: 100%;
  height: 100%;
  position: relative;
}

.ShopBrowser_videoPreviewWrapper__nUMzB canvas,
.ShopBrowser_videoPreviewWrapper__nUMzB video,
.ShopBrowser_videoPreviewWrapper__nUMzB img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ShopBrowser_previewImage__NXiEw,
.ShopBrowser_previewImageContainer__GvyuH canvas,
.ShopBrowser_previewImageContainer__GvyuH video {
  width: 120%;
  height: 120%;
  object-fit: contain;
  border-radius: 8px;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.ShopBrowser_loadMoreContainer__xvnmy {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.ShopBrowser_loadMoreButton__3-uOM {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ShopBrowser_loadMoreButton__3-uOM:hover:not(:disabled) {
  background: #0056b3;
}

.ShopBrowser_loadMoreButton__3-uOM:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.ShopBrowser_buttonSpinner__wIZRO {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: ShopBrowser_spin__12gf9 1s linear infinite;
}

.ShopBrowser_pageInfo__gIGtK {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .ShopBrowser_shopBrowser__ke2E5 {
    padding: 10px;
  }

  .ShopBrowser_itemsGrid__xxbkD {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    width: 97%;
  }

  .ShopBrowser_shopItem__q2wsd {
    /* Keep horizontal layout like desktop */
    height: 180px;
  }

  .ShopBrowser_shopItem__q2wsd .ShopBrowser_mediaContainer__jW83f {
    width: 100%;
    min-width: 100%;
  }

  .ShopBrowser_shopItem__q2wsd.ShopBrowser_showDetails__OeeVX .ShopBrowser_mediaContainer__jW83f {
    width: 120px;
    min-width: 120px;
  }

  .ShopBrowser_shopItem__q2wsd.ShopBrowser_playingVideo__EJlCY .ShopBrowser_mediaContainer__jW83f {
    width: 100%;
    min-width: 100%;
  }

  .ShopBrowser_itemName__4e-Zx {
    font-size: 0.85rem;
  }

  .ShopBrowser_ownerNameTitle__d\+lru {
    font-size: 0.65rem;
  }

  .ShopBrowser_ownerName__KpIBR {
    font-size: 0.85rem;
  }

  .ShopBrowser_itemStats__cmqOI {
    gap: 8px;
  }

  .ShopBrowser_stat__x5TNa {
    font-size: 0.75rem;
  }

  .ShopBrowser_ownerAvatar__XzFTw {
    width: 20px;
    height: 20px;
  }

  .ShopBrowser_promptButton__FO0OC,
  .ShopBrowser_purchaseButton__x\+be2 {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }

  .ShopBrowser_shopIconSvg__gxdEM {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .ShopBrowser_itemsGrid__xxbkD {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ShopBrowser_shopItem__q2wsd {
    height: 160px;
    width: 93%;
  }

  .ShopBrowser_shopItem__q2wsd.ShopBrowser_showDetails__OeeVX .ShopBrowser_mediaContainer__jW83f {
    width: 100px;
    min-width: 100px;
  }

  .ShopBrowser_itemMeta__aM6dc {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ShopBrowser_itemName__4e-Zx {
    font-size: 0.8rem;
    -webkit-line-clamp: 1;
    padding-top: 5px;
    height: 20px;
  }

  .ShopBrowser_ownerName__KpIBR {
    font-size: 0.8rem;
  }

  .ShopBrowser_stat__x5TNa {
    font-size: 0.7rem;
    padding-bottom: 10px;
  }

  .ShopBrowser_ownerAvatar__XzFTw {
    width: 18px;
    height: 18px;
  }

  .ShopBrowser_promptButton__FO0OC,
  .ShopBrowser_purchaseButton__x\+be2 {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }

  .ShopBrowser_shopIconSvg__gxdEM {
    width: 14px;
    height: 14px;
  }

  .ShopBrowser_creditsLabel__xlriU {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .ShopBrowser_coinIcon__QdSy3 {
    width: 12px;
    height: 12px;
  }

  .ShopBrowser_mediaSizeLabel__nRAUL {
    font-size: 0.7rem;
    padding: 3px 4px;
  }
}

/* src/Landing Page/Store/StorePage.module.css */

.StorePage_storeContainer__cFrt3 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fffff6;
  color: #333;
  position: relative;
  font-family: 'Inconsolata', monospace;
}

/* Store Header - Top Left */
.StorePage_storeHeader__tXTzZ {
  position: absolute;
  top: -20px;
  left: 40px;
  z-index: 10;
  pointer-events: auto;
}

.StorePage_storeTitle__uryaT {
  transform: translateX(0);
  font-size: 3rem;
  font-weight: 100;
  color: #aaa;
  z-index: 5;
  font-family: 'Urbanist';
  animation: StorePage_fadeInUp__TKnPE 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

@keyframes StorePage_fadeInUp__TKnPE {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Top Right Controls */
.StorePage_topRightControls__jIURF {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 15px;
  pointer-events: auto;
}

/* Search Styles */
.StorePage_searchContainer__ARTkA {
  display: flex;
  align-items: center;
}

.StorePage_searchButton__YWPTB {
  background: none;
  border: none;
  color: #666;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.StorePage_searchButton__YWPTB:hover {
  color: #333;
  background: rgba(255, 255, 246, 0.2);
}

.StorePage_refreshButton__VJekp {
  background: none;
  border: none;
  color: #666;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.StorePage_refreshButton__VJekp:hover {
  color: #333;
  background: rgba(255, 255, 246, 0.2);
  transform: rotate(180deg);
}

.StorePage_refreshButton__VJekp:active {
  transform: rotate(360deg);
}

.StorePage_searchInputContainer__ugx\+b {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 10px;
  padding: 4px 8px;
  border: 1px solid rgba(102, 102, 102, 0.2);
  width: 250px;
  animation: StorePage_expandSearch__ENpSK 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@keyframes StorePage_expandSearch__ENpSK {
  from {
    width: 40px;
    opacity: 0;
  }
  to {
    width: 250px;
    opacity: 1;
  }
}

.StorePage_searchInputExpanded__6jioK {
  border: none;
  background: none;
  padding: 8px 12px;
  font-size: 0.9rem;
  outline: none;
  width: 100%;
  color: #333;
  font-family: inherit;
}

.StorePage_searchInputExpanded__6jioK::placeholder {
  color: #999;
}

.StorePage_searchCloseButton__w3ha0 {
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.StorePage_searchCloseButton__w3ha0:hover {
  color: #333;
}

/* Authentication Section */
.StorePage_authSection__ol-eH {
  position: relative;
}

.StorePage_loginButton__CqFLp {
  background: rgba(255, 255, 246, 0.9);
  border: 1px solid rgba(102, 102, 102, 0.3);
  color: #666;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.StorePage_loginButton__CqFLp:hover {
  color: #333;
  border-color: rgba(102, 102, 102, 0.5);
  background: rgba(255, 255, 246, 1);
}

.StorePage_loginIcon__OnR-J {
  font-size: 1rem;
}

/* User Info */
.StorePage_userInfo__JoVyJ {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.2s ease;
  position: relative;
  background: rgba(255, 255, 246, 0.9);
  border: 1px solid rgba(102, 102, 102, 0.3);
}

.StorePage_userInfo__JoVyJ:hover {
  background: rgba(255, 255, 246, 1);
}

.StorePage_avatarImage__h\+Buf {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.StorePage_userIcon__5PHuA {
  font-size: 1.2rem;
  color: #666;
}

.StorePage_userDetails__eUIB0 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.StorePage_userName__LiCM3 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.StorePage_username__9evM- {
  font-size: 0.7rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.StorePage_profileDropdownIcon__73vME {
  font-size: 0.8rem;
  color: #666;
  transition: transform 0.2s ease;
}

.StorePage_profileDropdownIconOpen__maxMW {
  transform: rotate(180deg);
}

.StorePage_coinImage__UcFbo {
  width: 25px;
  height: 25px;
  filter: invert(0) brightness(0) saturate(100%) contrast(100%);
}

.StorePage_profileDropdown__APsVW {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(255, 255, 246, 0.98);
  border: 1px solid rgba(102, 102, 102, 0.3);
  border-radius: 8px;
  padding: 4px;
  margin-top: 4px;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.StorePage_signOutButton__ZT92v {
  width: 100%;
  background: none;
  border: none;
  color: #666;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.StorePage_signOutButton__ZT92v:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

.StorePage_signOutIcon__\+dCLI {
  font-size: 0.9rem;
}

/* Main Content Area */
.StorePage_mainContentArea__oOcZ4 {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 20px;
  z-index: 5;
  pointer-events: auto;
}

/* Left Sidebar */
.StorePage_leftSidebar__BUltt {
  width: 250px;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 102, 102, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  transition:
    width 0.3s ease,
    padding 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Electron specific overrides */
body.is-electron .StorePage_leftSidebar__BUltt {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 246, 0.98); /* Less transparent for Electron */
}

.StorePage_leftSidebarCollapsed__Es2nT {
  width: 80px;
  padding: 1.5rem 0.5rem;
  align-items: center;
}

.StorePage_sidebarHeader__4Kngi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
}

.StorePage_sidebarTitle__YwEAx {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  letter-spacing: 0.02em;
}

.StorePage_collapseButton__vQAlo {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.StorePage_collapseButton__vQAlo:hover {
  color: #333;
  background: rgba(102, 102, 102, 0.05);
}

.StorePage_chevronIcon__NdSF8 {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.StorePage_chevronIconExpanded__1vmJx {
  transform: rotate(180deg);
}

.StorePage_categoryList__SYc9E {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.StorePage_categoryItem__qllne {
  background: transparent;
  border: none;
  padding: 0.85rem 1rem;
  text-align: left;
  border-radius: 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  color: #666;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.StorePage_leftSidebarCollapsed__Es2nT .StorePage_categoryItem__qllne {
  justify-content: center;
  padding: 0.85rem;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.StorePage_categoryItem__qllne:hover {
  background: rgba(102, 102, 102, 0.04);
  color: #333;
  transform: translateX(4px);
}

.StorePage_leftSidebarCollapsed__Es2nT .StorePage_categoryItem__qllne:hover {
  transform: none;
  background: rgba(102, 102, 102, 0.08);
}

.StorePage_categoryActive__fQB-a {
  background: #222 !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.StorePage_categoryActive__fQB-a:hover {
  transform: none !important;
  background: #333 !important;
}

.StorePage_categoryIcon__yVGgC {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.StorePage_categoryItem__qllne:hover .StorePage_categoryIcon__yVGgC {
  opacity: 0.9;
}

.StorePage_categoryActive__fQB-a .StorePage_categoryIcon__yVGgC {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* User Sections */
.StorePage_userSections__YBvNW {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.StorePage_sectionDivider__2yaVT {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(102, 102, 102, 0.2),
    transparent
  );
  margin-bottom: 1rem;
  width: 100%;
}

.StorePage_userSectionButton__BBFQ7 {
  background: transparent;
  border: none;
  padding: 0.85rem 1rem;
  text-align: left;
  border-radius: 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.StorePage_userSectionButton__BBFQ7:hover {
  background: rgba(102, 102, 102, 0.04);
  color: #333;
}

.StorePage_userSectionActive__6IC4Q {
  background: rgba(102, 102, 102, 0.08) !important;
  color: #333 !important;
  font-weight: 600;
}

.StorePage_userSectionIcon__X229n {
  font-size: 1.1rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.StorePage_userSectionButton__BBFQ7:hover .StorePage_userSectionIcon__X229n,
.StorePage_userSectionActive__6IC4Q .StorePage_userSectionIcon__X229n {
  opacity: 1;
}

/* Listings Subsections */
.StorePage_listingsSubsections__DytEU {
  margin-left: 0.5rem;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(102, 102, 102, 0.1);
}

.StorePage_listingSubsectionButton__ZQgPA {
  background: none;
  border: none;
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-radius: 8px;
  font-family: 'Inconsolata';
  font-size: 0.85rem;
  color: #888;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.StorePage_listingSubsectionButton__ZQgPA:hover {
  background: rgba(102, 102, 102, 0.04);
  color: #555;
  transform: translateX(2px);
}

.StorePage_listingSubsectionActive__4IJhK {
  background: rgba(102, 102, 102, 0.08) !important;
  color: #333 !important;
  font-weight: 600;
}

.StorePage_listingSubsectionIcon__Hq542 {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.StorePage_listingSubsectionActive__4IJhK .StorePage_listingSubsectionIcon__Hq542 {
  opacity: 1;
}

/* Right Section */
.StorePage_rightSection__IV1pU {
  flex: 1 1;
  background: rgba(255, 255, 246, 0.95);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
}

/* Electron specific overrides */
body.is-electron .StorePage_rightSection__IV1pU {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 246, 0.98); /* Less transparent for Electron */
}

/* Store Content */
.StorePage_storeContent__ISYzO {
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.StorePage_categoryContent__QMoIG {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.StorePage_categoryHeader__Z3NLm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-inline: 1rem;
  gap: 1rem;
  flex-wrap: nowrap;
}

.StorePage_categoryTitle__A\+T7D {
  font-size: 1.8rem;
  font-weight: 300;
  color: #333;
  font-family: 'Urbanist';
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.StorePage_categoryTitleIcon__ef6ad {
  width: 28px;
  height: 28px;
  opacity: 0.8;
}

.StorePage_headerRightSection__AC4iP {
  display: flex;
  align-items: center;
  gap: 15px;
}

.StorePage_creditsDisplay__nuAys {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 223, 0, 0.15);
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 223, 0, 0.3);
}

.StorePage_creditsIcon__dYTyz {
  font-size: 1.2rem;
  color: #f59e0b;
}

.StorePage_creditsAmount__iD3gV {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  font-family: 'Inconsolata', monospace;
}

.StorePage_searchContainerHeader__Pgwpn {
  display: flex;
  align-items: center;
  min-width: 40px;
}

.StorePage_placeholderContent__gd7qR {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.StorePage_comingSoonBox__uE9Bj {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 246, 0.5);
  border: 2px dashed rgba(102, 102, 102, 0.3);
  border-radius: 12px;
  max-width: 400px;
}

.StorePage_comingSoonBox__uE9Bj h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 12px;
  font-family: 'Urbanist';
}

.StorePage_comingSoonBox__uE9Bj p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Access Denied */
.StorePage_accessDenied__E7z8l {
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.StorePage_accessContent__6GDkb {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 246, 0.8);
  border: 1px solid rgba(102, 102, 102, 0.2);
  border-radius: 12px;
  max-width: 400px;
  position: relative;
}

.StorePage_accessContent__6GDkb::before,
.StorePage_accessContent__6GDkb::after {
  content: '✨';
  position: absolute;
  font-size: 1.5rem;
  animation: StorePage_sparkle__UkGG4 3s ease-in-out infinite;
  opacity: 0;
}

.StorePage_accessContent__6GDkb::before {
  top: 60px;
  left: 100px;
  animation-delay: 0s;
}

.StorePage_accessContent__6GDkb::after {
  top: 60px;
  right: 100px;
  animation-delay: 1.5s;
}

.StorePage_lockIcon__bBpoe {
  font-size: 3rem;
  color: #dc2626;
  margin-bottom: 20px;
  width: 70px;
  height: 70px;
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
    brightness(104%) contrast(97%);
}

.StorePage_ticketIcon__672li {
  font-size: 3rem;
  color: #dc2626;
  margin-bottom: 20px;
  width: 70px;
  height: 70px;
  filter: invert(64%) sepia(88%) saturate(550%) hue-rotate(1deg) brightness(98%)
    contrast(101%);
  position: relative;
  animation: StorePage_ticketPulse__hjkcv 2s ease-in-out infinite;
}

@keyframes StorePage_ticketPulse__hjkcv {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes StorePage_sparkle__UkGG4 {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  40% {
    opacity: 0.8;
    transform: translateY(-20px) scale(0.8);
  }
  60% {
    opacity: 0.4;
    transform: translateY(-30px) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.3);
  }
}

.StorePage_accessContent__6GDkb h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 12px;
  font-family: 'Urbanist';
}

.StorePage_accessContent__6GDkb p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
}

.StorePage_ticketNote__oDSSH {
  font-size: 0.8rem;
  color: #555;
  margin: 16px 0;
  line-height: 1.5;
}

.StorePage_ticketMessage__wIzTk {
  font-size: 0.9rem;
  color: #999;
  font-style: italic;
  margin-top: 8px;
}

.StorePage_signInButton__zpPvF {
  background: #667eea;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 20px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.StorePage_signInButton__zpPvF:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .StorePage_storeContainer__cFrt3 {
    overflow-x: hidden;
  }

  .StorePage_storeHeader__tXTzZ {
    top: 0px;
    left: 15px;
  }

  .StorePage_storeTitle__uryaT {
    font-size: 2.2rem;
  }

  .StorePage_topRightControls__jIURF {
    top: 15px;
    right: 15px;
    gap: 10px;
  }

  .StorePage_mainContentArea__oOcZ4 {
    position: static;
    flex-direction: column;
    margin: 75px 15px 15px;
    gap: 15px;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .StorePage_leftSidebar__BUltt {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 0;
  }

  .StorePage_categoryList__SYc9E {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .StorePage_categoryList__SYc9E::-webkit-scrollbar {
    display: none;
  }

  .StorePage_categoryItem__qllne {
    white-space: nowrap;
    min-width: auto;
    padding: 10px 14px;
    flex-shrink: 0;
    border-bottom: none;
    border-radius: 8px;
    justify-content: center;
    gap: 6px;
  }

  .StorePage_rightSection__IV1pU {
    border-radius: 15px;
    margin-top: 0;
    height: 60vh;
  }

  .StorePage_storeContent__ISYzO {
    padding: 1.5rem;
    height: 100%;
  }

  .StorePage_accessDenied__E7z8l {
    padding: 1.5rem;
    height: 100%;
    min-height: 60vh;
  }

  .StorePage_categoryHeader__Z3NLm {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .StorePage_categoryTitle__A\+T7D {
    font-size: 1.4rem;
  }

  .StorePage_categoryTitleIcon__ef6ad {
    width: 24px;
    height: 24px;
  }

  .StorePage_headerRightSection__AC4iP {
    width: 100%;
    justify-content: space-between;
  }

  .StorePage_creditsDisplay__nuAys {
    padding: 6px 12px;
  }

  .StorePage_creditsIcon__dYTyz {
    font-size: 1rem;
  }

  .StorePage_creditsAmount__iD3gV {
    font-size: 1rem;
  }

  .StorePage_categoryIcon__yVGgC {
    width: 16px;
    height: 16px;
  }

  .StorePage_comingSoonBox__uE9Bj {
    padding: 40px 20px;
    margin: auto 0;
    margin-bottom: 15vh;
  }

  .StorePage_accessContent__6GDkb {
    padding: 40px 20px;
    /* margin: auto 0; */
    max-width: 100%;
  }

  .StorePage_lockIcon__bBpoe {
    font-size: 4rem;
    margin-bottom: 30px;
  }

  .StorePage_accessContent__6GDkb h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .StorePage_accessContent__6GDkb p {
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.6;
  }

  .StorePage_ticketMessage__wIzTk {
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
    margin-top: 20px;
    padding: 15px;
    background: rgba(102, 102, 102, 0.05);
    border-radius: 8px;
    border-left: 3px solid rgba(220, 38, 38, 0.3);
  }

  .StorePage_searchInputContainer__ugx\+b {
    width: 200px;
  }

  .StorePage_userName__LiCM3 {
    max-width: 80px;
  }

  .StorePage_username__9evM- {
    max-width: 80px;
  }
}

@media (max-width: 480px) {
  .StorePage_storeTitle__uryaT {
    font-size: 1.8rem;
  }

  .StorePage_categoryTitle__A\+T7D {
    font-size: 1.2rem;
  }

  .StorePage_creditsDisplay__nuAys {
    padding: 4px 10px;
  }

  .StorePage_creditsIcon__dYTyz {
    font-size: 0.9rem;
  }

  .StorePage_creditsAmount__iD3gV {
    font-size: 0.9rem;
  }

  .StorePage_comingSoonBox__uE9Bj h3 {
    font-size: 1.3rem;
  }

  .StorePage_accessContent__6GDkb h3 {
    font-size: 1.5rem;
  }

  .StorePage_lockIcon__bBpoe {
    font-size: 3.5rem;
  }

  .StorePage_accessContent__6GDkb p {
    font-size: 0.95rem;
  }

  .StorePage_ticketMessage__wIzTk {
    font-size: 0.85rem;
    padding: 12px;
  }
}

.mobile-not-supported {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.mobile-not-supported-content {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.mobile-not-supported-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.mobile-not-supported-content h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 700;
}

.mobile-not-supported-content > p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}

.mobile-not-supported-reasons {
  text-align: left;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
}

.mobile-not-supported-reasons h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 600;
}

.mobile-not-supported-reasons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-not-supported-reasons li {
  font-size: 14px;
  color: #555;
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
}

.mobile-not-supported-reasons li::before {
  content: '•';
  position: absolute;
  left: 8px;
  color: #667eea;
  font-weight: bold;
  font-size: 18px;
}

.mobile-not-supported-actions {
  margin-bottom: 25px;
}

.mobile-not-supported-actions h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}

.mobile-not-supported-footer {
  font-size: 13px;
  color: #999;
  margin-top: 20px;
  font-style: italic;
}

@media (max-width: 480px) {
  .mobile-not-supported-content {
    padding: 30px 20px;
  }

  .mobile-not-supported-icon {
    font-size: 60px;
  }

  .mobile-not-supported-content h1 {
    font-size: 24px;
  }

  .mobile-not-supported-content > p {
    font-size: 14px;
  }
}

.AdminPanel_adminPanel__hknAt {
  min-height: 100vh;
  background-color: #fffff6;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.AdminPanel_header__Rgz-H {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
  gap: 1rem;
}

.AdminPanel_titleSection__6jq\+A {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 180px;
}

.AdminPanel_title__dMD5J {
  margin: 0;
  color: #818181;
  font-weight: 200;
  font-size: 3rem;
  font: 'Urbanist';
}

.AdminPanel_centerSection__D6GJL {
  display: flex;
  justify-content: center;
  flex: 1 1;
}

.AdminPanel_leftSection__-TTqA {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1 1;
}

.AdminPanel_leftSection__-TTqA h1 {
  margin: 0;
  color: #1f2937;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.AdminPanel_tabs__So4bK {
  display: flex;
  gap: 8px;
  background: #f3f4f6;
  padding: 6px;
  border-radius: 50px;
}

.AdminPanel_tab__BDegg,
.AdminPanel_tabActive__N7mkL {
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.AdminPanel_tabIcon__Ih5\+S {
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.AdminPanel_tab__BDegg {
  color: #6b7280;
}

.AdminPanel_tab__BDegg:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #374151;
}

.AdminPanel_tabActive__N7mkL {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Header Right Section */
.AdminPanel_headerRight__Qmq\+y {
  display: flex;
  align-items: center;
  min-width: 180px;
  justify-content: flex-end;
}

.AdminPanel_userInfoSection__vNURL {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AdminPanel_userDetails__EQRkd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.AdminPanel_userName__4TnQf {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.AdminPanel_userUsername__YekXs {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

.AdminPanel_userEmail__CJ1rx {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
}

.AdminPanel_userAvatarHeader__2pkrE {
  width: 50px;
  height: 50px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.AdminPanel_userAvatarImg__4gj9n {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.AdminPanel_userAvatarInitial__IJDqi {
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.AdminPanel_authError__G\+ALG {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 500;
}

.AdminPanel_authError__G\+ALG svg {
  font-size: 16px;
}

.AdminPanel_content__95UMk {
  /* background: white; */
  padding: 30px;
  border-radius: 8px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  min-height: 500px;
  flex: 1 1;
}

.AdminPanel_error__iJVPD {
  background: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.AdminPanel_error__iJVPD button {
  background: transparent;
  border: none;
  color: #c33;
  font-size: 20px;
  cursor: pointer;
  padding: 0 10px;
}

/* Overview */
.AdminPanel_overview__LUSvP h2 {
  margin-top: 0;
  color: #333;
}

.AdminPanel_quickStats__XYRK5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 30px;
}

.AdminPanel_statCard__swIdS {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 25px;
  border-radius: 8px;
  color: white;
}

.AdminPanel_statCard__swIdS h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 500;
  opacity: 0.9;
}

.AdminPanel_statValue__WNblo {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
}

/* Metrics Page */
.AdminPanel_metrics__TZm2B {
  max-width: 1400px;
  margin: 0 auto;
}

.AdminPanel_metricsHeader__sO9\+V {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.AdminPanel_metricsHeader__sO9\+V h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.AdminPanel_lastUpdated__ZpIId {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 20px;
}

.AdminPanel_lastUpdated__ZpIId svg {
  font-size: 14px;
}

.AdminPanel_metricsSection__B3GRy {
  margin-bottom: 40px;
}

.AdminPanel_metricsSectionTitle__-vp2w {
  font-size: 16px;
  font-weight: 600;
  color: #475569;
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminPanel_metricsGrid__uWtW3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.AdminPanel_metricCard__5TbZ6 {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.AdminPanel_metricCard__5TbZ6:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

.AdminPanel_metricIconWrapper__o1\+wg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.AdminPanel_metricIconWrapper__o1\+wg svg {
  font-size: 24px;
  color: white;
}

.AdminPanel_coinIcon__Y1Pi2 {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

.AdminPanel_metricContent__gB1aK {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
  min-width: 0;
}

.AdminPanel_metricLabel__ZD4OZ {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.AdminPanel_metricValue__2rulh {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -1px;
}

.AdminPanel_metricSubtext__GiT9r {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Metric Card Color Variants */
.AdminPanel_metricPrimary__99EDf .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.AdminPanel_metricPrimary__99EDf:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.AdminPanel_metricSuccess__riJRu .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.AdminPanel_metricSuccess__riJRu:hover {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.AdminPanel_metricInfo__FQ36Q .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.AdminPanel_metricInfo__FQ36Q:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.AdminPanel_metricWarning__Z7U7w .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.AdminPanel_metricWarning__Z7U7w:hover {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.AdminPanel_metricPurple__qiOtY .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.AdminPanel_metricPurple__qiOtY:hover {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.AdminPanel_metricTeal__UwxDC .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.AdminPanel_metricTeal__UwxDC:hover {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
}

.AdminPanel_metricDanger__wjUky .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.AdminPanel_metricDanger__wjUky:hover {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.AdminPanel_metricOrange__NuIWb .AdminPanel_metricIconWrapper__o1\+wg {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.AdminPanel_metricOrange__NuIWb:hover {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

/* Empty Metrics State */
.AdminPanel_emptyMetrics__GOGMg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  background: #f8fafc;
  border-radius: 20px;
  border: 2px dashed #e2e8f0;
}

.AdminPanel_emptyMetrics__GOGMg .AdminPanel_emptyIcon__xPRGF {
  font-size: 64px;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.AdminPanel_emptyMetrics__GOGMg h3 {
  font-size: 20px;
  font-weight: 600;
  color: #475569;
  margin: 0 0 8px 0;
}

.AdminPanel_emptyMetrics__GOGMg p {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}

/* Admins */
.AdminPanel_admins__rSqdr {
  max-width: 1200px;
  margin: 0 auto;
}

.AdminPanel_admins__rSqdr h2 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 32px 0;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.AdminPanel_admins__rSqdr h2::before {
  content: '';
  width: 5px;
  height: 32px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 3px;
}

.AdminPanel_section__V9Srk {
  margin-bottom: 40px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.AdminPanel_section__V9Srk h3 {
  color: #1e293b;
  margin: 0 0 24px 0;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

.AdminPanel_section__V9Srk h3::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 2px;
}

.AdminPanel_form__yDC21 {
  max-width: 100%;
}

.AdminPanel_formGroup__oUwtT {
  margin-bottom: 24px;
}

.AdminPanel_formGroup__oUwtT label {
  display: block;
  margin-bottom: 10px;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminPanel_formGroup__oUwtT input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  box-sizing: border-box;
  background: #ffffff;
  color: #1e293b;
  font-weight: 500;
  transition: all 0.3s ease;
}

.AdminPanel_formGroup__oUwtT input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.AdminPanel_formGroup__oUwtT input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.AdminPanel_formGroup__oUwtT small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.AdminPanel_btnPrimary__gzdyL,
.AdminPanel_btnDanger__h4vXH {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.AdminPanel_btnPrimary__gzdyL {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.AdminPanel_btnPrimary__gzdyL:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.AdminPanel_btnPrimary__gzdyL:active:not(:disabled) {
  transform: translateY(0);
}

.AdminPanel_btnPrimary__gzdyL:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #94a3b8;
  box-shadow: none;
}

.AdminPanel_btnDanger__h4vXH {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 13px;
  padding: 10px 18px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.AdminPanel_btnDanger__h4vXH:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.AdminPanel_btnDanger__h4vXH:active:not(:disabled) {
  transform: translateY(0);
}

.AdminPanel_btnDanger__h4vXH:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #94a3b8;
  box-shadow: none;
}

/* Table */
.AdminPanel_table__TEx-U {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 24px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.AdminPanel_table__TEx-U thead {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.AdminPanel_table__TEx-U th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e2e8f0;
}

.AdminPanel_table__TEx-U th:first-child {
  padding-left: 24px;
}

.AdminPanel_table__TEx-U th:last-child {
  padding-right: 24px;
}

.AdminPanel_table__TEx-U td {
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: #1e293b;
  font-weight: 500;
  vertical-align: middle;
}

.AdminPanel_table__TEx-U td:first-child {
  padding-left: 24px;
}

.AdminPanel_table__TEx-U td:last-child {
  padding-right: 24px;
}

.AdminPanel_table__TEx-U tbody tr {
  transition: all 0.2s ease;
}

.AdminPanel_table__TEx-U tbody tr:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #fefefe 100%);
}

.AdminPanel_table__TEx-U tbody tr:last-child td {
  border-bottom: none;
}

.AdminPanel_uid__ErUeb {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 12px;
  color: #475569;
  background: transparent;
  padding: 0;
  white-space: nowrap;
}

.AdminPanel_statusActive__FpQOX,
.AdminPanel_statusDisabled__eXjHB {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.AdminPanel_statusActive__FpQOX {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border: 1px solid #86efac;
}

.AdminPanel_statusDisabled__eXjHB {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Update Info */
.AdminPanel_updateInfo__SwTDl {
  margin-top: 20px;
  padding: 15px;
  background: #e8f5e9;
  border-radius: 6px;
  text-align: center;
}

.AdminPanel_updateInfo__SwTDl small {
  color: #2e7d32;
  font-size: 13px;
  font-weight: 500;
}

.AdminPanel_metricCard__5TbZ6 small {
  display: block;
  margin-top: 8px;
  color: #999;
  font-size: 12px;
}

/* Footer */
.AdminPanel_footer__CzsFK {
  margin-top: auto;
  padding-top: 1rem;
  text-align: center;
  border-top: 2px solid #e5e7eb;
}

/* Users Section */
.AdminPanel_usersSection__3dOVK {
  width: 100%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.AdminPanel_usersSection__3dOVK h2 {
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
}

.AdminPanel_searchForm__qK2mj {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.AdminPanel_searchContainer__oau3x {
  display: flex;
  align-items: stretch;
  max-width: 700px;
  width: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid #e2e8f0;
}

.AdminPanel_searchContainer__oau3x:focus-within {
  box-shadow:
    0 8px 32px rgba(99, 102, 241, 0.15),
    0 0 0 4px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
  background: linear-gradient(135deg, #ffffff 0%, #fefffe 100%);
}

.AdminPanel_searchInput__OHkKN {
  flex: 1 1;
  padding: 16px 16px;
  border: none;
  background: transparent;
  color: #1e293b;
  font-size: 16px;
  outline: none;
  font-family: inherit;
  font-weight: 500;
}

.AdminPanel_searchInput__OHkKN::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.AdminPanel_searchButton__\+C6lB {
  padding: 14px 36px;
  border: none;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.AdminPanel_searchButton__\+C6lB:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.AdminPanel_searchButton__\+C6lB:active:not(:disabled) {
  transform: translateY(0);
}

.AdminPanel_searchButton__\+C6lB:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #94a3b8;
  box-shadow: none;
}

.AdminPanel_searchResults__JiD12 {
  margin-top: 40px;
  width: 100%;
  max-width: 900px;
}

.AdminPanel_searchResults__JiD12 h3 {
  color: #1e293b;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.AdminPanel_searchResults__JiD12 h3::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 2px;
}

.AdminPanel_usersList__OCAyX {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.AdminPanel_userCard__0iWms {
  background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.AdminPanel_userCard__0iWms::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.AdminPanel_userCard__0iWms:hover {
  border-color: #c7d2fe;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.12);
}

.AdminPanel_userCard__0iWms:hover::before {
  opacity: 1;
}

.AdminPanel_userCardHeader__pOm2G {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.AdminPanel_userAvatar__48gNB {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.AdminPanel_userCardInfo__zZDEP {
  flex: 1 1;
  min-width: 0;
}

.AdminPanel_userCardName__z-a0z {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.3px;
}

.AdminPanel_userCardEmail__N3bAz {
  font-size: 14px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.AdminPanel_userCardMeta__EyAdM {
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

.AdminPanel_userCardMeta__EyAdM .AdminPanel_uid__ErUeb {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  letter-spacing: 0.3px;
}

.AdminPanel_noResults__lQeN6 {
  text-align: center;
  padding: 60px 40px;
  color: #64748b;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 20px;
  border: 2px dashed #e2e8f0;
}

.AdminPanel_noResults__lQeN6 p {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

/* User Detail View */
.AdminPanel_userDetailHeader__GWu6u {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.AdminPanel_backButton__N2M3c {
  padding: 10px 20px;
  border: 2px solid #e5e7eb;
  background: white;
  color: #666;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.AdminPanel_backButton__N2M3c:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f0f9ff;
}

.AdminPanel_userDetailCard__ip-a\+ {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 30px;
  max-width: 800px;
}

.AdminPanel_detailSection__47Zil {
  margin-bottom: 30px;
}

.AdminPanel_detailSection__47Zil:last-child {
  margin-bottom: 0;
}

.AdminPanel_detailSection__47Zil h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f3f4f6;
}

.AdminPanel_detailGrid__Sjgy7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.AdminPanel_detailItem__uXuUI {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.AdminPanel_detailItem__uXuUI label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminPanel_detailItem__uXuUI span {
  font-size: 15px;
  color: #333;
  word-break: break-word;
}

/* ========================================
   Professional User Detail View Styles
   ======================================== */

.AdminPanel_userDetailContainer__9N6RM {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.AdminPanel_backButton__N2M3c {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.AdminPanel_backButton__N2M3c:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #1e293b;
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* User Profile Header */
.AdminPanel_userProfileHeader__oqpaE {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.AdminPanel_userAvatarLarge__qvBXr {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 42px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: -1px;
}

.AdminPanel_userHeaderInfo__jft2q {
  flex: 1 1;
  min-width: 0;
}

.AdminPanel_userDisplayName__qlCyC {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.AdminPanel_userUsername__YekXs {
  display: inline-block;
  width: 8vw;
  font-size: 16px;
  color: #6366f1;
  font-weight: 600;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  padding: 6px 14px;
  border-radius: 20px;
  text-align: center;
}

.AdminPanel_userQuickInfo__qCudq {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.AdminPanel_quickInfoItem__pYUuO {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_quickInfoItem__pYUuO svg {
  color: #94a3b8;
  font-size: 16px;
}

/* Info Cards Grid */
.AdminPanel_infoCardsGrid__WyztU {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.AdminPanel_infoCard__rm0Jo {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.AdminPanel_infoCard__rm0Jo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.AdminPanel_infoCardHeader__nIb1x {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.AdminPanel_infoCardHeader__nIb1x h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.3px;
}

/* Date Filter Controls */
.AdminPanel_dateFilterControls__xjAT\+ {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.AdminPanel_dateFilterGroup__6iAQD {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AdminPanel_dateFilterGroup__6iAQD label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.AdminPanel_dateFilterInput__8M2Co {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #1e293b;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.AdminPanel_dateFilterInput__8M2Co:hover {
  border-color: #cbd5e1;
}

.AdminPanel_dateFilterInput__8M2Co:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.AdminPanel_clearFilterBtn__CpU-O {
  padding: 8px 14px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.AdminPanel_clearFilterBtn__CpU-O:hover {
  background: #e2e8f0;
  color: #475569;
}

.AdminPanel_infoCardIcon__wL8Og {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconGreen__XZ7wv {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconPurple__xStjG {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.AdminPanel_infoCardContent__w8pcB {
  padding: 24px;
}

.AdminPanel_infoRow__S0JkQ {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}

.AdminPanel_infoRow__S0JkQ:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.AdminPanel_infoRow__S0JkQ:first-child {
  padding-top: 0;
}

.AdminPanel_infoLabel__z5nUy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminPanel_infoLabel__z5nUy svg {
  font-size: 14px;
  color: #94a3b8;
}

.AdminPanel_infoValue__DKX24 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

.AdminPanel_uidValue__PZgx3 {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 6px 10px;
  border-radius: 6px;
}

.AdminPanel_planValue__JUgs9 {
  text-transform: capitalize;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

/* Credits Display */
.AdminPanel_creditsDisplay__etutP {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: 16px;
  margin-bottom: 20px;
  border: 1px solid #a7f3d0;
}

.AdminPanel_creditsIcon__yv1BI {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  padding: 10px;
}

.AdminPanel_creditsInfo__iiiOV {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.AdminPanel_creditsLabel__spvtW {
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminPanel_creditsValue__ClQ9M {
  font-size: 28px;
  font-weight: 800;
  color: #065f46;
  letter-spacing: -1px;
}

/* Subscription Status */
.AdminPanel_subscriptionStatus__H6qYV {
  margin-bottom: 20px;
}

.AdminPanel_statusBadgeActive__RU-Gx,
.AdminPanel_statusBadgeInactive__MtuZS {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
}

.AdminPanel_statusBadgeActive__RU-Gx {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border: 1px solid #86efac;
}

.AdminPanel_statusBadgeActive__RU-Gx svg {
  color: #22c55e;
}

.AdminPanel_statusBadgeInactive__MtuZS {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.AdminPanel_statusBadgeInactive__MtuZS svg {
  color: #ef4444;
}

.AdminPanel_noSubscription__ZNjLg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: #94a3b8;
  text-align: center;
}

.AdminPanel_noSubscription__ZNjLg svg {
  font-size: 40px;
  color: #cbd5e1;
}

.AdminPanel_noSubscription__ZNjLg span {
  font-size: 14px;
  font-weight: 600;
}

/* Loading and Empty States */
.AdminPanel_loadingState__qmxwD {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 80px 40px;
  color: #64748b;
}

.AdminPanel_loadingSpinner__ykBjC {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: AdminPanel_spin__gRUo7 1s linear infinite;
}

@keyframes AdminPanel_spin__gRUo7 {
  to {
    transform: rotate(360deg);
  }
}

.AdminPanel_noDataState__yKDJj {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  color: #94a3b8;
  font-size: 16px;
}

/* Full Width Card */
.AdminPanel_fullWidthCard__Ye2PH {
  grid-column: 1 / -1;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  margin-top: 24px;
}

.AdminPanel_fullWidthCard__Ye2PH:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

/* Additional Icon Colors */
.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconBlue__wvPYo {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconOrange__dwiMy {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconPink__FE8LA {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconTeal__Wi1bE {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconGray__RsB-w {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

/* Graph Container */
.AdminPanel_graphContainer__OZI0N {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 24px;
}

.AdminPanel_subscriptionGraph__WUNxE {
  width: 100%;
  height: 250px;
}

/* Graph Legend */
.AdminPanel_graphLegend__K74h\+ {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.AdminPanel_legendItem__EB04J {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_legendDotPositive__0lv\+S,
.AdminPanel_legendDotNegative__glN5e,
.AdminPanel_legendDotNeutral__f\+ijE {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.AdminPanel_legendDotPositive__0lv\+S {
  background: #10b981;
}

.AdminPanel_legendDotNegative__glN5e {
  background: #ef4444;
}

.AdminPanel_legendDotNeutral__f\+ijE {
  background: #6366f1;
}

/* Credit Timeline List */
.AdminPanel_creditTimelineList__PorSP {
  margin-top: 24px;
  padding-bottom: 24px;
}

.AdminPanel_creditTimelineList__PorSP .AdminPanel_timelineHeader__CMW6R {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

/* Timeline Amount Colors */
.AdminPanel_timelineAmount__ORTSt {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}

.AdminPanel_amountPositive__-8CeG {
  color: #059669;
}

.AdminPanel_amountNegative__yAtx9 {
  color: #dc2626;
}

.AdminPanel_timelineDescription__rrAmv {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.AdminPanel_timelineBalance__c2gJM {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 12px;
}

.AdminPanel_modelBadge__rg1XH {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Category Colors for Timeline Dots */
.AdminPanel_categorySystem__Njt25 {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

.AdminPanel_categorySubscription__avTtQ {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.AdminPanel_categoryPurchase__rnFJG {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.AdminPanel_categoryPositive__ehwPG {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.AdminPanel_categoryNegative__QrEsO {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.AdminPanel_categoryNeutral__mDgRV {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
}

/* History Timeline */
.AdminPanel_historyTimeline__j6uD1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Scrollbar styling for timeline */
.AdminPanel_historyTimeline__j6uD1::-webkit-scrollbar {
  width: 6px;
}

.AdminPanel_historyTimeline__j6uD1::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.AdminPanel_historyTimeline__j6uD1::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.AdminPanel_historyTimeline__j6uD1::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.AdminPanel_timelineItem__-HjO5 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.AdminPanel_timelineItem__-HjO5:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.AdminPanel_timelineDot__UDQjI {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.AdminPanel_upgradeIcon__QTTxi {
  color: #22c55e;
}

.AdminPanel_downgradeIcon__Dj0\+m {
  color: #ef4444;
}

.AdminPanel_timelineContent__Yjgow {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AdminPanel_timelineContent__Yjgow .AdminPanel_timelineHeader__CMW6R {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.AdminPanel_actionBadge__TokMI {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: -webkit-fit-content;
  width: fit-content;
}

.AdminPanel_actionPositive__2iH0P {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border: 1px solid #86efac;
}

.AdminPanel_actionNegative__qu8c8 {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.AdminPanel_actionNeutral__RTJzK {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
  border: 1px solid #cbd5e1;
}

.AdminPanel_timelineDetails__FRDhU {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.AdminPanel_creditsAdded__O8AyQ {
  font-size: 16px;
  font-weight: 700;
  color: #059669;
}

.AdminPanel_planBadge__Ct0xy {
  padding: 4px 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.AdminPanel_amountPaid__0Ah1t {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.AdminPanel_timelineDate__gv7H- {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

/* Purchase List */
.AdminPanel_purchaseList__gfqdZ {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.AdminPanel_purchaseItem__U86L- {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.AdminPanel_purchaseItem__U86L-:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.AdminPanel_purchaseIcon__i9F4D {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.AdminPanel_purchaseInfo__N60av {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.AdminPanel_purchaseAmount__RmIg8 {
  font-size: 16px;
  font-weight: 700;
  color: #059669;
}

.AdminPanel_purchaseDisplay__xgWN8 {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_purchaseDate__5ufqr {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

/* Stats Grid */
.AdminPanel_statsGrid__DboxK {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.AdminPanel_statBox__4OK9L {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  text-align: center;
}

.AdminPanel_statNumber__U4Nyv {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -1px;
}

.AdminPanel_statLabel__LIiAh {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Raw Data Container */
.AdminPanel_rawDataContainer__JSwqb {
  max-height: 400px;
  overflow: auto;
  background: #0f172a;
  border-radius: 12px;
  padding: 20px;
}

.AdminPanel_rawDataPre__6xKQ0 {
  margin: 0;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Purchase Grid */
.AdminPanel_purchaseGrid__aFy8- {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.AdminPanel_shopItemCard__pmSAE {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.AdminPanel_shopItemCard__pmSAE:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.AdminPanel_shopItemIcon__20iBK {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.AdminPanel_shopItemInfo__r9T6H {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.AdminPanel_shopItemName__TtTN3 {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AdminPanel_shopItemType__yynbN {
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
  text-transform: capitalize;
}

.AdminPanel_shopItemMeta__NAW-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.AdminPanel_shopItemPrice__qlGr2 {
  font-size: 14px;
  font-weight: 700;
  color: #059669;
}

.AdminPanel_shopItemDate__soG\+z {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.AdminPanel_listingStats__0\+0kb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* Empty State */
.AdminPanel_emptyState__yJ26V {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: #94a3b8;
  text-align: center;
}

.AdminPanel_emptyState__yJ26V svg {
  font-size: 48px;
  color: #cbd5e1;
}

.AdminPanel_emptyState__yJ26V span {
  font-size: 14px;
  font-weight: 600;
}

/* Mini Loading */
.AdminPanel_miniLoading__EoP8V {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

/* Graph Point Interactions */
.AdminPanel_graphPoint__GkAyR {
  cursor: pointer;
}

/* Transaction Detail Modal */
.AdminPanel_modalOverlay__sb3WS {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: AdminPanel_fadeIn__-0y\+g 0.2s ease;
}

@keyframes AdminPanel_fadeIn__-0y\+g {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.AdminPanel_transactionModal__Wqt4x {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: AdminPanel_slideUp__q9IkP 0.25s ease;
  display: flex;
  flex-direction: column;
}

@keyframes AdminPanel_slideUp__q9IkP {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.AdminPanel_modalHeader__k9zuB {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  flex-shrink: 0;
}

.AdminPanel_modalIcon__OXKim {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.AdminPanel_modalTitleGroup__Ndx9C {
  flex: 1 1;
  min-width: 0;
}

.AdminPanel_modalTitle__e57ZQ {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.AdminPanel_modalDate__vMc2d {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_modalClose__i7s15 {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.AdminPanel_modalClose__i7s15:hover {
  background: #f1f5f9;
  color: #64748b;
}

.AdminPanel_modalBody__90Ptj {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

.AdminPanel_modalAmountDisplay__w-BzY {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  margin-bottom: 24px;
}

.AdminPanel_modalAmount__HA3f4 {
  font-size: 32px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: -1px;
}

.AdminPanel_modalBalance__ALw8B {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_modalDetails__ZZjvk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.AdminPanel_modalDetailRow__i8zkt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 10px;
}

.AdminPanel_modalDetailLabel__fhXlk {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_modalDetailValue__XN-b7 {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
}

.AdminPanel_modalRawData__3RDCu {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.AdminPanel_modalRawData__3RDCu h4 {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 12px 0;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0 {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: auto;
  font-size: 11px;
  background: #0f172a;
  border-radius: 8px;
  padding: 16px;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Scrollbar styling for modal raw data */
.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 3px;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Responsive Design */
@media (max-width: 768px) {
  .AdminPanel_header__Rgz-H {
    flex-direction: column;
    gap: 16px;
  }

  .AdminPanel_titleSection__6jq\+A {
    min-width: auto;
    align-items: center;
  }

  .AdminPanel_centerSection__D6GJL {
    order: 3;
    width: 100%;
  }

  .AdminPanel_tabs__So4bK {
    width: 100%;
    justify-content: center;
  }

  .AdminPanel_headerRight__Qmq\+y {
    min-width: auto;
    justify-content: center;
    order: 2;
  }

  .AdminPanel_userDetails__EQRkd {
    align-items: center;
  }

  /* Metrics Responsive */
  .AdminPanel_metricsHeader__sO9\+V {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .AdminPanel_metricsGrid__uWtW3 {
    grid-template-columns: 1fr;
  }

  .AdminPanel_metricCard__5TbZ6 {
    padding: 20px;
  }

  .AdminPanel_metricValue__2rulh {
    font-size: 28px;
  }

  .AdminPanel_metricIconWrapper__o1\+wg {
    width: 44px;
    height: 44px;
  }

  .AdminPanel_metricIconWrapper__o1\+wg svg {
    font-size: 20px;
  }

  .AdminPanel_infoCardHeader__nIb1x {
    flex-wrap: wrap;
  }

  .AdminPanel_dateFilterControls__xjAT\+ {
    width: 100%;
    margin-top: 12px;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 10px;
  }

  .AdminPanel_dateFilterGroup__6iAQD {
    flex: 1 1;
    min-width: 120px;
  }

  .AdminPanel_dateFilterInput__8M2Co {
    flex: 1 1;
    min-width: 100px;
  }

  .AdminPanel_userProfileHeader__oqpaE {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .AdminPanel_userAvatarLarge__qvBXr {
    width: 80px;
    height: 80px;
    font-size: 32px;
    border-radius: 20px;
  }

  .AdminPanel_userDisplayName__qlCyC {
    font-size: 24px;
  }

  .AdminPanel_userQuickInfo__qCudq {
    justify-content: center;
  }

  .AdminPanel_infoCardsGrid__WyztU {
    grid-template-columns: 1fr;
  }

  .AdminPanel_quickInfoItem__pYUuO {
    font-size: 12px;
  }

  .AdminPanel_infoValue__DKX24 {
    max-width: 50%;
  }

  .AdminPanel_statsGrid__DboxK {
    grid-template-columns: 1fr;
  }

  .AdminPanel_purchaseGrid__aFy8- {
    grid-template-columns: 1fr;
  }

  .AdminPanel_timelineItem__-HjO5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .AdminPanel_shopItemCard__pmSAE {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .AdminPanel_shopItemMeta__NAW-7 {
    align-items: flex-start;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
  }
}

/* Cluster Modal Styles */
.AdminPanel_clusterModal__LA0Hj {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: AdminPanel_slideUp__q9IkP 0.25s ease;
  display: flex;
  flex-direction: column;
}

.AdminPanel_clusterModalWithDetail__1OvvH {
  max-width: 1400px;
}

.AdminPanel_clusterModalHeader__DDAwm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  flex-shrink: 0;
}

.AdminPanel_clusterModalTitle__RF0nY h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.AdminPanel_clusterCount__XoINA {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  background: #ffffff;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
}

.AdminPanel_clusterModalBody__oX1Ts {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  min-height: 0;
}

.AdminPanel_clusterSubGraph__LFnT5 {
  flex: 1 1;
  padding: 24px;
  overflow-y: auto;
  border-right: 1px solid #e2e8f0;
}

.AdminPanel_subGraphTitle__4MonA {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.AdminPanel_subGraphSvg__HoY1- {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.AdminPanel_clusterStats__Pu1eD {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-top: 20px;
}

.AdminPanel_clusterStat__8VMbj {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AdminPanel_clusterStatLabel__prv8J {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminPanel_clusterStatValue__RLWS\+ {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.AdminPanel_clusterDetailPanel__AiFhM {
  width: 400px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 24px;
  overflow-y: auto;
  flex-shrink: 0;
  animation: AdminPanel_slideInRight__OeqsN 0.3s ease;
}

@keyframes AdminPanel_slideInRight__OeqsN {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.AdminPanel_detailPanelHeader__DN24M {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.AdminPanel_detailIcon__quLVs {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}

.AdminPanel_detailTitleGroup__uZnu2 {
  flex: 1 1;
  min-width: 0;
}

.AdminPanel_detailTitleGroup__uZnu2 h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.AdminPanel_detailDate__Yx8eZ {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_detailAmountDisplay__-MZW4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}

.AdminPanel_detailAmount__7DYbP {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.AdminPanel_detailBalance__ow\+tR {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.AdminPanel_detailInfo__IzKp5 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.AdminPanel_detailRow__N0pBD {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.AdminPanel_detailLabel__UjjLv {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.AdminPanel_detailValue__E8Lno {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .AdminPanel_clusterModal__LA0Hj {
    max-width: 95vw;
  }

  .AdminPanel_clusterModalBody__oX1Ts {
    flex-direction: column;
  }

  .AdminPanel_clusterSubGraph__LFnT5 {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .AdminPanel_clusterDetailPanel__AiFhM {
    width: 100%;
  }
}