/* src/styles/brand.css
   Global Concept Canvas brand tokens — the app-wide mirror of the landing
   page's --lp-* palette (see Landing Page/LandingPage.module.css).
   Light values live on :root (the app's default theme); body.dark-theme
   switches every token to the landing page's dark palette. All UI outside
   the workflow nodes styles against these tokens so the whole product
   reads like the home page. Node visuals keep using --node-* (themes.css)
   and are intentionally not covered here. */

:root {
  /* Surfaces */
  --cc-bg: #f7f2ef;
  --cc-panel: rgba(255, 255, 255, 0.8);
  --cc-panel-strong: #ffffff;
  --cc-panel-hover: rgba(255, 255, 255, 0.95);
  --cc-overlay: rgba(38, 32, 32, 0.45);

  /* Text */
  --cc-text-hi: #262020;
  --cc-text-mid: rgba(38, 32, 32, 0.75);
  --cc-text-low: rgba(38, 32, 32, 0.5);

  /* Borders */
  --cc-border: rgba(120, 95, 95, 0.28);
  --cc-border-soft: rgba(120, 95, 95, 0.16);

  /* Brand accent (dusty rose / deep maroon in light mode) */
  --cc-accent: #e6c7c7;
  --cc-accent-text: #a35252;
  --cc-accent-border: rgba(163, 82, 82, 0.55);
  --cc-accent-soft: rgba(163, 82, 82, 0.45);
  --cc-accent-faint: rgba(163, 82, 82, 0);
  --cc-accent-dot-glow: 0 0 8px rgba(163, 82, 82, 0.45);
  --cc-glow: rgba(163, 82, 82, 0.12);

  /* Chips, icons, shadows */
  --cc-icon-chip: rgba(38, 32, 32, 0.06);
  --cc-shadow: 0 12px 32px rgba(90, 60, 60, 0.14);
  --cc-shadow-soft: 0 4px 14px rgba(90, 60, 60, 0.1);

  /* Controls */
  --cc-input-bg: #ffffff;
  --cc-input-border: rgba(120, 95, 95, 0.28);
  --cc-input-text: #262020;
  --cc-btn-primary-bg: #e6c7c7;
  --cc-btn-primary-bg-hover: #f2dcdc;
  --cc-btn-primary-text: #1a1a1a;

  /* Status */
  --cc-success-text: #3c6b3a;
  --cc-success-bg: rgba(90, 140, 90, 0.12);
  --cc-success-border: rgba(90, 140, 90, 0.4);
  --cc-error-text: #a04545;
  --cc-error-bg: rgba(160, 69, 69, 0.1);
  --cc-error-border: rgba(160, 69, 69, 0.35);
  --cc-warning-text: #8a6a1f;
  --cc-warning-bg: rgba(180, 140, 40, 0.14);
  --cc-warning-border: rgba(180, 140, 40, 0.4);

  /* Tier badges */
  --cc-pro-text: #3a5a7a;
  --cc-pro-bg: rgba(90, 120, 160, 0.12);
  --cc-pro-border: rgba(90, 120, 160, 0.4);
  --cc-premium-text: #8a6a1f;
  --cc-premium-bg: rgba(180, 140, 40, 0.14);
  --cc-premium-border: rgba(180, 140, 40, 0.4);

  /* Typography & geometry */
  --cc-font-body: 'Urbanist', sans-serif;
  --cc-font-mono: 'Inconsolata', monospace;
  --cc-radius: 14px;
  --cc-radius-sm: 10px;
  --cc-radius-pill: 999px;
}

/* :root:has() keeps html-level consumers (e.g. overscroll backgrounds set on
   documentElement) in sync with the body-class theme toggle. */
body.dark-theme,
:root:has(body.dark-theme) {
  /* Surfaces */
  --cc-bg: #000000;
  --cc-panel: rgba(30, 30, 35, 0.6);
  --cc-panel-strong: rgba(12, 12, 15, 0.8);
  --cc-panel-hover: rgba(40, 40, 46, 0.75);
  --cc-overlay: rgba(0, 0, 0, 0.65);

  /* Text */
  --cc-text-hi: rgba(255, 255, 255, 0.95);
  --cc-text-mid: rgba(255, 255, 255, 0.7);
  --cc-text-low: rgba(255, 255, 255, 0.45);

  /* Borders */
  --cc-border: rgba(100, 100, 110, 0.5);
  --cc-border-soft: rgba(100, 100, 110, 0.25);

  /* Brand accent (dusty rose on dark) */
  --cc-accent: #e6c7c7;
  --cc-accent-text: #e6c7c7;
  --cc-accent-border: rgba(230, 199, 199, 0.7);
  --cc-accent-soft: rgba(230, 199, 199, 0.5);
  --cc-accent-faint: rgba(230, 199, 199, 0);
  --cc-accent-dot-glow: 0 0 8px rgba(230, 199, 199, 0.8);
  --cc-glow: rgba(230, 199, 199, 0.12);

  /* Chips, icons, shadows */
  --cc-icon-chip: rgba(255, 255, 255, 0.08);
  --cc-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  --cc-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.4);

  /* Controls */
  --cc-input-bg: rgba(12, 12, 15, 0.8);
  --cc-input-border: rgba(100, 100, 110, 0.5);
  --cc-input-text: rgba(255, 255, 255, 0.95);
  --cc-btn-primary-bg: #e6c7c7;
  --cc-btn-primary-bg-hover: #f2dcdc;
  --cc-btn-primary-text: #1a1a1a;

  /* Status */
  --cc-success-text: #c9e6c7;
  --cc-success-bg: rgba(90, 140, 90, 0.15);
  --cc-success-border: rgba(150, 200, 150, 0.4);
  --cc-error-text: #e6c7c7;
  --cc-error-bg: rgba(140, 90, 90, 0.15);
  --cc-error-border: rgba(200, 150, 150, 0.4);
  --cc-warning-text: #d9b96a;
  --cc-warning-bg: rgba(217, 185, 106, 0.15);
  --cc-warning-border: rgba(217, 185, 106, 0.35);

  /* Tier badges */
  --cc-pro-text: #9fb3c8;
  --cc-pro-bg: rgba(130, 150, 175, 0.15);
  --cc-pro-border: rgba(159, 179, 200, 0.35);
  --cc-premium-text: #d9b96a;
  --cc-premium-bg: rgba(217, 185, 106, 0.15);
  --cc-premium-border: rgba(217, 185, 106, 0.35);
}

/* 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: var(--cc-font-mono);
  -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: var(--cc-font-mono);
}

/* --- 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;
}

.react-flow__node:focus-visible {
  outline: 2px solid var(--cc-accent-border);
  outline: 2px solid var(--accent-color, var(--cc-accent-border));
  outline-offset: 2px;
}

/* 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(--cc-panel-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--cc-text-hi);
  border-radius: 20%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--cc-shadow-soft);
  border: 1px solid var(--cc-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(--cc-accent);
  color: var(--cc-btn-primary-text);
  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: var(--cc-panel-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--cc-radius);
  padding: 10px;
  box-shadow: var(--cc-shadow);
  border: 1px solid var(--cc-border);
  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: var(--cc-border);
  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: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border: 1px solid var(--cc-border-soft);
}

.OngoingRequestsPanel_gridCell__ooEzP:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--cc-accent-soft);
  box-shadow: 0 0 10px var(--hover-color, var(--cc-accent-soft)); /* 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 */

  /* 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 */
}

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 */
}

/* 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;
}

/* Column stack for the floating bars below the node, so the error/status bar
   and the image indicator flow vertically instead of overlapping at the same
   absolute offset. Bars inside become static; their expand animation and
   color styles still apply. */
.InputNode_floatingBarsStack__7lrb3 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  pointer-events: none;
}

.InputNode_floatingBarsStack__7lrb3 .InputNode_floatingMessageBar__h2u99 {
  position: static;
  bottom: auto;
}

/* Floating Image Input Indicator - stacked below any error bar by the
   floatingBarsStack container */
.InputNode_floatingImageIndicator__LWnQI {
}

.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: var(--cc-overlay); /* Brand overlay (adapts light/dark) */
  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: var(--cc-overlay); /* Brand overlay, no blur on Electron */
  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: var(--cc-panel-strong);
  color: var(--cc-text-hi);
  padding: 25px 30px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  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(--cc-text-mid);
  font-family: var(--cc-font-mono);
  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(--cc-error-text);
}

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

/* --- Rounded variant (single-panel, theme-variable styling) --- */
.Modal_modalContentRounded__m-rP6 {
  color: var(--cc-text-hi);
  padding: 25px 30px;
  border-radius: 32px;
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  background-color: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  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_modalContentRounded__m-rP6 {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Split variant: two-panel content wrapper --- */
.Modal_modalContentWrapper__\+7Ivh {
  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);
}

.Modal_modalOverlay__yucgq.Modal_open__b9XZI .Modal_modalContentWrapper__\+7Ivh {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.Modal_sideContainer__nWV7n {
  flex: 1 1; /* Each container takes up equal space */
  background-color: var(--cc-panel-strong);
  color: var(--cc-text-hi); /* Token text adapts to light/dark */
  padding: 25px 30px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  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 */
}

.Modal_sideContainer__nWV7n::-webkit-scrollbar {
  width: 6px;
}
.Modal_sideContainer__nWV7n::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}
.Modal_sideContainer__nWV7n::-webkit-scrollbar-thumb {
  background-color: var(--cc-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 — unified to the dusty-rose brand accent
   (previously a blue/pink/green/yellow/purple rainbow). Slight variations
   keep depth while staying in the warm rose band. */
.Modal_pastelFilter1__CmDt7 {
  /* Rose, light */
  filter: grayscale(80%) brightness(160%) sepia(55%) hue-rotate(300deg)
    saturate(230%) contrast(90%);
}

.Modal_pastelFilter2__vxLiv {
  /* Rose, pink */
  filter: grayscale(75%) brightness(150%) sepia(55%) hue-rotate(305deg)
    saturate(250%) contrast(90%);
}

.Modal_pastelFilter3__3TeZR {
  /* Rose, warm */
  filter: grayscale(78%) brightness(165%) sepia(50%) hue-rotate(295deg)
    saturate(210%) contrast(90%);
}

.Modal_pastelFilter4__7jWkc {
  /* Rose, soft */
  filter: grayscale(70%) brightness(170%) sepia(60%) hue-rotate(310deg)
    saturate(190%) contrast(95%);
}

.Modal_pastelFilter5__Tq1Ky {
  /* Rose, deep */
  filter: grayscale(72%) brightness(155%) sepia(55%) hue-rotate(300deg)
    saturate(240%) contrast(90%);
}

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

  .Modal_modalContentWrapper__\+7Ivh {
    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 */
  .Modal_sideContainer__nWV7n:first-child {
    display: none;
  }

  /* Make the right panel (form) take full width and height */
  .Modal_sideContainer__nWV7n: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 */
  .Modal_sideContainer__nWV7n input,
  .Modal_sideContainer__nWV7n textarea,
  .Modal_sideContainer__nWV7n select {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px;
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .Modal_sideContainer__nWV7n 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 */
  .Modal_sideContainer__nWV7n h2,
  .Modal_sideContainer__nWV7n h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

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

  .Modal_modalContentWrapper__\+7Ivh {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
  }

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

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

/* src/components/SchemaBuilder.module.css */
.SchemaBuilder_builderContainer__K7QYd {
  padding: 15px;
  background-color: var(--cc-panel); /* Use a slightly different bg */
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-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(--cc-border-soft);
  border-radius: 6px;
  background-color: var(
    --cc-icon-chip
  ); /* Slightly different bg for nested sections */
}

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

.SchemaBuilder_fieldBlock__Cicu6 {
  background-color: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  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: var(--cc-shadow-soft);
}

.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(--cc-accent-text);
  background-color: var(--cc-icon-chip);
  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(--cc-accent-text); /* 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(--cc-text-mid);
}

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

.SchemaBuilder_fieldRow__eVFYh input:not([type='checkbox']):focus,
.SchemaBuilder_fieldRow__eVFYh textarea:focus,
.SchemaBuilder_fieldRow__eVFYh select:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.SchemaBuilder_removeButton__kL1xE {
  grid-column: 3 / 4;
  grid-row: 1 / 2; /* Place in top right */
  background: none;
  border: none;
  color: var(--cc-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: 1px solid var(--cc-btn-primary-bg);
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-radius: var(--cc-radius-sm);
  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(--cc-btn-primary-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(--cc-border);
  border-radius: 10px;
  border: 2px solid var(--cc-panel);
}

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

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

/* 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 var(--cc-border);
}

.UniversalTextEditor_editorHeader__qFp96 {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid var(--cc-border);
}

.UniversalTextEditor_editorHeader__qFp96 h3 {
  margin: 0 0 15px 0;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
  font-size: 1.2rem;
}

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

.UniversalTextEditor_toolbarButton__XVLbq {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  padding: 8px 10px;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.UniversalTextEditor_toolbarButton__XVLbq:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.UniversalTextEditor_toolbarDivider__BnGYw {
  width: 1px;
  height: 20px;
  background: var(--cc-border);
  margin: 0 5px;
}

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

.UniversalTextEditor_textEditor__wyhrO {
  flex: 1 1;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-input-text);
  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: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.UniversalTextEditor_textEditor__wyhrO::placeholder {
  color: var(--cc-text-low);
}

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

.UniversalTextEditor_textStats__VomDN {
  display: flex;
  gap: 20px;
  color: var(--cc-text-low);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
}

.UniversalTextEditor_cancelButton__FuEdV:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.UniversalTextEditor_saveButton__3qdr8 {
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-weight: 700;
}

.UniversalTextEditor_saveButton__3qdr8:hover {
  background: var(--cc-btn-primary-bg-hover);
}

.UniversalTextEditor_closeButton__mkSlC {
  padding: 8px 16px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-panel);
  color: var(--cc-text-mid);
}

.UniversalTextEditor_closeButton__mkSlC:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.UniversalTextEditor_readOnlyEditor__BUYiC {
  background: var(--cc-bg) !important;
  color: var(--cc-text-low) !important;
  cursor: default;
}

.UniversalTextEditor_readOnlyEditor__BUYiC:focus {
  border-color: var(--cc-border) !important;
  box-shadow: none !important;
}

.UniversalTextEditor_settingsHeader__GtDbf {
  padding: 20px 0 10px 0;
  border-bottom: 1px solid var(--cc-border);
}

.UniversalTextEditor_settingsHeader__GtDbf h3 {
  margin: 0;
  color: var(--cc-text-hi);
  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: var(--cc-text-mid);
  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 var(--cc-border);
}

.UniversalTextEditor_settingLabel__qxJRM {
  color: var(--cc-text-mid);
  font-size: 14px;
  font-family: 'Inconsolata', monospace;
}

.UniversalTextEditor_settingValue__RGXQ8 {
  color: var(--cc-text-hi);
  font-size: 14px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
}

.UniversalTextEditor_modelSelector__rYD4P {
  margin-bottom: 10px;
}

.UniversalTextEditor_modelSelect__Y5PNq {
  width: 100%;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-input-text);
  padding: 8px 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.UniversalTextEditor_modelSelect__Y5PNq:focus {
  border-color: var(--cc-accent-border);
}

.UniversalTextEditor_modelSelect__Y5PNq option {
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
}

.UniversalTextEditor_modelDescription__QYudI {
  color: var(--cc-text-low);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  font-family: 'Inconsolata', monospace;
}

.UniversalTextEditor_modelCount__RAulg {
  color: var(--cc-text-mid);
  font-weight: 500;
}

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

.UniversalTextEditor_presetButton__K4mY1 {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  padding: 12px 15px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

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

.UniversalTextEditor_displayOption__vuMWQ {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  padding: 10px 15px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.UniversalTextEditor_displayOption__vuMWQ.UniversalTextEditor_active__wHqlr {
  background: var(--cc-accent);
  border-color: var(--cc-accent-border);
  color: var(--cc-btn-primary-text);
  font-weight: 700;
}

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

.UniversalTextEditor_themeOption__S\+5Yg {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  padding: 10px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.UniversalTextEditor_themeOption__S\+5Yg.UniversalTextEditor_active__wHqlr {
  background: var(--cc-accent);
  border-color: var(--cc-accent-border);
  color: var(--cc-btn-primary-text);
  font-weight: 700;
}

.UniversalTextEditor_themePreview__ZuiON {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--cc-border);
  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: var(--cc-accent-border) !important;
  box-shadow: 0 0 0 3px var(--cc-glow) !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: var(--cc-text-hi);
  min-width: 500px;
  max-width: 800px;
  border-radius: var(--cc-radius);
  overflow: hidden;
}

.UniversalModalSelector_modalTitle__Q1q83 {
  margin: 0 0 20px 0;
  color: var(--cc-text-hi) !important;
  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: var(--cc-icon-chip); /* Subtle background for grid area */
  border-radius: var(--cc-radius);
}

/* 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: var(--cc-border);
  border-radius: 10px;
}

.UniversalModalSelector_categoryHeader__KQ0gV {
  grid-column: 1 / -1;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cc-text-mid);
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cc-border);
  font-family: 'Inconsolata', monospace;
}
.UniversalModalSelector_categoryHeader__KQ0gV:first-of-type {
  margin-top: 0;
}

.UniversalModalSelector_optionButton__swGLF {
  padding: 12px 15px;
  border: 1px solid var(--cc-border);
  background-color: var(--cc-panel);
  color: var(--cc-text-hi);
  cursor: pointer;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-shadow-soft);
}

.UniversalModalSelector_optionButton__swGLF:hover {
  border-color: var(--cc-accent-border);
  background-color: var(--cc-panel-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH {
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-accent-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: var(--cc-text-mid);
}

.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: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--cc-text-hi);
}

.UniversalModalSelector_novitaIcon__lTfdy {
  background-color: var(--cc-icon-chip);
}

.UniversalModalSelector_aimlIcon__WPeYw {
  background-color: var(--cc-icon-chip);
}

.UniversalModalSelector_unknownIcon__wIZr\+ {
  background-color: var(--cc-icon-chip);
}

.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: var(--cc-text-mid);
  margin-top: 4px;
  font-style: italic;
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_optionSubtitle__zKqce {
  color: color-mix(in srgb, var(--cc-btn-primary-text) 70%, transparent);
}

.UniversalModalSelector_costIndicator__4S0Gp {
  margin-left: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
  color: var(--cc-accent-text);
}

.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: var(--cc-text-mid);
}

.UniversalModalSelector_infoIcon__LdaCj:hover {
  background-color: var(--cc-icon-chip);
  color: var(--cc-accent-text);
}

.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: var(--cc-text-mid);
  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: var(--cc-text-mid);
}

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

.UniversalModalSelector_pricingText__TRjf4 {
  font-size: 0.6rem;
  color: var(--cc-accent-text);
  font-weight: 500;
}

.UniversalModalSelector_pricingChevron__mpMeX {
  font-size: 0.6rem;
  color: var(--cc-text-mid);
  cursor: pointer;
  transition: color 0.2s ease;
}

.UniversalModalSelector_pricingChevron__mpMeX:hover {
  color: var(--cc-accent-text);
}

.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: color-mix(in srgb, var(--cc-btn-primary-text) 85%, transparent);
}

.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_infoIcon__LdaCj,
.UniversalModalSelector_optionButton__swGLF.UniversalModalSelector_selected__e14sH .UniversalModalSelector_costIndicator__4S0Gp {
  color: var(--cc-btn-primary-text);
  opacity: 1;
}

.UniversalModalSelector_deprecatedBadge__pyDH4 {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
  padding: 3px 8px;
  border-radius: var(--cc-radius-pill);
  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 var(--cc-border);
  background: transparent;
}

.UniversalModalSelector_closeButton__WhoQB {
  padding: 10px 20px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
  font-weight: 700;
}

.UniversalModalSelector_closeButton__WhoQB:hover {
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

/* 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 */

.ImageSettingsModal_container__PPka1 {
  padding: 20px;
  min-width: 500px;
  max-width: 600px;
  font-family: var(--cc-font-mono);
}

.ImageSettingsModal_container__PPka1 h3 {
  margin: 0 0 10px 0;
  font-size: 1.4rem;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.ImageSettingsModal_modelDescription__gRTG\+ {
  margin: 0 0 20px 0;
  color: var(--cc-text-mid);
  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: var(--cc-text-hi);
  font-size: 0.95rem;
}

.ImageSettingsModal_parameterValue__qlPpx {
  float: right;
  color: var(--cc-accent-text);
  font-weight: bold;
}

.ImageSettingsModal_parameterDescription__aZq8S {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--cc-text-mid);
  opacity: 0.7;
  line-height: 1.4;
}

.ImageSettingsModal_select__6WWjM {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  cursor: pointer;
}

.ImageSettingsModal_select__6WWjM:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.ImageSettingsModal_slider__4OCZ4 {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cc-text-hi) 20%, transparent);
  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: var(--cc-accent-text);
  cursor: pointer;
}

.ImageSettingsModal_slider__4OCZ4::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  cursor: pointer;
  border: none;
}

.ImageSettingsModal_sliderLabels__VJWCJ {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--cc-text-mid);
  opacity: 0.6;
}

.ImageSettingsModal_numberInput__esWcl {
  width: 95%;
  padding: 8px 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
}

.ImageSettingsModal_numberInput__esWcl:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.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;
  accent-color: var(--cc-accent-text);
}

.ImageSettingsModal_checkboxText__wGE66 {
  flex: 1 1;
  color: var(--cc-text-hi);
  font-size: 0.95rem;
}

.ImageSettingsModal_textArea__uXk3- {
  width: 95%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  resize: vertical;
  line-height: 1.5;
}

.ImageSettingsModal_textArea__uXk3-:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.ImageSettingsModal_textArea__uXk3-::placeholder {
  color: var(--cc-text-low);
  opacity: 0.5;
}

.ImageSettingsModal_actions__2WAjw {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--cc-border);
}

.ImageSettingsModal_actions__2WAjw button {
  padding: 10px 20px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ImageSettingsModal_actions__2WAjw button:hover {
  border-color: var(--cc-accent-border);
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
  transform: translateY(-1px);
}

.ImageSettingsModal_saveButton__9DhVl {
  background-color: var(--cc-btn-primary-bg) !important;
  color: var(--cc-btn-primary-text) !important;
  font-weight: 700;
  border-color: var(--cc-btn-primary-bg) !important;
}

.ImageSettingsModal_saveButton__9DhVl:hover {
  background-color: var(--cc-btn-primary-bg-hover) !important;
}

.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: var(--cc-overlay);
  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: var(--cc-bg);
}

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

.NodeGuideModal_closeButton__c\+TUx {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.NodeGuideModal_closeButton__c\+TUx:hover {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

/* ================================== */
/* 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: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_subtitle__EsapF {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--cc-text-mid);
  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: var(--cc-accent-text);
  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: var(--cc-text-low);
  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: var(--cc-panel-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 20px;
  box-shadow: var(--cc-shadow);
  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: var(--cc-border);
}

.NodeGuideModal_tooltipLeft__Jl-NB::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: var(--cc-border);
}

.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: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-accent-text);
}

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

.NodeGuideModal_tooltipTitle__\+HOg\+ {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_tooltipDescription__bRAHe {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--cc-text-mid);
  line-height: 1.5;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_tooltipTips__Py3yU {
  padding-top: 12px;
  border-top: 1px solid var(--cc-border-soft);
}

.NodeGuideModal_tipsLabel__MUWA8 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cc-accent-text);
  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: var(--cc-text-mid);
  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: var(--cc-accent-text);
  border-radius: 50%;
}

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

.NodeGuideModal_elementActive__D9gpf {
  position: relative;
}

.NodeGuideModal_elementActive__D9gpf::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  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: var(--cc-bg);
}

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: var(--cc-panel-strong);
  border-color: var(--cc-border);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_imageNodePreview__n\+sbZ ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_imageNodePreview__n\+sbZ + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_videoNodePreview__wuRhF ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_videoNodePreview__wuRhF + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_musicNodePreview__0i6O5 ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_musicNodePreview__0i6O5 + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_audioNodePreview__yikrz ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_audioNodePreview__yikrz + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_frameExtractNodePreview__c4Bwi ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_frameExtractNodePreview__c4Bwi + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_dataNodePreview__5SaqB ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_dataNodePreview__5SaqB + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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: var(--cc-border);
}

.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tooltipIcon__uuRhc,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tooltipIcon__uuRhc {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-accent-text);
}

.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tooltipTips__Py3yU li::before,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tooltipTips__Py3yU li::before {
  background-color: var(--cc-accent-text);
}

.NodeGuideModal_postCreatorNodePreview__\+LObw ~ .NodeGuideModal_tipsLabel__MUWA8,
.NodeGuideModal_postCreatorNodePreview__\+LObw + .NodeGuideModal_tipsLabel__MUWA8 {
  color: var(--cc-accent-text);
}

/* ================================== */
/* 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 */
}

/* ==================== Social Publish Node Preview ==================== */
.NodeGuideModal_socialPublishPreview__Bd70x {
  --social-node-bg: #f0f9ff;
  --social-node-border: #7dd3fc;
  --social-node-border-selected: #0ea5e9;
  --social-node-text: #0c4a6e;
  --social-node-label-text: #0369a1;
  --social-node-icon-bg: #e0f2fe;
  --social-node-icon-color: #075985;
  --social-node-display-bg: #f8fcff;
  --social-node-display-border: #bae6fd;
  --social-node-button-bg: #38bdf8;
  --social-node-button-text: #0c4a6e;
}

body.high-contrast .NodeGuideModal_socialPublishPreview__Bd70x {
  --social-node-bg: #111827;
  --social-node-border: #0ea5e9;
  --social-node-border-selected: #38bdf8;
  --social-node-text: #f9fafb;
  --social-node-label-text: #7dd3fc;
  --social-node-icon-bg: #1f2937;
  --social-node-icon-color: #e0f2fe;
  --social-node-display-bg: #1f2937;
  --social-node-display-border: #4b5563;
  --social-node-button-bg: #0ea5e9;
  --social-node-button-text: #f9fafb;
}

/* Collapsed card */
.NodeGuideModal_collapsedNodeSocial__o7tTY {
  width: 280px;
  height: 180px;
  background-color: var(--social-node-bg);
  border: 1px solid var(--social-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_collapsedIconSocial__TIVdG {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--social-node-icon-bg);
  border: 1px solid var(--social-node-display-border);
  color: var(--social-node-icon-color);
  font-size: 26px;
}

.NodeGuideModal_collapsedStatusSocial__r3qIv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.NodeGuideModal_collapsedDotsSocial__7tYFQ {
  display: inline-flex;
  gap: 5px;
}

.NodeGuideModal_collapsedDotSocial__w\+avd {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

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

/* Expanded card */
.NodeGuideModal_expandedNodeSocial__UiYrd {
  width: 280px;
  height: 170px;
  background-color: var(--social-node-bg);
  border: 1px solid var(--social-node-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.NodeGuideModal_expandedHeaderSocial__nR5FI {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}

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

.NodeGuideModal_headerButtonSocial__7j97E svg {
  width: 11px;
  height: 11px;
}

.NodeGuideModal_headerButtonSocial__7j97E:hover,
.NodeGuideModal_headerButtonSocial__7j97E.NodeGuideModal_elementActive__D9gpf {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.NodeGuideModal_mediaBoxSocial__Yv4oC {
  flex: 1 1;
  min-height: 0;
  border-radius: 8px;
  background-color: var(--social-node-display-bg);
  border: 1px solid var(--social-node-display-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--social-node-label-text);
  font-size: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_mediaBoxSocial__Yv4oC:hover,
.NodeGuideModal_mediaBoxSocial__Yv4oC.NodeGuideModal_elementActive__D9gpf {
  box-shadow: 0 0 0 2px var(--social-node-border-selected);
}

.NodeGuideModal_captionStripSocial__dVGVQ {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 8px 5px;
  font-size: 0.66rem;
  color: #ffffff;
  background: linear-gradient(to top, rgba(3, 42, 63, 0.9), rgba(3, 42, 63, 0));
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_chipRowSocial__N34eA {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_chipRowSocial__N34eA:hover,
.NodeGuideModal_chipRowSocial__N34eA.NodeGuideModal_elementActive__D9gpf {
  box-shadow: 0 0 0 2px var(--social-node-border-selected);
}

.NodeGuideModal_chipSocial__HYx09 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--social-node-label-text);
  background-color: var(--social-node-icon-bg);
  border: 1px solid var(--social-node-display-border);
  border-radius: 999px;
  font-family: 'Inconsolata', monospace;
}

.NodeGuideModal_chipDotSocial__7XAS9 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.NodeGuideModal_resultsRowSocial__BhFQd {
  flex-shrink: 0;
  padding: 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.NodeGuideModal_resultsRowSocial__BhFQd:hover,
.NodeGuideModal_resultsRowSocial__BhFQd.NodeGuideModal_elementActive__D9gpf {
  box-shadow: 0 0 0 2px var(--social-node-border-selected);
}

.NodeGuideModal_resultPillSocial__EQpu0 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 0.66rem;
  color: #16a34a;
  background-color: var(--social-node-display-bg);
  border: 1px solid var(--social-node-display-border);
  border-left: 3px solid #16a34a;
  border-radius: 6px;
  font-family: 'Inconsolata', monospace;
}

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

.NodeGuideModal_handlePreviewSocial__aRPMr {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  background-color: var(--social-node-border-selected);
  border: 2px solid var(--social-node-bg);
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.NodeGuideModal_handleMediaSocial__pZXGR {
  background-color: #10b981;
}

.NodeGuideModal_handleCaptionSocial__cRDNM {
  background-color: #3b82f6;
}

.NodeGuideModal_handleWrapperSocial__\+CMBi:hover .NodeGuideModal_handlePreviewSocial__aRPMr,
.NodeGuideModal_handleWrapperSocial__\+CMBi.NodeGuideModal_elementActive__D9gpf .NodeGuideModal_handlePreviewSocial__aRPMr {
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

body.high-contrast .NodeGuideModal_handlePreviewSocial__aRPMr {
  border-color: #111827;
}

/* MainApp/MainComponents/Spinner.module.css */
.Spinner_spinner__5VAx4 {
  border: 2px solid var(--cc-accent-soft);
  border-left-color: var(--cc-accent-text);
  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;
}

/* Expand (view media full size) Button - mirrors .helpButton shape */
.OutputNode_expandButton__Z4FeR {
  border: 1px solid var(--output-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.OutputNode_expandButton__Z4FeR: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;
  color: var(--cc-text-hi);
  border-radius: var(--cc-radius-sm);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--cc-border);
}

.history-header h2 {
  margin: 0;
  padding: 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.25rem;
}

/* Tab Navigation */
.history-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cc-border);
}

.history-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--cc-text-mid);
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-family: var(--cc-font-mono);
  border-radius: 4px 4px 0 0;
}

.history-tab:hover {
  color: var(--cc-text-hi);
  background-color: var(--cc-panel-hover);
}

.history-tab.active {
  color: var(--cc-text-hi);
  border-bottom-color: var(--cc-accent-border);
  background-color: var(--cc-panel-hover);
}

.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(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease-in-out;
}

.history-item:hover {
  border-color: var(--cc-accent-border);
  box-shadow: var(--cc-shadow-soft);
}

/* 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(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  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(--cc-accent-border);
  color: var(--cc-text-hi);
  background-color: var(--cc-panel-hover);
}

/* Prompt */
.history-prompt {
  font-weight: 500;
  margin: 0 0 12px 0;
  color: var(--cc-text-hi);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 8px;
  background-color: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
  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(--cc-panel-hover);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  padding: 4px 8px;
  border-radius: var(--cc-radius-pill);
  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(--cc-text-mid);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
}

.date-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Model Info */
.history-model {
  color: var(--cc-text-mid);
  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: var(--cc-radius-pill);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.status-badge.status-completed {
  background-color: var(--cc-success-bg);
  color: var(--cc-success-text);
  border-color: var(--cc-success-border);
}

.status-badge.status-processing {
  background-color: var(--cc-warning-bg);
  color: var(--cc-warning-text);
  border-color: var(--cc-warning-border);
}

.status-badge.status-failed {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border-color: var(--cc-error-border);
}

.source-badge.source-cloud {
  background-color: var(--cc-pro-bg);
  color: var(--cc-pro-text);
  border-color: var(--cc-pro-border);
}

.source-badge.source-local {
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  border-color: var(--cc-border);
}

.file-size {
  color: var(--cc-text-mid);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

/* Messages */
.history-message {
  color: var(--cc-text-mid);
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.history-error {
  color: var(--cc-error-text);
  font-weight: 500;
}

/* Load More Button */
.load-more-button {
  background-color: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-hi);
  border-radius: var(--cc-radius-sm);
  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(--cc-accent-border);
  background-color: var(--cc-panel-hover);
}

.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(--cc-border);
  border-radius: 10px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--cc-accent-border);
}

/* 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(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  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:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  background-color: var(--cc-panel-hover);
}

/* 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(--cc-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(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-hi);
  border-radius: var(--cc-radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  background-color: var(--cc-panel-hover);
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--cc-text-low);
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  background-color: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  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(--cc-accent-border);
  color: var(--cc-text-hi);
}

.page-number.active {
  background-color: var(--cc-accent);
  border-color: var(--cc-accent);
  color: var(--cc-btn-primary-text);
}

.pagination-info {
  color: var(--cc-text-mid);
  font-size: 0.8rem;
  text-align: center;
}

.pagination-info.single-page {
  font-style: italic;
  padding: 5px;
}

.load-more-btn {
  background-color: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-hi);
  border-radius: var(--cc-radius-sm);
  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(--cc-accent-border);
  background-color: var(--cc-panel-hover);
  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(--cc-border);
  background-color: var(--cc-panel);
}

/* Local Generation Styles */
.local-generation {
  border-color: var(--cc-accent-border);
  background: linear-gradient(135deg, var(--cc-panel) 0%, var(--cc-glow) 100%);
}

.local-generation:hover {
  border-color: var(--cc-accent-border);
}

.local-badge {
  background-color: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  padding: 2px 8px;
  border-radius: var(--cc-radius-pill);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

.status-local {
  background-color: var(--cc-accent) !important;
  color: var(--cc-btn-primary-text) !important;
  border-color: var(--cc-accent) !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;
}

/* "View media full size" trigger - mirrors the shape of the other
   floating-header icon buttons, reusing the same button variables. */
.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_expandButton__P3nX3 {
  background-color: var(--video-node-button-bg); /* Use override */
  color: var(--video-node-button-text); /* Use override */
  border-radius: 4px;
}

.VideoGenerationNode_buttonsWrapper__fHeVi .VideoGenerationNode_expandButton__P3nX3:hover {
  background-color: var(--video-node-button-bg-hover); /* Use override */
}

.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);
}

/* Multi-image input indicator near the imageInput handle. Anchored to the left of
   the handle icon (grows leftward) so long labels never overlap the node body. */
.VideoGenerationNode_mediaCountBadge__E1qqj {
  position: absolute;
  top: 50%;
  left: -46px;
  transform: translate(-100%, -50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: var(--video-node-icon-bg);
  color: var(--video-node-icon-color);
  border: 1px solid var(--video-node-border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}

.VideoGenerationNode_mediaCountBadgeWarning__PRN01 {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #f59e0b;
}

/* 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;
}

.MediaPreviewNode_expandButton__rzDS5 {
  width: 26px;
  border: 1px solid var(--media-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.MediaPreviewNode_expandButton__rzDS5: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;
}

.MediaPreviewNode_collapsedDocumentPreview__dv32s {
  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_collapsedDocumentIcon__kVaQ4 {
  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,
body.high-contrast .MediaPreviewNode_collapsedDocumentPreview__dv32s {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

body.high-contrast .MediaPreviewNode_collapsedVideoIcon__9DSHM,
body.high-contrast .MediaPreviewNode_collapsedAudioIcon__UsbE9,
body.high-contrast .MediaPreviewNode_collapsedDocumentIcon__kVaQ4 {
  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;
}

/* Document preview (PDF/HTML rendered via iframe) */
.MediaPreviewNode_documentPreviewContainer__MTnLT {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}

.MediaPreviewNode_documentIframe__jISkd {
  width: 100%;
  height: 100%;
  border: none;
}

/* Document preview (TXT/RTF rendered as plain text) */
.MediaPreviewNode_documentTextContainer__hQlPG {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  border-radius: 6px;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
}

.MediaPreviewNode_documentTextContent__oa5xm {
  margin: 0;
  color: #1f2937;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.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%);
}

/* ================================== */
/* Multi-item media (mediaItems)      */
/* ================================== */

/* Count badge shown on the collapsed frame when more than one item exists */
.MediaPreviewNode_countBadge__J\+Hou {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  z-index: 3;
  pointer-events: none;
}

/* Horizontal thumbnail strip pinned to the bottom of the expanded frame.
   Sits above the hover metadata bar (which it intentionally occludes for
   multi-item nodes - the strip carries its own add/clear controls). */
.MediaPreviewNode_thumbnailStrip__BxdwY {
  position: absolute;
  /* Float above the metadata bottom bar (~40px tall) so its buttons and the
     type/size info stay visible and clickable below the strip */
  bottom: 44px;
  left: 6px;
  right: 6px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  z-index: 7;
  scrollbar-width: thin;
}

.MediaPreviewNode_stripItem__\+QDv6 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.MediaPreviewNode_stripThumb__Y49Cv {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--media-node-icon-bg);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.MediaPreviewNode_stripItemPrimary__pEUhz .MediaPreviewNode_stripThumb__Y49Cv {
  border: 2px solid var(--media-node-border-selected);
}

.MediaPreviewNode_stripThumbImg__s0y1F {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.MediaPreviewNode_stripThumbIcon__xYywi {
  color: var(--media-node-label-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.MediaPreviewNode_stripRemove__KeQrY {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.MediaPreviewNode_stripRemove__KeQrY:hover {
  background-color: #ef4444;
}

.MediaPreviewNode_stripControls__iI-Gw {
  display: flex;
  gap: 3px;
}

.MediaPreviewNode_stripBtn__zcClw {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease;
}

.MediaPreviewNode_stripBtn__zcClw:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.35);
}

.MediaPreviewNode_stripBtn__zcClw:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.MediaPreviewNode_stripActions__wBXA9 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-end;
  padding-bottom: 19px;
}

.MediaPreviewNode_stripActionBtn__449gb {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background-color: var(--media-node-button-bg);
  color: var(--media-node-button-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease;
}

.MediaPreviewNode_stripActionBtn__449gb:hover {
  background-color: var(--media-node-button-bg-hover);
}

/* 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;
}

/* View media full size button style */
.ImageGenerationNode_expandButton__sZEn7 {
  /* 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);
}

/* Multi-image count badge on the image input handle. Shown when more than one
   media item is attached; turns amber when the count exceeds the model's cap. */
.ImageGenerationNode_mediaCountBadge__qC63n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background-color: #6366f1;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px #1e1e1e;
  box-shadow: 0 0 0 1.5px var(--image-node-bg, #1e1e1e);
}

.ImageGenerationNode_mediaCountBadgeWarning__ioH2c {
  background-color: #f59e0b;
  color: #1a1a1a;
}

body.high-contrast .ImageGenerationNode_mediaCountBadgeWarning__ioH2c {
  background-color: #fbbf24;
  color: #1a1a1a;
}

@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);
}

/* View media full size button - mirrors .helpButton shape */
.VideoFrameExtractionNode_expandButton__N5Ql0 {
  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_expandButton__N5Ql0: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;
}

/* Expand / View Full Size Button */
.GoogleDriveNode_expandButton__jNsEx {
  width: 26px;
  border: 1px solid var(--gdrive-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.GoogleDriveNode_expandButton__jNsEx: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;
}

.PostCreatorNode_indicator__xT-1j span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.PostCreatorNode_indicatorCheck__wbXMF {
  color: #10b981;
  font-size: 15px;
  flex-shrink: 0;
}

/* ==================== 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 */
}

/* Rendered WebM preview shown on the collapsed node face */
.PostCreatorNode_previewVideo__AxLxT {
  max-width: 240px;
  max-height: 140px;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 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 */
}

/* ==================== EDGE PREVIEW ACTIVE STATES ==================== */
/* Proximity glow on the output handle, using the node's fuchsia theme */
.PostCreatorNode_handleWrapperActive__4xlE0 {
  z-index: 100;
}

.PostCreatorNode_handleActive__2zroC {
  background-color: #f0abfc !important; /* fuchsia-300 */
  border-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(240, 171, 252, 0.7);
  cursor: pointer;
}

.PostCreatorNode_handleIconActive__Xvym7 {
  transform: scale(1.15) !important;
  background-color: #f0abfc !important;
  border-color: #f0abfc !important;
  color: #701a75 !important; /* fuchsia-900 */
  box-shadow: 0 0 10px rgba(240, 171, 252, 0.6);
}

/* 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 CHROME (--cc-* design system) ==================== */
.PostCreatorNode_settingsModal__cgInI {
  padding: 0;
  color: var(--cc-text-hi);
  min-width: 520px;
  max-width: 650px;
  border-radius: var(--cc-radius);
  overflow: hidden;
  font-family: var(--cc-font-mono);
}

.PostCreatorNode_settingsModal__cgInI h2 {
  margin: 0;
  padding: 24px 32px 16px;
  color: var(--cc-text-hi) !important;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--cc-border);
  background: transparent;
  font-family: var(--cc-font-body);
}

.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: var(--cc-text-hi);
  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: var(--cc-text-hi);
  padding: 8px 12px;
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.PostCreatorNode_radioLabel__43y4Z:hover {
  background: var(--cc-panel-hover);
}

.PostCreatorNode_radioLabel__43y4Z input[type='radio'] {
  cursor: pointer;
  accent-color: var(--cc-accent-text);
  width: 16px;
  height: 16px;
}

.PostCreatorNode_radioLabel__43y4Z span {
  font-weight: 500;
}

.PostCreatorNode_slider__pigGX {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--cc-icon-chip);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--cc-border-soft);
}

.PostCreatorNode_slider__pigGX::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  cursor: pointer;
  box-shadow: 0 2px 8px var(--cc-glow);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid var(--cc-panel-strong);
}

.PostCreatorNode_slider__pigGX::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px var(--cc-glow);
}

.PostCreatorNode_slider__pigGX::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  cursor: pointer;
  box-shadow: 0 2px 8px var(--cc-glow);
  border: 2px solid var(--cc-panel-strong);
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.PostCreatorNode_slider__pigGX::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px var(--cc-glow);
}

.PostCreatorNode_sliderLabels__agTew {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--cc-text-mid);
  font-style: italic;
}

.PostCreatorNode_modalActions__5oNDi {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 4px 4px;
  margin-top: 18px;
  background: transparent;
  border-top: 1px solid var(--cc-border);
  flex-shrink: 0;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_cancelButton__Vpb1v {
  padding: 10px 18px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-panel);
  color: var(--cc-text-hi);
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_cancelButton__Vpb1v:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveButton__8ebEA {
  padding: 10px 18px;
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveButton__8ebEA:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveButton__8ebEA:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveTemplateButton__kO1Ja {
  padding: 10px 18px;
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-glow);
  color: var(--cc-accent-text);
}

.PostCreatorNode_modalActions__5oNDi .PostCreatorNode_saveTemplateButton__kO1Ja:hover {
  background: var(--cc-panel-hover);
  transform: translateY(-1px);
}

/* Tab Navigation - pill strip */
.PostCreatorNode_tabContainer__P\+6Pe {
  display: flex;
  gap: 4px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  margin: 0 0 8px;
  padding: 4px;
  flex-shrink: 0;
}

.PostCreatorNode_tabContainer__P\+6Pe button {
  flex: 1 1;
  padding: 9px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--cc-text-mid);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--cc-radius-pill);
  transition: all 0.2s ease;
  position: relative;
  font-family: var(--cc-font-mono);
  white-space: nowrap;
}

.PostCreatorNode_tabContainer__P\+6Pe button:hover {
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

.PostCreatorNode_tabContainer__P\+6Pe button.PostCreatorNode_activeTab__wWHWv {
  color: var(--cc-accent-text);
  background-color: var(--cc-glow);
  border-color: var(--cc-accent-border);
  font-weight: 700;
}

.PostCreatorNode_tabContent__Y9KzZ {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 2px;
  background: transparent;
}

.PostCreatorNode_tabDescription__OpTh1 {
  font-size: 0.85rem;
  color: var(--cc-text-mid);
  margin: 0 0 20px 0;
  padding: 12px 16px;
  background: var(--cc-glow);
  border-radius: var(--cc-radius-sm);
  border-left: 4px solid var(--cc-accent-border);
  line-height: 1.5;
  font-family: var(--cc-font-mono);
}

/* 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: 14px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  transition: all 0.2s ease;
}

.PostCreatorNode_dynamicListItem__V4Ukj:hover {
  transform: translateY(-1px);
  box-shadow: var(--cc-shadow-soft);
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

.PostCreatorNode_dragHandle__i0rXV {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-text-low);
  cursor: grab;
  padding: 4px;
  transition: color 0.2s ease;
}

.PostCreatorNode_dragHandle__i0rXV:hover {
  color: var(--cc-accent-text);
}

.PostCreatorNode_dragHandle__i0rXV:active {
  cursor: grabbing;
}

.PostCreatorNode_handleInput__7CRzB {
  flex: 1 1;
  min-width: 0;
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.PostCreatorNode_handleInput__7CRzB::placeholder {
  color: var(--cc-text-low);
}

.PostCreatorNode_handleInput__7CRzB:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.PostCreatorNode_handleTypeSelect__Gv\+aw {
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 120px;
  transition: all 0.2s ease;
}

.PostCreatorNode_handleTypeSelect__Gv\+aw:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.PostCreatorNode_removeButton__Ocl5N {
  padding: 8px;
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  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: var(--cc-error-bg);
  color: var(--cc-error-text);
}

.PostCreatorNode_removeButton__Ocl5N:hover {
  background: var(--cc-error-border);
  color: var(--cc-panel-strong);
}

.PostCreatorNode_addButton__Mpvi9 {
  margin-top: 16px;
  padding: 10px 18px;
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  align-self: flex-start;
}

.PostCreatorNode_addButton__Mpvi9:hover {
  background: var(--cc-panel-hover);
  transform: translateY(-1px);
}

/* Element Settings Tab */
.PostCreatorNode_elementsSettings__2HgoW {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.PostCreatorNode_noElements__tFkCA {
  text-align: center;
  padding: 40px 20px;
  color: var(--cc-text-mid);
  font-size: 0.9rem;
}

.PostCreatorNode_elementCard__cYXH6 {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 18px;
  transition: all 0.2s ease;
  box-shadow: var(--cc-shadow-soft);
}

.PostCreatorNode_elementCard__cYXH6:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.PostCreatorNode_elementCardActive__e9RIJ {
  border-color: var(--cc-accent-border);
  box-shadow: 0 8px 24px var(--cc-glow);
  background: var(--cc-panel-strong);
}

.PostCreatorNode_selectedBadge__1ElrJ {
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  border: 1px solid var(--cc-accent-border);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--cc-radius-pill);
  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 var(--cc-border);
  color: var(--cc-accent-text);
}

.PostCreatorNode_elementTitle__B0MSA {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-text-hi);
  flex: 1 1;
}

.PostCreatorNode_elementType__1pNr9 {
  font-size: 0.8rem;
  color: var(--cc-text-low);
  font-style: italic;
}

.PostCreatorNode_elementSettings__3agcr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cc-icon-chip);
  padding: 14px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
}

/* Titled sub-section heading inside the inspect settings (e.g. Timing & Animation) */
.PostCreatorNode_sectionTitle__8I\+RW {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cc-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cc-border-soft);
}

.PostCreatorNode_settingRow__m3YiZ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius-sm);
  border-left: 3px solid var(--cc-accent-border);
}

.PostCreatorNode_settingRow__m3YiZ label {
  font-size: 0.85rem;
  color: var(--cc-text-hi);
  font-weight: 600;
  flex: 0 0 auto;
}

.PostCreatorNode_sliderValue__mRX3t {
  min-width: 50px;
  text-align: right;
  font-size: 0.85rem;
  color: var(--cc-accent-text);
  font-weight: 700;
  font-family: var(--cc-font-mono);
}

.PostCreatorNode_settingSelect__eT1Fc {
  padding: 8px 10px;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.PostCreatorNode_settingSelect__eT1Fc:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.PostCreatorNode_settingInput__8JI\+F {
  padding: 8px 12px;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  width: 100px;
  text-align: right;
  transition: all 0.2s ease;
}

.PostCreatorNode_settingInput__8JI\+F:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.PostCreatorNode_settingInput__8JI\+F:hover {
  border-color: var(--cc-accent-border);
}

.PostCreatorNode_colorPicker__M-u6R {
  width: 50px;
  height: 32px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.PostCreatorNode_colorPicker__M-u6R:hover {
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 8px var(--cc-glow);
}

/* Canvas size preset buttons (Inputs tab) */
.PostCreatorNode_canvasSizeSection__L5kFF {
  margin-bottom: 20px;
  padding: 14px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
}

.PostCreatorNode_canvasSizeLabel__42QOT {
  display: block;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
}

.PostCreatorNode_canvasSizeButtons__2oc-P {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.PostCreatorNode_sizePresetButton__u8QtY {
  padding: 7px 14px;
  font-size: 0.8rem;
  font-family: var(--cc-font-mono);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  color: var(--cc-text-mid);
  transition: all 0.2s ease;
}

.PostCreatorNode_sizePresetButton__u8QtY:hover {
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  background: var(--cc-panel-hover);
}

.PostCreatorNode_sizePresetActive__FGY5p {
  border-color: var(--cc-accent-border);
  background: var(--cc-glow);
  color: var(--cc-accent-text);
}

.PostCreatorNode_canvasSizeCurrent__dXfnn {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--cc-text-low);
  font-family: var(--cc-font-mono);
}

/* Alignment / position preset buttons (Inspect tab) */
.PostCreatorNode_presetGrid__7CWuv {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.PostCreatorNode_presetGrid3__Dt\+Aw {
  grid-template-columns: repeat(3, 1fr);
}

.PostCreatorNode_presetGrid2__GYc8L {
  grid-template-columns: repeat(2, 1fr);
}

.PostCreatorNode_presetColumn__ZpQ7y {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.PostCreatorNode_presetButton__CbhLb {
  padding: 8px;
  font-size: 0.72rem;
  font-family: var(--cc-font-mono);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  color: var(--cc-text-mid);
  transition: all 0.2s ease;
}

.PostCreatorNode_presetButton__CbhLb:hover {
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  background: var(--cc-panel-hover);
}

/* 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 ===== */
/* Column layout so the Video Post Creator timeline can sit under the canvas:
   the canvas area flexes to fill remaining space, the timeline takes auto
   height at the bottom. In image mode (no timeline) the canvas area alone
   fills the panel and stays vertically centered as before. */
.PostCreatorNode_canvasPanel__3wN4q {
  position: relative;
  width: 100%;
  height: 100%;
  /* background: #0d0d0d; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  gap: 10px;
}

/* Canvas area holds the draggable preview and grows to fill the panel,
   centering the canvas within whatever space is left above the timeline. */
.PostCreatorNode_canvasArea__7wWeY {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 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: var(--cc-panel-strong);
  padding: 8px 12px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--cc-shadow-soft);
}

body.is-electron .PostCreatorNode_zoomControls__GLMcz {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.PostCreatorNode_zoomControls__GLMcz button {
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  color: var(--cc-text-hi);
  padding: 6px 14px;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--cc-font-mono);
  transition: all 0.2s;
  font-size: 0.9rem;
}

.PostCreatorNode_zoomControls__GLMcz button:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  transform: scale(1.05);
}

.PostCreatorNode_zoomControls__GLMcz span {
  min-width: 50px;
  text-align: center;
  font-weight: 700;
  color: var(--cc-text-hi);
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
}

/* 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: var(--cc-text-hi);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--cc-border);
  flex-shrink: 0;
}

/* ===== INSPECT ELEMENT SECTION ===== */
.PostCreatorNode_inspectSection__M4lDQ {
  margin-top: 20px;
  padding: 18px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-accent-border);
  box-shadow: var(--cc-shadow-soft);
}

.PostCreatorNode_inspectSection__M4lDQ h3 {
  color: var(--cc-text-hi);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.PostCreatorNode_inspectDetails__7zhvC {
  background: var(--cc-icon-chip);
  padding: 14px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
}

.PostCreatorNode_inspectDetails__7zhvC h4 {
  margin: 0 0 10px;
  color: var(--cc-accent-text);
  font-size: 0.9rem;
  font-weight: 700;
}

.PostCreatorNode_inspectDetails__7zhvC + .PostCreatorNode_inspectDetails__7zhvC {
  margin-top: 12px;
}

.PostCreatorNode_inspectRow__gL\+6Z {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.PostCreatorNode_inspectLabel__4K6KM {
  color: var(--cc-text-mid);
  font-size: 0.85rem;
  font-weight: 600;
}

.PostCreatorNode_inspectValue__mojiG {
  color: var(--cc-text-hi);
  font-size: 0.85rem;
  font-family: var(--cc-font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}

.PostCreatorNode_inspectStatusYes__tWb77 {
  color: #10b981;
  flex-shrink: 0;
}

.PostCreatorNode_inspectStatusNo__0PYDR {
  color: var(--cc-text-mid);
  flex-shrink: 0;
}

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

.PostCreatorNode_elementInfo__bxi-r p {
  margin: 0;
  color: var(--cc-text-mid);
  font-size: 0.95rem;
  padding: 8px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius-sm);
  border-left: 3px solid var(--cc-accent-border);
}

.PostCreatorNode_elementInfo__bxi-r strong {
  color: var(--cc-text-hi);
  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: var(--cc-text-mid);
}

.PostCreatorNode_templateHint__5u-12 {
  font-size: 0.85rem;
  color: var(--cc-text-low);
  margin-top: 10px;
}

.PostCreatorNode_templateHint__5u-12 code {
  background: var(--cc-icon-chip);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
}

.PostCreatorNode_templateGrid__3owSx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.PostCreatorNode_templateCard__IW5eh {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.PostCreatorNode_templateCard__IW5eh:hover {
  border-color: var(--cc-accent-border);
  box-shadow: 0 8px 20px var(--cc-glow);
  background: var(--cc-panel-hover);
  transform: translateY(-2px);
}

.PostCreatorNode_templateCardSelected__2YjB9 {
  border-color: var(--cc-accent-border);
  box-shadow: 0 8px 24px var(--cc-glow);
  background: var(--cc-panel-strong);
}

.PostCreatorNode_templateHeader__yB4NL {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.PostCreatorNode_templateHeader__yB4NL h3 {
  color: var(--cc-text-hi);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  flex: 1 1;
}

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

.PostCreatorNode_activeBadge__fhbVF {
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  border: 1px solid var(--cc-accent-border);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--cc-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PostCreatorNode_deleteTemplateButton__-GZP7 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.PostCreatorNode_deleteTemplateButton__-GZP7:hover {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
  transform: scale(1.05);
}

.PostCreatorNode_deleteTemplateButton__-GZP7:active {
  transform: scale(0.95);
}

.PostCreatorNode_templateDescription__Vwtxm {
  color: var(--cc-text-mid);
  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 var(--cc-border);
}

.PostCreatorNode_layerCount__-HOJE {
  color: var(--cc-text-low);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--cc-font-mono);
}

.PostCreatorNode_layerTypes__wafJY {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.PostCreatorNode_layerType__QfnPa {
  background: var(--cc-icon-chip);
  color: var(--cc-accent-text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
  text-transform: capitalize;
}

/* ===== SAVE TEMPLATE DIALOG ===== */
.PostCreatorNode_saveTemplateDialog__Z9LC- {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.PostCreatorNode_dialogDescription__MfWij {
  color: var(--cc-text-mid);
  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: var(--cc-text-hi);
  font-size: 0.9rem;
  font-weight: 600;
}

.PostCreatorNode_formInput__K6bs6,
.PostCreatorNode_formTextarea__jxG5E {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-family: var(--cc-font-mono);
  font-size: 14px;
  transition: all 0.2s ease;
}

.PostCreatorNode_formInput__K6bs6:focus,
.PostCreatorNode_formTextarea__jxG5E:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.PostCreatorNode_formInput__K6bs6::placeholder,
.PostCreatorNode_formTextarea__jxG5E::placeholder {
  color: var(--cc-text-low);
}

.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 var(--cc-border);
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_cancelButton__Vpb1v {
  padding: 10px 18px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-panel);
  color: var(--cc-text-hi);
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_cancelButton__Vpb1v:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_saveButton__8ebEA {
  padding: 10px 18px;
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_saveButton__8ebEA:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.PostCreatorNode_dialogActions__YpKoO .PostCreatorNode_saveButton__8ebEA:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* Post Creator Modal Styles — aligned with the app-wide --cc-* design system */

/* --- Main Overlay --- */
.PostCreatorModal_modalOverlay__bCTaw {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cc-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
  padding: 20px; /* Ensure spacing from viewport edges */
}

body.is-electron .PostCreatorModal_modalOverlay__bCTaw {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

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

/* --- Main Content Wrapper (Header + Two-Panel Body) --- */
.PostCreatorModal_modalContentWrapper__8rHgo {
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 1600px;
  min-height: 50vh;
  max-height: 85vh;
  position: relative;
  z-index: 2;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  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);
}

.PostCreatorModal_modalOverlay__bCTaw.PostCreatorModal_open__WK1Pp .PostCreatorModal_modalContentWrapper__8rHgo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Header Bar --- */
.PostCreatorModal_modalHeader__-fPrv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-panel);
  flex-shrink: 0;
}

.PostCreatorModal_modalTitle__E7oBp {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cc-text-hi);
}

.PostCreatorModal_closeButton__heyNW {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-size: 1.4rem;
  transition: all 0.2s ease;
}

.PostCreatorModal_closeButton__heyNW:hover {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

/* --- Two-Panel Body --- */
.PostCreatorModal_modalBody__MV-Fn {
  display: flex;
  gap: 16px;
  flex: 1 1;
  min-height: 0;
  padding: 16px;
}

/* --- Left Panel (Preview) --- */
.PostCreatorModal_leftPanel__92XeZ {
  flex: 1 1;
  min-width: 0;
  background-color: var(--cc-panel);
  color: var(--cc-text-hi);
  padding: 20px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border-soft);
  box-shadow: var(--cc-shadow-soft);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* --- Right Panel (Settings) --- */
.PostCreatorModal_rightPanel__Ek5EB {
  flex: 1 1;
  min-width: 0;
  background-color: var(--cc-panel);
  color: var(--cc-text-hi);
  padding: 20px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border-soft);
  box-shadow: var(--cc-shadow-soft);
  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: var(--cc-border);
  border-radius: 10px;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .PostCreatorModal_modalOverlay__bCTaw {
    padding: 10px;
  }

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

  .PostCreatorModal_modalBody__MV-Fn {
    gap: 10px;
    padding: 12px;
  }

  .PostCreatorModal_leftPanel__92XeZ {
    display: none; /* Hide preview on mobile */
  }

  .PostCreatorModal_rightPanel__Ek5EB {
    flex: 1 1;
    width: 100%;
    padding: 14px;
  }
}

@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;
}

/* Ghost affordance: layer is outside its clip window while paused/scrubbing.
   Kept faintly visible with a dashed outline so it stays selectable/draggable. */
.DraggableElement_draggableElement__GJTdq.DraggableElement_ghost__l4Pep {
  opacity: 0.25;
  outline: 1px dashed rgba(217, 70, 239, 0.7);
  outline-offset: 2px;
}

/* 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 — aligned with the app-wide --cc-* design system */

.ElementsPanel_elementsPanel__Qe-sE {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.ElementsPanel_panelHeader__2Y5-4 {
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 15px;
}

.ElementsPanel_panelHeader__2Y5-4 h3 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.ElementsPanel_panelHeader__2Y5-4 p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cc-text-mid);
}

.ElementsPanel_elementsGrid__X9fDw {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 14px;
  gap: 14px;
  flex: 1 1;
}

.ElementsPanel_elementItem__He-XK {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 15px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  cursor: grab;
  transition: all 0.2s;
  -webkit-user-select: none;
          user-select: none;
}

.ElementsPanel_elementItem__He-XK:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.ElementsPanel_elementItem__He-XK:active {
  cursor: grabbing;
  transform: translateY(0);
}

.ElementsPanel_elementIcon__HzFzY {
  color: var(--cc-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ElementsPanel_elementLabel__XMYFp {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cc-text-hi);
}

.ElementsPanel_panelFooter__17oHl {
  border-top: 1px solid var(--cc-border);
  padding-top: 15px;
}

.ElementsPanel_tip__XZ7nr {
  padding: 12px;
  background: var(--cc-glow);
  border-left: 3px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  font-size: 0.85rem;
  color: var(--cc-text-mid);
  line-height: 1.5;
}

.ElementsPanel_tip__XZ7nr strong {
  color: var(--cc-accent-text);
}

/* 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;
}

/* Video Post Creator timeline — dark, compact, --cc-* token vocabulary */

.TimelinePanel_panel__W\+Xn- {
  /* Fixed width of the left row-header column. Must match the value the
     playhead uses in its calc() (var(--tl-header-w)). */
  --tl-header-w: 120px;

  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
  /* Never let the canvas area crush the timeline inside the modal column;
     the tracks body is user-resizable/collapsible instead. */
  flex-shrink: 0;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-sm);
  box-shadow: var(--cc-shadow-soft);
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  overflow: hidden;
}

.TimelinePanel_noSelect__bFn6K {
  user-select: none;
  -webkit-user-select: none;
}

/* --- Resize grip (top edge) --- */
.TimelinePanel_resizeGrip__Yprwj {
  position: relative;
  height: 7px;
  flex-shrink: 0;
  cursor: row-resize;
  touch-action: none;
}

.TimelinePanel_resizeGrip__Yprwj::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--cc-border);
  transition: background 0.15s ease;
}

.TimelinePanel_resizeGrip__Yprwj:hover::after,
.TimelinePanel_resizeGrip__Yprwj:active::after {
  background: var(--cc-accent-text);
}

/* --- Transport bar --- */
.TimelinePanel_transport__20qT1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--cc-panel-strong);
  border-bottom: 1px solid var(--cc-border);
  flex-shrink: 0;
}

.TimelinePanel_playButton__5rgZP {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  cursor: pointer;
  font-size: 1.15rem;
  transition: all 0.2s ease;
}

.TimelinePanel_playButton__5rgZP:hover {
  background: var(--cc-panel-hover);
  transform: scale(1.05);
}

.TimelinePanel_timeReadout__apcrZ {
  display: flex;
  align-items: baseline;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  color: var(--cc-text-mid);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.TimelinePanel_timeCurrent__2iDsv {
  color: var(--cc-text-hi);
  font-weight: 700;
}

.TimelinePanel_timeSep__ZX0jJ {
  margin: 0 5px;
  color: var(--cc-text-low);
}

/* --- Total output length control (transport bar) --- */
.TimelinePanel_durationControl__Rv35t {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
}

.TimelinePanel_durationLabel__HiBsU {
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  color: var(--cc-text-mid);
  text-transform: uppercase;
}

.TimelinePanel_durationInput__s6a5r {
  width: 58px;
  padding: 2px 6px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: transparent;
  color: var(--cc-text-hi);
  font-size: 0.8rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.TimelinePanel_durationInput__s6a5r:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.TimelinePanel_durationInput__s6a5r::placeholder {
  color: var(--cc-text-mid);
  opacity: 0.7;
}

.TimelinePanel_durationUnit__wXmxG {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
}

.TimelinePanel_collapseButton__7o2xp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: transparent;
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 12px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.TimelinePanel_collapseButton__7o2xp:hover {
  color: var(--cc-accent-text);
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

/* --- Scroll body (height driven inline by the resize grip) --- */
.TimelinePanel_scrollBody__-d90Y {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.TimelinePanel_scrollBody__-d90Y::-webkit-scrollbar {
  width: 6px;
}

.TimelinePanel_scrollBody__-d90Y::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.TimelinePanel_scrollBody__-d90Y::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  border-radius: 10px;
}

.TimelinePanel_content__sWD3m {
  position: relative;
}

/* --- Ruler --- */
.TimelinePanel_rulerRow__bjaOM {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: stretch;
  height: 24px;
  background: var(--cc-panel-strong);
  border-bottom: 1px solid var(--cc-border);
}

.TimelinePanel_headerSpacer__VN0B3 {
  width: var(--tl-header-w);
  flex-shrink: 0;
  box-sizing: border-box;
  border-right: 1px solid var(--cc-border);
}

.TimelinePanel_rulerTrack__lzn8S {
  position: relative;
  flex: 1 1;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
}

.TimelinePanel_tick__OzAbK {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--cc-border);
  pointer-events: none;
}

.TimelinePanel_tickLabel__bWC01 {
  position: absolute;
  bottom: 3px;
  left: 0;
  font-size: 0.58rem;
  line-height: 1;
  color: var(--cc-text-low);
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* --- Layer rows --- */
.TimelinePanel_rowRow__y6g6V {
  display: flex;
  align-items: stretch;
  height: 28px;
  border-bottom: 1px solid var(--cc-border-soft);
}

.TimelinePanel_rowRow__y6g6V:last-child {
  border-bottom: none;
}

.TimelinePanel_rowHeader__YSs4l {
  width: var(--tl-header-w);
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
  background: var(--cc-panel-strong);
  border-right: 1px solid var(--cc-border);
  overflow: hidden;
}

.TimelinePanel_rowHeaderMuted__iaJqt {
  opacity: 0.55;
}

.TimelinePanel_rowHeaderIcon__qEIoy {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--cc-text-mid);
}

.TimelinePanel_rowHeaderLabel__2irAh {
  flex: 1 1;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.TimelinePanel_zButtons__nyaW0 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.TimelinePanel_zButton__OjEOX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--cc-text-low);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.TimelinePanel_zButton__OjEOX:hover:not(:disabled) {
  color: var(--cc-accent-text);
  background: var(--cc-panel-hover);
}

.TimelinePanel_zButton__OjEOX:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.TimelinePanel_rowTrack__2JruM {
  position: relative;
  flex: 1 1;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
}

/* --- Clip bar --- */
.TimelinePanel_clip__6r0Oy {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 8px;
  box-sizing: border-box;
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-glow);
  cursor: grab;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.TimelinePanel_clip__6r0Oy:hover {
  border-color: var(--cc-accent-text);
  background: var(--cc-panel-hover);
}

.TimelinePanel_clip__6r0Oy:active {
  cursor: grabbing;
}

.TimelinePanel_clipSelected__Q\+0Zb {
  border-color: var(--cc-accent-text);
  background: var(--cc-panel-hover);
  box-shadow:
    0 0 0 1px var(--cc-accent-border),
    0 0 10px var(--cc-glow);
}

.TimelinePanel_clipEdge__DeL4b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}

.TimelinePanel_clipEdgeLeft__efZaC {
  left: 0;
}

.TimelinePanel_clipEdgeRight__glyRy {
  right: 0;
}

.TimelinePanel_clipEdge__DeL4b::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  background: var(--cc-accent-text);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.TimelinePanel_clip__6r0Oy:hover .TimelinePanel_clipEdge__DeL4b::after,
.TimelinePanel_clipSelected__Q\+0Zb .TimelinePanel_clipEdge__DeL4b::after {
  opacity: 0.7;
}

/* --- Playhead --- */
.TimelinePanel_playhead__vs8mg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cc-accent-text);
  pointer-events: none;
  z-index: 6;
}

.TimelinePanel_playheadHead__IzhEN {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cc-accent-text);
  box-shadow: 0 0 6px var(--cc-glow);
}

/* Social Publish Node — two-frame sliding hover (collapsed <-> expanded) with a
   fixed-size frame, matching the other nodes. Distinct sky "publish" theme. */
@keyframes SocialPublishNode_scaleInNode__1yVj0 {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes SocialPublishNode_spSpin__PNXhN {
  to {
    transform: rotate(360deg);
  }
}

.SocialPublishNode_nodeBase__MJS5F {
  /* Social Publish specific colors - Sky theme */
  --social-node-bg: #f0f9ff; /* sky-50 */
  --social-node-border: #7dd3fc; /* sky-300 */
  --social-node-border-selected: #0ea5e9; /* sky-500 */
  --social-node-text: #0c4a6e; /* sky-900 */
  --social-node-label-text: #0369a1; /* sky-700 */
  --social-node-icon-bg: #e0f2fe; /* sky-100 */
  --social-node-icon-color: #075985; /* sky-800 */
  --social-node-display-bg: #f8fcff; /* sky-25 */
  --social-node-display-border: #bae6fd; /* sky-200 */
  --social-node-button-bg: #38bdf8; /* sky-400 */
  --social-node-button-bg-hover: #0ea5e9; /* sky-500 */
  --social-node-button-text: #0c4a6e; /* sky-900 */

  /* Performance optimizations */
  contain: layout style;
  will-change: transform;

  border-radius: 8px;
  border: 1px solid var(--social-node-border);
  background-color: var(--social-node-bg);
  color: var(--social-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);
  width: 280px;
  min-width: 280px;
  max-width: 350px;
  overflow: visible;
  position: relative;
  transition: border-color 0.2s ease-in-out;
  animation: SocialPublishNode_scaleInNode__1yVj0 0.3s ease-out;
}

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

body.high-contrast .SocialPublishNode_nodeBase__MJS5F {
  --social-node-bg: #111827; /* gray-900 */
  --social-node-border: #0ea5e9; /* sky-500 */
  --social-node-border-selected: #38bdf8; /* sky-400 */
  --social-node-text: #f9fafb; /* gray-50 */
  --social-node-label-text: #7dd3fc; /* sky-300 */
  --social-node-icon-bg: #1f2937; /* gray-800 */
  --social-node-icon-color: #e0f2fe; /* sky-100 */
  --social-node-display-bg: #1f2937; /* gray-800 */
  --social-node-display-border: #4b5563; /* gray-600 */
  --social-node-button-bg: #0ea5e9; /* sky-500 */
  --social-node-button-bg-hover: #38bdf8; /* sky-400 */
  --social-node-button-text: #f9fafb; /* gray-50 */
}

.react-flow__node.selected .SocialPublishNode_nodeBase__MJS5F {
  border-color: var(--social-node-border-selected);
  box-shadow: 0 0 0 1px var(--social-node-border-selected);
}

/* Node state classes — identical dimensions so size never jumps */
.SocialPublishNode_nodeCollapsed__5RIDU,
.SocialPublishNode_nodeExpanded__rme-s {
  width: 280px;
  min-width: 280px;
  max-width: 350px;
  padding: 12px;
}

/* ==================== FLOATING HEADER (icon-only) ==================== */
.SocialPublishNode_expandedHeader__BQx28 {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.SocialPublishNode_nodeExpanded__rme-s .SocialPublishNode_expandedHeader__BQx28 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.SocialPublishNode_buttonsWrapper__6WB8u {
  display: flex;
  gap: 5px;
}

/* Uniform icon-button sizing in the header */
.SocialPublishNode_buttonsWrapper__6WB8u button {
  width: 26px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: var(--social-node-button-bg);
  color: var(--social-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;
}

.SocialPublishNode_buttonsWrapper__6WB8u button svg {
  width: 11px;
  height: 11px;
}

.SocialPublishNode_buttonsWrapper__6WB8u button:hover:not(:disabled) {
  background-color: var(--social-node-button-bg-hover);
}

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

/* Publish button — accent, bordered so it reads as the primary action */
.SocialPublishNode_publishFloatButton__1MaVz {
  border: 1px solid var(--social-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.SocialPublishNode_publishFloatButton__1MaVz:hover:not(:disabled) {
  border-color: var(--social-node-border-selected) !important;
}

.SocialPublishNode_expandButton__KPr-g,
.SocialPublishNode_helpButton__\+6oyr,
.SocialPublishNode_settingsButton__X7GPC {
  border: 1px solid var(--social-node-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.SocialPublishNode_expandButton__KPr-g:hover:not(:disabled),
.SocialPublishNode_helpButton__\+6oyr:hover:not(:disabled),
.SocialPublishNode_settingsButton__X7GPC:hover:not(:disabled) {
  border-color: var(--social-node-border-selected) !important;
}

.SocialPublishNode_spinner__nxE5f {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: SocialPublishNode_spSpin__PNXhN 0.8s linear infinite;
  display: inline-block;
  opacity: 0.85;
}

/* ==================== FRAMES CONTAINER ==================== */
.SocialPublishNode_framesContainer__ytyZt {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  border-radius: 6px;
}

/* Frame 2: Expanded View — always present underneath */
.SocialPublishNode_expandedFrame__iV1Uo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Connected media */
.SocialPublishNode_mediaPreview__yLuoe {
  position: relative;
  flex: 1 1;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--social-node-display-bg);
  border: 1px solid var(--social-node-display-border);
}

.SocialPublishNode_mediaEl__p4SIA {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.SocialPublishNode_mediaPlaceholder__UYWBk {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--social-node-label-text);
  opacity: 0.7;
}

.SocialPublishNode_mediaPlaceholder__UYWBk span {
  font-size: 0.72rem;
  font-style: italic;
}

/* Caption overlay — anchored to the bottom of the media */
.SocialPublishNode_captionOverlay__KoMvY {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20px 10px 8px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #ffffff;
  background: linear-gradient(
    to top,
    rgba(3, 42, 63, 0.94) 0%,
    rgba(3, 42, 63, 0.7) 55%,
    rgba(3, 42, 63, 0) 100%
  );
  max-height: 62%;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

.SocialPublishNode_captionEmpty__1xy21 {
  font-style: italic;
  opacity: 0.75;
}

/* Detail area — platform chips, or results after publishing */
.SocialPublishNode_detailArea__uAxpp {
  flex-shrink: 0;
  max-height: 64px;
  overflow-y: auto;
}

.SocialPublishNode_chipRow__XUD40 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.SocialPublishNode_chip__ychs- {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--social-node-label-text);
  background-color: var(--social-node-icon-bg);
  border: 1px solid var(--social-node-display-border);
  border-radius: 999px;
}

.SocialPublishNode_chipDot__93vm0 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.SocialPublishNode_chipEmpty__4M3S\+ {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--social-node-label-text);
  opacity: 0.6;
}

/* Inline error */
.SocialPublishNode_error__G4z4A {
  font-size: 0.7rem;
  line-height: 1.35;
  color: #b91c1c;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 6px;
  word-break: break-word;
}

body.high-contrast .SocialPublishNode_error__G4z4A {
  color: #fecaca;
}

/* Results list */
.SocialPublishNode_results__WfmVs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.SocialPublishNode_resultRow__Un-ZQ {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  background-color: var(--social-node-display-bg);
  border: 1px solid var(--social-node-display-border);
}

.SocialPublishNode_resultOk__T2r7r {
  border-left: 3px solid #16a34a;
}

.SocialPublishNode_resultFail__s2Qa9 {
  border-left: 3px solid #dc2626;
}

.SocialPublishNode_resultIcon__vcf9K {
  flex-shrink: 0;
}

.SocialPublishNode_resultOk__T2r7r .SocialPublishNode_resultIcon__vcf9K {
  color: #16a34a;
}

.SocialPublishNode_resultFail__s2Qa9 .SocialPublishNode_resultIcon__vcf9K {
  color: #dc2626;
}

.SocialPublishNode_resultPlatform__94PDY {
  font-weight: 700;
  color: var(--social-node-label-text);
  flex-shrink: 0;
}

.SocialPublishNode_resultMeta__22WKe {
  color: var(--social-node-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SocialPublishNode_resultLink__NXnTZ {
  color: var(--social-node-border-selected);
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Frame 1: Collapsed View — slides out to the left on hover */
.SocialPublishNode_collapsedFrame__t9mZd {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--social-node-bg);
  border-radius: 6px;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.SocialPublishNode_nodeExpanded__rme-s .SocialPublishNode_collapsedFrame__t9mZd {
  transform: translateX(-105%);
  pointer-events: none;
}

.SocialPublishNode_collapsedIcon__jvn8S {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--social-node-icon-bg);
  border: 1px solid var(--social-node-display-border);
  color: var(--social-node-icon-color);
  overflow: hidden;
}

.SocialPublishNode_collapsedThumb__3q40q {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.SocialPublishNode_collapsedStatus__bOmVW {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.SocialPublishNode_collapsedDots__2J5WN {
  display: inline-flex;
  gap: 5px;
}

.SocialPublishNode_collapsedDot__G6Yte {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.SocialPublishNode_collapsedLabel__qciRd {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--social-node-label-text);
}

/* ==================== HANDLES ==================== */
.SocialPublishNode_handleWrapper__9an0X {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 5;
}

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

/* Special handle colors — matches PostCreatorNode's data-type coloring */
.SocialPublishNode_mediaHandle__Xk2c- {
  background-color: #10b981; /* green-500 for image/video media */
}

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

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

/* Reveal handle icons on node hover, like the other nodes */
.SocialPublishNode_nodeBase__MJS5F:hover .SocialPublishNode_handleIcon__xRcNk {
  opacity: 1;
  transform: scale(1);
}

body.high-contrast .SocialPublishNode_handle__x8xaa {
  background-color: var(--social-node-border-selected);
  border-color: var(--social-node-bg);
}

body.high-contrast .SocialPublishNode_mediaHandle__Xk2c- {
  background-color: #10b981;
}

body.high-contrast .SocialPublishNode_captionHandle__4jM4n {
  background-color: #3b82f6;
}

body.high-contrast .SocialPublishNode_handleIcon__xRcNk {
  background-color: var(--social-node-icon-bg);
  border-color: var(--social-node-border);
  color: var(--social-node-icon-color);
}

/* SocialPublishModal — restyled with the app-wide Concept Canvas --cc-* brand
   tokens (see src/styles/brand.css). Mirrors the surface language of
   ProjectFlowModal / NodeGuideModal. */

.SocialPublishModal_overlay__wXSW3 {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--cc-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: SocialPublishModal_fadeIn__3lVHe 0.2s ease-out;
}

.SocialPublishModal_modal__wnr3F {
  width: min(940px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  color: var(--cc-text-hi);
  overflow: hidden;
  animation: SocialPublishModal_slideUp__qBVgC 0.24s ease-out;
}

/* ---------- Header ---------- */

.SocialPublishModal_header__lTxKi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--cc-border-soft);
  flex-shrink: 0;
}

.SocialPublishModal_title__\+jsdu {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cc-text-hi);
}

.SocialPublishModal_closeButton__dF0SJ {
  background: transparent;
  border: none;
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.SocialPublishModal_closeButton__dF0SJ:hover {
  background: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

/* ---------- Body ---------- */

.SocialPublishModal_body__VG-dL {
  flex: 1 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Left pane: the existing platform cards + caption (own scroll) */
.SocialPublishModal_leftPane__idm-I {
  flex: 1 1 54%;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}

/* Right pane: "How to connect" instructions (own scroll) */
.SocialPublishModal_rightPane__M3WD8 {
  flex: 1 1 46%;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 1px solid var(--cc-border-soft);
  background: var(--cc-panel);
  scrollbar-width: thin;
}

.SocialPublishModal_leftPane__idm-I::-webkit-scrollbar,
.SocialPublishModal_rightPane__M3WD8::-webkit-scrollbar {
  width: 6px;
}

.SocialPublishModal_leftPane__idm-I::-webkit-scrollbar-thumb,
.SocialPublishModal_rightPane__M3WD8::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  border-radius: 10px;
}

@media (max-width: 720px) {
  .SocialPublishModal_body__VG-dL {
    flex-direction: column;
    overflow-y: auto;
  }

  .SocialPublishModal_leftPane__idm-I,
  .SocialPublishModal_rightPane__M3WD8 {
    flex: 1 1 auto;
    overflow-y: visible;
  }

  .SocialPublishModal_rightPane__M3WD8 {
    border-left: none;
    border-top: 1px solid var(--cc-border-soft);
  }
}

.SocialPublishModal_warning__sFLph {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-warning-text);
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

.SocialPublishModal_warningIcon__U-3tS {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}

/* ---------- Platform cards ---------- */

.SocialPublishModal_platformList__\+7G5q {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.SocialPublishModal_platformCard__9xhUH {
  padding: 16px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.SocialPublishModal_platformCardActive__v3T3S {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

.SocialPublishModal_platformHeader__9\+mn2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.SocialPublishModal_platformDot__DOMh- {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.SocialPublishModal_platformName__G9noq {
  flex: 1 1;
  font-family: var(--cc-font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-text-hi);
}

/* Jump-to-instructions link inside a platform card header */
.SocialPublishModal_guideJumpButton__axj66 {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.SocialPublishModal_guideJumpButton__axj66:hover {
  background: var(--cc-panel-hover);
  text-decoration: underline;
}

/* Toggle switch */
.SocialPublishModal_toggle__6K7-9 {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

.SocialPublishModal_toggle__6K7-9 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.SocialPublishModal_toggleTrack__Gpn6Q {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 2px;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  transition: all 0.2s ease;
}

.SocialPublishModal_toggleThumb__dkvKE {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cc-text-low);
  transition: all 0.2s ease;
}

.SocialPublishModal_toggle__6K7-9 input:checked + .SocialPublishModal_toggleTrack__Gpn6Q {
  background: var(--cc-glow);
  border-color: var(--cc-accent-border);
}

.SocialPublishModal_toggle__6K7-9 input:checked + .SocialPublishModal_toggleTrack__Gpn6Q .SocialPublishModal_toggleThumb__dkvKE {
  transform: translateX(18px);
  background: var(--cc-accent-text);
}

.SocialPublishModal_toggle__6K7-9 input:focus-visible + .SocialPublishModal_toggleTrack__Gpn6Q {
  outline: 2px solid var(--cc-accent-border);
  outline-offset: 2px;
}

.SocialPublishModal_platformHelper__\+Ivfz {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cc-text-mid);
}

/* ---------- Fields ---------- */

.SocialPublishModal_fieldGrid__\+F468 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.SocialPublishModal_field__snhUx {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.SocialPublishModal_fieldLabel__tSyLs {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cc-text-low);
}

.SocialPublishModal_fieldInput__2HyGw,
.SocialPublishModal_captionInput__e0Lkl {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.SocialPublishModal_fieldInput__2HyGw::placeholder,
.SocialPublishModal_captionInput__e0Lkl::placeholder {
  color: var(--cc-text-low);
}

.SocialPublishModal_fieldInput__2HyGw:focus,
.SocialPublishModal_captionInput__e0Lkl:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

/* ---------- Caption ---------- */

.SocialPublishModal_captionSection__Ar8E7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.SocialPublishModal_captionInput__e0Lkl {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

/* ---------- How to connect (right pane) ---------- */

.SocialPublishModal_panelHeader__VIoGZ {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-text-hi);
}

.SocialPublishModal_panelIcon__5yKhh {
  font-size: 1.05rem;
  color: var(--cc-accent-text);
  flex-shrink: 0;
}

.SocialPublishModal_panelTitle__0PCHm {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.SocialPublishModal_panelIntro__w2pg- {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cc-text-mid);
}

.SocialPublishModal_guideSection__YqNx9 {
  padding: 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-panel-strong);
  transition: all 0.25s ease;
  scroll-margin-top: 8px;
}

.SocialPublishModal_guideSectionActive__LGvfX {
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.SocialPublishModal_guideSectionHeader__pMhcg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.SocialPublishModal_guideSectionTitle__SMofD {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.SocialPublishModal_guideSteps__V\+2Bt {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.SocialPublishModal_guideSteps__V\+2Bt li {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--cc-text-mid);
}

.SocialPublishModal_guideSteps__V\+2Bt code {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  background: var(--cc-icon-chip);
  color: var(--cc-accent-text);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-word;
}

.SocialPublishModal_guideSteps__V\+2Bt strong {
  color: var(--cc-text-hi);
  font-weight: 700;
}

.SocialPublishModal_guideSteps__V\+2Bt a,
.SocialPublishModal_guideDocsLink__fN8r4 {
  color: var(--cc-accent-text);
  text-decoration: underline;
  word-break: break-word;
}

.SocialPublishModal_guideDocsLink__fN8r4 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-family: var(--cc-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.SocialPublishModal_guideDocsLinkIcon__nRyFK {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

.SocialPublishModal_guideNote__o\+9-y {
  margin: 10px 0 0;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--cc-warning-text);
  background: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  border-radius: 4px;
}

/* ---------- Footer ---------- */

.SocialPublishModal_footer__Rhhyg {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--cc-border-soft);
  flex-shrink: 0;
}

.SocialPublishModal_primaryButton__Rv7xi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 0 20px;
  height: 42px;
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--cc-glow);
}

.SocialPublishModal_primaryButton__Rv7xi:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

.SocialPublishModal_secondaryButton__s-fc3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 0 20px;
  height: 42px;
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.SocialPublishModal_secondaryButton__s-fc3:hover {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
  color: var(--cc-accent-text);
}

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

@keyframes SocialPublishModal_slideUp__qBVgC {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .SocialPublishModal_overlay__wXSW3,
  .SocialPublishModal_modal__wnr3F {
    animation: none;
  }

  .SocialPublishModal_primaryButton__Rv7xi:hover {
    transform: none;
  }
}

/* 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);
}

/* View-full-size button overlaid on the media preview (revealed on hover) */
.UniversalCustomNode_expandButton__LHtZP {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  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;
  font-size: 0.6rem;
  opacity: 0;
  z-index: 5;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.UniversalCustomNode_imagePreviewContainer__Nb-wP:hover .UniversalCustomNode_expandButton__LHtZP {
  opacity: 1;
}

.UniversalCustomNode_expandButton__LHtZP:hover {
  background-color: var(--custom-node-button-bg-hover);
}

/* --- 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;
}

/* Active state for the isolate toggle */
.UniversalCustomNode_buttonsWrapper__CEIFj .UniversalCustomNode_isolateActive__kakXk {
  background-color: #f59e0b; /* amber-500 - indicates locked/isolated state */
  color: white;
  box-shadow: 0 0 8px #f59e0b;
}

.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;
  display: flex;
  align-items: center;
  gap: 4px;
}

.UniversalCustomNode_connectedBadge__c8mTG {
  font-size: 0.6rem;
  font-weight: 500;
  color: #10b981;
  text-transform: none;
  letter-spacing: 0;
}

.UniversalCustomNode_isolatedBadge__mY\+Wx {
  font-size: 0.6rem;
  font-weight: 500;
  color: #f59e0b;
  text-transform: none;
  letter-spacing: 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;
}

/* Read-only textarea styling when connected to upstream node */
.UniversalCustomNode_textAreaReadOnly__qIvEa {
  background-color: var(--custom-node-icon-bg) !important;
  cursor: default;
  opacity: 0.9;
}

.UniversalCustomNode_textAreaReadOnly__qIvEa:focus {
  box-shadow: none !important;
}

/* Isolated textarea styling - editable but shows isolation state */
.UniversalCustomNode_textAreaIsolated__AIgvg {
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  background-color: rgba(245, 158, 11, 0.05) !important;
}

.UniversalCustomNode_textAreaIsolated__AIgvg:focus {
  box-shadow: inset 0 0 0 1px #f59e0b !important;
}

/* --- 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;
}

/* --- Input/Output Handle Wrappers --- */
.UniversalCustomNode_inputHandleWrapper__EkqBL,
.UniversalCustomNode_outputHandleWrapper__iG7ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.UniversalCustomNode_inputHandleWrapper__EkqBL > *,
.UniversalCustomNode_outputHandleWrapper__iG7ui > * {
  pointer-events: auto;
}

/* --- Handle Info Container (Combined Icon + Label) --- */
.UniversalCustomNode_handleInfoContainer__J9xW9 {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 2px 3px;
  border-radius: 3px;
  background-color: var(--custom-node-icon-bg);
  border: 1px solid var(--custom-node-textarea-border);
  color: var(--custom-node-icon-color);
  transition: all 0.2s ease;
  opacity: 0;
  pointer-events: none;
  min-width: 20px;
}

.UniversalCustomNode_handleInfoLeft__wD9GQ {
  left: -40px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
}

.UniversalCustomNode_handleInfoRight__Je4GI {
  right: -40px;
  left: auto;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
}

.UniversalCustomNode_handleInfoLabel__cVYTL {
  font-size: 0.32rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
}

/* Show handle info on node hover */
.UniversalCustomNode_nodeBase__HqyLd:hover .UniversalCustomNode_handleInfoContainer__J9xW9 {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Handle info when connected/has output */
.UniversalCustomNode_handleInfoConnected__ba85d {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
  background-color: var(--custom-node-button-bg);
  color: var(--custom-node-button-text);
  border-color: var(--custom-node-button-bg);
}

/* Connected-media count badge for multi-media input handles. Sits just above
   the handle dot and stays visible (not hover-gated) so the attached count is
   always readable. */
.UniversalCustomNode_mediaCountBadge__XZLqt {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-135%);
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--custom-node-button-bg);
  border: 1px solid var(--custom-node-bg);
  color: var(--custom-node-button-text);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  pointer-events: none;
  z-index: 11;
}

/* Handle info when isolated - shows orange/muted background */
.UniversalCustomNode_handleInfoIsolated__am4ib {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
  background-color: rgba(245, 158, 11, 0.5) !important;
  border-color: #f59e0b !important;
  color: white;
}

/* Handle info when edge preview active */
.UniversalCustomNode_handleInfoActive__g-VWX {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.1) !important;
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: white;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* --- 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);
}

/* UniversalMediaPreviewModal — full-screen lightbox for node media. */
@keyframes UniversalMediaPreviewModal_umpFadeIn__YgoNx {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.UniversalMediaPreviewModal_overlay__1SxvH {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(3, 7, 18, 0.9);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: UniversalMediaPreviewModal_umpFadeIn__YgoNx 0.18s ease-out;
  padding: 56px 24px 48px;
}

/* ==================== TOOLBAR ==================== */
.UniversalMediaPreviewModal_toolbar__TiS47 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.UniversalMediaPreviewModal_title__qj762 {
  color: #f9fafb;
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
}

.UniversalMediaPreviewModal_toolbarButtons__ghW\+a {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.UniversalMediaPreviewModal_toolButton__uXvbr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #f9fafb;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.UniversalMediaPreviewModal_toolButton__uXvbr svg {
  width: 17px;
  height: 17px;
}

.UniversalMediaPreviewModal_toolButton__uXvbr:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.UniversalMediaPreviewModal_closeButton__xUfKh svg {
  width: 22px;
  height: 22px;
}

.UniversalMediaPreviewModal_closeButton__xUfKh:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 0.9);
}

.UniversalMediaPreviewModal_zoomLabel__SYDyz {
  min-width: 46px;
  text-align: center;
  color: #e5e7eb;
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  -webkit-user-select: none;
          user-select: none;
}

/* ==================== STAGE ==================== */
.UniversalMediaPreviewModal_stage__Aes0R {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.UniversalMediaPreviewModal_image__4IyPM {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  transition: transform 0.05s linear;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.UniversalMediaPreviewModal_video__sZpXz {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* ==================== HINT ==================== */
.UniversalMediaPreviewModal_hint__gH2\+t {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(229, 231, 235, 0.7);
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 640px) {
  .UniversalMediaPreviewModal_hint__gH2\+t {
    display: none;
  }
  .UniversalMediaPreviewModal_title__qj762 {
    max-width: 40vw;
  }
}

/* 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-social-publish-base: #f0f9ff; /* New: Social Publish Sky */
  --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-social-publish-base-border: #38bdf8; /* New: Social Publish Sky 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-social-publish: #0c4a6e; /* New: Social Publish Sky 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); */
  background: var(--cc-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--cc-radius);
  border-left: 1px solid var(--cc-border);
  border-right: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow-soft);
  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: var(--cc-shadow);
}

.Sidebar_sidebar__ppnma.Sidebar_vertical__WIyeU {
  flex-direction: column;
  width: 190px;
  min-width: 190px;
  height: clamp(250px, 75vh, 75vh);
  border-right: 1px solid var(--cc-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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  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: var(--cc-border);
  border-radius: 3px;
}
.Sidebar_scrollableContent__agphR::-webkit-scrollbar-thumb:hover,
.Sidebar_horizontalScrollableNodeList__ZytS1::-webkit-scrollbar-thumb:hover {
  background-color: var(--cc-accent-border);
}

.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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  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 var(--cc-accent-soft));
}
.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 var(--cc-border);
  margin-bottom: 12px;
}

.Sidebar_sidebar__ppnma.Sidebar_horizontal__rGVWA .Sidebar_tabContainer__U6983 {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cc-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 var(--cc-border);
  color: var(--cc-text-mid);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.Sidebar_tabButton__Ydafv:hover {
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

.Sidebar_tabButton__Ydafv.Sidebar_activeTab__3WtVS {
  background-color: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-accent-border);
  font-weight: 700;
  box-shadow: 0 1px 3px var(--cc-glow);
}

.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: var(--cc-accent-text);
  color: var(--cc-panel-strong);
  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: var(--cc-shadow-soft);
  border: 1px solid var(--cc-border-soft);
  z-index: 2;
  transition: all 0.2s ease;
}

.Sidebar_nodeCountBadge__KSi0c.Sidebar_atLimit__5KxEK {
  background-color: var(--cc-error-text);
  box-shadow: 0 0 8px var(--cc-error-border);
}

.Sidebar_nodeCountBadge__KSi0c.Sidebar_nearLimit__k4yZ2 {
  background-color: var(--cc-warning-text);
  box-shadow: 0 0 6px var(--cc-warning-border);
}

.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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  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: var(--cc-overlay);
  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: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  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 var(--cc-border-soft);
}

.Sidebar_overlayHeader__-SlRm h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  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: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  color: var(--cc-text-mid);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.Sidebar_closeButton__oI\+OG:hover {
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
  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: var(--cc-border);
  border-radius: 3px;
}

.Sidebar_overlayContent__Tb55Z::-webkit-scrollbar-thumb:hover {
  background-color: var(--cc-accent-border);
}

.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='socialPublishNode'] {
  background-color: #f0f9ff;
  background-color: var(--btn-social-publish-base);
  border: 1px solid #38bdf8;
  border: 1px solid var(--btn-social-publish-base-border);
  color: #0c4a6e;
  color: var(--text-on-social-publish);
}
.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='socialPublishNode']:hover {
  background-color: #bae6fd;
  border-color: #38bdf8;
  border-color: var(--btn-social-publish-base-border);
}
.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: var(--cc-accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--cc-border-soft);
  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 var(--cc-border-soft);
  flex-shrink: 0;
}

.Sidebar_searchInput__E-c6E {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  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: var(--cc-text-low);
  font-weight: 400;
}

.Sidebar_searchInput__E-c6E:hover {
  border-color: var(--cc-border);
}

.Sidebar_searchInput__E-c6E:focus {
  border-color: var(--cc-accent-border);
  background-color: var(--cc-input-bg);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

/* Info Button and Tooltip */
.Sidebar_infoButton__QWGeK {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--cc-icon-chip);
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-accent-text);
  color: var(--cc-panel-strong);
  transform: scale(1.1);
}

.Sidebar_infoButton__QWGeK svg {
  width: 10px;
  height: 10px;
}

/* Tooltip */
.Sidebar_tooltip__HYWe7 {
  position: fixed;
  padding: 10px 14px;
  background-color: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  box-shadow: var(--cc-shadow);
  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: var(--cc-overlay);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 1050;
}

.NodePickerOverlay_overlay__6F69I {
  position: fixed;
  width: 340px;
  max-height: 420px;
  background: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  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 var(--cc-border-soft);
}

.NodePickerOverlay_searchInput__lkwak {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  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: var(--cc-text-low);
}

.NodePickerOverlay_searchInput__lkwak:focus {
  border-color: var(--cc-accent-border);
  background-color: var(--cc-input-bg);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.NodePickerOverlay_content__q2W2b {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
  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: var(--cc-border);
  border-radius: 3px;
}

.NodePickerOverlay_content__q2W2b::-webkit-scrollbar-thumb:hover {
  background-color: var(--cc-accent-border);
}

.NodePickerOverlay_nodeGrid__KLzX1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.NodePickerOverlay_nodeItem__\+B-u2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 90px;
  width: 90px;
  box-sizing: border-box;
  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;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* 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='socialPublishNode'] {
  background-color: #e0f2fe;
  border: 1px solid #38bdf8;
  color: #0c4a6e;
}
.NodePickerOverlay_nodeItem__\+B-u2[data-node-type='socialPublishNode']:hover {
  background-color: #bae6fd;
}

.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='socialPublishNode'] .NodePickerOverlay_nodeIcon__O38yR svg {
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 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 var(--cc-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.NodePickerOverlay_hint__TOUn7 {
  font-size: 0.7rem;
  color: var(--cc-text-low);
  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: var(--cc-text-low);
}

.NodePickerOverlay_clickRipple__YQbBA {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cc-accent-soft);
  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: var(--cc-text-low);
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
}

/* Node count badge */
.NodePickerOverlay_nodeCountBadge__yYb\+d {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--cc-accent-text);
  color: var(--cc-panel-strong);
  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: var(--cc-shadow-soft);
  border: 1px solid var(--cc-border-soft);
  z-index: 2;
}

.NodePickerOverlay_nodeCountBadge__yYb\+d.NodePickerOverlay_atLimit__muo3H {
  background-color: var(--cc-error-text);
  box-shadow: 0 0 8px var(--cc-error-border);
}

.NodePickerOverlay_nodeCountBadge__yYb\+d.NodePickerOverlay_nearLimit__SiBjn {
  background-color: var(--cc-warning-text);
  box-shadow: 0 0 6px var(--cc-warning-border);
}

/* Info button */
.NodePickerOverlay_infoButton__ZWH1V {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--cc-icon-chip);
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-accent-text);
  color: var(--cc-panel-strong);
  transform: scale(1.1);
}

.NodePickerOverlay_infoButton__ZWH1V svg {
  width: 10px;
  height: 10px;
}

/* Tooltip */
.NodePickerOverlay_tooltip__D-blO {
  position: fixed;
  padding: 10px 14px;
  background-color: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  box-shadow: var(--cc-shadow);
  z-index: 10000;
  pointer-events: none;
  font-family: 'Inconsolata', monospace;
}

/* Light mode support */
[data-theme='light'] .NodePickerOverlay_overlay__6F69I {
  background: var(--cc-panel-strong);
  border-color: var(--cc-border);
}

[data-theme='light'] .NodePickerOverlay_searchInput__lkwak {
  background-color: var(--cc-input-bg);
  border-color: var(--cc-input-border);
  color: var(--cc-input-text);
}

[data-theme='light'] .NodePickerOverlay_searchInput__lkwak::placeholder {
  color: var(--cc-text-low);
}

[data-theme='light'] .NodePickerOverlay_hint__TOUn7 {
  color: var(--cc-text-low);
}

[data-theme='light'] .NodePickerOverlay_emptyState__BLpBC {
  color: var(--cc-text-low);
}

[data-theme='light'] .NodePickerOverlay_header__tl4A1,
[data-theme='light'] .NodePickerOverlay_footer__9G1hr {
  border-color: var(--cc-border-soft);
}

/* Section divider */
.NodePickerOverlay_sectionDivider__Ale2J {
  display: flex;
  align-items: center;
  margin: 16px 0 12px 0;
  gap: 12px;
}

.NodePickerOverlay_sectionDivider__Ale2J::before,
.NodePickerOverlay_sectionDivider__Ale2J::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--cc-border);
}

.NodePickerOverlay_sectionLabel__XtXwB {
  font-size: 0.65rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  color: var(--cc-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

[data-theme='light'] .NodePickerOverlay_sectionDivider__Ale2J::before,
[data-theme='light'] .NodePickerOverlay_sectionDivider__Ale2J::after {
  background: var(--cc-border);
}

[data-theme='light'] .NodePickerOverlay_sectionLabel__XtXwB {
  color: var(--cc-accent-text);
}

/* 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 blurred background */
.chat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cc-overlay);
  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: var(--cc-panel-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  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 var(--cc-border);
  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: var(--cc-text-hi);
}

/* Overlay Header */
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cc-border);
  background-color: var(--cc-panel-strong);
  flex-shrink: 0;
}

.header-title-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.overlay-header h3 {
  margin: 0;
  padding: 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.beta-badge {
  font-family: var(--cc-font-mono);
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: var(--cc-shadow-soft);
}

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

.close-button {
  background: var(--cc-icon-chip);
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  color: var(--cc-text-hi);
  transform: rotate(90deg);
}

.view-toggle-button,
.clear-chat-button {
  background: var(--cc-icon-chip);
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

.clear-chat-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* Warning and Error Messages */
.chat-warning,
.chat-error {
  padding: 12px 16px;
  border-radius: var(--cc-radius-sm);
  margin: 16px 24px 0 24px;
  font-size: 0.875rem;
  flex-shrink: 0;
  font-family: var(--cc-font-mono);
}

.chat-warning {
  background-color: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.chat-error {
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  color: var(--cc-error-text);
}

.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: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
  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: var(--cc-accent);
  color: var(--cc-btn-primary-text);
}

.assistant-message .message-icon {
  background-color: var(--cc-icon-chip);
  color: var(--cc-accent-text);
}

.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-family: var(--cc-font-mono);
  font-size: 0.7rem;
  color: var(--cc-accent-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.user-message .message-role {
  text-align: right;
}

.message-text {
  padding: 12px 16px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  border-bottom-right-radius: 4px;
}

.assistant-message .message-text {
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-border);
  border-bottom-left-radius: 4px;
}

/* Better formatting for message text content */
.message-text strong {
  font-weight: 700;
  color: inherit;
}

.message-text code {
  font-family: var(--cc-font-mono);
  background-color: color-mix(in srgb, var(--cc-text-hi) 12%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.user-message .message-text code {
  background-color: color-mix(
    in srgb,
    var(--cc-btn-primary-text) 15%,
    transparent
  );
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: var(--cc-accent-text);
  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 var(--cc-border);
  flex-shrink: 0;
}

.chat-input {
  flex: 1 1;
  background-color: var(--cc-input-bg);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  padding: 10px 12px;
  color: var(--cc-input-text);
  font-size: 0.9rem;
  font-family: var(--cc-font-mono);
  resize: none;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

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

.chat-input::placeholder {
  color: var(--cc-text-low);
}

.send-button {
  background-color: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-radius: var(--cc-radius-sm);
  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: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.send-button:disabled {
  background-color: var(--cc-panel);
  color: var(--cc-text-low);
  border-color: var(--cc-border);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Custom Scrollbar */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px 0;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: var(--cc-accent-border);
}

.chat-input::-webkit-scrollbar {
  width: 4px;
}

.chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.chat-input::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  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: var(--cc-text-hi);

  /* 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: var(--cc-shadow-soft);
}

/* 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,
    var(--cc-border),
    var(--cc-accent),
    var(--cc-border),
    transparent
  );
  background: conic-gradient(
    from 0deg,
    transparent,
    var(--gradient-start, var(--cc-border)),
    var(--gradient-mid, var(--cc-accent)),
    var(--gradient-end, var(--cc-border)),
    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;

  /* Panel surface background */
  background: var(--cc-panel-strong);
  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: var(--cc-accent-border);
  --gradient-mid: var(--cc-accent);
  --gradient-end: var(--cc-accent-soft);
}

.StatusToast_syncing__7jRMp {
  --gradient-start: var(--cc-accent-border);
  --gradient-mid: var(--cc-accent);
  --gradient-end: var(--cc-accent-soft);
}

.StatusToast_saved__IRG2R {
  --gradient-start: var(--cc-success-border);
  --gradient-mid: var(--cc-success-text);
  --gradient-end: var(--cc-success-border);
}

.StatusToast_error__MlyY1 {
  --gradient-start: var(--cc-error-border);
  --gradient-mid: var(--cc-error-text);
  --gradient-end: var(--cc-error-border);
}

/* 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: var(--cc-bg);
  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: var(--cc-bg);
}

.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: var(--cc-text-hi);
  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 var(--cc-border);
}

/* --- Close Button --- */
.CustomNodeCreatorModal_closeButton__CTV8R {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: transparent;
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-icon-chip);
  color: var(--cc-text-hi);
}

.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 var(--cc-border);
}

.CustomNodeCreatorModal_panelHeader__n\+fIh h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_headerIcon__JmP-m {
  width: 20px;
  height: 20px;
  color: var(--cc-accent-text);
}

/* --- 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_styleTab__8ZpwJ:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 12%, transparent);
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_styleTabActive__Xrqvf {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 12px var(--cc-glow);
}

.CustomNodeCreatorModal_styleTabLabel__JCqqE {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_styleTabDesc__pYvmr {
  font-size: 0.7rem;
  color: var(--cc-text-low);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_styleTabActive__Xrqvf .CustomNodeCreatorModal_styleTabLabel__JCqqE {
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_styleTabActive__Xrqvf .CustomNodeCreatorModal_styleTabDesc__pYvmr {
  color: var(--cc-text-mid);
}

/* --- Preview Media Type Selector --- */
.CustomNodeCreatorModal_previewMediaTypeSelector__yvl3a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--cc-panel);
  border-radius: 8px;
  border: 1px solid var(--cc-border);
}

.CustomNodeCreatorModal_previewMediaTypeLabel__t\+yiL {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cc-text-mid);
  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: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_previewMediaTypeTab__q0cNw:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 12%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_previewMediaTypeTabActive__dT2q1 {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  box-shadow: 0 0 8px var(--cc-glow);
}

.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, var(--cc-panel), var(--cc-panel-strong));
  border-radius: 12px;
  border: 1px dashed var(--cc-border);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_previewControlBtn__Bj0R0:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_previewControlActive__1z5BT {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_previewControlActive__1z5BT:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 27%, transparent);
  border-color: var(--cc-accent-border);
}

/* 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.CustomNodeCreatorModal_colorInputLabel__bMlIM:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

/* 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 var(--cc-border);
  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_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;
}

/* 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;
}

/* --- 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 ==================== */
/* .nodeCollapsed / .nodeExpanded are state classes toggled on the node root;
   they carry no styles of their own and only drive the descendant selectors
   below (e.g. `.nodeExpanded .mockCollapsedFrame`). */

/* Collapsed Frame - holds the icon/indicators/ghost lines and slides out to
   the left when the node expands. Single consolidated rule (previously
   declared twice with conflicting gap values). */
.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;
  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;
}

.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_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%;
}

/* 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;
}

/* --- 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: var(--cc-border);
  border-radius: 10px;
}

.CustomNodeCreatorModal_leftPanel__1OOxP::-webkit-scrollbar-thumb:hover,
.CustomNodeCreatorModal_rightPanel__xv1F4::-webkit-scrollbar-thumb:hover {
  background-color: var(--cc-text-low);
}

/* --- 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;
  }
}

/* ==================== 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
}

.CustomNodeCreatorModal_nodeNameLabel__MBNEb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_nodeNameLabel__MBNEb svg {
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_nodeNameInput__V1BPd {
  width: 100%;
  padding: 10px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_nodeNameInput__V1BPd::placeholder {
  color: var(--cc-text-low);
  font-weight: 400;
}

.CustomNodeCreatorModal_nodeDescriptionSection__JrTc0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--cc-panel);
  border-radius: 8px;
  border: 1px solid var(--cc-border-soft);
}

.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: var(--cc-text-mid);
}

.CustomNodeCreatorModal_nodeDescriptionLabel__cR2HB svg {
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_nodeDescriptionInput__\+2Gpp {
  width: 100%;
  padding: 10px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_nodeDescriptionInput__\+2Gpp::placeholder {
  color: var(--cc-text-low);
  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: var(--cc-text-mid);
}

.CustomNodeCreatorModal_iconSelectionLabel__PXDY\+ svg {
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_iconGrid__18Z8h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  padding: 12px;
  background: var(--cc-panel);
  border-radius: 8px;
  border: 1px solid var(--cc-border-soft);
  max-height: 220px;
  overflow-y: auto;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar {
  width: 6px;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar-track {
  background: var(--cc-panel);
  border-radius: 3px;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cc-accent-text) 27%, transparent);
  border-radius: 3px;
}

.CustomNodeCreatorModal_iconGrid__18Z8h::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 34%, transparent);
}

.CustomNodeCreatorModal_iconGridItem__YXSPO {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_iconGridItem__YXSPO:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 12%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_iconGridItemActive__9eE4a {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_iconGridItemActive__9eE4a:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 24%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_saveError__IWdg2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  border-radius: 4px;
  color: var(--cc-error-text);
  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: var(--cc-panel);
  border: 2px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_stepBox__aXmnI:hover {
  border-color: var(--cc-border);
  background: var(--cc-panel-hover);
}

.CustomNodeCreatorModal_stepActive__fxB2p {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_stepCompleted__Aoemm {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_stepArrow__-LrP0 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-text-low);
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_stepArrowActive__8XI51 {
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_stepLabels__xe0y0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cc-border);
  margin-bottom: 16px;
}

.CustomNodeCreatorModal_stepLabel__CeNMb {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--cc-text-low);
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_stepLabelActive__jTDsJ {
  color: var(--cc-accent-text);
}

/* ==================== 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: var(--cc-accent-text);
  opacity: 0.7;
}

.CustomNodeCreatorModal_stepInfo__n0icB h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_stepInfo__n0icB p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cc-text-mid);
  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: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_addHandleBtn__i38V5 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 4px;
  color: var(--cc-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addHandleBtn__i38V5:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 24%, transparent);
  border-color: var(--cc-accent-border);
}

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

.CustomNodeCreatorModal_handleItem__UKpJM {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_handleItem__UKpJM:hover {
  border-color: var(--cc-border);
}

.CustomNodeCreatorModal_primaryBtn__lsroy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-low);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_primaryBtn__lsroy:hover {
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.CustomNodeCreatorModal_primaryActive__QJz9d {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.CustomNodeCreatorModal_handleLabelInput__cdSUL {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_handleLabelInput__cdSUL:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_handleLabelInput__cdSUL::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_handleTypeSelect__iVRHk {
  width: 90px;
  padding: 6px 8px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_handleTypeSelect__iVRHk option {
  background: var(--cc-panel-strong);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_deleteHandleBtn__sB3V0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-low);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_deleteHandleBtn__sB3V0:hover:not(:disabled) {
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
  background: var(--cc-error-bg);
}

.CustomNodeCreatorModal_deleteHandleBtn__sB3V0:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.CustomNodeCreatorModal_handleNote__RcPWL {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--cc-warning-text);
  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 var(--cc-border);
  margin-top: auto;
}

.CustomNodeCreatorModal_navBtn__9qzA- {
  flex: 1 1;
  padding: 10px 20px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_navBtn__9qzA-:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.CustomNodeCreatorModal_navBtnPrimary__ixw3R {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_navBtnPrimary__ixw3R:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cc-accent-text) 30%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

/* ==================== 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  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: var(--cc-accent-text);
  opacity: 0.8;
}

.CustomNodeCreatorModal_settingsSectionHeader__dP\+Y9 h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_settingsSubHeader__ycMkk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cc-border);
}

.CustomNodeCreatorModal_settingsSubHeader__ycMkk span {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

/* Toggle Button */
.CustomNodeCreatorModal_toggleBtn__iXSQa {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--cc-text-low);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_toggleBtn__iXSQa:hover {
  color: var(--cc-text-mid);
}

.CustomNodeCreatorModal_toggleBtn__iXSQa svg {
  color: inherit;
}

/* react-icons does not emit a per-icon class, so key off the marker class we
   attach to the "on" icon; the svg then inherits the button's color. */
.CustomNodeCreatorModal_toggleBtn__iXSQa:has(.CustomNodeCreatorModal_toggleOnActive__F-f74) {
  color: var(--cc-success-text);
}

/* 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
}

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

.CustomNodeCreatorModal_placeholderInput__iMLeJ {
  flex: 1 1;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-mid);
  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: var(--cc-accent-border);
  color: var(--cc-text-hi);
  font-style: normal;
}

.CustomNodeCreatorModal_placeholderInput__iMLeJ::placeholder {
  color: var(--cc-text-low);
}

/* 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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_apiUrlInput__c\+r\+f {
  width: 100%;
  padding: 10px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_apiUrlInput__c\+r\+f::placeholder {
  color: var(--cc-text-low);
}

/* HTTP Method Selector */
.CustomNodeCreatorModal_methodSelector__UF0Hw {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.CustomNodeCreatorModal_methodBtn__xj\+4T {
  padding: 6px 12px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_methodBtn__xj\+4T:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_methodBtnActive__ajVqS {
  background: color-mix(in srgb, var(--cc-accent-text) 24%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_methodBtnActive__ajVqS:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 30%, transparent);
  border-color: var(--cc-accent-border);
}

/* 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  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: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_paramNameInput__UM6zn:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_paramNameInput__UM6zn::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_paramTypeSelect__OYduG {
  width: 85px;
  padding: 6px 8px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_paramTypeSelect__OYduG option {
  background: var(--cc-panel-strong);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_paramDefaultInput__I6inj {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-mid);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_paramDefaultInput__I6inj:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_paramDefaultInput__I6inj::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq {
  width: 140px;
  padding: 6px 8px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq option {
  background: var(--cc-panel-strong);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_paramHandleSelect__XbeCq optgroup {
  color: var(--cc-text-mid);
  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 var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-low);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.CustomNodeCreatorModal_requiredBtn__XvngT:hover {
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

.CustomNodeCreatorModal_requiredActive__uf0Xx {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

/* Add to Keys Button */
.CustomNodeCreatorModal_addToKeysBtn__1hAtJ {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 4px;
  color: var(--cc-accent-text);
  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: color-mix(in srgb, var(--cc-accent-text) 24%, transparent);
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_addToKeysBtn__1hAtJ:active {
  background: color-mix(in srgb, var(--cc-accent-text) 30%, transparent);
}

/* ==================== ADD KEY MODAL ==================== */
.CustomNodeCreatorModal_addKeyModalOverlay__X6Aiq {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cc-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.CustomNodeCreatorModal_addKeyModal__zxgs8 {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  width: 400px;
  max-width: 90vw;
  box-shadow: var(--cc-shadow);
  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 var(--cc-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_addKeyModalHeader__FHdSr h3 {
  flex: 1 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_addKeyModalClose__4G3jg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--cc-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeyModalClose__4G3jg:hover {
  background: var(--cc-icon-chip);
  color: var(--cc-text-hi);
}

.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: var(--cc-text-mid);
}

.CustomNodeCreatorModal_addKeyField__TwHmi input {
  padding: 10px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeyField__TwHmi input:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 2px var(--cc-glow);
}

.CustomNodeCreatorModal_addKeyField__TwHmi input::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_addKeyModalFooter__xUTST {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--cc-border);
  background: var(--cc-panel);
  border-radius: 0 0 12px 12px;
}

.CustomNodeCreatorModal_addKeySkipBtn__ADWwT {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeySkipBtn__ADWwT:hover {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_addKeySaveBtn__5piRt {
  padding: 8px 16px;
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: 6px;
  color: var(--cc-btn-primary-text);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_addKeySaveBtn__5piRt:hover {
  background: var(--cc-btn-primary-bg-hover);
}

/* ==================== 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  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: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_headerNameInput__8Ay7c:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_headerNameInput__8Ay7c::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_headerValueInput__e3dKG {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-mid);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_headerValueInput__e3dKG:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_headerValueInput__e3dKG::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU {
  width: 140px;
  padding: 6px 8px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU option {
  background: var(--cc-panel-strong);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_headerHandleSelect__SdLEU optgroup {
  color: var(--cc-text-mid);
  font-style: normal;
  font-weight: 600;
}

/* ==================== POLLING CONFIGURATION ==================== */
.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: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_pollingFieldsSection__Q\+L65 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cc-border-soft);
}

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

.CustomNodeCreatorModal_pollingFieldInput__acTi9 {
  width: 100%;
  padding: 8px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_pollingFieldInput__acTi9::placeholder {
  color: var(--cc-text-low);
}

/* URL Hint */
.CustomNodeCreatorModal_urlHint__6nv2m {
  font-size: 0.7rem;
  color: var(--cc-text-low);
  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: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 4px;
  color: var(--cc-accent-text);
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_fieldSuggestionBtn__\+Rb41:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 24%, transparent);
  border-color: var(--cc-accent-border);
}

/* Sample Response Section */
.CustomNodeCreatorModal_sampleResponseSection__XyECw {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_sampleResponseTextarea__OHGQB {
  width: 100%;
  padding: 10px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_sampleResponseTextarea__OHGQB::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_sampleResponseError__MgQla {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  border-radius: 4px;
  color: var(--cc-error-text);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

/* Generic inline error message (sample-response parse errors, per-step
   validation, etc.) */
.CustomNodeCreatorModal_errorMessage__TBOna {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  border-radius: 6px;
  color: var(--cc-error-text);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

/* Info box shown after fields are auto-detected from a sample response */
.CustomNodeCreatorModal_detectedFieldsInfo__0UnmP {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  border-radius: 6px;
}

.CustomNodeCreatorModal_detectedFieldsLabel__5p7x6 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cc-success-text);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_detectedFieldsHint__45oPE {
  font-size: 0.7rem;
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

/* Depth selector for auto-detecting output mapping fields */
.CustomNodeCreatorModal_depthSelect__WASzj {
  padding: 8px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
}

.CustomNodeCreatorModal_depthSelect__WASzj:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

/* 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: var(--cc-text-mid);
  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: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  border-radius: 4px;
  color: var(--cc-success-text);
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_detectedUrlBtn__4wMfL:hover {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
}

.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: var(--cc-pro-bg);
  color: var(--cc-pro-text);
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='video'] {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='audio'] {
  background: var(--cc-premium-bg);
  color: var(--cc-premium-text);
}

.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='unknown'],
.CustomNodeCreatorModal_urlTypeBadge__uvH6z[data-type='file'] {
  background: var(--cc-icon-chip);
  color: var(--cc-text-mid);
}

.CustomNodeCreatorModal_urlConfigList__ZN5oc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CustomNodeCreatorModal_urlConfigItem__OCpmy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
}

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

.CustomNodeCreatorModal_urlPathInput__\+44db {
  flex: 1 1;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_urlPathInput__\+44db:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_urlPathInput__\+44db::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_urlTypeSelect__0vSFT {
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  min-width: 80px;
}

.CustomNodeCreatorModal_urlTypeSelect__0vSFT:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: color 0.2s ease;
}

.CustomNodeCreatorModal_urlOptionLabel__T0O1n:hover {
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_urlOptionLabel__T0O1n input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--cc-accent-text);
  cursor: pointer;
}

.CustomNodeCreatorModal_noUrlConfigsMessage__YHkAA {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: var(--cc-panel);
  border: 1px dashed var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-low);
  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 var(--cc-border-soft);
  margin-top: 4px;
}

.CustomNodeCreatorModal_localSaveLabel__rWQ9a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
  white-space: nowrap;
}

.CustomNodeCreatorModal_localSavePathInput__J7MW- {
  flex: 1 1;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_localSavePathInput__J7MW-:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_localSavePathInput__J7MW-::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_browsePathBtn__8E7V6 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 4px;
  color: var(--cc-accent-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_browsePathBtn__8E7V6:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 24%, transparent);
  border-color: var(--cc-accent-border);
}

/* ==================== 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: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  border-radius: 4px;
  color: var(--cc-success-text);
  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: var(--cc-success-bg);
  border-color: var(--cc-success-border);
}

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

.CustomNodeCreatorModal_testApiBtn__QDCfO.CustomNodeCreatorModal_testing__raiXk {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

/* 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: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  border-radius: 6px;
  color: var(--cc-error-text);
  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: var(--cc-success-text);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_testResultJson__F7UPp {
  margin: 0;
  padding: 10px 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  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: var(--cc-text-low);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_testInputsLabel__CLKG\+ svg {
  color: var(--cc-accent-text);
  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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_requiredMark__6eNBY {
  color: var(--cc-error-text);
  font-weight: bold;
}

.CustomNodeCreatorModal_testTextArea__zuTSe {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_testTextArea__zuTSe::placeholder {
  color: var(--cc-text-low);
}

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

.CustomNodeCreatorModal_testParamInput__T-XEl {
  flex: 1 1;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_testParamInput__T-XEl:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_testParamInput__T-XEl::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_paramTypeTag__fPNK5 {
  padding: 2px 6px;
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--cc-accent-text);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_displayModeBtn__CI1XJ:hover {
  border-color: var(--cc-border);
  background: var(--cc-panel);
}

.CustomNodeCreatorModal_displayModeActive__lo8gW {
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_displayModeActive__lo8gW:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_displayModeLabel__3J577 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_displayModeActive__lo8gW .CustomNodeCreatorModal_displayModeLabel__3J577 {
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_displayModeDesc__qD5lW {
  font-size: 0.65rem;
  color: var(--cc-text-low);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_displayModeActive__lo8gW .CustomNodeCreatorModal_displayModeDesc__qD5lW {
  color: var(--cc-accent-text);
}

/* 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
}

.CustomNodeCreatorModal_jsonPathInput__0-THH {
  flex: 1 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  transition: border-color 0.2s ease;
}

.CustomNodeCreatorModal_jsonPathInput__0-THH:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.CustomNodeCreatorModal_jsonPathInput__0-THH::placeholder {
  color: var(--cc-text-low);
}

.CustomNodeCreatorModal_mappingArrow__M4yKa {
  color: var(--cc-text-low);
  flex-shrink: 0;
}

.CustomNodeCreatorModal_outputHandleSelect__hcbws {
  width: 100px;
  padding: 6px 8px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-border);
}

.CustomNodeCreatorModal_outputHandleSelect__hcbws option {
  background: var(--cc-panel-strong);
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_noMappingsPlaceholder__cbosV {
  padding: 16px;
  text-align: center;
  color: var(--cc-text-low);
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  background: var(--cc-panel);
  border: 1px dashed var(--cc-border);
  border-radius: 6px;
}

/* Schema Child Nodes */
.CustomNodeCreatorModal_schemaPreview__VyY3i {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CustomNodeCreatorModal_schemaPreviewHeader__OMRMt {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
}

.CustomNodeCreatorModal_schemaFieldItem__T4QZT svg {
  color: var(--cc-accent-text);
  flex-shrink: 0;
}

.CustomNodeCreatorModal_schemaFieldName__73hRP {
  flex: 1 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_schemaFieldType__vd-A3 {
  font-size: 0.7rem;
  color: var(--cc-text-low);
  font-family: 'Inconsolata', monospace;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--cc-accent-text) 12%, transparent);
  border-radius: 3px;
}

.CustomNodeCreatorModal_schemaPlaceholder__L0II3 {
  padding: 12px;
  text-align: center;
  color: var(--cc-text-low);
  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: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_navBtnCreate__8Yd4V:hover:not(:disabled) {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

/* 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: var(--cc-icon-chip) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-mid) !important;
}

.CustomNodeCreatorModal_navBtnDisabledBeta__nhjZr:hover {
  background: var(--cc-icon-chip) !important;
}

.CustomNodeCreatorModal_betaBadge__4fF45 {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  background: var(--cc-accent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'Inconsolata', monospace;
  color: var(--cc-btn-primary-text);
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px var(--cc-glow);
  z-index: 1;
}

/* Save Draft Button */
.CustomNodeCreatorModal_navBtnDraft__-gLhe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.CustomNodeCreatorModal_navBtnDraft__-gLhe:hover:not(:disabled) {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.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: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  border-radius: 6px;
  color: var(--cc-warning-text);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_showDraftBtn__dg1ZC:hover {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.CustomNodeCreatorModal_showDraftBtnActive__JeA8M {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

/* ==================== DRAFT PREVIEW CONTAINER ==================== */
.CustomNodeCreatorModal_draftPreviewContainer__NjgAh {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  height: 100%;
  overflow: hidden;
}

.CustomNodeCreatorModal_draftPreviewHeader__uOTd1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cc-border-soft);
  color: var(--cc-warning-text);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_draftPreviewJson__KiPHu {
  flex: 1 1;
  padding: 12px;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-hi);
  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: var(--cc-text-low);
  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: var(--cc-pro-bg);
  border: 1px solid var(--cc-pro-border);
  border-radius: 6px;
  color: var(--cc-pro-text);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_openDraftBtn__lYjDB:hover {
  background: var(--cc-pro-bg);
  border-color: var(--cc-pro-border);
  color: var(--cc-pro-text);
}

/* ==================== AUTO SAVE BUTTON ==================== */
.CustomNodeCreatorModal_autoSaveBtn__tX3dw {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  color: var(--cc-text-low);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_autoSaveBtn__tX3dw:hover {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_autoSaveBtnActive__vOn-K {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_autoSaveBtnActive__vOn-K:hover {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

/* ==================== DRAFTS MODAL ==================== */
.CustomNodeCreatorModal_draftsModalOverlay__Rz0yD {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cc-overlay);
  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: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--cc-shadow);
}

.CustomNodeCreatorModal_draftsModalHeader__0kpgN {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-panel);
}

.CustomNodeCreatorModal_draftsModalTitle__bhNVc {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_draftsModalTitle__bhNVc svg {
  color: var(--cc-pro-text);
}

.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: var(--cc-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftsModalClose__VZ02f:hover {
  background: var(--cc-error-bg);
  color: var(--cc-error-text);
}

.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: var(--cc-text-mid);
  text-align: center;
}

.CustomNodeCreatorModal_draftsLoading__5-8rh svg {
  color: var(--cc-pro-text);
}

.CustomNodeCreatorModal_draftsError__2UL7H svg {
  color: var(--cc-error-text);
}

.CustomNodeCreatorModal_draftsError__2UL7H span {
  color: var(--cc-error-text);
}

.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: var(--cc-text-low);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftItem__m5x33:hover {
  border-color: var(--cc-border);
  background: var(--cc-panel-hover);
}

.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: var(--cc-text-hi);
  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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
  padding: 2px 6px;
  background: var(--cc-icon-chip);
  border-radius: 4px;
}

.CustomNodeCreatorModal_draftItemDate__2NXTI {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--cc-text-low);
  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: var(--cc-pro-bg);
  border: 1px solid var(--cc-pro-border);
  border-radius: 6px;
  color: var(--cc-pro-text);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftLoadBtn__BZ4S8:hover {
  background: var(--cc-pro-bg);
  border-color: var(--cc-pro-border);
  color: var(--cc-pro-text);
}

.CustomNodeCreatorModal_draftDeleteBtn__HUCPp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--cc-text-low);
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_draftDeleteBtn__HUCPp:hover {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

/* ==================== AI COMPANION ==================== */

/* AI Button in Navigation */
.CustomNodeCreatorModal_navBtnAI__O44hE {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cc-accent-text) 16%, transparent),
    color-mix(in srgb, var(--cc-accent-text) 16%, transparent)
  );
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  flex: 0 0 auto;
  min-width: 70px;
  margin-left: auto;
}

.CustomNodeCreatorModal_navBtnAI__O44hE:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cc-accent-text) 24%, transparent),
    color-mix(in srgb, var(--cc-accent-text) 24%, transparent)
  );
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  box-shadow: 0 0 12px var(--cc-glow);
}

.CustomNodeCreatorModal_navBtnAIActive__hWQxm {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cc-accent-text) 27%, transparent),
    color-mix(in srgb, var(--cc-accent-text) 27%, transparent)
  );
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  box-shadow: 0 0 16px var(--cc-glow);
}

/* AI Companion Overlay */
.CustomNodeCreatorModal_aiCompanionOverlay__QYYUZ {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--cc-accent-border);
  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 var(--cc-accent-border);
  flex-shrink: 0;
}

.CustomNodeCreatorModal_aiCompanionTitle__FU9yM {
  display: flex;
  align-items: center;
  gap: 10px;
}

.CustomNodeCreatorModal_aiCompanionTitle__FU9yM svg {
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_aiCompanionTitle__FU9yM h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiCompanionStep__TPCdf {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  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: var(--cc-text-low);
  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: var(--cc-error-bg);
  color: var(--cc-error-text);
}

.CustomNodeCreatorModal_aiCompanionCloseBtn__9X-dP:hover {
  background: var(--cc-icon-chip);
  color: var(--cc-text-hi);
}

/* 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: var(--cc-accent-soft) transparent;
}

.CustomNodeCreatorModal_aiCompanionMessages__kU52C::-webkit-scrollbar {
  width: 6px;
}

.CustomNodeCreatorModal_aiCompanionMessages__kU52C::-webkit-scrollbar-track {
  background: transparent;
}

.CustomNodeCreatorModal_aiCompanionMessages__kU52C::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cc-accent-text) 27%, transparent);
  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: var(--cc-text-mid);
}

.CustomNodeCreatorModal_aiCompanionWelcome__wrC5a svg {
  color: var(--cc-accent-text);
  margin-bottom: 16px;
}

.CustomNodeCreatorModal_aiCompanionWelcome__wrC5a h4 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: var(--cc-text-hi);
  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: color-mix(in srgb, var(--cc-accent-text) 12%, transparent);
  border: 1px solid var(--cc-accent-border);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--cc-accent-text);
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.CustomNodeCreatorModal_aiCompanionSuggestions__iekyk button:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 20%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

/* 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: var(--cc-pro-bg);
  border: 1px solid var(--cc-pro-border);
  color: var(--cc-pro-text);
  align-self: flex-end;
  margin-left: auto;
}

.CustomNodeCreatorModal_aiMessageAssistant__MIREy {
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border: 1px solid var(--cc-accent-border);
  color: var(--cc-text-hi);
  align-self: flex-start;
}

.CustomNodeCreatorModal_aiMessageLoading__wQXjy {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-text-mid);
}

/* Markdown Formatting Styles */
.CustomNodeCreatorModal_aiBold__Y8e15 {
  font-weight: 700;
  color: var(--cc-text-hi);
}

.CustomNodeCreatorModal_aiItalic__3zV8- {
  font-style: italic;
  color: var(--cc-text-mid);
}

.CustomNodeCreatorModal_aiInlineCode__0THbl {
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-accent-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85em;
  color: var(--cc-accent-text);
}

/* 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: var(--cc-accent-text);
  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: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  border-radius: 8px;
  color: var(--cc-error-text);
  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 var(--cc-accent-border);
  flex-shrink: 0;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1 {
  flex: 1 1;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--cc-text-hi);
  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: var(--cc-accent-soft) 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: color-mix(in srgb, var(--cc-accent-text) 27%, transparent);
  border-radius: 2px;
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1:focus {
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 2px var(--cc-glow);
}

.CustomNodeCreatorModal_aiCompanionInput__IwGI1::placeholder {
  color: var(--cc-text-low);
}

.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,
    color-mix(in srgb, var(--cc-accent-text) 27%, transparent),
    color-mix(in srgb, var(--cc-accent-text) 27%, transparent)
  );
  border: 1px solid var(--cc-accent-border);
  border-radius: 8px;
  color: var(--cc-accent-text);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.CustomNodeCreatorModal_aiCompanionSendBtn__Q7QoC:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cc-accent-text) 30%, transparent),
    color-mix(in srgb, var(--cc-accent-text) 30%, transparent)
  );
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
  box-shadow: 0 0 12px var(--cc-glow);
}

.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: var(--cc-panel);
  border: 1px solid var(--cc-accent-border);
  border-radius: 6px;
  color: var(--cc-text-mid);
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CustomNodeCreatorModal_aiCompanionModeBtn__rFgwv:hover {
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border-color: var(--cc-accent-border);
  color: var(--cc-accent-text);
}

.CustomNodeCreatorModal_aiCompanionModeBtnActive__jmzI7 {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_aiCompanionModeBtnActive__jmzI7:hover {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_aiCompanionModeBtnSmart__\+oXzm {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

.CustomNodeCreatorModal_aiCompanionModeBtnSmart__\+oXzm:hover {
  background: var(--cc-warning-bg);
  border-color: var(--cc-warning-border);
  color: var(--cc-warning-text);
}

/* Permission Panel */
.CustomNodeCreatorModal_aiPermissionPanel__9wBON {
  flex-shrink: 0;
  background: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.CustomNodeCreatorModal_aiPermissionHeader__h0Gbl {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-success-text);
  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: var(--cc-success-text) transparent;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9::-webkit-scrollbar {
  width: 4px;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9::-webkit-scrollbar-track {
  background: transparent;
}

.CustomNodeCreatorModal_aiPermissionActions__-utx9::-webkit-scrollbar-thumb {
  background: var(--cc-success-bg);
  border-radius: 2px;
}

.CustomNodeCreatorModal_aiPermissionAction__GOSne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  border-radius: 8px;
}

.CustomNodeCreatorModal_aiPermissionActionIcon__J-k-t {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--cc-accent-text) 16%, transparent);
  border-radius: 6px;
  color: var(--cc-accent-text);
  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: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.CustomNodeCreatorModal_aiPermissionActionDesc__2MpqA {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  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: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  color: var(--cc-error-text);
}

.CustomNodeCreatorModal_aiPermissionRejectBtn__bxT1C:hover {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

.CustomNodeCreatorModal_aiPermissionApproveBtn__ot2oH {
  background: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  color: var(--cc-success-text);
}

.CustomNodeCreatorModal_aiPermissionApproveBtn__ot2oH:hover {
  background: color-mix(in srgb, var(--cc-success-text) 22%, transparent);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
  box-shadow: 0 0 12px var(--cc-success-border);
}

/* 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: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.GroupCreationModal_description__POWm6 {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-text-mid);
  font-family: var(--cc-font-body);
}

.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: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.GroupCreationModal_optional__cxttC {
  font-weight: 400;
  color: var(--cc-text-low);
  font-size: 12px;
}

.GroupCreationModal_input__sLjcE,
.GroupCreationModal_textarea__VQj6O {
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
  transition: border-color 0.2s;
  font-family: var(--cc-font-mono);
}

.GroupCreationModal_textarea__VQj6O {
  resize: none;
  min-height: 60px;
}

.GroupCreationModal_input__sLjcE:focus,
.GroupCreationModal_textarea__VQj6O:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.GroupCreationModal_input__sLjcE::placeholder,
.GroupCreationModal_textarea__VQj6O::placeholder {
  color: var(--cc-text-low);
}

.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 var(--cc-accent-border);
}

.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: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  font-family: var(--cc-font-mono);
}

.GroupCreationModal_cancelButton__hpgOE {
  background: transparent;
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.GroupCreationModal_cancelButton__hpgOE:hover {
  background: var(--cc-icon-chip);
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

.GroupCreationModal_confirmButton__5FQ-8 {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-btn-primary-bg);
  font-weight: 700;
}

.GroupCreationModal_confirmButton__5FQ-8:hover {
  background: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

/* 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: color-mix(in srgb, var(--cc-text-hi) 20%, transparent);
  outline: none;
  cursor: pointer;
}

.GroupCreationModal_opacitySlider__2GMSR::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  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: var(--cc-accent-text);
  cursor: pointer;
  border: none;
}

.GroupCreationModal_opacityValue__5Xq4p {
  font-size: 13px;
  color: var(--cc-text-mid);
  min-width: 40px;
  text-align: right;
  font-family: var(--cc-font-body);
}

/* 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: var(--cc-icon-chip);
}

.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: var(--cc-icon-chip);
}

/* 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: var(--cc-text-hi);
  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: var(--cc-text-hi);
}

.TopBar_sidebarIconButton__mkOWb:hover .TopBar_iconLabel__ihoxh {
  opacity: 1;
  max-width: 150px;
  color: var(--cc-text-hi);
}

/* 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: var(--cc-radius-sm);
  border: 1px solid var(--cc-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: var(--cc-shadow-soft);
  border-color: var(--cc-accent-border);
}

/* FREE subscription badge */
.TopBar_freeBadge__5Sshz {
  background: var(--cc-panel);
  border-color: var(--cc-border);
}

.TopBar_freeBadge__5Sshz .TopBar_subscriptionText__\+toDx {
  color: var(--cc-text-mid);
}

.TopBar_freeBadge__5Sshz:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

/* PRO subscription badge */
.TopBar_proBadge__T-h4y {
  background: var(--cc-pro-bg);
  border-color: var(--cc-pro-border);
}

.TopBar_proBadge__T-h4y .TopBar_subscriptionText__\+toDx {
  background: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cc-pro-text);
}

.TopBar_proBadge__T-h4y:hover {
  background: var(--cc-pro-bg);
  border-color: var(--cc-pro-text);
}

/* PREMIUM subscription badge */
.TopBar_premiumBadge__xMyIw {
  background: var(--cc-premium-bg);
  border-color: var(--cc-premium-border);
}

.TopBar_premiumBadge__xMyIw .TopBar_subscriptionText__\+toDx {
  background: none;
  background-size: 200% 200%;
  animation: TopBar_premiumGlow__KMno2 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cc-premium-text);
}

.TopBar_premiumBadge__xMyIw:hover {
  background: var(--cc-premium-bg);
  border-color: var(--cc-premium-text);
}

@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: var(--cc-panel);
  border-color: var(--cc-border);
  gap: 6px;
}

.TopBar_creditBadge__MwGYi span {
  color: var(--cc-text-hi);
}

.TopBar_creditBadge__MwGYi:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

/* 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: var(--cc-icon-chip);
}

.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: var(--cc-text-hi);
  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: var(--cc-icon-chip);
  color: var(--cc-accent-text);
}

.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: var(--cc-shadow-soft);
  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: var(--cc-panel);
  border: 1px dashed var(--cc-border);
  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: var(--cc-text-low);
  font-weight: 500;
}

.WorkflowPreview_errorMessage__ya2Wa {
  color: var(--cc-error-text);
}

.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: var(--cc-shadow-soft);
  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 var(--cc-accent-text);
  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: var(--cc-accent-text);
}

.SellTemplateModal_leftTitle__rcW56 {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.SellTemplateModal_leftDescription__XeJFG {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-text-mid);
}

/* 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: var(--cc-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  align-self: flex-start;
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_previewCard__qmjMb {
  width: 340px;
  height: 240px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  overflow: hidden;
  background-color: var(--cc-panel);
  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: var(--cc-text-low);
  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: var(--cc-text-hi);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SellTemplateModal_previewStats__FjaLQ {
  font-size: 13px;
  color: var(--cc-text-mid);
}

/* 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: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_input__NiugJ,
.SellTemplateModal_textarea__SGnBc {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
  transition: border-color 0.2s;
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_input__NiugJ:focus,
.SellTemplateModal_textarea__SGnBc:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.SellTemplateModal_input__NiugJ::placeholder,
.SellTemplateModal_textarea__SGnBc::placeholder {
  color: var(--cc-text-low);
}

.SellTemplateModal_textarea__SGnBc {
  resize: vertical;
  min-height: 70px;
}

.SellTemplateModal_hint__2KPcB {
  font-size: 11px;
  color: var(--cc-text-low);
  margin: 0;
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_error__\+5CTC {
  font-size: 12px;
  color: var(--cc-error-text);
  margin: 0;
  padding: 8px 12px;
  background: var(--cc-error-bg);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-error-border);
}

/* Tags Input */
.SellTemplateModal_tagsContainer__\+oWwy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  min-height: 40px;
  cursor: text;
  transition: border-color 0.2s;
}

.SellTemplateModal_tagsContainer__\+oWwy:focus-within {
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.SellTemplateModal_tag__U1dNX {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-pill);
  font-size: 12px;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_tagRemove__NR\+y9 {
  background: none;
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-error-text);
}

.SellTemplateModal_tagInput__Y6Aj7 {
  flex: 1 1;
  min-width: 80px;
  border: none;
  background: transparent;
  color: var(--cc-input-text);
  font-size: 14px;
  outline: none;
  padding: 2px 0;
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_tagInput__Y6Aj7::placeholder {
  color: var(--cc-text-low);
}

/* 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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
}

/* 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: 700;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_cancelButton__evfFe {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.SellTemplateModal_cancelButton__evfFe:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.SellTemplateModal_listButton__ACsRZ {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  box-shadow: 0 2px 8px var(--cc-glow);
}

.SellTemplateModal_listButton__ACsRZ:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--cc-btn-primary-bg-hover);
  box-shadow: 0 4px 16px var(--cc-glow);
}

.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 var(--cc-border-soft);
  border-top-color: var(--cc-accent-text);
  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: var(--cc-text-mid);
  margin: 0;
}

.SellTemplateModal_successIcon__SQl-3 {
  font-size: 56px;
  color: var(--cc-success-text);
}

.SellTemplateModal_successTitle__KNHQn {
  font-size: 22px;
  font-weight: 300;
  color: var(--cc-text-hi);
  margin: 0;
  font-family: var(--cc-font-body);
}

.SellTemplateModal_successMessage__\+t0eB {
  font-size: 14px;
  color: var(--cc-text-mid);
  margin: 0;
  max-width: 280px;
}

.SellTemplateModal_successButton__6r1cm {
  margin-top: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--cc-btn-primary-bg);
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-family: var(--cc-font-mono);
}

.SellTemplateModal_successButton__6r1cm:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

/* Warning Note */
.SellTemplateModal_warningNote__ZqART {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  border-radius: var(--cc-radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cc-warning-text);
}

.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: var(--cc-panel);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius);
  box-shadow: 0 8px 28px var(--cc-glow);
  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: var(--cc-glow);
  color: var(--cc-accent-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Inconsolata', monospace;
}

.TemplateModeBar_templateName__Uuo0j {
  color: var(--cc-text-hi);
  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: var(--cc-text-mid);
  font-size: 12px;
  font-family: 'Inconsolata', monospace;
}

.TemplateModeBar_unsavedIndicator__0KSFp {
  color: var(--cc-warning-text);
  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: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
}

.TemplateModeBar_saveButton__dexBs:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--cc-glow);
}

.TemplateModeBar_sellButton__GtBrx {
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
}

.TemplateModeBar_sellButton__GtBrx:hover {
  background: var(--cc-success-bg);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--cc-success-border);
}

.TemplateModeBar_exitButton__SoCg5 {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.TemplateModeBar_exitButton__SoCg5:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
  box-shadow: var(--cc-shadow-soft);
}

.TemplateModeBar_infoButton__4R6\+5 {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  padding: 6px 10px;
}

.TemplateModeBar_infoButton__4R6\+5:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
  box-shadow: var(--cc-shadow-soft);
}

.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: var(--cc-panel);
  border: 1px solid var(--cc-accent-border);
  box-shadow: 0 8px 28px var(--cc-glow);
}

.TemplateModeBar_badge__LZlS\+.TemplateModeBar_dark__JfqIO {
  background: var(--cc-glow);
  color: var(--cc-accent-text);
}

.TemplateModeBar_templateName__Uuo0j.TemplateModeBar_dark__JfqIO {
  color: var(--cc-text-hi);
}

.TemplateModeBar_stats__IdIW8.TemplateModeBar_dark__JfqIO {
  color: var(--cc-text-mid);
}

.TemplateModeBar_unsavedIndicator__0KSFp.TemplateModeBar_dark__JfqIO {
  color: var(--cc-warning-text);
}

.TemplateModeBar_saveButton__dexBs.TemplateModeBar_dark__JfqIO {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
}

.TemplateModeBar_saveButton__dexBs.TemplateModeBar_dark__JfqIO:hover {
  background: var(--cc-btn-primary-bg-hover);
  box-shadow: 0 2px 8px var(--cc-glow);
}

.TemplateModeBar_sellButton__GtBrx.TemplateModeBar_dark__JfqIO {
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
}

.TemplateModeBar_sellButton__GtBrx.TemplateModeBar_dark__JfqIO:hover {
  background: var(--cc-success-bg);
  box-shadow: 0 2px 8px var(--cc-success-border);
}

.TemplateModeBar_exitButton__SoCg5.TemplateModeBar_dark__JfqIO {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.TemplateModeBar_exitButton__SoCg5.TemplateModeBar_dark__JfqIO:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  box-shadow: var(--cc-shadow-soft);
}

.TemplateModeBar_infoButton__4R6\+5.TemplateModeBar_dark__JfqIO {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.TemplateModeBar_infoButton__4R6\+5.TemplateModeBar_dark__JfqIO:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  box-shadow: var(--cc-shadow-soft);
}

/* 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;
  }
}

/* ProjectFlowModal.module.css — step-based project chooser.
   Shared by ProjectFlowModal, FlowCloudGrid, FlowNewProjectPanel and
   PurchasedTemplatesPicker so the whole flow reads as one surface. */

/* ---------- Shell ---------- */

.ProjectFlowModal_fullScreenContainer__vb6aR {
  position: fixed;
  inset: 0;
  background-color: var(--cc-bg);
  display: flex;
  flex-direction: column;
  z-index: 1050;
  overflow: hidden;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_closeButton__2y7Eq {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: transparent;
  border: none;
  color: var(--cc-text-mid);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ProjectFlowModal_closeButton__2y7Eq:hover {
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

.ProjectFlowModal_fullScreenContainer__vb6aR button:focus-visible,
.ProjectFlowModal_fullScreenContainer__vb6aR input:focus-visible {
  outline: 2px solid var(--cc-accent-border);
  outline-offset: 2px;
}

/* ---------- Top row: back chip + user chip ---------- */

.ProjectFlowModal_topRow__KMAPc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 72px 0 28px; /* right padding clears the close button */
  position: relative;
  z-index: 2;
  min-height: 48px;
}

.ProjectFlowModal_topLeft__fEhBI,
.ProjectFlowModal_topRight__Jpur3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ProjectFlowModal_backButton__s8ne0 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ProjectFlowModal_backButton__s8ne0:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

.ProjectFlowModal_backIcon__V8bb- {
  color: var(--cc-accent-text);
}

.ProjectFlowModal_userChip__XzwGs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-pill);
}

.ProjectFlowModal_userAvatar__Zxhcv {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ProjectFlowModal_userMeta__buLRV {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.ProjectFlowModal_userName__uKugj {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_userEmail__4bQAy {
  font-size: 0.7rem;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-low);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProjectFlowModal_logoutButton__qdC1Y {
  background: none;
  border: none;
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ProjectFlowModal_logoutButton__qdC1Y:hover {
  background-color: var(--cc-icon-chip);
  color: var(--cc-text-hi);
}

/* ---------- Content column ---------- */

.ProjectFlowModal_contentArea__Ew688 {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  padding: 12px 28px 20px;
  position: relative;
  z-index: 2;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.ProjectFlowModal_contentArea__Ew688::-webkit-scrollbar {
  width: 6px;
}

.ProjectFlowModal_contentArea__Ew688::-webkit-scrollbar-track {
  background: transparent;
}

.ProjectFlowModal_contentArea__Ew688::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  border-radius: 10px;
}

.ProjectFlowModal_flowColumn__NwTWl {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
}

.ProjectFlowModal_stepEnter__4wYJz {
  animation: ProjectFlowModal_fadeSlideUp__ILKQ0 0.28s ease-out;
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

@keyframes ProjectFlowModal_fadeSlideUp__ILKQ0 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ProjectFlowModal_warningBanner__VEgDk {
  background-color: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  color: var(--cc-warning-text);
  padding: 12px 16px;
  border-radius: var(--cc-radius-sm);
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
  font-family: var(--cc-font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---------- Step 1: source choice ---------- */

.ProjectFlowModal_flowTitle__pkOWI {
  margin: 8vh 0 6px;
  text-align: center;
  font-family: var(--cc-font-body);
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -1px;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_flowSubtitle__y\+B3D {
  margin: 0 0 36px;
  text-align: center;
  font-family: var(--cc-font-mono);
  font-size: 0.95rem;
  color: var(--cc-text-mid);
}

.ProjectFlowModal_sourceCards__mzwde {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ProjectFlowModal_sourceCard__XnVvP {
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  text-align: left;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: var(--cc-text-hi);
}

body.is-electron .ProjectFlowModal_sourceCard__XnVvP {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ProjectFlowModal_sourceCard__XnVvP:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--cc-glow);
}

.ProjectFlowModal_sourceCard__XnVvP:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ProjectFlowModal_sourceCardIcon__-8-g8 {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
}

.ProjectFlowModal_sourceCardTitle__W7bSL {
  font-family: var(--cc-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.ProjectFlowModal_sourceCardText__8UhJ3 {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cc-text-mid);
}

.ProjectFlowModal_sourceCardBadge__AuPiP {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-pill);
  padding: 3px 10px;
}

.ProjectFlowModal_quickStart__at3lO {
  margin: 36px auto 0;
  width: min(560px, 100%);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--cc-panel);
  border: 1px dashed var(--cc-border);
  border-radius: var(--cc-radius);
}

.ProjectFlowModal_quickStartText__DgfjI h3 {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cc-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_quickStartText__DgfjI h3 svg {
  color: var(--cc-accent-text);
}

.ProjectFlowModal_quickStartText__DgfjI p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cc-text-mid);
}

.ProjectFlowModal_quickStartButton__FU1A7 {
  flex-shrink: 0;
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  padding: 0 18px;
  height: 42px;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ProjectFlowModal_quickStartButton__FU1A7:hover:not(:disabled) {
  background: var(--cc-panel-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

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

/* ---------- Step 2: tab bar ---------- */

.ProjectFlowModal_tabBar__Y3MJT {
  display: flex;
  gap: 4px;
  margin: 0 auto 26px;
  padding: 4px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.is-electron .ProjectFlowModal_tabBar__Y3MJT {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ProjectFlowModal_tabButton__1mXe3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-pill);
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ProjectFlowModal_tabButton__1mXe3:hover {
  color: var(--cc-text-hi);
  background: var(--cc-panel-hover);
}

.ProjectFlowModal_tabButtonActive__7Zpgh {
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border-color: var(--cc-accent-border);
}

.ProjectFlowModal_tabIcon__1O37R {
  display: flex;
  align-items: center;
  font-size: 0.95em;
}

.ProjectFlowModal_tabContent__fTRZp {
  flex: 1 1;
  animation: ProjectFlowModal_fadeSlideUp__ILKQ0 0.22s ease-out;
}

/* ---------- Recently opened ---------- */

.ProjectFlowModal_recentSection__30LXF {
  width: min(640px, 100%);
  margin: 0 auto;
}

.ProjectFlowModal_recentHeader__dESiG {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ProjectFlowModal_recentCount__-TIIS {
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  color: var(--cc-text-low);
}

.ProjectFlowModal_clearButton__Xz534 {
  background: none;
  border: none;
  color: var(--cc-text-low);
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.ProjectFlowModal_clearButton__Xz534:hover {
  color: var(--cc-error-text);
  background: var(--cc-error-bg);
}

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

.ProjectFlowModal_recentRow__su6RZ {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--cc-text-hi);
  transition: all 0.2s ease;
}

.ProjectFlowModal_recentRow__su6RZ:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
  transform: translateX(3px);
}

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

.ProjectFlowModal_recentRowLoading__KRItB {
  border-color: var(--cc-accent-border);
  background: var(--cc-glow);
}

.ProjectFlowModal_recentIcon__FvYbc {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--cc-accent-text);
  background: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
}

.ProjectFlowModal_recentInfo__EpVyk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}

.ProjectFlowModal_recentName__YVPNu {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProjectFlowModal_recentMeta__IUo2s {
  font-family: var(--cc-font-mono);
  font-size: 0.75rem;
  color: var(--cc-text-low);
}

.ProjectFlowModal_recentOpenHint__xja1v {
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  color: var(--cc-accent-text);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.ProjectFlowModal_recentRow__su6RZ:hover .ProjectFlowModal_recentOpenHint__xja1v,
.ProjectFlowModal_recentRowLoading__KRItB .ProjectFlowModal_recentOpenHint__xja1v {
  opacity: 1;
}

/* ---------- Empty state ---------- */

.ProjectFlowModal_emptyState__ezdYp {
  width: min(560px, 100%);
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 40px 24px;
  border: 1px dashed var(--cc-border);
  border-radius: var(--cc-radius);
  color: var(--cc-text-mid);
}

.ProjectFlowModal_emptyIcon__tm46B {
  font-size: 2rem;
  color: var(--cc-text-low);
  margin-bottom: 6px;
}

.ProjectFlowModal_emptyTitle__fG4v3 {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_emptyHint__r2Yv\+ {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cc-text-mid);
}

.ProjectFlowModal_emptyActions__qdeYd {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- Shared buttons ---------- */

.ProjectFlowModal_primaryButton__JKsqn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 0 20px;
  height: 42px;
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--cc-glow);
}

.ProjectFlowModal_primaryButton__JKsqn:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

.ProjectFlowModal_primaryButton__JKsqn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ProjectFlowModal_secondaryButton__2Zw5- {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 0 20px;
  height: 42px;
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ProjectFlowModal_secondaryButton__2Zw5-:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
  color: var(--cc-accent-text);
}

.ProjectFlowModal_inlineLink__wo\+t2 {
  background: none;
  border: none;
  color: var(--cc-accent-text);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

/* ---------- Local open / upgrade panels ---------- */

.ProjectFlowModal_openPanel__QYTvK,
.ProjectFlowModal_upgradePanel__0kg2v {
  width: min(520px, 100%);
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 28px;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.is-electron .ProjectFlowModal_openPanel__QYTvK,
body.is-electron .ProjectFlowModal_upgradePanel__0kg2v {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ProjectFlowModal_upgradePanel__0kg2v {
  border-color: var(--cc-premium-border);
}

.ProjectFlowModal_openPanelIcon__RmAuh {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  margin-bottom: 6px;
}

.ProjectFlowModal_upgradePanelIcon__9hESe {
  font-size: 2.4rem;
  color: var(--cc-premium-text);
  margin-bottom: 6px;
}

.ProjectFlowModal_panelTitle__HQORf {
  font-family: var(--cc-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_panelText__HsKpk {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cc-text-mid);
  max-width: 400px;
}

.ProjectFlowModal_panelText__HsKpk code {
  font-family: var(--cc-font-mono);
  background: var(--cc-icon-chip);
  border-radius: 4px;
  padding: 1px 5px;
}

.ProjectFlowModal_upgradeButton__jGz0O {
  background: var(--cc-premium-bg);
  color: var(--cc-premium-text);
  border: 1px solid var(--cc-premium-border);
  padding: 12px 24px;
  border-radius: var(--cc-radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--cc-font-mono);
  transition: all 0.2s ease;
  box-shadow: var(--cc-shadow-soft);
}

.ProjectFlowModal_upgradeButton__jGz0O:hover {
  transform: translateY(-2px);
  box-shadow: var(--cc-shadow);
  border-color: var(--cc-premium-text);
}

/* ---------- Cloud grid ---------- */

.ProjectFlowModal_cloudSection__AXhB\+ {
  width: 100%;
}

.ProjectFlowModal_limitInfoBanner__CcdXt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  color: var(--cc-accent-text);
  padding: 10px 16px;
  border-radius: var(--cc-radius-sm);
  margin-bottom: 15px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--cc-font-mono);
}

.ProjectFlowModal_limitInfoText__wfD5p {
  flex: 1 1;
  text-align: center;
}

.ProjectFlowModal_limitReachedBanner__kXBuh {
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  color: var(--cc-error-text);
}

.ProjectFlowModal_refreshButton__s1-GR {
  background: none;
  border: none;
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1rem;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ProjectFlowModal_refreshButton__s1-GR:hover {
  background-color: var(--cc-glow);
  color: var(--cc-accent-text);
}

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

.ProjectFlowModal_refreshSpinning__kLrC4 {
  animation: ProjectFlowModal_spin__XL\+\+1 1s linear infinite;
}

.ProjectFlowModal_loadingProjects__PqsqV {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cc-text-mid);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  font-family: var(--cc-font-mono);
}

.ProjectFlowModal_cloudGrid__WUp9z {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-auto-rows: 110px;
  grid-gap: 12px;
  gap: 12px;
  padding: 6px 2px 10px;
  width: 100%;
  box-sizing: border-box;
}

.ProjectFlowModal_projectBox__5oaeD {
  height: 110px;
  width: 110px;
  min-width: 110px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: var(--cc-panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0;
  text-align: center;
  color: var(--cc-text-hi);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

body.is-electron .ProjectFlowModal_projectBox__5oaeD {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ProjectFlowModal_projectBox__5oaeD:hover {
  border-color: var(--cc-accent-border);
  background-color: var(--cc-panel-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.ProjectFlowModal_previewContainer__Y3Jor {
  width: 100%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ProjectFlowModal_projectPreview__mWF74 {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border-radius: 0;
}

.ProjectFlowModal_projectNameContainer__KOjhp {
  width: 100%;
  height: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: var(--cc-icon-chip);
  border-top: 1px solid var(--cc-border-soft);
  box-sizing: border-box;
}

.ProjectFlowModal_projectName__HWry4 {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--cc-text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  width: 100%;
}

[data-theme='dark'] .ProjectFlowModal_projectName__HWry4 {
  color: var(--cc-text-hi);
}

.ProjectFlowModal_emptyProjectInfo__0Pu4- {
  width: 100%;
  height: 100%;
  position: relative;
}

.ProjectFlowModal_emptyProjectIcon__Fd5mo {
  font-size: 2rem;
  opacity: 0.6;
  color: var(--cc-text-low);
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.ProjectFlowModal_emptyProjectInfo__0Pu4- .ProjectFlowModal_projectName__HWry4 {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
}

.ProjectFlowModal_deleteButton__VpRGK {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

.ProjectFlowModal_projectBox__5oaeD:hover .ProjectFlowModal_deleteButton__VpRGK {
  opacity: 1;
  transform: scale(1);
}

.ProjectFlowModal_deleteButton__VpRGK:hover {
  background-color: var(--cc-error-border);
  transform: scale(1.1);
}

.ProjectFlowModal_projectLoading__teIwB {
  border-color: var(--cc-accent-border) !important;
  background-color: var(--cc-glow) !important;
  cursor: default !important;
}

.ProjectFlowModal_projectDisabled__ZH7dt {
  opacity: 0.5;
  pointer-events: none;
}

.ProjectFlowModal_boxSpinnerWrap__qGeVI {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.ProjectFlowModal_boxSpinnerWrap__qGeVI span {
  font-size: 0.8rem;
  color: var(--cc-accent-text);
  font-weight: 600;
}

.ProjectFlowModal_spinner__sdAuR {
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top: 2px solid var(--cc-accent-text);
  border-radius: 50%;
  animation: ProjectFlowModal_spin__XL\+\+1 1s linear infinite;
  display: inline-block;
}

@keyframes ProjectFlowModal_spin__XL\+\+1 {
  to {
    transform: rotate(360deg);
  }
}

.ProjectFlowModal_loadMoreCard__OuusA {
  height: 110px;
  width: 110px;
  min-width: 110px;
  border: 1px dashed var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--cc-glow);
  color: var(--cc-accent-text);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cc-font-mono);
  box-sizing: border-box;
}

.ProjectFlowModal_loadMoreCard__OuusA:hover:not(:disabled) {
  background-color: var(--cc-panel-hover);
  transform: translateY(-2px);
}

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

/* ---------- New tab ---------- */

.ProjectFlowModal_newPanel__\+7TYk {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ProjectFlowModal_createCard__a8AoQ {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 24px;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}

body.is-electron .ProjectFlowModal_createCard__a8AoQ {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ProjectFlowModal_createCardIcon__q9T-Z {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
}

.ProjectFlowModal_createCardBody__DcU7y {
  flex: 1 1;
  min-width: 0;
}

.ProjectFlowModal_createLabel__glcij {
  display: block;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cc-text-hi);
}

.ProjectFlowModal_createRow__jmTtN {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ProjectFlowModal_createRow__jmTtN input {
  flex: 1 1;
  min-width: 180px;
  padding: 11px 14px;
  box-sizing: border-box;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-size: 0.9rem;
  font-family: var(--cc-font-mono);
  transition: all 0.2s ease;
}

.ProjectFlowModal_createRow__jmTtN input::placeholder {
  color: var(--cc-text-low);
}

.ProjectFlowModal_createRow__jmTtN input:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

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

.ProjectFlowModal_createButton__RQPZj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 0 18px;
  height: 42px;
  font-family: var(--cc-font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--cc-glow);
  white-space: nowrap;
}

.ProjectFlowModal_createButton__RQPZj:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

.ProjectFlowModal_createButton__RQPZj:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ProjectFlowModal_buttonSpinner__cM4\+f {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: ProjectFlowModal_spin__XL\+\+1 1s linear infinite;
  display: inline-block;
}

.ProjectFlowModal_createHint__EUHIG {
  margin: 10px 0 0;
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  color: var(--cc-text-low);
}

.ProjectFlowModal_limitHint__868aA {
  margin: 8px 0 0;
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  color: var(--cc-error-text);
}

/* ---------- Selected template field (New tab) ---------- */

.ProjectFlowModal_templateField__OuKU- {
  margin-top: 16px;
}

.ProjectFlowModal_templateFieldLabel__wgw\+d {
  display: block;
  margin-bottom: 8px;
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cc-text-low);
}

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

.ProjectFlowModal_selectedTemplateButton__j-RCg {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text-hi);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ProjectFlowModal_selectedTemplateButton__j-RCg:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

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

.ProjectFlowModal_templateThumb__Ipma1 {
  width: 62px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  border-radius: 6px;
  overflow: hidden;
  color: var(--cc-accent-text);
  font-size: 1.1rem;
}

.ProjectFlowModal_templateInfo__DgpFW {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ProjectFlowModal_templateName__sx-Q3 {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProjectFlowModal_templateMeta__9QahI {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  color: var(--cc-text-low);
}

.ProjectFlowModal_templateChange__nZHcn {
  flex-shrink: 0;
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-pill);
  padding: 5px 14px;
  white-space: nowrap;
}

.ProjectFlowModal_templateClear__zdFes {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ProjectFlowModal_templateClear__zdFes:hover:not(:disabled) {
  color: var(--cc-error-text);
  border-color: var(--cc-error-border);
  background: var(--cc-error-bg);
}

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

/* ---------- Bottom breadcrumb (root folder location) ---------- */

.ProjectFlowModal_breadcrumbBar__02io6 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 20px;
  position: relative;
  z-index: 2;
}

/* Chip-sized square icon buttons so the whole row reads uniformly */
.ProjectFlowModal_iconButton__r0eCw {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1.05rem;
  padding: 0;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ProjectFlowModal_iconButton__r0eCw:hover {
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.ProjectFlowModal_pathSeparator__\+ZrFx {
  color: var(--cc-text-low);
  font-size: 0.9rem;
  font-family: var(--cc-font-mono);
}

.ProjectFlowModal_rootChip__bjkGb {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-mid);
  background-color: var(--cc-icon-chip);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 12px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProjectFlowModal_userPathChip__nbDXZ {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-family: var(--cc-font-mono);
  color: var(--cc-accent-text);
  background-color: var(--cc-glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 12px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-accent-border);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProjectFlowModal_currentChip__X9sur {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-weight: bold;
  font-family: var(--cc-font-mono);
  color: var(--cc-accent-text);
  background-color: var(--cc-glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 12px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-accent-border);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Live preview of the project being named in the New tab */
.ProjectFlowModal_ghostChip__zSE2m {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-weight: bold;
  font-family: var(--cc-font-mono);
  color: var(--cc-accent-text);
  background: transparent;
  padding: 0 12px;
  border-radius: var(--cc-radius-sm);
  border: 1px dashed var(--cc-accent-border);
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  animation: ProjectFlowModal_ghostIn__5H3po 0.2s ease-out;
}

/* Root-folder info button + explainer popover */
.ProjectFlowModal_rootInfoWrap__Dc5Zl {
  position: relative;
  display: flex;
  align-items: center;
}

.ProjectFlowModal_infoButton__q6NSE {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ProjectFlowModal_infoButton__q6NSE:hover,
.ProjectFlowModal_infoButton__q6NSE[aria-expanded='true'] {
  color: var(--cc-accent-text);
  border-color: var(--cc-accent-border);
  background: var(--cc-glow);
}

.ProjectFlowModal_rootInfoPopover__pjdcF {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: 82vw;
  padding: 14px 16px;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  z-index: 5;
  animation: ProjectFlowModal_ghostIn__5H3po 0.18s ease-out;
}

body.is-electron .ProjectFlowModal_rootInfoPopover__pjdcF {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ProjectFlowModal_rootInfoTitle__2k0vH {
  font-family: var(--cc-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cc-text-hi);
  margin-bottom: 6px;
}

.ProjectFlowModal_rootInfoText__B30FP {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--cc-text-mid);
}

.ProjectFlowModal_rootInfoText__B30FP code {
  font-family: var(--cc-font-mono);
  background: var(--cc-icon-chip);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.ProjectFlowModal_chipIcon__Thjjb {
  font-size: 0.85em;
  flex-shrink: 0;
}

@keyframes ProjectFlowModal_ghostIn__5H3po {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.is-electron .ProjectFlowModal_rootChip__bjkGb,
body.is-electron .ProjectFlowModal_userPathChip__nbDXZ,
body.is-electron .ProjectFlowModal_currentChip__X9sur {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- Particle background (shared ParticleBackground contract) ---------- */

.ProjectFlowModal_particleContainer__vDgsO {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

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

@keyframes ProjectFlowModal_popInOut__OJOwC {
  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;
  }
}

.ProjectFlowModal_pastelFilter1__uvPYl {
  filter: grayscale(80%) brightness(160%) sepia(60%) hue-rotate(170deg)
    saturate(300%) contrast(90%);
}
.ProjectFlowModal_pastelFilter2__RW-DO {
  filter: grayscale(70%) brightness(150%) sepia(60%) hue-rotate(280deg)
    saturate(400%) contrast(90%);
}
.ProjectFlowModal_pastelFilter3__yCweW {
  filter: grayscale(75%) brightness(170%) sepia(50%) hue-rotate(60deg)
    saturate(350%) contrast(90%);
}
.ProjectFlowModal_pastelFilter4__xTLt6 {
  filter: grayscale(60%) brightness(180%) sepia(70%) hue-rotate(0deg)
    saturate(300%) contrast(95%);
}
.ProjectFlowModal_pastelFilter5__ks\+27 {
  filter: grayscale(70%) brightness(160%) sepia(60%) hue-rotate(220deg)
    saturate(350%) contrast(90%);
}

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

@media (max-width: 768px) {
  .ProjectFlowModal_topRow__KMAPc {
    padding: 16px 60px 0 16px;
  }

  .ProjectFlowModal_contentArea__Ew688 {
    padding: 10px 16px 16px;
  }

  .ProjectFlowModal_flowTitle__pkOWI {
    margin-top: 4vh;
    font-size: 1.7rem;
  }

  .ProjectFlowModal_sourceCards__mzwde {
    flex-direction: column;
    align-items: center;
  }

  .ProjectFlowModal_sourceCard__XnVvP {
    width: 100%;
    max-width: 360px;
  }

  .ProjectFlowModal_quickStart__at3lO {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .ProjectFlowModal_quickStartText__DgfjI h3 {
    justify-content: center;
  }

  .ProjectFlowModal_tabBar__Y3MJT {
    width: 100%;
    justify-content: center;
  }

  .ProjectFlowModal_tabButton__1mXe3 {
    padding: 9px 12px;
    font-size: 0.8rem;
  }

  .ProjectFlowModal_userMeta__buLRV {
    display: none;
  }

  .ProjectFlowModal_createCard__a8AoQ {
    flex-direction: column;
  }

  .ProjectFlowModal_createRow__jmTtN {
    flex-direction: column;
  }

  .ProjectFlowModal_createRow__jmTtN input,
  .ProjectFlowModal_createButton__RQPZj {
    width: 100%;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ProjectFlowModal_stepEnter__4wYJz,
  .ProjectFlowModal_tabContent__fTRZp,
  .ProjectFlowModal_ghostChip__zSE2m {
    animation: none;
  }

  .ProjectFlowModal_particle__yUugZ {
    animation: none;
    opacity: 0.15;
  }

  .ProjectFlowModal_sourceCard__XnVvP,
  .ProjectFlowModal_recentRow__su6RZ,
  .ProjectFlowModal_projectBox__5oaeD,
  .ProjectFlowModal_primaryButton__JKsqn,
  .ProjectFlowModal_createButton__RQPZj,
  .ProjectFlowModal_quickStartButton__FU1A7,
  .ProjectFlowModal_loadMoreCard__OuusA,
  .ProjectFlowModal_upgradeButton__jGz0O {
    transition: none;
  }

  .ProjectFlowModal_sourceCard__XnVvP:hover:not(:disabled),
  .ProjectFlowModal_recentRow__su6RZ:hover:not(:disabled),
  .ProjectFlowModal_projectBox__5oaeD:hover,
  .ProjectFlowModal_primaryButton__JKsqn:hover:not(:disabled),
  .ProjectFlowModal_createButton__RQPZj:hover:not(:disabled) {
    transform: none;
  }
}

/* TemplatePickerModal.module.css — sub-modal for picking the template a new
   project starts from. Sits above the ProjectFlowModal shell (z 1050). */

.TemplatePickerModal_overlay__t1hrE {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: var(--cc-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: TemplatePickerModal_fadeIn__CXrcn 0.18s ease-out;
}

body.is-electron .TemplatePickerModal_overlay__t1hrE {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.TemplatePickerModal_panel__8faOc {
  width: min(760px, 100%);
  max-height: min(660px, 92vh);
  display: flex;
  flex-direction: column;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
  animation: TemplatePickerModal_slideIn__aGxVH 0.22s ease-out;
}

/* ---------- Header ---------- */

.TemplatePickerModal_header__lwnWa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
}

.TemplatePickerModal_headerText__yhYhP {
  min-width: 0;
}

.TemplatePickerModal_title__0iJxx {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cc-text-hi);
}

.TemplatePickerModal_subtitle__bSpHH {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--cc-text-mid);
}

.TemplatePickerModal_headerActions__pvQd3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.TemplatePickerModal_newTemplateButton__DVJh8 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-pill);
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.TemplatePickerModal_newTemplateButton__DVJh8:hover {
  background: var(--cc-panel-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.TemplatePickerModal_closeButton__\+CIUJ {
  background: transparent;
  border: none;
  color: var(--cc-text-mid);
  cursor: pointer;
  padding: 7px;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.TemplatePickerModal_closeButton__\+CIUJ:hover {
  background-color: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

/* ---------- Toolbar ---------- */

.TemplatePickerModal_toolbar__KlwPb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 22px 14px;
  border-bottom: 1px solid var(--cc-border-soft);
}

.TemplatePickerModal_searchWrap__2j35Q {
  position: relative;
  flex: 1 1;
  min-width: 180px;
  display: flex;
  align-items: center;
}

.TemplatePickerModal_searchIcon__tyLSb {
  position: absolute;
  left: 11px;
  color: var(--cc-text-low);
  font-size: 0.85rem;
  pointer-events: none;
}

.TemplatePickerModal_searchInput__l4bnU {
  width: 100%;
  padding: 9px 32px;
  box-sizing: border-box;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.TemplatePickerModal_searchInput__l4bnU::placeholder {
  color: var(--cc-text-low);
}

.TemplatePickerModal_searchInput__l4bnU:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.TemplatePickerModal_clearSearch__ufMXy {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--cc-text-low);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 50%;
  font-size: 1rem;
}

.TemplatePickerModal_clearSearch__ufMXy:hover {
  color: var(--cc-text-hi);
  background: var(--cc-icon-chip);
}

.TemplatePickerModal_filterGroup__in-jG {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
}

.TemplatePickerModal_filterButton__vTA2b {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-pill);
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.TemplatePickerModal_filterButton__vTA2b:hover {
  color: var(--cc-text-hi);
  background: var(--cc-panel-hover);
}

.TemplatePickerModal_filterButtonActive__auPap {
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  border-color: var(--cc-accent-border);
}

.TemplatePickerModal_refreshButton__E5zb9 {
  background: none;
  border: none;
  color: var(--cc-text-mid);
  cursor: pointer;
  font-size: 1rem;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.TemplatePickerModal_refreshButton__E5zb9:hover {
  background-color: var(--cc-glow);
  color: var(--cc-accent-text);
}

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

.TemplatePickerModal_refreshSpinning__n-FxC {
  animation: TemplatePickerModal_spin__tcNwR 1s linear infinite;
}

@keyframes TemplatePickerModal_spin__tcNwR {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Template grid ---------- */

.TemplatePickerModal_gridArea__P5pHt {
  flex: 1 1;
  min-height: 240px;
  overflow-y: auto;
  padding: 18px 22px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.TemplatePickerModal_gridArea__P5pHt::-webkit-scrollbar {
  width: 6px;
}

.TemplatePickerModal_gridArea__P5pHt::-webkit-scrollbar-track {
  background: transparent;
}

.TemplatePickerModal_gridArea__P5pHt::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  border-radius: 10px;
}

.TemplatePickerModal_grid__NPbVS {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.TemplatePickerModal_card__nY\+XG {
  display: flex;
  flex-direction: column;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-user-select: none;
          user-select: none;
}

.TemplatePickerModal_card__nY\+XG:hover {
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--cc-glow);
}

.TemplatePickerModal_cardSelected__cVyPr {
  border-color: var(--cc-accent-border);
  box-shadow:
    0 0 0 2px var(--cc-accent-border),
    0 8px 22px var(--cc-glow);
}

.TemplatePickerModal_cardPreview__XPqrL {
  position: relative;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-icon-chip);
  border-bottom: 1px solid var(--cc-border-soft);
  overflow: hidden;
}

.TemplatePickerModal_cardFallbackIcon__Virty {
  font-size: 1.8rem;
  color: var(--cc-accent-text);
  opacity: 0.7;
}

.TemplatePickerModal_cardBadge__XVR8q {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--cc-premium-text);
  background: var(--cc-premium-bg);
  border: 1px solid var(--cc-premium-border);
  border-radius: 50%;
}

.TemplatePickerModal_cardDelete__jqudB {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

.TemplatePickerModal_card__nY\+XG:hover .TemplatePickerModal_cardDelete__jqudB {
  opacity: 1;
  transform: scale(1);
}

.TemplatePickerModal_cardDelete__jqudB:hover {
  background-color: var(--cc-error-border);
  transform: scale(1.1);
}

.TemplatePickerModal_cardCheck__wKoxX {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-accent-text);
  color: var(--cc-bg);
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
}

.TemplatePickerModal_cardBody__vgiL0 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}

.TemplatePickerModal_cardName__rzwf6 {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cc-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TemplatePickerModal_cardMeta__Aquex {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  color: var(--cc-text-low);
}

.TemplatePickerModal_loadMoreCard__W5GvH {
  min-height: 150px;
  border: 1px dashed var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--cc-glow);
  color: var(--cc-accent-text);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cc-font-mono);
}

.TemplatePickerModal_loadMoreCard__W5GvH:hover:not(:disabled) {
  background-color: var(--cc-panel-hover);
  transform: translateY(-2px);
}

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

.TemplatePickerModal_loading__rncj6,
.TemplatePickerModal_empty__05OE6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  text-align: center;
}

.TemplatePickerModal_emptyIcon__tWSS0 {
  font-size: 1.8rem;
  color: var(--cc-text-low);
}

.TemplatePickerModal_empty__05OE6 p {
  margin: 0;
}

/* ---------- Footer ---------- */

.TemplatePickerModal_footer__90vBF {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--cc-border-soft);
  background: var(--cc-panel);
}

.TemplatePickerModal_footerInfo__GEX2u {
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  color: var(--cc-text-mid);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TemplatePickerModal_footerInfo__GEX2u strong {
  color: var(--cc-accent-text);
}

.TemplatePickerModal_footerActions__rlr73 {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.TemplatePickerModal_cancelButton__OD-yM {
  padding: 0 18px;
  height: 40px;
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.TemplatePickerModal_cancelButton__OD-yM:hover {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

.TemplatePickerModal_useButton__HuRg1 {
  padding: 0 20px;
  height: 40px;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--cc-glow);
}

.TemplatePickerModal_useButton__HuRg1:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

/* ---------- Focus / animation / responsive ---------- */

.TemplatePickerModal_panel__8faOc button:focus-visible,
.TemplatePickerModal_panel__8faOc input:focus-visible,
.TemplatePickerModal_panel__8faOc [role='option']:focus-visible {
  outline: 2px solid var(--cc-accent-border);
  outline-offset: 2px;
}

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

@keyframes TemplatePickerModal_slideIn__aGxVH {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .TemplatePickerModal_overlay__t1hrE {
    padding: 10px;
  }

  .TemplatePickerModal_panel__8faOc {
    max-height: 96vh;
  }

  .TemplatePickerModal_header__lwnWa {
    flex-direction: column;
  }

  .TemplatePickerModal_footer__90vBF {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .TemplatePickerModal_footerActions__rlr73 {
    justify-content: stretch;
  }

  .TemplatePickerModal_cancelButton__OD-yM,
  .TemplatePickerModal_useButton__HuRg1 {
    flex: 1 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .TemplatePickerModal_overlay__t1hrE,
  .TemplatePickerModal_panel__8faOc {
    animation: none;
  }

  .TemplatePickerModal_card__nY\+XG,
  .TemplatePickerModal_newTemplateButton__DVJh8,
  .TemplatePickerModal_useButton__HuRg1,
  .TemplatePickerModal_loadMoreCard__W5GvH {
    transition: none;
  }

  .TemplatePickerModal_card__nY\+XG:hover,
  .TemplatePickerModal_useButton__HuRg1:hover,
  .TemplatePickerModal_newTemplateButton__DVJh8:hover {
    transform: none;
  }
}

.NewTemplateModal_modalContent__ptPGZ {
  background: transparent;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  color: var(--cc-text-hi);
  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: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.NewTemplateModal_description__umWmp {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-text-mid);
}

.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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
}

.NewTemplateModal_input__yJNnX {
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
  transition: border-color 0.2s;
  font-family: var(--cc-font-mono);
}

.NewTemplateModal_input__yJNnX:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.NewTemplateModal_input__yJNnX::placeholder {
  color: var(--cc-text-low);
}

.NewTemplateModal_hint__NJJUp {
  font-size: 12px;
  color: var(--cc-text-low);
  margin: 0;
  font-family: var(--cc-font-mono);
}

.NewTemplateModal_error__sCjKM {
  font-size: 12px;
  color: var(--cc-error-text);
  margin: 0;
  font-family: var(--cc-font-mono);
}

.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: 700;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: var(--cc-font-mono);
}

.NewTemplateModal_cancelButton__OF6Ix {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.NewTemplateModal_cancelButton__OF6Ix:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.NewTemplateModal_confirmButton__9PbHD {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
}

.NewTemplateModal_confirmButton__9PbHD:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

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

/* 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: radial-gradient(
    circle,
    var(--cc-accent-soft),
    var(--cc-accent-faint)
  );
  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: var(--cc-accent-border);
  border-right-color: color-mix(
    in srgb,
    var(--cc-accent-border) 55%,
    transparent
  );
  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, var(--cc-accent), var(--cc-accent-soft));
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cc-accent-soft);
}

/* Inner orbital ring */
.LoadingSpinner_orbitalRingInner__RB5Ho {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid transparent;
  border-bottom-color: var(--cc-accent-soft);
  border-left-color: color-mix(in srgb, var(--cc-accent-soft) 55%, transparent);
  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, var(--cc-accent-soft), var(--cc-accent));
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cc-accent-soft);
}

@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, var(--cc-glow) 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 var(--cc-accent-soft));
}

@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: var(--cc-border-soft);
  border-radius: 2px;
  overflow: hidden;
}

.LoadingSpinner_progressFill__i7XA4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--cc-accent-border),
    var(--cc-accent),
    var(--cc-accent-soft)
  );
  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(--cc-text-hi);
  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(--cc-text-hi);
  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 var(--cc-border-soft);
  border-left-color: var(--cc-accent-border);
  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: var(--cc-overlay);
  -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: var(--cc-text-hi);
  background: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 12px 18px; /* Initial padding */
  border-radius: 12px;
  font-family: var(--cc-font-mono);
  font-size: 0.7rem; /* Initial font size */
  font-weight: 500;
  box-shadow: var(--cc-shadow-soft);
  border: 1px solid var(--cc-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(--cc-accent-border);
  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: var(--cc-overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Electron Specific Overrides */
body.is-electron .AutomationConfirmationModal_overlay__oZolL::before {
  background-color: var(--cc-overlay);
  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(--cc-panel-strong);
  color: var(--cc-text-hi);
  padding: 25px 30px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: 90%;
  max-width: 400px;
  font-family: var(--cc-font-mono);
  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(--cc-border);
}

.AutomationConfirmationModal_header__Cs1W2 h3 {
  margin: 0;
  font-size: 1.25rem;
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.AutomationConfirmationModal_progress__oe1Dd {
  background-color: var(--cc-icon-chip);
  color: var(--cc-text-mid);
  padding: 5px 10px;
  border-radius: var(--cc-radius-sm);
  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(--cc-text-hi);
}

.AutomationConfirmationModal_nodeId__39Ip6 {
  font-size: 0.7rem;
  color: var(--cc-text-mid);
  background-color: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  padding: 2px 6px;
  border-radius: var(--cc-radius-sm);
}

.AutomationConfirmationModal_promptLabel__BwszW {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cc-text-mid);
}

.AutomationConfirmationModal_promptDisplay__Bhnyu {
  background-color: var(--cc-input-bg);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  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(--cc-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.AutomationConfirmationModal_actions__agcO- button {
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-weight: 600;
  transition: all 0.2s ease;
}

.AutomationConfirmationModal_cancelButton__nCnWg {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border-color: var(--cc-error-border);
}

.AutomationConfirmationModal_cancelButton__nCnWg:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-error-text);
}

.AutomationConfirmationModal_approveButton__PEysW {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-btn-primary-bg);
  font-weight: 700;
}

.AutomationConfirmationModal_approveButton__PEysW:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

/* Cookie Banner Styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid var(--cc-border);
  padding: 20px;
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
  box-shadow: var(--cc-shadow);
}

.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: var(--cc-text-hi);
  font-weight: 500;
}

.cookie-policy-link {
  background: none;
  border: none;
  color: var(--cc-accent-text);
  text-decoration: none;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  padding: 0;
  transition: color 0.2s ease;
}

.cookie-policy-link:hover {
  color: var(--cc-text-hi);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-cancel-btn {
  font-family: var(--cc-font-mono);
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  padding: 10px 20px;
  border-radius: var(--cc-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-cancel-btn:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  transform: translateY(-1px);
}

.cookie-cancel-btn:active {
  transform: translateY(0);
}

.cookie-accept-btn {
  font-family: var(--cc-font-mono);
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  padding: 12px 24px;
  border-radius: var(--cc-radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-accept-btn:hover {
  background: var(--cc-btn-primary-bg-hover);
  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;
  }
}

.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: var(--cc-shadow-soft);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.StatusBanner_statusIcon__c71mw:hover {
  transform: scale(1.1);
  box-shadow: var(--cc-shadow);
}

/* Status States */
.StatusBanner_saving__isxAy {
  background: var(--cc-accent-soft);
  color: var(--cc-accent-text);
  border-color: var(--cc-accent-border);
}

.StatusBanner_saved__DMAix {
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border-color: var(--cc-success-border);
}

.StatusBanner_pending__mOEeu {
  background: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 2px solid var(--cc-error-border);
  animation: StatusBanner_subtlePulse__7gxJ0 2s ease-in-out infinite;
}

.StatusBanner_pendingIcon__COSmd {
  color: var(--cc-error-text) !important;
  filter: drop-shadow(0 0 2px var(--cc-error-border));
}

.StatusBanner_error__NrruO {
  background: var(--cc-error-bg);
  color: var(--cc-error-text);
  border-color: var(--cc-error-border);
  animation: StatusBanner_shake__3BauZ 0.5s ease-in-out;
}

.StatusBanner_idle__NlGGX {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border-color: var(--cc-border);
}

/* 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: var(--cc-error-border);
    box-shadow: 0 2px 8px
      color-mix(in srgb, var(--cc-error-text) 25%, transparent);
  }
  50% {
    opacity: 0.8;
    border-color: var(--cc-error-text);
    box-shadow: 0 4px 16px
      color-mix(in srgb, var(--cc-error-text) 45%, transparent);
  }
}

.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);
  }
}

.StatusTooltip_tooltip__Fnl8Y {
  background: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  border: 1px solid var(--cc-border);
  padding: 16px;
  width: 250px;
  font-size: 13px;
  color: var(--cc-text-hi);
  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 var(--cc-border-soft);
}

.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: var(--cc-text-hi);
}

.StatusTooltip_type__Pp8GG {
  font-family: var(--cc-font-mono);
  font-size: 11px;
  color: var(--cc-text-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.StatusTooltip_content__0tBP\+ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.StatusTooltip_description__6lk3n {
  color: var(--cc-text-mid);
  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: var(--cc-border-soft);
  border-radius: 3px;
  overflow: hidden;
}

.StatusTooltip_progressFill__Bw7jL {
  height: 100%;
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-soft));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.StatusTooltip_progressText__L0IcO {
  font-size: 11px;
  font-weight: 600;
  color: var(--cc-accent-text);
  min-width: 30px;
  text-align: right;
}

.StatusTooltip_statusMessage__3LVpw {
  font-size: 11px;
  color: var(--cc-text-mid);
  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 var(--cc-border-soft);
}

.StatusTooltip_detailRow__SHoTl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.StatusTooltip_label__AlJKH {
  font-family: var(--cc-font-mono);
  color: var(--cc-text-low);
  font-weight: 500;
}

.StatusTooltip_value__rPWtJ {
  color: var(--cc-text-hi);
  font-weight: 600;
}

.StatusTooltip_value__rPWtJ.StatusTooltip_saving__mqmo0 {
  color: var(--cc-accent-text);
}

.StatusTooltip_value__rPWtJ.StatusTooltip_saved__30gq\+ {
  color: var(--cc-success-text);
}

.StatusTooltip_value__rPWtJ.StatusTooltip_pending__VK9k9 {
  color: var(--cc-warning-text);
}

.StatusTooltip_value__rPWtJ.StatusTooltip_error__0pGQB {
  color: var(--cc-error-text);
}

.StatusTooltip_value__rPWtJ.StatusTooltip_idle__JYlAL {
  color: var(--cc-text-low);
}

/* 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;
}

/* SettingsModalContent.module.css */

/* --- New Layout Styles --- */
.SettingsModalContent_leftNav__ULr0V {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 20px;
  /* border-right: 1px solid var(--cc-border); */
  height: 80vh;
}

.SettingsModalContent_leftNav__ULr0V h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.SettingsModalContent_leftNav__ULr0V button {
  background: none;
  border: none;
  color: var(--cc-text-mid);
  padding: 12px 15px;
  text-align: left;
  font-size: 1rem;
  font-family: var(--cc-font-mono);
  border-radius: var(--cc-radius-sm);
  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: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

.SettingsModalContent_leftNav__ULr0V button.SettingsModalContent_active__j5Vl7 {
  background-color: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  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: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.SettingsModalContent_rightContent__rIDsX h3 {
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cc-border);
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.SettingsModalContent_rightContent__rIDsX p {
  margin-top: 0;
  margin-bottom: 25px;
  color: var(--cc-text-mid);
  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 var(--cc-border);
}

.SettingsModalContent_settingLabel__ASaFN {
  font-size: 1rem;
  color: var(--cc-text-hi);
}

.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: color-mix(in srgb, var(--cc-text-hi) 28%, transparent);
  transition: 0.4s;
  border-radius: 28px;
}

.SettingsModalContent_toggleSlider__KATWR:before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .SettingsModalContent_toggleSlider__KATWR {
  background-color: var(--cc-accent-text);
}

input:checked + .SettingsModalContent_toggleSlider__KATWR:before {
  transform: translateX(24px);
}

.SettingsModalContent_subscriptionSection__LfjJ1,
.SettingsModalContent_projectPermissionsSection__7q3wt {
  margin-top: 20px;
}

/* Plan + renew/expire date summary line above the subscription actions */
.SettingsModalContent_subscriptionMeta__Z478Y {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px 16px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  color: var(--cc-text-mid);
}

.SettingsModalContent_subscriptionMeta__Z478Y strong {
  color: var(--cc-text-hi);
  font-weight: 700;
}

.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: 1px solid transparent;
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 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: var(--cc-panel);
  color: var(--cc-text-mid);
  border-color: var(--cc-border);
}

.SettingsModalContent_historyButton__DSbUh:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
}

.SettingsModalContent_changePaymentButton__6wUxj {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-btn-primary-bg);
  font-weight: 700;
}

.SettingsModalContent_changePaymentButton__6wUxj:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.SettingsModalContent_cancelButton__f11eU {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border-color: var(--cc-error-border);
}

.SettingsModalContent_cancelButton__f11eU:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-error-text);
  transform: translateY(-1px);
}

.SettingsModalContent_resumeButton__lqRN9 {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-btn-primary-bg);
  font-weight: 700;
}

.SettingsModalContent_resumeButton__lqRN9:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.SettingsModalContent_permissionButton__ThXA\+ {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-btn-primary-bg);
  font-weight: 700;
}

.SettingsModalContent_permissionButton__ThXA\+:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.SettingsModalContent_permissionStatusSuccess__M9aSn {
  color: var(--cc-success-text);
  margin-top: 15px;
}

.SettingsModalContent_permissionStatusError__jzzRl {
  color: var(--cc-error-text);
  margin-top: 15px;
}

.SettingsModalContent_doneButton__AGDQO {
  width: 100%;
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  padding: 12px 15px;
  font-size: 1rem;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.SettingsModalContent_doneButton__AGDQO:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

/* Account Management Styles */
.SettingsModalContent_dangerZone__Of\+8I {
  margin-top: 20px;
  padding: 20px;
  border: 2px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-error-bg);
}

.SettingsModalContent_subscriptionWarning__wmdCy {
  background-color: var(--cc-warning-bg);
  border: 2px solid var(--cc-warning-border);
  border-radius: var(--cc-radius-sm);
  padding: 15px;
  margin-bottom: 20px;
}

.SettingsModalContent_subscriptionWarning__wmdCy p {
  margin: 5px 0;
  color: var(--cc-warning-text);
}

.SettingsModalContent_dangerZone__Of\+8I h4 {
  color: var(--cc-error-text);
  margin: 0 0 15px 0;
  font-family: var(--cc-font-body);
  font-size: 1.1rem;
}

.SettingsModalContent_dangerZone__Of\+8I ul {
  color: var(--cc-text-mid);
  margin: 15px 0;
  padding-left: 20px;
}

.SettingsModalContent_dangerZone__Of\+8I ul li {
  margin-bottom: 5px;
}

.SettingsModalContent_dangerButton__ee4in {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  padding: 12px 20px;
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  margin-top: 15px;
}

.SettingsModalContent_dangerButton__ee4in:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-error-text);
}

.SettingsModalContent_deleteConfirmation__P18ra {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cc-border);
}

.SettingsModalContent_confirmationInput__GkHLc {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 2px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-family: var(--cc-font-mono);
  font-size: 1rem;
}

.SettingsModalContent_confirmationInput__GkHLc:focus {
  outline: none;
  border-color: var(--cc-error-border);
}

.SettingsModalContent_deleteButtons__Pp5D- {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.SettingsModalContent_confirmDeleteButton__kgNEN {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  padding: 10px 15px;
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_confirmDeleteButton__kgNEN:hover:not(:disabled) {
  color: var(--cc-text-hi);
  border-color: var(--cc-error-text);
}

.SettingsModalContent_confirmDeleteButton__kgNEN:disabled {
  background-color: var(--cc-panel);
  color: var(--cc-text-low);
  border-color: var(--cc-border);
  cursor: not-allowed;
}

.SettingsModalContent_cancelDeleteButton__cc8rv {
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  padding: 10px 15px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_cancelDeleteButton__cc8rv:hover:not(:disabled) {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

/* About Section Styles */
.SettingsModalContent_aboutSection__D-OHB {
  margin-top: 20px;
}

.SettingsModalContent_versionInfo__A2gJ3 {
  background-color: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 20px;
  margin-bottom: 25px;
}

.SettingsModalContent_versionInfo__A2gJ3 h4 {
  color: var(--cc-text-hi);
  margin: 0 0 15px 0;
  font-family: var(--cc-font-body);
  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 var(--cc-border);
}

.SettingsModalContent_versionRow__20Eox:last-child {
  border-bottom: none;
}

.SettingsModalContent_versionLabel__s-3PL {
  color: var(--cc-text-mid);
  font-size: 0.9rem;
}

.SettingsModalContent_versionValue__XxbTQ {
  color: var(--cc-text-hi);
  font-weight: 500;
}

.SettingsModalContent_appInfo__0tbJl {
  color: var(--cc-text-mid);
  line-height: 1.6;
}

.SettingsModalContent_appInfo__0tbJl strong {
  color: var(--cc-text-hi);
}

.SettingsModalContent_appInfo__0tbJl ul {
  color: var(--cc-text-mid);
}

.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: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
}

.SettingsModalContent_bugReportInfo__-maZ2 {
  background-color: var(--cc-input-bg);
  padding: 16px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
}

.SettingsModalContent_bugReportInfo__-maZ2 p {
  margin: 0;
  color: var(--cc-text-mid);
  line-height: 1.6;
}

.SettingsModalContent_bugReportInfo__-maZ2 ul {
  color: var(--cc-text-mid);
  line-height: 1.8;
}

.SettingsModalContent_bugReportInfo__-maZ2 li {
  margin-bottom: 4px;
}

.SettingsModalContent_systemInfo__hkY0H {
  background-color: var(--cc-input-bg);
  padding: 16px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
}

.SettingsModalContent_systemInfo__hkY0H h4 {
  margin: 0 0 12px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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 var(--cc-border);
}

.SettingsModalContent_infoRow__rRCoo:last-child {
  border-bottom: none;
}

.SettingsModalContent_infoLabel__1HL7V {
  color: var(--cc-text-mid);
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 16px;
}

.SettingsModalContent_infoValue__7SnKo {
  color: var(--cc-text-hi);
  text-align: right;
  flex: 1 1;
}

.SettingsModalContent_bugReportActions__Ep3fR {
  text-align: center;
  padding: 20px;
  background-color: var(--cc-input-bg);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
}

.SettingsModalContent_reportBugButton__9i9pu {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  padding: 14px 32px;
  font-size: 1rem;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--cc-shadow-soft);
  margin-top: 20px;
  margin-bottom: 20px;
}

.SettingsModalContent_reportBugButton__9i9pu:hover {
  background: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

.SettingsModalContent_reportBugButton__9i9pu:active {
  transform: translateY(0);
}

.SettingsModalContent_helperText__kERb0 {
  margin-top: 30px;
  color: var(--cc-text-mid);
  font-size: 0.9rem;
  line-height: 1.5;
}

.SettingsModalContent_alternativeContact__SjY14 {
  background-color: var(--cc-input-bg);
  padding: 16px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border);
}

.SettingsModalContent_alternativeContact__SjY14 h4 {
  margin: 0 0 8px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-size: 0.95rem;
  font-weight: 600;
}

.SettingsModalContent_alternativeContact__SjY14 p {
  margin: 0;
  color: var(--cc-text-mid);
  line-height: 1.6;
}

.SettingsModalContent_emailLink__VVcqS {
  color: var(--cc-accent-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.SettingsModalContent_emailLink__VVcqS:hover {
  color: var(--cc-text-hi);
  text-decoration: underline;
}

/* Password Change Section Styles */
.SettingsModalContent_passwordSection__MAaim {
  background-color: var(--cc-panel);
  padding: 20px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  margin-bottom: 24px;
}

.SettingsModalContent_passwordSection__MAaim h4 {
  margin: 0 0 12px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-size: 1.1rem;
  font-weight: 600;
}

.SettingsModalContent_passwordSection__MAaim p {
  margin: 0 0 16px 0;
  color: var(--cc-text-mid);
  line-height: 1.6;
}

.SettingsModalContent_changePasswordButton__t5IXU {
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.SettingsModalContent_changePasswordButton__t5IXU:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
}

.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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  font-weight: 500;
}

.SettingsModalContent_passwordInput__w5avw {
  background-color: var(--cc-input-bg);
  border: 1px solid var(--cc-input-border);
  color: var(--cc-input-text);
  padding: 10px 12px;
  border-radius: var(--cc-radius-sm);
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  transition: border-color 0.2s ease;
}

.SettingsModalContent_passwordInput__w5avw:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

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

.SettingsModalContent_passwordInput__w5avw::placeholder {
  color: var(--cc-text-low);
}

.SettingsModalContent_passwordError__u9AgF {
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  color: var(--cc-error-text);
  padding: 10px 12px;
  border-radius: var(--cc-radius-sm);
  font-size: 0.9rem;
  line-height: 1.5;
}

.SettingsModalContent_passwordSuccess__4Aamg {
  background-color: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  color: var(--cc-success-text);
  padding: 10px 12px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_savePasswordButton__hSjaA:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

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

.SettingsModalContent_cancelPasswordButton__tH5dp {
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1;
}

.SettingsModalContent_cancelPasswordButton__tH5dp:hover:not(:disabled) {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

.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: var(--cc-text-mid);
  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: var(--cc-text-hi);
  background-color: var(--cc-icon-chip);
}

.SettingsModalContent_togglePasswordButton__DyBwZ:active {
  background-color: var(--cc-icon-chip);
}

.SettingsModalContent_togglePasswordButton__DyBwZ:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--cc-glow);
}

/* Profile Section Styles */
.SettingsModalContent_profileSection__WtSir {
  background-color: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 20px;
  margin-bottom: 24px;
}

.SettingsModalContent_profileSection__WtSir h4 {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-size: 1.1rem;
}

.SettingsModalContent_profileInfo__JgbGm {
  margin-bottom: 16px;
}

.SettingsModalContent_profileInfo__JgbGm p {
  margin: 8px 0;
  color: var(--cc-text-hi);
  font-size: 0.95rem;
}

.SettingsModalContent_profileInfo__JgbGm strong {
  color: var(--cc-text-mid);
  font-weight: 600;
  display: inline-block;
  min-width: 100px;
}

.SettingsModalContent_editProfileButton__T190D {
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  margin-bottom: 12px;
}

.SettingsModalContent_editProfileButton__T190D:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
}

.SettingsModalContent_editProfileButton__T190D:active {
  transform: translateY(0);
}

.SettingsModalContent_profileNote__PQ29n {
  font-size: 0.85rem;
  color: var(--cc-text-low);
  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 var(--cc-border);
}

.SettingsModalContent_updateButtonRow__7RM1U {
  display: flex;
  align-items: center;
  gap: 12px;
}

.SettingsModalContent_checkUpdateButton__u2kP7 {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.SettingsModalContent_checkUpdateButton__u2kP7:hover:not(:disabled) {
  background-color: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.SettingsModalContent_checkUpdateButton__u2kP7:active:not(:disabled) {
  transform: translateY(0);
}

.SettingsModalContent_checkUpdateButton__u2kP7:disabled {
  background-color: var(--cc-panel);
  color: var(--cc-text-low);
  border-color: var(--cc-border);
  cursor: not-allowed;
  opacity: 0.7;
}

.SettingsModalContent_updateAvailable__e8WgE {
  margin-top: 12px;
  padding: 12px 16px;
  background-color: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  border-radius: var(--cc-radius-sm);
}

.SettingsModalContent_updateAvailable__e8WgE p {
  margin: 0 0 12px 0;
  color: var(--cc-success-text);
  font-size: 0.95rem;
}

.SettingsModalContent_installUpdateButton__S7lwh {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.SettingsModalContent_installUpdateButton__S7lwh:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.SettingsModalContent_installUpdateButton__S7lwh:active {
  transform: translateY(0);
}

.SettingsModalContent_updateStatusSuccess__uqjZm {
  margin-top: 12px;
  color: var(--cc-success-text);
  font-size: 0.9rem;
}

.SettingsModalContent_updateStatusError__86IlF {
  margin-top: 12px;
  color: var(--cc-error-text);
  font-size: 0.9rem;
}

/* MainApp/ModalContent/PaymentHistoryModal.module.css */
.PaymentHistoryModal_container__fkdka {
  padding: 20px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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: var(--cc-text-low);
  white-space: nowrap;
}

.PaymentHistoryModal_refreshButton__2qqKj {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  font-family: var(--cc-font-mono);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.PaymentHistoryModal_refreshButton__2qqKj:hover:not(:disabled) {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  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(--cc-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(--cc-border);
}

.PaymentHistoryModal_historyTable__D5N0y th {
  font-family: var(--cc-font-mono);
  font-weight: bold;
  color: var(--cc-text-hi);
  background-color: var(--cc-icon-chip);
  cursor: pointer;
}

.PaymentHistoryModal_historyTable__D5N0y th.PaymentHistoryModal_ascending__NaU7x::after {
  content: ' ▲';
  color: var(--cc-accent-text);
}

.PaymentHistoryModal_historyTable__D5N0y th.PaymentHistoryModal_descending__hdcD3::after {
  content: ' ▼';
  color: var(--cc-accent-text);
}

.PaymentHistoryModal_status__BLQke {
  padding: 4px 8px;
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
}

.PaymentHistoryModal_succeeded__QC9aS,
.PaymentHistoryModal_active__S\+C7T {
  background-color: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
}

.PaymentHistoryModal_failed__ylJNy,
.PaymentHistoryModal_canceled__6hNib {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
}

.PaymentHistoryModal_pending__kX3eT,
.PaymentHistoryModal_trialing__G\+8lf {
  background-color: var(--cc-warning-bg);
  color: var(--cc-warning-text);
  border: 1px solid var(--cc-warning-border);
}

.PaymentHistoryModal_buttonContainer__Xe\+qG {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.PaymentHistoryModal_closeButton__4hg8r {
  padding: 10px 20px;
  cursor: pointer;
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.PaymentHistoryModal_closeButton__4hg8r:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

/* Brand theme bridge: map any descendant --node-* consumers onto the
   app-wide --cc-* brand tokens so this modal follows light/dark like the
   rest of the product (previously this forced a fixed dark node palette). */
.PaymentHistoryModal_forceDarkTheme__s7PWr {
  --canvas-bg: var(--cc-bg);
  --node-border: var(--cc-border);
  --node-border-selected: var(--cc-accent-border);
  --node-text: var(--cc-text-hi);
  /* RGB triple kept as-is (no --cc triple token exists); unused by this table modal */
  --node-text-rgb: 249, 250, 251;
  --node-label-text: var(--cc-text-mid);
  --node-icon-bg: var(--cc-icon-chip);
  --node-icon-color: var(--cc-text-hi);
  --node-button-bg: var(--cc-btn-primary-bg);
  --node-button-bg-hover: var(--cc-btn-primary-bg-hover);
  --node-button-text: var(--cc-btn-primary-text);
  --node-textarea-bg: var(--cc-input-bg);
  --node-textarea-border: var(--cc-input-border);
  --node-textarea-text: var(--cc-text-hi);
  --node-connected-data-bg: var(--cc-panel);
  --node-loading-text: var(--cc-text-low);
  --node-error-text: var(--cc-error-text);
  --handle-bg: var(--cc-accent);
  --handle-border: var(--cc-accent-border);
  --sidebar-bg: var(--cc-panel);
  color: var(--cc-text-hi);
}

.UserProfileModalContent_container__Cx6oQ {
  padding: 20px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
}

.UserProfileModalContent_header__pAuy- {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.UserProfileModalContent_title__PmGQJ {
  margin: 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.UserProfileModalContent_errorText__p1L-n {
  color: var(--cc-error-text);
}

.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: var(--cc-border) solid 1px;
  margin-right: 20px;
  flex: 1 1;
}

.UserProfileModalContent_avatar__dc6t2 {
  font-size: 2.5rem;
  border: 2px solid var(--cc-border);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: var(--cc-panel);
  overflow: hidden;
}

.UserProfileModalContent_avatarImage__MsJwk {
  width: 50%;
  height: 50%;
  object-fit: contain;
  border-radius: 10%;
}

.UserProfileModalContent_noAvatar__71G9W {
  color: var(--cc-text-mid);
  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 var(--cc-border);
}

.UserProfileModalContent_infoItem__15L64 {
  margin: 0;
  line-height: 1.4;
}

.UserProfileModalContent_infoItem__15L64 strong {
  color: var(--cc-text-hi);
}

.UserProfileModalContent_joinedDate__N4i2K {
  font-size: 0.8em;
  color: var(--cc-text-low);
  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: var(--cc-text-mid);
  font-size: 1.5rem;
  font-family: var(--cc-font-mono);
  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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
}

.UserProfileModalContent_logoutButton__SFuGr:hover {
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
}

.UserProfileModalContent_updateButton__QJoUD:hover {
  background-color: var(--cc-icon-chip);
  color: var(--cc-text-hi);
}

.UserProfileModalContent_closeButton__67cI0:hover {
  background-color: var(--cc-glow);
  color: var(--cc-accent-text);
}

/* 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: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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: var(--cc-error-text);
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  font-family: var(--cc-font-mono);
  padding: 10px;
  border-radius: var(--cc-radius-sm);
  margin-bottom: 15px;
}

.ApiKeysModalContent_inputGroup__1S8a8 {
  margin-top: 20px;
}

.ApiKeysModalContent_inputGroupSmall__Ivkza {
  margin-top: 15px;
}

.ApiKeysModalContent_label__Nx60S {
  display: block;
  margin-bottom: 5px;
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  font-weight: 500;
}

.ApiKeysModalContent_input__WqZQk {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  transition: border-color 0.2s ease;
}

.ApiKeysModalContent_input__WqZQk:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.ApiKeysModalContent_customKeysSection__qVU8k {
  margin-top: 25px;
  border-top: 1px solid var(--cc-border);
  padding-top: 20px;
}

.ApiKeysModalContent_customKeysSection__qVU8k h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  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: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  transition: border-color 0.2s ease;
}

.ApiKeysModalContent_customKeyNameInput__HpgvY:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.ApiKeysModalContent_customKeyValueInput__s\+-kX {
  flex: 2 1;
  padding: 8px;
  box-sizing: border-box;
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  transition: border-color 0.2s ease;
}

.ApiKeysModalContent_customKeyValueInput__s\+-kX:focus {
  outline: none;
  border-color: var(--cc-accent-border);
}

.ApiKeysModalContent_deleteButton__Zh0Wh {
  padding: 8px;
  cursor: pointer;
  background-color: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.ApiKeysModalContent_deleteButton__Zh0Wh:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-error-text);
}

.ApiKeysModalContent_addButton__ft90E {
  padding: 10px 15px;
  cursor: pointer;
  background-color: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.ApiKeysModalContent_addButton__ft90E:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
}

.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: var(--cc-panel);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.ApiKeysModalContent_cancelButton__MUEdM:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

.ApiKeysModalContent_saveButton__-fu2n {
  padding: 10px 20px;
  cursor: pointer;
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.ApiKeysModalContent_saveButton__-fu2n:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}

.ApiKeysModalContent_saveButton__-fu2n:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Guide Styles for Right Panel */
.ApiKeysModalContent_guideSection__QBDj\+ {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cc-border);
}

.ApiKeysModalContent_guideSection__QBDj\+:last-of-type {
  border-bottom: none;
  margin-bottom: 20px;
}

.ApiKeysModalContent_guideTitle__9CXMX {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-font-mono);
  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: var(--cc-text-mid);
  line-height: 1.5;
}

.ApiKeysModalContent_link__63pSo {
  color: var(--cc-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.ApiKeysModalContent_link__63pSo:hover {
  color: var(--cc-text-hi);
  text-decoration: underline;
}

.ApiKeysModalContent_linkIcon__HnCPD {
  font-size: 12px;
}

.ApiKeysModalContent_tips__zJNdC {
  background-color: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius);
  padding: 15px;
  margin-top: 20px;
}

.ApiKeysModalContent_tips__zJNdC h4 {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-size: 1rem;
}

.ApiKeysModalContent_tipsIcon__3xWgf {
  margin-right: 8px;
  color: var(--cc-accent-text);
}

.ApiKeysModalContent_tips__zJNdC ul {
  margin: 0;
  padding-left: 20px;
}

.ApiKeysModalContent_tips__zJNdC li {
  color: var(--cc-text-mid);
  margin-bottom: 5px;
  line-height: 1.4;
}

/* SubscriptionModalContent.module.css
   Plan (subscription) page — rendered in the split modal shell.
   Left panel: mono eyebrow header, renewal/pending status, segmented billing
   toggle, warnings, messages, and the primary action buttons.
   Right panel: a responsive grid of plan cards in the landing .planCard
   spirit (panel surface, 1px border, radius, hover lift, accent border).
   Every color/geometry value comes from the brand tokens (--cc-*), so the
   page reads correctly in both light and dark themes. */

/* ============================ LEFT PANEL ============================ */

.SubscriptionModalContent_leftPanel__umqW8 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 70vh;
  width: 100%;
}

.SubscriptionModalContent_headerSection__sTFBE {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mono eyebrow, wired like a canvas node handle */
.SubscriptionModalContent_eyebrow__4oz0o {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-accent-text);
  margin: 0;
}

.SubscriptionModalContent_handleDot__jntgh {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  box-shadow: var(--cc-accent-dot-glow);
  flex-shrink: 0;
}

.SubscriptionModalContent_wire__RPeLS {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--cc-accent-soft),
    var(--cc-accent-faint)
  );
}

.SubscriptionModalContent_mainTitle__5upii {
  text-align: left;
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.SubscriptionModalContent_subTitle__kLDW5 {
  text-align: left;
  font-size: 0.95rem;
  color: var(--cc-text-mid);
  margin: 0;
  line-height: 1.5;
  font-weight: 300;
}

/* Renewal / expiry + pending change, surfaced near the header */
.SubscriptionModalContent_statusLines__ozJTm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-sm);
}

.SubscriptionModalContent_renewalInline__zJEs4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
}

.SubscriptionModalContent_renewalLabel__6kDYt {
  color: var(--cc-text-low);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.SubscriptionModalContent_renewalDate__574FZ {
  color: var(--cc-text-hi);
  font-weight: 600;
}

.SubscriptionModalContent_pendingInline__hzU\+q {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  color: var(--cc-warning-text);
  line-height: 1.35;
}

.SubscriptionModalContent_pendingIcon__uzBeG {
  flex-shrink: 0;
  font-size: 0.9rem;
}

/* Section label (mono) */
.SubscriptionModalContent_sectionLabel__i0KfP {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 10px 0;
}

.SubscriptionModalContent_billingToggleSection__n7fd0 {
  margin: 0;
}

/* Segmented control */
.SubscriptionModalContent_billingToggle__DUCY5 {
  display: flex;
  background: var(--cc-input-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 4px;
  gap: 4px;
}

.SubscriptionModalContent_billingOption__2T9Ej {
  flex: 1 1;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--cc-text-mid);
  cursor: pointer;
  border-radius: var(--cc-radius-pill);
  font-size: 0.82rem;
  font-family: var(--cc-font-mono);
  font-weight: 600;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.SubscriptionModalContent_billingOption__2T9Ej.SubscriptionModalContent_active__x9cqb {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  box-shadow: var(--cc-shadow-soft);
}

.SubscriptionModalContent_billingOption__2T9Ej:hover:not(.SubscriptionModalContent_active__x9cqb):not(.SubscriptionModalContent_disabled__JtFF8) {
  color: var(--cc-text-hi);
  background: color-mix(in srgb, var(--cc-text-hi) 6%, transparent);
}

.SubscriptionModalContent_billingOption__2T9Ej.SubscriptionModalContent_disabled__JtFF8 {
  opacity: 0.45;
  cursor: not-allowed;
}

.SubscriptionModalContent_crossedOut__1YiJq {
  text-decoration: line-through;
  -webkit-text-decoration-color: var(--cc-error-text);
          text-decoration-color: var(--cc-error-text);
  text-decoration-thickness: 2px;
}

.SubscriptionModalContent_savingsTag__pG7wd {
  font-size: 0.6rem;
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
  padding: 2px 6px;
  border-radius: var(--cc-radius-pill);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Warnings */
.SubscriptionModalContent_warningsList__hDDX2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.SubscriptionModalContent_warningItem__eQM70 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-mid);
  line-height: 1.45;
}

.SubscriptionModalContent_warningItem__eQM70:first-child {
  color: var(--cc-error-text);
}

.SubscriptionModalContent_warningBullet__UL1Vk {
  font-size: 0.9rem;
  flex-shrink: 0;
  color: var(--cc-warning-text);
  margin-top: 1px;
}

.SubscriptionModalContent_warningItem__eQM70:first-child .SubscriptionModalContent_warningBullet__UL1Vk {
  color: var(--cc-error-text);
}

/* Messages */
.SubscriptionModalContent_messageContainer__wKu-r {
  margin: 0;
}

.SubscriptionModalContent_errorMessage__LKpHN,
.SubscriptionModalContent_successMessage__juBe- {
  border-radius: var(--cc-radius-sm);
  padding: 10px 14px;
  margin: 0;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  line-height: 1.4;
}

.SubscriptionModalContent_errorMessage__LKpHN {
  color: var(--cc-error-text);
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
}

.SubscriptionModalContent_successMessage__juBe- {
  color: var(--cc-success-text);
  background: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
}

/* Bottom actions */
.SubscriptionModalContent_bottomSection__iRda6 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.SubscriptionModalContent_buttonGroup__HbZyo {
  display: flex;
  gap: 12px;
}

.SubscriptionModalContent_cancelButton__GxD3K,
.SubscriptionModalContent_confirmButton__ZhCfK {
  flex: 1 1;
  padding: 13px 18px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid transparent;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.SubscriptionModalContent_cancelButton__GxD3K {
  background: transparent;
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  font-weight: 500;
}

.SubscriptionModalContent_cancelButton__GxD3K:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
}

.SubscriptionModalContent_confirmButton__ZhCfK {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  box-shadow: var(--cc-shadow-soft);
}

.SubscriptionModalContent_confirmButton__ZhCfK:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  box-shadow: 0 10px 26px var(--cc-glow);
  transform: translateY(-2px);
}

.SubscriptionModalContent_confirmButton__ZhCfK:disabled {
  background: var(--cc-panel);
  color: var(--cc-text-low);
  border-color: var(--cc-border);
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================ RIGHT PANEL ============================ */

.SubscriptionModalContent_rightPanel__ClJbV {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1;
  min-width: 0;
}

.SubscriptionModalContent_plansContainer__sARcm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  /* Fill the right panel so the cards run to its bottom edge */
  flex: 1 1;
  min-height: 0;
  align-content: stretch;
}

/* Plan card */
.SubscriptionModalContent_planColumn__5lefA {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 22px 18px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.SubscriptionModalContent_planColumn__5lefA:hover {
  transform: translateY(-3px);
  border-color: var(--cc-accent-border);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_selected__vKPLz {
  border-color: var(--cc-accent-border);
  box-shadow:
    0 0 0 1px var(--cc-accent-border),
    0 12px 30px var(--cc-glow);
  background: var(--cc-panel-hover);
}

/* Tier identity via the token trios */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_highlight__y4flz .SubscriptionModalContent_planTitle__tTWV5 {
  color: var(--cc-pro-text);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_premium__dkAMD .SubscriptionModalContent_planTitle__tTWV5 {
  color: var(--cc-premium-text);
}

/* Current plan: accent border ring */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_currentPlan__YANz4 {
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 1px var(--cc-accent-border);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_currentPlan__YANz4.SubscriptionModalContent_selected__vKPLz {
  box-shadow:
    0 0 0 1px var(--cc-accent-border),
    0 12px 30px var(--cc-glow);
}

/* Pending change */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_pendingPlan__TKVKF {
  border-color: var(--cc-warning-border);
}

/* Disabled */
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7:hover {
  transform: none;
  border-color: var(--cc-border);
  box-shadow: none;
}

.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 .SubscriptionModalContent_planTitle__tTWV5,
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 .SubscriptionModalContent_priceAmount__A5nqQ,
.SubscriptionModalContent_planColumn__5lefA.SubscriptionModalContent_disabledPlan__ZaQb7 .SubscriptionModalContent_featureText__8YRsW {
  color: var(--cc-text-low) !important;
}

.SubscriptionModalContent_planHeader__pf9z4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cc-border-soft);
}

.SubscriptionModalContent_planTitle__tTWV5 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.SubscriptionModalContent_planPrice__fcVTq {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--cc-text-hi);
}

.SubscriptionModalContent_priceAmount__A5nqQ {
  font-size: 2rem;
  font-weight: 300;
  font-family: var(--cc-font-body);
  color: var(--cc-text-hi);
  line-height: 1;
}

.SubscriptionModalContent_priceSuffix__bwMJE {
  font-size: 0.72rem;
  color: var(--cc-text-low);
  font-family: var(--cc-font-mono);
}

.SubscriptionModalContent_savingsBadge__IBdDj {
  font-size: 0.62rem;
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
  padding: 3px 8px;
  border-radius: var(--cc-radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--cc-font-mono);
}

/* Semi toggle */
.SubscriptionModalContent_toggleContainer__Ohsot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--cc-text-mid);
  font-size: 0.75rem;
  font-family: var(--cc-font-mono);
}

.SubscriptionModalContent_toggleSwitch__MVfjC {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}

.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: color-mix(in srgb, var(--cc-text-hi) 28%, transparent);
  transition: 0.4s;
  border-radius: 20px;
}

.SubscriptionModalContent_slider__bv1vb:before {
  position: absolute;
  content: '';
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .SubscriptionModalContent_slider__bv1vb {
  background-color: var(--cc-accent-text);
}

input:focus + .SubscriptionModalContent_slider__bv1vb {
  box-shadow: 0 0 0 3px var(--cc-glow);
}

input:checked + .SubscriptionModalContent_slider__bv1vb:before {
  transform: translateX(14px);
}

/* Features — distribute across the card's full height (cards stretch to the
   panel bottom, so the perks spread out instead of clustering at the top) */
.SubscriptionModalContent_featuresList__b\+k5M {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 9px;
}

.SubscriptionModalContent_featureItem__Dmwke {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-mid);
  position: relative;
  line-height: 1.3;
}

.SubscriptionModalContent_featureIcon__7dxPK {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--cc-accent-text);
  flex-shrink: 0;
  width: 16px;
}

.SubscriptionModalContent_featureIcon__7dxPK img {
  width: 15px;
  height: 15px;
  opacity: 0.75;
  /* Neutral gray tint stays legible on both light and dark surfaces */
  filter: brightness(0) invert(0.55);
}

.SubscriptionModalContent_featureText__8YRsW {
  text-align: left;
  flex: 1 1;
  color: var(--cc-text-mid);
}

.SubscriptionModalContent_creditFeature__RFGWG .SubscriptionModalContent_featureText__8YRsW {
  color: var(--cc-text-hi);
  font-weight: 600;
}

.SubscriptionModalContent_strikethrough__XSebe {
  text-decoration: line-through;
  -webkit-text-decoration-color: var(--cc-error-text);
          text-decoration-color: var(--cc-error-text);
  text-decoration-thickness: 2px;
  opacity: 0.55;
}

/* Feature tooltip */
.SubscriptionModalContent_featureTooltip__GpoRQ {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 10px 14px;
  width: 210px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
  z-index: 9999;
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  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: var(--cc-border);
}

.SubscriptionModalContent_featureTooltip__GpoRQ strong {
  color: var(--cc-text-hi);
  font-size: 0.82rem;
  font-weight: 600;
  display: block;
}

.SubscriptionModalContent_featureTooltip__GpoRQ span {
  color: var(--cc-text-mid);
  font-size: 0.72rem;
  line-height: 1.4;
  display: block;
}

.SubscriptionModalContent_featureItem__Dmwke:hover .SubscriptionModalContent_featureTooltip__GpoRQ {
  opacity: 1;
  visibility: visible;
}

/* Flip the tooltip for the last card (Premium) so it stays on-screen */
.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: var(--cc-border);
}

/* Status badges */
.SubscriptionModalContent_statusBadge__0ptcd {
  margin-top: 14px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--cc-radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
}

.SubscriptionModalContent_currentBadge__C7r\+v {
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-accent-border);
}

.SubscriptionModalContent_pendingBadge__HUvDq {
  background: var(--cc-warning-bg);
  color: var(--cc-warning-text);
  border-color: var(--cc-warning-border);
}

.SubscriptionModalContent_disabledBadge__zk7pC {
  background: var(--cc-icon-chip);
  color: var(--cc-text-low);
  border-color: var(--cc-border);
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 768px) {
  .SubscriptionModalContent_leftPanel__umqW8 {
    height: auto;
    gap: 18px;
  }

  .SubscriptionModalContent_mainTitle__5upii {
    font-size: 1.6rem;
  }

  .SubscriptionModalContent_plansContainer__sARcm {
    grid-template-columns: 1fr;
    /* Stacked cards keep their natural height on mobile */
    flex: initial;
    align-content: start;
  }

  .SubscriptionModalContent_featuresList__b\+k5M {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .SubscriptionModalContent_planColumn__5lefA,
  .SubscriptionModalContent_cancelButton__GxD3K,
  .SubscriptionModalContent_confirmButton__ZhCfK,
  .SubscriptionModalContent_billingOption__2T9Ej,
  .SubscriptionModalContent_slider__bv1vb,
  .SubscriptionModalContent_slider__bv1vb:before,
  .SubscriptionModalContent_featureTooltip__GpoRQ {
    transition: none;
  }

  .SubscriptionModalContent_planColumn__5lefA:hover {
    transform: none;
  }
}

/* CreditModalContent.module.css
   Credits page — rendered inside the rounded modal shell. A balance hero
   (current credits in mono with the coin icon) sits above a responsive grid
   of one-time credit packs presented as cards. All colors/geometry come from
   the brand tokens (--cc-*), so it reads correctly in light and dark themes.
   NOTE: filename intentionally differs from the component (CreditsModalContent
   imports './CreditModalContent.module.css'). */

.CreditModalContent_modalContainer__XtRt8 {
  width: min(860px, 88vw);
  max-height: 85vh;
  margin: auto;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-hi);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

/* ============================ HEADER ============================ */

.CreditModalContent_header__H8R3b {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.CreditModalContent_eyebrow__YdKdu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-accent-text);
  margin: 0;
}

.CreditModalContent_handleDot__Qbpu6 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  box-shadow: var(--cc-accent-dot-glow);
  flex-shrink: 0;
}

.CreditModalContent_wire__T637F {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--cc-accent-soft),
    var(--cc-accent-faint)
  );
}

.CreditModalContent_mainTitle__qI36J {
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
}

.CreditModalContent_subTitle__NXIhm {
  font-size: 0.95rem;
  color: var(--cc-text-mid);
  margin: 0;
  font-weight: 300;
}

/* ============================ BALANCE HERO ============================ */

.CreditModalContent_balanceHero__zqGm5 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-soft);
}

.CreditModalContent_balanceCoin__iAx1m {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  /* Neutral gray tint stays legible on both light and dark surfaces */
  filter: brightness(0) invert(0.6);
  opacity: 0.85;
}

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

.CreditModalContent_balanceLabel__CHSQZ {
  font-family: var(--cc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-text-low);
}

.CreditModalContent_balanceValue__P6pzk {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cc-font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cc-text-hi);
}

.CreditModalContent_balanceUnit__UQD2r {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cc-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================ ERROR ============================ */

.CreditModalContent_errorMessage__HZTJE {
  color: var(--cc-error-text);
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  border-radius: var(--cc-radius-sm);
  padding: 10px 14px;
  margin: 0;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  text-align: center;
}

/* ============================ PACK GRID ============================ */

.CreditModalContent_packGrid__0j75c {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.CreditModalContent_packCard__DIou0 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 24px 20px 20px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.CreditModalContent_packCard__DIou0:hover {
  transform: translateY(-3px);
  border-color: var(--cc-accent-border);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.CreditModalContent_packCard__DIou0.CreditModalContent_bestValue__Urbe8 {
  border-color: var(--cc-premium-border);
  background: var(--cc-premium-bg);
}

.CreditModalContent_packCard__DIou0.CreditModalContent_selected__FTIyZ {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
  box-shadow:
    0 0 0 1px var(--cc-accent-border),
    0 12px 30px var(--cc-glow);
}

/* Premium "best value" chip */
.CreditModalContent_bestValueChip__gmR3H {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--cc-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-premium-text);
  background: var(--cc-premium-bg);
  border: 1px solid var(--cc-premium-border);
  border-radius: var(--cc-radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.CreditModalContent_packCredits__xjUq1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cc-border-soft);
}

.CreditModalContent_packCoin__oY3WQ {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  /* Neutral gray tint stays legible on both light and dark surfaces */
  filter: brightness(0) invert(0.6);
  opacity: 0.8;
}

.CreditModalContent_packAmount__AYZK2 {
  font-family: var(--cc-font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cc-text-hi);
  text-align: center;
}

.CreditModalContent_packUnit__C63YK {
  font-family: var(--cc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-text-low);
}

.CreditModalContent_packFeatures__MR9bd {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.CreditModalContent_packFeatures__MR9bd li {
  position: relative;
  padding-left: 16px;
  font-family: var(--cc-font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--cc-text-mid);
}

.CreditModalContent_packFeatures__MR9bd li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cc-accent-soft);
}

.CreditModalContent_packFooter__-O-KY {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cc-border-soft);
}

.CreditModalContent_packPrice__0f5uh {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--cc-text-hi);
}

.CreditModalContent_priceAmount__WRgdw {
  font-size: 1.5rem;
  font-weight: 300;
  font-family: var(--cc-font-body);
  color: var(--cc-text-hi);
  line-height: 1;
}

.CreditModalContent_priceSuffix__7C5-C {
  font-size: 0.72rem;
  color: var(--cc-text-low);
  font-family: var(--cc-font-mono);
}

.CreditModalContent_perCredit__BkhP8 {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  color: var(--cc-text-low);
}

/* ============================ 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: 13px 18px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid transparent;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.CreditModalContent_cancelButton__Mu\+a1 {
  background: transparent;
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  font-weight: 500;
}

.CreditModalContent_cancelButton__Mu\+a1:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
}

.CreditModalContent_confirmButton__U\+Cuf {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  box-shadow: var(--cc-shadow-soft);
}

.CreditModalContent_confirmButton__U\+Cuf:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  border-color: var(--cc-btn-primary-bg-hover);
  box-shadow: 0 10px 26px var(--cc-glow);
  transform: translateY(-2px);
}

.CreditModalContent_confirmButton__U\+Cuf:disabled {
  background: var(--cc-panel);
  color: var(--cc-text-low);
  border-color: var(--cc-border);
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 768px) {
  .CreditModalContent_modalContainer__XtRt8 {
    width: 100%;
    gap: 14px;
  }

  .CreditModalContent_packGrid__0j75c {
    grid-template-columns: 1fr;
  }

  .CreditModalContent_mainTitle__qI36J {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .CreditModalContent_packCard__DIou0,
  .CreditModalContent_cancelButton__Mu\+a1,
  .CreditModalContent_confirmButton__U\+Cuf {
    transition: none;
  }

  .CreditModalContent_packCard__DIou0:hover {
    transform: none;
  }
}

/* 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 var(--cc-accent-text);
  border-radius: var(--cc-radius);
  background: transparent;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cc-accent-text) 40%, transparent),
    0 0 0 6px color-mix(in srgb, var(--cc-accent-text) 20%, transparent),
    0 0 20px color-mix(in srgb, var(--cc-accent-text) 55%, transparent),
    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: var(--cc-accent-text);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--cc-accent-text) 40%, transparent),
      0 0 0 6px color-mix(in srgb, var(--cc-accent-text) 20%, transparent),
      0 0 20px color-mix(in srgb, var(--cc-accent-text) 55%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  50% {
    border-color: var(--cc-accent-soft);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--cc-accent-text) 50%, transparent),
      0 0 0 10px color-mix(in srgb, var(--cc-accent-text) 30%, transparent),
      0 0 30px color-mix(in srgb, var(--cc-accent-text) 75%, transparent),
      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 var(--cc-accent-text);
  border-radius: var(--cc-radius);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: TutorialOverlay_dashPulse__H0JiA 2s infinite;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cc-accent-text) 30%, transparent),
    0 0 20px color-mix(in srgb, var(--cc-accent-text) 40%, transparent);
  z-index: 10000;
}

.TutorialOverlay_canvasLabel__OwD0e {
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  padding: 12px 24px;
  border-radius: var(--cc-radius-sm);
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px var(--cc-glow);
}

@keyframes TutorialOverlay_dashPulse__H0JiA {
  0%,
  100% {
    border-color: var(--cc-accent-text);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--cc-accent-text) 30%, transparent),
      0 0 20px color-mix(in srgb, var(--cc-accent-text) 40%, transparent);
  }
  50% {
    border-color: var(--cc-accent-soft);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--cc-accent-text) 40%, transparent),
      0 0 30px color-mix(in srgb, var(--cc-accent-text) 60%, transparent);
  }
}

/* Tutorial tooltip */
.TutorialOverlay_tooltip__BaoDF {
  position: fixed;
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 180px);
  box-shadow: var(--cc-shadow);
  -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: var(--cc-text-mid);
  font-size: 0.85rem;
}

.TutorialOverlay_stepNumber__CLmk3 {
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.TutorialOverlay_stepTotal__-5mKV {
  color: var(--cc-text-low);
}

.TutorialOverlay_skipButton__oRywu {
  background: none;
  border: none;
  color: var(--cc-text-mid);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-text-hi);
  background: var(--cc-icon-chip);
}

.TutorialOverlay_progressBar__U5N2P {
  width: 100%;
  height: 3px;
  background: var(--cc-icon-chip);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.TutorialOverlay_progressFill__etI6D {
  height: 100%;
  background: var(--cc-accent-text);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.TutorialOverlay_tooltipContent__\+cKWO {
  margin-bottom: 20px;
}

.TutorialOverlay_stepTitle__VrEmq {
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.TutorialOverlay_stepDescription__PTi31 {
  color: var(--cc-text-mid);
  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: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-btn-primary-text);
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.TutorialOverlay_copyButton__1VYxw:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.TutorialOverlay_copyButton__1VYxw:active {
  transform: translateY(0);
}

.TutorialOverlay_interactionStatus__h0Zv2 {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--cc-warning-bg);
  border: 1px solid var(--cc-warning-border);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-warning-text);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.TutorialOverlay_interactionStatus__h0Zv2.TutorialOverlay_completed__M1gjr {
  background: var(--cc-success-bg);
  border-color: var(--cc-success-border);
  color: var(--cc-success-text);
}

.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: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.TutorialOverlay_navButton__t\+Tmx:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.TutorialOverlay_completeButton__w4NYu {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-weight: 700;
  flex: 1 1;
}

.TutorialOverlay_completeButton__w4NYu:hover {
  background: var(--cc-btn-primary-bg-hover);
}

/* 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;
}

/* PurchaseCelebration.module.css
   Premium purchase-success celebration. Styled entirely against the brand
   --cc-* tokens so it reads correctly in both light and dark themes (the
   tokens flip via body.light-theme / body.dark-theme). Sits inside the base
   Modal panel (which already provides the --cc-panel-strong card). */

.PurchaseCelebration_celebration__QT-Y4 {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 1.75rem 0.5rem 0.5rem;
  min-height: 300px;
  border-radius: var(--cc-radius);
}

/* -- Soft radial glow behind the badge (the one permitted subtle loop) ---- */
.PurchaseCelebration_glow__Q8pFt {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 320px;
  height: 320px;
  max-width: 90%;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  animation: PurchaseCelebration_glowPulse__E8mMR 4s ease-in-out infinite;
}

.PurchaseCelebration_credits__LnCsQ .PurchaseCelebration_glow__Q8pFt {
  background: radial-gradient(circle, var(--cc-glow) 0%, transparent 68%);
}

.PurchaseCelebration_subscription__hTTB3 .PurchaseCelebration_glow__Q8pFt {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cc-premium-text) 16%, transparent) 0%,
    transparent 68%
  );
}

@keyframes PurchaseCelebration_glowPulse__E8mMR {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.08);
  }
}

/* -- Confetti burst (self-written DOM particles, single run) -------------- */
.PurchaseCelebration_confetti__9Q0UV {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.PurchaseCelebration_confettiPiece__ymT9t {
  position: absolute;
  top: 16%;
  opacity: 0;
  animation-name: PurchaseCelebration_confettiBurst__S3wYI;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes PurchaseCelebration_confettiBurst__S3wYI {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));
    opacity: 0;
  }
}

/* -- Badge (spring scale-in) ---------------------------------------------- */
.PurchaseCelebration_badge__0gMg\+ {
  position: relative;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  animation: PurchaseCelebration_badgePop__LWBJc 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.PurchaseCelebration_credits__LnCsQ .PurchaseCelebration_badge__0gMg\+ {
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    ),
    var(--cc-accent);
  border: 1px solid var(--cc-accent-border);
  box-shadow:
    0 8px 24px var(--cc-glow),
    inset 0 0 0 4px color-mix(in srgb, var(--cc-accent) 45%, transparent);
  color: var(--cc-btn-primary-text);
}

.PurchaseCelebration_subscription__hTTB3 .PurchaseCelebration_badge__0gMg\+ {
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.4),
      transparent 60%
    ),
    var(--cc-premium-bg);
  border: 1px solid var(--cc-premium-border);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--cc-premium-text) 30%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--cc-premium-text) 18%, transparent);
  color: var(--cc-premium-text);
}

.PurchaseCelebration_badgeIcon__pX6PY {
  font-size: 2.5rem;
}

@keyframes PurchaseCelebration_badgePop__LWBJc {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.12);
    opacity: 1;
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* -- Heading -------------------------------------------------------------- */
.PurchaseCelebration_heading__\+YC1l {
  position: relative;
  z-index: 2;
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--cc-text-hi);
  margin: 0 0 1rem;
  animation: PurchaseCelebration_revealUp__qJlpQ 0.5s ease-out 0.25s both;
}

/* -- Reveal area (count-up number / plan name) ---------------------------- */
.PurchaseCelebration_reveal__qEU5m {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 3.4rem;
  margin-bottom: 1.1rem;
  animation: PurchaseCelebration_revealUp__qJlpQ 0.5s ease-out 0.4s both;
}

.PurchaseCelebration_revealLabel__MZwP3 {
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-text-mid);
}

.PurchaseCelebration_countUpValue__yenbz {
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cc-accent-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.PurchaseCelebration_genericTitle__2-CqE {
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--cc-accent-text);
}

/* Gold plan name with a single tasteful shimmer sweep that settles solid. */
.PurchaseCelebration_planName__Hh5Aj {
  font-family: var(--cc-font-body);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  background: linear-gradient(
    100deg,
    var(--cc-premium-text) 0%,
    var(--cc-premium-text) 38%,
    #fff4d2 50%,
    var(--cc-premium-text) 62%,
    var(--cc-premium-text) 100%
  );
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: PurchaseCelebration_shimmerSweep__muPG- 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s 1 forwards;
}

.PurchaseCelebration_planNameGeneric__4Q5YR {
  font-family: var(--cc-font-body);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cc-premium-text);
}

@keyframes PurchaseCelebration_shimmerSweep__muPG- {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -30% 0;
  }
}

/* -- Message -------------------------------------------------------------- */
.PurchaseCelebration_message__lk2-n {
  position: relative;
  z-index: 2;
  font-family: var(--cc-font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cc-text-mid);
  max-width: 380px;
  margin: 0 0 1.5rem;
  animation: PurchaseCelebration_revealUp__qJlpQ 0.5s ease-out 0.6s both;
}

/* -- Continue button (primary rose recipe: mono, rose bg, dark text) ------ */
.PurchaseCelebration_continueButton__mhqoH {
  position: relative;
  z-index: 2;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 2.4rem;
  color: var(--cc-btn-primary-text);
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-pill);
  cursor: pointer;
  box-shadow: 0 6px 18px var(--cc-glow);
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  animation: PurchaseCelebration_revealUp__qJlpQ 0.5s ease-out 0.75s both;
}

.PurchaseCelebration_continueButton__mhqoH:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--cc-glow);
}

.PurchaseCelebration_continueButton__mhqoH:active {
  transform: translateY(0);
}

.PurchaseCelebration_continueButton__mhqoH:focus-visible {
  outline: 2px solid var(--cc-accent-text);
  outline-offset: 2px;
}

@keyframes PurchaseCelebration_revealUp__qJlpQ {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* -- Reduced motion: skip confetti/count-up/springs, simple fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .PurchaseCelebration_badge__0gMg\+,
  .PurchaseCelebration_heading__\+YC1l,
  .PurchaseCelebration_reveal__qEU5m,
  .PurchaseCelebration_message__lk2-n,
  .PurchaseCelebration_continueButton__mhqoH {
    animation: PurchaseCelebration_fadeIn__NkRbl 0.25s ease-out both;
  }

  .PurchaseCelebration_glow__Q8pFt {
    animation: none;
    opacity: 0.6;
  }

  .PurchaseCelebration_planName__Hh5Aj {
    animation: none;
    background-position: -30% 0;
  }

  .PurchaseCelebration_confetti__9Q0UV {
    display: none;
  }
}

/* -- Mobile --------------------------------------------------------------- */
@media (max-width: 480px) {
  .PurchaseCelebration_celebration__QT-Y4 {
    min-height: 260px;
    padding-top: 1.25rem;
  }

  .PurchaseCelebration_badge__0gMg\+ {
    width: 72px;
    height: 72px;
  }

  .PurchaseCelebration_badgeIcon__pX6PY {
    font-size: 2.1rem;
  }

  .PurchaseCelebration_countUpValue__yenbz,
  .PurchaseCelebration_planName__Hh5Aj {
    font-size: 2rem;
  }

  .PurchaseCelebration_heading__\+YC1l {
    font-size: 1.3rem;
  }

  .PurchaseCelebration_continueButton__mhqoH {
    width: 100%;
  }
}

/* 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: var(--cc-success-text);
  animation: FallbackModal_successPulse__hoE4j 0.6s ease-in-out;
}

.FallbackModal_errorIcon__dDmaP {
  font-size: 4rem;
  color: var(--cc-error-text);
  animation: FallbackModal_errorShake__yTJHd 0.6s ease-in-out;
}

.FallbackModal_infoIcon__lD\+QA {
  font-size: 4rem;
  color: var(--cc-accent-text);
  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: 300;
  margin-bottom: 1rem;
  color: var(--text-color);
  font-family: var(--cc-font-body);
}

.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: var(--cc-premium-bg);
  border: 1px solid var(--cc-premium-border);
  color: var(--cc-premium-text);
  font-weight: 600;
  border-radius: var(--cc-radius-sm);
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--cc-premium-text) 25%, transparent);
  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
      color-mix(in srgb, var(--cc-premium-text) 25%, transparent);
  }
  50% {
    box-shadow: 0 6px 20px
      color-mix(in srgb, var(--cc-premium-text) 40%, transparent);
  }
}

.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: var(--cc-btn-primary-text);
  border: 1px solid var(--accent-color);
  border-radius: var(--cc-radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--cc-font-mono);
}

.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: var(--cc-radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
  font-family: var(--cc-font-mono);
}

.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: var(--cc-icon-chip);
    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 brand tokens (both themes) */
  --text-color: var(--cc-text-hi);
  --text-color-secondary: var(--cc-text-mid);
  --text-color-muted: var(--cc-text-low);
  --card-background: var(--cc-panel);
  --accent-color: var(--cc-accent);
  --accent-color-hover: var(--cc-btn-primary-bg-hover);
  --button-secondary-background: var(--cc-panel);
  --button-secondary-hover: var(--cc-panel-hover);
  --border-color: var(--cc-border);

  /* background-color: var(--node-bg); */
  color: var(--cc-text-hi);
}

/* 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: var(--cc-text-hi);
  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: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.8rem;
}

.LoginModal_welcomeSection__0Kb\+M p {
  color: var(--cc-text-mid);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* Right Panel - Login Form */
.LoginModal_rightContent__aLFOU {
  color: var(--cc-text-hi);
  height: 100%;
  padding-left: 10px;
}

.LoginModal_rightContent__aLFOU h2 {
  margin: 0 0 25px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.8rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 15px;
}

.LoginModal_errorMessage__2zJ7F {
  color: var(--cc-error-text);
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  padding: 12px;
  border-radius: var(--cc-radius-sm);
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.LoginModal_successMessage__XHsxF {
  color: var(--cc-success-text);
  background-color: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  padding: 12px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
}

.LoginModal_inputGroup__ECTaw input {
  padding: 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-size: 1rem;
  font-family: var(--cc-font-mono);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.LoginModal_inputGroup__ECTaw input:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.LoginModal_inputGroup__ECTaw input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.LoginModal_loginButton__MJ\+EK {
  padding: 14px 20px;
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  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: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.LoginModal_loginButton__MJ\+EK:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.LoginModal_googleButton__Sgilv {
  background-color: var(--cc-panel);
  border: 1px solid var(--cc-border);
  color: var(--cc-text-hi);
}

.LoginModal_googleButton__Sgilv:hover:not(:disabled) {
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  box-shadow: none;
  transform: translateY(-1px);
}

.LoginModal_googleIcon__YYPKx {
  font-size: 1.2rem;
}

.LoginModal_divider__CFFX3 {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--cc-text-low);
  font-size: 0.9rem;
  margin: 20px 0;
  font-family: var(--cc-font-mono);
  font-weight: 600;
}

.LoginModal_divider__CFFX3::before,
.LoginModal_divider__CFFX3::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid var(--cc-border);
}

.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 var(--cc-border);
  color: var(--cc-text-mid);
}

.LoginModal_signUpButton__tc7WX:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  background-color: var(--cc-panel-hover);
  box-shadow: none;
}

.LoginModal_forgotPasswordLink__d2V0X {
  background: none;
  border: none;
  color: var(--cc-accent-text);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--cc-font-mono);
  text-decoration: underline;
  margin-top: 6px;
  text-align: left;
  padding: 0;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.LoginModal_forgotPasswordLink__d2V0X:hover:not(:disabled) {
  opacity: 0.75;
}

.LoginModal_forgotPasswordLink__d2V0X:disabled {
  color: var(--cc-text-low);
  cursor: not-allowed;
  text-decoration: none;
}

/* EmailVerificationModal.module.css */

/* Left Panel - Logo and Welcome Text */
.EmailVerificationModal_leftContent__NjZo9 {
  color: var(--cc-text-hi);
  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: var(--cc-accent-text);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 15px;
}

.EmailVerificationModal_welcomeSection__J-C4o p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: var(--cc-text-mid);
  font-size: 1rem;
}

.EmailVerificationModal_welcomeSection__J-C4o strong {
  color: var(--cc-accent-text);
  font-weight: 600;
}

/* Right Panel - Verification Status and Actions */
.EmailVerificationModal_rightContent__\+GJGo {
  color: var(--cc-text-hi);
  height: 100%;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.EmailVerificationModal_rightContent__\+GJGo h2 {
  margin: 0 0 30px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 15px;
}

/* Verification Status Styles */
.EmailVerificationModal_verificationStatus__DM-zb {
  background-color: var(--cc-glow);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-sm);
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.EmailVerificationModal_checkingIndicator__lLjw0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--cc-accent-text);
  font-weight: 500;
}

.EmailVerificationModal_spinner__x3YAu {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cc-accent-soft);
  border-top: 2px solid var(--cc-accent-text);
  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: var(--cc-panel);
  border-left: 3px solid var(--cc-accent-border);
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
}

.EmailVerificationModal_verificationNote__XqDKY p {
  margin: 0;
  color: var(--cc-text-mid);
  font-size: 0.9rem;
  line-height: 1.6;
}

.EmailVerificationModal_verificationNote__XqDKY strong {
  color: var(--cc-accent-text);
  font-weight: 600;
}

/* Action Buttons */
.EmailVerificationModal_verificationActions__azv3x {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 30px 0 20px 0;
}

.EmailVerificationModal_checkButton__mdgEr {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  padding: 12px 24px;
  border-radius: var(--cc-radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--cc-font-mono);
  font-size: 1rem;
}

.EmailVerificationModal_checkButton__mdgEr:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.EmailVerificationModal_resendButton__F\+EZM {
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-border);
  padding: 12px 24px;
  border-radius: var(--cc-radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--cc-font-mono);
  font-size: 1rem;
}

.EmailVerificationModal_resendButton__F\+EZM:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
  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 var(--cc-border);
}

.EmailVerificationModal_logoutButton__Neybw {
  background: transparent;
  color: var(--cc-text-mid);
  border: 2px solid var(--cc-border);
  padding: 12px 20px;
  border-radius: var(--cc-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--cc-font-mono);
  font-size: 1rem;
}

.EmailVerificationModal_logoutButton__Neybw:hover {
  color: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
  transform: translateY(-1px);
}

.EmailVerificationModal_deleteButton__vToQ5 {
  background: transparent;
  color: var(--cc-error-text);
  border: 2px solid var(--cc-error-border);
  padding: 12px 20px;
  border-radius: var(--cc-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--cc-font-mono);
  font-size: 1rem;
}

.EmailVerificationModal_deleteButton__vToQ5:hover:not(:disabled) {
  background-color: var(--cc-error-bg);
  transform: translateY(-1px);
}

.EmailVerificationModal_deleteButton__vToQ5:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Error Message */
.EmailVerificationModal_errorMessage__J3WkI {
  color: var(--cc-error-text);
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  padding: 12px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-text-hi);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 10px;
}

.SignUpModal_leftContent__1\+KWY h3 {
  margin: 0 0 15px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
  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: var(--cc-border);
  border-radius: 10px;
}

.SignUpModal_avatarOption__c\+xH2 {
  border: 2px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--cc-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.SignUpModal_avatarOption__c\+xH2:hover {
  border-color: var(--cc-accent-border);
  transform: scale(1.05);
  background-color: var(--cc-panel-hover);
}

.SignUpModal_avatarSelected__ntAk- {
  border-color: var(--cc-accent-border) !important;
  background-color: var(--cc-glow) !important;
  box-shadow: 0 0 0 2px var(--cc-accent-soft);
}

.SignUpModal_avatarImage__g5PSz {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.SignUpModal_selectedAvatarPreview__aMgqp {
  border-top: 1px solid var(--cc-border);
  padding-top: 15px;
  text-align: center;
}

.SignUpModal_selectedAvatarPreview__aMgqp h4 {
  margin: 0 0 10px 0;
  color: var(--cc-text-hi);
  font-size: 1rem;
}

.SignUpModal_previewAvatar__NUA1b {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.SignUpModal_previewAvatarImage__hQfvO {
  width: 60px;
  height: 60px;
  border: 2px solid var(--cc-accent-border);
  border-radius: 50%;
  padding: 5px;
  background-color: var(--cc-glow);
}

/* Right Panel - Sign Up Form */
.SignUpModal_rightContent__qK2m1 {
  color: var(--cc-text-hi);
  height: 100%;
  padding-left: 10px;
}

.SignUpModal_rightContent__qK2m1 h2 {
  margin: 0 0 20px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 15px;
}

.SignUpModal_errorMessage__t3DxQ {
  color: var(--cc-error-text);
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  padding: 12px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
}

.SignUpModal_inputGroup__Rvw82 input {
  padding: 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-size: 1rem;
  font-family: var(--cc-font-mono);
  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: var(--cc-text-low);
  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: var(--cc-text-hi);
}

.SignUpModal_togglePasswordButton__flmDV:focus {
  outline: none;
}

.SignUpModal_inputGroup__Rvw82 input:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.SignUpModal_inputGroup__Rvw82 input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.SignUpModal_signUpButton__kRhQU {
  padding: 14px 20px;
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 15px;
}

.SignUpModal_signUpButton__kRhQU:hover:not(:disabled) {
  background-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.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 var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background-color: transparent;
  color: var(--cc-text-mid);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 15px;
  flex: 1 1;
}

.SignUpModal_cancelButton__hFyvc:hover:not(:disabled) {
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  background-color: var(--cc-panel-hover);
  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: var(--cc-text-low);
  font-size: 0.8rem;
  margin-top: 5px;
  display: block;
}

.SignUpModal_checkboxGroup__NWm8t {
  margin: 10px 0;
  padding: 15px;
  background-color: var(--cc-glow);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-accent-border);
}

.SignUpModal_checkboxLabel__oEhly {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--cc-text-hi);
  line-height: 1.5;
}

.SignUpModal_checkbox__jrGOo {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--cc-accent-text);
  cursor: pointer;
}

.SignUpModal_checkboxText__lQXMO {
  flex: 1 1;
}

.SignUpModal_linkButton__4nYXc {
  background: none;
  border: none;
  color: var(--cc-accent-text);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.SignUpModal_linkButton__4nYXc:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* src/components/ProfileSetupModal.module.css */

/* Left Panel - Avatar Selection */
.ProfileSetupModal_leftContent__H9mCn {
  color: var(--cc-text-hi);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 10px;
}

.ProfileSetupModal_leftContent__H9mCn h3 {
  margin: 0 0 15px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 10px;
}

/* Right Panel - Profile Form */
.ProfileSetupModal_rightContent__uxj2q {
  color: var(--cc-text-hi);
  height: 100%;
  padding-left: 10px;
}

.ProfileSetupModal_rightContent__uxj2q h2 {
  margin: 0 0 25px 0;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  font-weight: 300;
  font-size: 1.8rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
  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(--cc-text-hi);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 480px;
  margin: auto;
}

.ProfileSetupModal_setupInstructions__95MP8 {
  font-size: 1rem;
  color: var(--cc-text-mid);
  text-align: center;
  margin-bottom: 10px;
}

.ProfileSetupModal_errorMessage__XBmrK {
  color: var(--cc-error-text);
  background-color: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  padding: 10px;
  border-radius: var(--cc-radius-sm);
  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: var(--cc-text-mid);
}

.ProfileSetupModal_inputGroup__lKeew input {
  padding: 10px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-size: 0.95rem;
  font-family: var(--cc-font-mono);
}

.ProfileSetupModal_inputGroup__lKeew input:read-only {
  background-color: var(--cc-icon-chip); /* Different bg for readonly */
  cursor: not-allowed;
  opacity: 0.7;
}

.ProfileSetupModal_inputGroup__lKeew input:focus:not(:read-only) {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.ProfileSetupModal_setupButton__tmxMA {
  padding: 12px 15px;
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-size: 1rem;
  font-family: var(--cc-font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 15px;
}

.ProfileSetupModal_setupButton__tmxMA:hover:not(:disabled) {
  background-color: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.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: var(--cc-text-mid);
}

.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 var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-panel);
}

.ProfileSetupModal_avatarGrid__ynr1x::-webkit-scrollbar {
  width: 4px;
}

.ProfileSetupModal_avatarGrid__ynr1x::-webkit-scrollbar-track {
  background: transparent;
}

.ProfileSetupModal_avatarGrid__ynr1x::-webkit-scrollbar-thumb {
  background-color: var(--cc-border);
  border-radius: 10px;
}

.ProfileSetupModal_avatarOption__wGCf8 {
  border: 2px solid var(--cc-border);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--cc-panel-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.ProfileSetupModal_avatarOption__wGCf8:hover {
  border-color: var(--cc-accent-border);
  transform: scale(1.05);
  background-color: var(--cc-panel-hover);
}

.ProfileSetupModal_avatarSelected__XU9cC {
  border-color: var(--cc-accent-border) !important;
  background-color: var(--cc-glow) !important;
  box-shadow: 0 0 0 2px var(--cc-accent-soft);
}

.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 var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-panel);
}

.ProfileSetupModal_selectedAvatarPreview__c5zvU span {
  font-size: 0.9rem;
  color: var(--cc-text-mid);
  font-weight: 500;
}

.ProfileSetupModal_previewAvatarImage__UCqnL {
  width: 32px;
  height: 32px;
  border: 1px solid var(--cc-accent-border);
  border-radius: 6px;
  padding: 2px;
  background-color: var(--cc-glow);
}

.ProfileSetupModal_ageNote__74dP3 {
  font-size: 0.8rem;
  color: var(--cc-text-low);
  margin-top: 4px;
  font-style: italic;
}

/* Username validation styles */
.ProfileSetupModal_inputValid__u2BwE {
  border-color: var(--cc-success-border) !important;
}

.ProfileSetupModal_inputInvalid__05z\+k {
  border-color: var(--cc-error-border) !important;
}

.ProfileSetupModal_usernameChecking__6o0oR {
  font-size: 0.8rem;
  color: var(--cc-text-low);
  margin-top: 4px;
  display: block;
}

.ProfileSetupModal_usernameSuccess__NzuFQ {
  font-size: 0.8rem;
  color: var(--cc-success-text);
  margin-top: 4px;
  display: block;
  font-weight: 500;
}

.ProfileSetupModal_usernameError__UHEiq {
  font-size: 0.8rem;
  color: var(--cc-error-text);
  margin-top: 4px;
  display: block;
}

.Editor_editorContainer__Ooiru {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: var(--cc-bg);
  color: var(--cc-text-hi);
  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 var(--cc-border);
}

.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;
  position: relative;
  overflow: hidden;
}

/* Black overlay approximating a clip's video fade in/out during preview. */
.Editor_fadeOverlay__Ms6mL {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 2;
}

.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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
  -webkit-user-select: none;
          user-select: none;
}

.Editor_noPreview__uYc\+p svg {
  font-size: 4rem;
  color: var(--cc-border);
  opacity: 0.6;
}

.Editor_noPreview__uYc\+p p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--cc-text-mid);
}

.Editor_videoControls__EDRDN {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.Editor_videoControls__EDRDN button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--cc-border);
  background-color: var(--cc-panel);
  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(--cc-text-mid);
  background: var(--cc-panel);
  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(--cc-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(--cc-text-mid);
  transition:
    color 0.2s,
    border-color 0.2s;
}

.Editor_libraryTabs__8wpXy .Editor_activeTab__lLg6G {
  border-bottom-color: var(--cc-accent-text);
  font-weight: bold;
  color: var(--cc-text-hi);
}

.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(--cc-panel-hover);
  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: var(--cc-panel-hover);
  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(--cc-text-mid);
  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(--cc-text-mid);
  background-color: var(--cc-icon-chip);
  padding: 2px 5px;
  border-radius: 4px;
}

.Editor_dropZone__QDTyy {
  grid-column: 1 / -1;
  flex-grow: 1;
  border: 2px dashed var(--cc-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cc-text-low);
  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(--cc-border);
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

/* Timeline toolbar row (split / snap / zoom). */
.Editor_timelineToolbar__lhVKT {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}

.Editor_toolbarGroup__S0GoJ {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.Editor_toolbarButton__W1p50 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: 'Inconsolata', monospace;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.Editor_toolbarButton__W1p50:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-text);
}

.Editor_toolbarIconButton__o-Zd2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.Editor_toolbarIconButton__o-Zd2:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-text);
}

.Editor_snapBadge__YAKOo {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.Editor_zoomLabel__BP4kN {
  font-family: 'Inconsolata', monospace;
  font-size: 0.78rem;
  color: var(--cc-text-mid);
  min-width: 58px;
  text-align: center;
}

/* Timeline body: fixed left label gutter + horizontally scrolling tracks. */
.Editor_timelineBody__Kl\+da {
  display: flex;
  flex: 1 1;
  min-height: 0;
  gap: 0.5rem;
}

.Editor_timelineGutter__hBI3d {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 84px;
  flex-shrink: 0;
}

.Editor_gutterRulerSpacer__-lbfr {
  height: 24px;
  flex-shrink: 0;
}

.Editor_trackLabel__ixgqX {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  font-size: 0.78rem;
  font-weight: 600;
}

.Editor_timelineScroll__54bIq {
  flex: 1 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: ew-resize;
}

.Editor_timelineContent__TFp4- {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 100%;
}

.Editor_timelineRuler__bJfUr {
  position: relative;
  height: 24px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--cc-border);
}

.Editor_rulerMark__O3Wm3 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
}
.Editor_rulerMark__O3Wm3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 5px;
  background: var(--cc-border);
}
.Editor_rulerMarkMajor__FTyGL::after {
  height: 9px;
  background: var(--cc-text-mid);
}

.Editor_rulerLabelText__\+95u3 {
  position: absolute;
  bottom: 9px;
  left: 3px;
  font-size: 0.62rem;
  color: var(--cc-text-mid);
  white-space: nowrap;
  font-family: 'Inconsolata', monospace;
}

.Editor_playhead__h21xQ {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--cc-error-text);
  pointer-events: none;
  z-index: 10;
}
.Editor_playhead__h21xQ::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--cc-error-text);
}

.Editor_timelineTrack__qcykp {
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  background: var(--cc-panel);
  height: 64px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  position: relative;
}

.Editor_trackHover__uCOvC {
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-text);
}

.Editor_trackItemsWrapper__JGjIq {
  flex-grow: 1;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.Editor_trackEmptyHint__8oX3l {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cc-text-mid);
  font-size: 0.8rem;
  opacity: 0.6;
  pointer-events: none;
  white-space: nowrap;
}

.Editor_trackItems__8ZkFh {
  display: flex;
  gap: 2px;
  height: 100%;
  align-items: center;
}

.Editor_timelineItem__JcHlw {
  position: relative;
  height: 48px;
  padding: 0 0.9rem;
  border-radius: 5px;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  cursor: grab;
  border: 1px solid;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.Editor_timelineItemSelected__WPrDA {
  outline: 2px solid var(--cc-accent-text);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--cc-glow);
  z-index: 2;
}

.Editor_timelineItemIcon__ePsv3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.Editor_timelineItemBadgeIcon__R6WLg {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.Editor_timelineItemSpeed__GmEGv {
  flex-shrink: 0;
  font-family: 'Inconsolata', monospace;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
}

.Editor_timelineItemDuration__ziczA {
  flex-shrink: 0;
  font-family: 'Inconsolata', monospace;
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
}

.Editor_trimHandleStart__NYmB5,
.Editor_trimHandleEnd__3L-Dk {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.Editor_timelineItem__JcHlw:hover .Editor_trimHandleStart__NYmB5,
.Editor_timelineItem__JcHlw:hover .Editor_trimHandleEnd__3L-Dk {
  opacity: 1;
}

.Editor_trimHandleStart__NYmB5:hover,
.Editor_trimHandleEnd__3L-Dk:hover {
  background: rgba(0, 0, 0, 0.5);
}

.Editor_trimHandleStart__NYmB5 {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.Editor_trimHandleEnd__3L-Dk {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.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;
  flex: 1 1 auto;
  min-width: 0;
}

.Editor_timelineItemRemove__vllCr {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

.Editor_timelineItemRemove__vllCr:hover {
  background: rgba(0, 0, 0, 0.35);
}

.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(--cc-text-mid);
}

.Editor_centeredMessageError__E1fsF {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.2rem;
  color: var(--cc-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(--cc-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: var(--cc-accent-soft);
  border-color: var(--cc-accent-border);
}

.Editor_toolButtonActive__SQL8Y:hover {
  background-color: var(--cc-accent-soft);
}

.Editor_renderingOverlay__VTYdA {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cc-overlay);
  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(--cc-panel);
  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(--cc-text-hi);
}

.Editor_progressBar__81pww {
  width: 300px;
  height: 10px;
  background-color: var(--cc-border);
  border-radius: 5px;
  overflow: hidden;
  margin: 1rem 0;
}

.Editor_progressFill__TI8rl {
  height: 100%;
  background-color: var(--cc-accent-text);
  border-radius: 5px;
  transition: width 0.2s linear;
}

.Editor_renderingBox__WoHQl p {
  color: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
}

/* Image Mode Styles */
.Editor_imagePreviewFull__4qjRj {
  flex-basis: 60%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--cc-border);
  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: var(--cc-panel);
  border-right: 1px solid var(--cc-border);
  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: var(--cc-panel);
  border-top: 1px solid var(--cc-border);
  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: var(--cc-text-mid);
  font-family: 'Inconsolata', monospace;
  background-color: var(--cc-panel);
  padding: 1px 2px;
  white-space: nowrap;
}

.Editor_rulerTick__bleGI {
  width: 8px;
  height: 1px;
  background-color: var(--cc-border);
  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 var(--cc-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.Editor_effectsPanel__-6vhf {
  flex: 1 1 50%;
  padding: 1rem;
  border-top: 1px solid var(--cc-border);
  background-color: var(--cc-panel);
  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(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.Editor_effectsPanelContent__OM9SS {
  color: var(--cc-text-mid);
  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 var(--cc-accent-text);
  outline-offset: -2px;
}

.Editor_dropActive__O5low {
  background-color: var(--cc-glow);
  border: 2px dashed var(--cc-accent-text);
}

/* 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 var(--cc-accent-text);
  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: var(--cc-accent-text);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  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 var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-size: 0.85rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.2s;
}

.Editor_aspectRatioButton__sQmjM:hover {
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-text);
}

.Editor_aspectRatioButton__sQmjM.Editor_active__3AFYL {
  background-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-color: var(--cc-btn-primary-bg);
}

.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 var(--cc-accent-text);
  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 var(--cc-accent-text);
  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: var(--cc-accent-text);
  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: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
}

.Editor_cropApplyButton__1sVgy:hover {
  background-color: var(--cc-btn-primary-bg-hover);
  box-shadow: 0 4px 6px var(--cc-glow);
}

.Editor_cropCancelButton__zlyJ0 {
  background-color: var(--cc-panel);
  color: var(--cc-text-hi);
  border: 1px solid var(--cc-border);
}

.Editor_cropCancelButton__zlyJ0:hover {
  background-color: var(--cc-panel-hover);
}

/* 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: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  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: var(--cc-btn-primary-bg-hover);
}

.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(--cc-text-mid);
  font-size: 0.9rem;
  padding: 1rem;
}

.Editor_layerItem__waU\+9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--cc-panel-hover);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.Editor_layerItem__waU\+9:hover {
  background-color: var(--cc-panel-strong);
}

.Editor_selectedLayerItem__N7fh- {
  background-color: var(--cc-glow);
  border-color: var(--cc-accent-text);
}

.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(--cc-text-mid);
  font-weight: 600;
}

.Editor_layerName__j-KN0 {
  font-size: 0.85rem;
  color: var(--cc-text-hi);
  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(--cc-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(--cc-panel-hover);
}

.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(--cc-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 var(--cc-border-soft);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--cc-text-low);
  transition: all 0.2s;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Editor_panelControlBtn__NTPlK:hover {
  background: var(--cc-icon-chip);
  color: var(--cc-text-hi);
  border-color: var(--cc-border);
}

.Editor_panelControlBtn__NTPlK.Editor_activeControl__mXyip {
  background: var(--cc-glow);
  color: var(--cc-accent-text);
  border-color: var(--cc-accent-border);
}

.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(--cc-text-mid);
  transition: all 0.2s;
}

.Editor_panelTab__EmJef:hover {
  color: var(--cc-text-hi);
}

.Editor_activePanelTab__89PlH {
  color: var(--cc-text-hi);
  border-bottom-color: var(--cc-accent-text);
  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: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  text-transform: capitalize;
  letter-spacing: 0;
  border-bottom: 1px solid var(--cc-border-soft);
  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: var(--cc-panel-hover);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s;
  min-height: 80px;
}

.Editor_effectElement__Kh9m9:hover {
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-text);
  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(--cc-text-hi);
}

.Editor_effectLabel__nAgwd {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cc-text-mid);
  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 var(--cc-border-soft);
  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: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  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: var(--cc-icon-chip);
}

.Editor_inspectRow__c1\+Ud {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.Editor_inspectLabel__BNjB4 {
  font-size: 11px;
  font-weight: 400;
  color: var(--cc-text-low);
  font-family: var(--cc-font-mono);
  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 var(--cc-border-soft);
  border-radius: 2px;
  font-size: 11px;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-hi);
  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: var(--cc-icon-chip);
  border-color: var(--cc-border);
}

.Editor_inspectInput__M0bRI:focus,
.Editor_inspectTextarea__VBIWn:focus,
.Editor_inspectSelect__N6vbz:focus {
  outline: none;
  background-color: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  box-shadow: inset 0 0 0 1px var(--cc-accent-border);
}

.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;
}

/* Data-URI strokes can't consume CSS vars, so the light theme needs its own
   dark-ink chevron. */
body:not(.dark-theme) .Editor_inspectSelect__N6vbz {
  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%2838,32,32,0.55%29%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
}

.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: var(--cc-border-soft);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.Editor_inspectSlider__nId1l::-webkit-slider-track {
  height: 3px;
  border-radius: 2px;
  background: var(--cc-border-soft);
}

.Editor_inspectSlider__nId1l::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-text-hi);
  cursor: pointer;
  border: 1.5px solid var(--cc-accent-border);
  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 var(--cc-glow);
}

.Editor_inspectSlider__nId1l::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--cc-border-soft);
}

.Editor_inspectSlider__nId1l::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-text-hi);
  cursor: pointer;
  border: 1.5px solid var(--cc-accent-border);
  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 var(--cc-glow);
}

.Editor_inspectValue__ATljf {
  font-size: 11px;
  color: var(--cc-text-low);
  font-family: var(--cc-font-mono);
  text-align: right;
  min-width: 40px;
  flex-shrink: 0;
}

.Editor_inspectColorPicker__7t59s {
  flex: 1 1;
  height: 24px;
  border: 1px solid var(--cc-border-soft);
  border-radius: 2px;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.1s ease;
}

.Editor_inspectColorPicker__7t59s:hover {
  border-color: var(--cc-border);
  background-color: var(--cc-icon-chip);
}

.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: var(--cc-text-hi);
  border-bottom-color: var(--cc-border-soft);
}

body:not(.dark-theme) .Editor_inspectSectionHeader__O8kza {
  color: var(--cc-text-hi);
}

body:not(.dark-theme) .Editor_inspectLabel__BNjB4 {
  color: var(--cc-text-mid);
}

body:not(.dark-theme) .Editor_inspectInput__M0bRI,
body:not(.dark-theme) .Editor_inspectTextarea__VBIWn,
body:not(.dark-theme) .Editor_inspectSelect__N6vbz {
  color: var(--cc-text-hi);
  border-color: var(--cc-border-soft);
  background-color: var(--cc-icon-chip);
}

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: var(--cc-icon-chip);
  border-color: var(--cc-border);
}

body:not(.dark-theme) .Editor_inspectValue__ATljf {
  color: var(--cc-text-mid);
}

body:not(.dark-theme) .Editor_panelControlBtn__NTPlK {
  color: var(--cc-text-mid);
  border-color: var(--cc-border-soft);
}

body:not(.dark-theme) .Editor_panelControlBtn__NTPlK:hover {
  color: var(--cc-text-hi);
  background: var(--cc-icon-chip);
  border-color: var(--cc-border);
}

body:not(.dark-theme) .Editor_inspectSection__3xEEO {
  border-bottom-color: var(--cc-border-soft);
}

/* Light mode slider styles */
body:not(.dark-theme) .Editor_inspectSlider__nId1l {
  background: var(--cc-border-soft);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-webkit-slider-track {
  background: var(--cc-border-soft);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-webkit-slider-thumb {
  background: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-moz-range-track {
  background: var(--cc-border-soft);
}

body:not(.dark-theme) .Editor_inspectSlider__nId1l::-moz-range-thumb {
  background: var(--cc-text-hi);
  border-color: var(--cc-accent-border);
}

/* 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: var(--cc-text-hi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--cc-border);
}

/* 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: var(--cc-panel);
  border: 2px solid var(--cc-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  color: var(--cc-text-hi);
  font-size: 0.85rem;
  font-weight: 500;
}

.Editor_presetButton__82tC4:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
}

.Editor_presetButton__82tC4.Editor_presetButtonActive__GWg2x {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-accent-border);
  color: var(--cc-btn-primary-text);
  box-shadow: 0 4px 6px var(--cc-glow);
}

.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: var(--cc-panel);
  border: 2px solid var(--cc-border);
  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: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  transform: scale(1.05);
}

.Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-accent-border);
  box-shadow: 0 2px 4px var(--cc-glow);
}

.Editor_alignmentDot__HsTak {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0.15rem;
}

.Editor_alignmentDot__HsTak span {
  color: var(--cc-text-hi);
  font-size: 1rem;
  line-height: 1;
}

.Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k .Editor_alignmentDot__HsTak span {
  color: var(--cc-btn-primary-text);
}

/* 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: var(--cc-panel);
  border: 2px solid var(--cc-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  color: var(--cc-text-hi);
  font-size: 1rem;
  font-weight: 500;
}

.Editor_justifyButton__bYpJe:hover,
.Editor_bgTypeButton__eJswL:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

.Editor_justifyButton__bYpJe.Editor_justifyButtonActive__6D0vF,
.Editor_bgTypeButton__eJswL.Editor_bgTypeButtonActive__HKLp7 {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-accent-border);
  color: var(--cc-btn-primary-text);
  box-shadow: 0 2px 4px var(--cc-glow);
}

/* 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  text-align: center;
}

.Editor_paddingInput__kvo53:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 2px var(--cc-glow);
}

/* Light mode overrides for new controls */
body:not(.dark-theme) .Editor_presetButton__82tC4 {
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

body:not(.dark-theme) .Editor_presetButton__82tC4:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

body:not(.dark-theme) .Editor_presetButton__82tC4.Editor_presetButtonActive__GWg2x {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
}

body:not(.dark-theme) .Editor_alignmentButton__-r-Mf {
  background: var(--cc-panel);
  border-color: var(--cc-border);
}

body:not(.dark-theme) .Editor_alignmentButton__-r-Mf:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

body:not(.dark-theme) .Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k {
  background: var(--cc-btn-primary-bg);
}

body:not(.dark-theme) .Editor_alignmentDot__HsTak span {
  color: var(--cc-text-hi);
}

body:not(.dark-theme)
  .Editor_alignmentButton__-r-Mf.Editor_alignmentButtonActive__rME0k
  .Editor_alignmentDot__HsTak
  span {
  color: var(--cc-btn-primary-text);
}

body:not(.dark-theme) .Editor_justifyButton__bYpJe,
body:not(.dark-theme) .Editor_bgTypeButton__eJswL {
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

body:not(.dark-theme) .Editor_justifyButton__bYpJe:hover,
body:not(.dark-theme) .Editor_bgTypeButton__eJswL:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

body:not(.dark-theme) .Editor_justifyButton__bYpJe.Editor_justifyButtonActive__6D0vF,
body:not(.dark-theme) .Editor_bgTypeButton__eJswL.Editor_bgTypeButtonActive__HKLp7 {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
}

body:not(.dark-theme) .Editor_paddingInput__kvo53 {
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

body:not(.dark-theme) .Editor_settingsSectionHeader__H8irG {
  border-bottom-color: var(--cc-border-soft);
  color: var(--cc-text-hi);
}

/* ============================================================
   VIDEO MODE - professional transport, toolbar & inspector
   ============================================================ */

/* Video-mode header/toolbar with the Export action. */
.Editor_videoToolbar__7lcnp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Extra right padding reserves space for the fixed mode toggle
     (EditorTabBar, ~130px wide at top:10px/right:15px) so the Export
     button isn't hidden underneath it. */
  padding: 0.5rem 150px 0.5rem 1rem;
  border-bottom: 1px solid var(--cc-border);
  flex-shrink: 0;
}

.Editor_videoToolbarTitle__Qj02O {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
}

.Editor_exportButton__s3cEP {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  transition:
    background 0.15s,
    transform 0.1s;
}

.Editor_exportButton__s3cEP:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
}

.Editor_exportButton__s3cEP:active:not(:disabled) {
  transform: translateY(1px);
}

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

/* Transport bar (jump / frame-step / play / seek slider / timecode). */
.Editor_transportBar__r7oxR {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.Editor_transportButtons__8NNWS {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.Editor_transportButtons__8NNWS button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.Editor_transportButtons__8NNWS button:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-text);
}

.Editor_transportPlay__KA3Ov {
  width: 40px !important;
  height: 40px !important;
  font-size: 1.4rem !important;
  background: var(--cc-btn-primary-bg) !important;
  color: var(--cc-btn-primary-text) !important;
  border-color: var(--cc-btn-primary-bg) !important;
}

.Editor_transportSeek__fmW9o {
  flex: 1 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  background: var(--cc-border);
  cursor: pointer;
}

.Editor_transportSeek__fmW9o::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.Editor_transportSeek__fmW9o::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  border: 2px solid #fff;
  cursor: pointer;
}

.Editor_transportSeek__fmW9o:disabled {
  opacity: 0.5;
  cursor: default;
}

.Editor_transportTime__PGqEQ {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  color: var(--cc-text-hi);
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Right column: media library on top, clip inspector below. */
.Editor_videoSidePanel__ttg3L {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.Editor_videoSidePanel__ttg3L .Editor_mediaLibrary__v2KCI {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem;
  border-bottom: 1px solid var(--cc-border);
  overflow: hidden;
}

.Editor_inspectorContainer__TM8ii {
  flex: 0 0 auto;
  max-height: 46%;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  background: var(--cc-panel);
}

.Editor_inspectorEmpty__cMjA2 {
  color: var(--cc-text-mid);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0.5rem;
}

/* Clip inspector controls. */
.Editor_clipInspector__ygTWN {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.Editor_inspectorHeader__g--cZ {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cc-border);
}

.Editor_inspectorTypeIcon__xRQNU {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--cc-panel-hover);
  color: var(--cc-text-hi);
  font-size: 0.95rem;
}

.Editor_inspectorTitleBlock__1QbSz {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.Editor_inspectorName__y7qsP {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Editor_inspectorMeta__30iap {
  font-size: 0.72rem;
  color: var(--cc-text-mid);
  text-transform: capitalize;
}

.Editor_inspectorField__WR6f- {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.Editor_inspectorFieldRow__U31Ie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.Editor_inspectorLabel__IcJNk {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cc-text-mid);
}

.Editor_inspectorSliderRow__LfP7Y {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Editor_clipSlider__f6mOl {
  flex: 1 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  background: var(--cc-border);
  cursor: pointer;
}

.Editor_clipSlider__f6mOl::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  border: 2px solid #fff;
  cursor: pointer;
}

.Editor_clipSlider__f6mOl::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  border: 2px solid #fff;
  cursor: pointer;
}

.Editor_clipSlider__f6mOl:disabled {
  opacity: 0.5;
}

.Editor_inspectorValue__jdRTA {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  min-width: 44px;
  text-align: right;
}

.Editor_inspectorIconToggle__3MsFg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.Editor_inspectorIconToggle__3MsFg:hover {
  background: var(--cc-panel-hover);
}

.Editor_inspectorIconToggleActive__qd3o9 {
  background: var(--cc-error-bg) !important;
  color: var(--cc-error-text) !important;
  border-color: var(--cc-error-border) !important;
}

.Editor_inspectorNumberRow__rzLKF {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.Editor_inspectorNumber__ZGKKC {
  width: 64px;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border-radius: 5px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  text-align: right;
}

.Editor_inspectorNumber__ZGKKC:focus {
  outline: none;
  border-color: var(--cc-accent-text);
}

.Editor_inspectorActions__VNBvW {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.Editor_inspectorActionBtn__17M1h {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-hi);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: 'Inconsolata', monospace;
  transition: background 0.15s;
}

.Editor_inspectorActionBtn__17M1h:hover {
  background: var(--cc-panel-hover);
}

.Editor_inspectorDeleteBtn__GsZT-:hover {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
}

/* ============================================================
   IMAGE MODE - professional upgrade additions (adjustments,
   transform, new shapes, undo/redo, zoom, export popover).
   Everything below is additive/new - it does not modify any
   video-mode rule above.
   ============================================================ */

/* Floating toolbar: undo/redo row + zoom controls */
.Editor_toolbarGroupRow__Mv8\+1 {
  display: flex;
  gap: 0.5rem;
}

.Editor_toolbarDivider__nXBNy {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 0.25rem 0;
}

.Editor_zoomPercentLabel__8ZhHL {
  text-align: center;
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.15rem 0;
  -webkit-user-select: none;
          user-select: none;
}

/* Export popover */
.Editor_exportButtonWrapper__xU99j {
  position: absolute;
  top: 1.5rem;
  /* Offset left of the fixed mode toggle (EditorTabBar, ~130px wide at
     top:10px/right:15px) so the export button isn't hidden underneath it. */
  right: 150px;
  z-index: 30;
}

.Editor_exportButtonWrapper__xU99j .Editor_downloadButton__pGqgA {
  position: static;
}

.Editor_exportPopover__TBx80 {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
  background-color: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 30;
}

.Editor_exportPopoverHeader__9ceKw {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cc-text-hi);
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--cc-border-soft);
  padding-bottom: 0.4rem;
}

.Editor_exportPopoverRow__Ba3gC {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Editor_exportPopoverLabel__nqxTm {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  min-width: 48px;
  flex-shrink: 0;
}

.Editor_exportPopoverValue__4mlyk {
  font-size: 0.75rem;
  color: var(--cc-text-mid);
  min-width: 34px;
  text-align: right;
}

.Editor_exportFormatGroup__FiZzo {
  display: flex;
  gap: 0.35rem;
  flex: 1 1;
}

.Editor_exportFormatButton__R-5Dt {
  flex: 1 1;
  padding: 0.3rem 0.4rem;
  background: var(--cc-icon-chip);
  border: 1px solid var(--cc-border-soft);
  border-radius: 4px;
  color: var(--cc-text-mid);
  font-size: 0.7rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}

.Editor_exportFormatButton__R-5Dt:hover {
  background: var(--cc-panel-hover);
}

.Editor_exportFormatButtonActive__JUmen {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
}

.Editor_exportPopoverActions__hzxif {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.Editor_exportCancelButton__NBC9L,
.Editor_exportDownloadButton__2FAr\+ {
  flex: 1 1;
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}

.Editor_exportCancelButton__NBC9L {
  background: transparent;
  border: 1px solid var(--cc-border);
  color: var(--cc-text-mid);
}

.Editor_exportCancelButton__NBC9L:hover {
  background: var(--cc-panel-hover);
}

.Editor_exportDownloadButton__2FAr\+ {
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  font-weight: 600;
}

.Editor_exportDownloadButton__2FAr\+:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
}

.Editor_exportDownloadButton__2FAr\+:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Adjustments section (filter presets + sliders) */
.Editor_filterPresetRow__YxTdA {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: 0.25rem;
}

.Editor_filterPresetSwatch__K5cnE {
  padding: 0.3rem 0.6rem;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  color: var(--cc-text-hi);
  font-size: 0.72rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}

.Editor_filterPresetSwatch__K5cnE:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
}

.Editor_adjustResetButton__LDcS9 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--cc-border-soft);
  border-radius: 3px;
  color: var(--cc-text-low);
  cursor: pointer;
  font-size: 0.7rem;
  transition: all 0.15s ease;
}

.Editor_adjustResetButton__LDcS9:hover {
  background: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

.Editor_resetAllButton__VUg3O {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: transparent;
  border: 1px solid var(--cc-border);
  border-radius: 5px;
  color: var(--cc-text-mid);
  font-size: 0.72rem;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}

.Editor_resetAllButton__VUg3O:hover {
  background: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

/* Layer list: type icon + image thumbnail (feature 8) */
.Editor_layerTypeIcon__MEn8a {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-text-mid);
  font-size: 0.95rem;
}

.Editor_layerThumbnail__bObdo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--cc-border);
}

/* Light mode overrides for the new controls above */
body:not(.dark-theme) .Editor_exportPopover__TBx80 {
  background-color: var(--cc-panel-strong);
  border-color: var(--cc-border);
  box-shadow: var(--cc-shadow);
}

body:not(.dark-theme) .Editor_exportPopoverHeader__9ceKw {
  color: var(--cc-text-hi);
  border-bottom-color: var(--cc-border-soft);
}

body:not(.dark-theme) .Editor_exportPopoverLabel__nqxTm,
body:not(.dark-theme) .Editor_exportPopoverValue__4mlyk {
  color: var(--cc-text-mid);
}

body:not(.dark-theme) .Editor_exportFormatButton__R-5Dt {
  background: var(--cc-icon-chip);
  border-color: var(--cc-border-soft);
  color: var(--cc-text-mid);
}

body:not(.dark-theme) .Editor_exportCancelButton__NBC9L {
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

body:not(.dark-theme) .Editor_filterPresetSwatch__K5cnE {
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-hi);
}

body:not(.dark-theme) .Editor_resetAllButton__VUg3O {
  border-color: var(--cc-border);
  color: var(--cc-text-mid);
}

/* 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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 4px 8px;
  box-shadow: var(--cc-shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.EditorTabBar_tab__UKOdf {
  background: transparent;
  border: none;
  color: var(--cc-text-mid);
  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: var(--cc-panel-hover);
  opacity: 0.9;
}

.EditorTabBar_activeTab__vYNji {
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  opacity: 1;
  font-weight: 600;
}

.EditorTabBar_activeTab__vYNji:hover {
  background: var(--cc-accent);
  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: var(--cc-border);
  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(0);
  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: var(--cc-overlay);
  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: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  width: auto;
  max-width: 500px;
  min-width: 380px;
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  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: 1px solid var(--cc-border);
  background: var(--cc-panel);
}

.timedAdHeader h3 {
  margin: 0;
  font-family: var(--cc-font-mono);
  font-size: 0.95rem;
  color: var(--cc-accent-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.timedAdClose {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  font-size: 22px;
  color: var(--cc-text-mid);
  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: var(--cc-btn-primary-bg);
  border-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  transform: rotate(90deg);
}

.timedAdCountdown {
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  color: var(--cc-text-hi);
  font-weight: 600;
  padding: 10px 20px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius-pill);
  border: 1px solid var(--cc-border);
  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: var(--cc-panel);
  min-height: 250px;
}

.timedAdContent ins {
  width: 300px !important;
  height: 250px !important;
  display: inline-block !important;
}

.timedAdCloseButton {
  margin: 24px;
  padding: 16px 32px;
  font-family: var(--cc-font-mono);
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-pill);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 20px var(--cc-glow);
}

.timedAdCloseButton:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.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: 0.85rem;
  }

  .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: 20px;
  }

  .timedAdCountdown {
    font-size: 0.8rem;
    padding: 8px 16px;
  }
}

/* UnsupportedBrowser.module.css
   Full-page notice shown when the browser lacks the File System Access
   API. Styled in the landing page's design language: near-black/paper
   canvas, dark node panels, Inconsolata terminal voice, dusty-rose
   handle/wire accent. Uses the app-wide --cc-* tokens so it adapts to
   both body.light-theme and body.dark-theme. */

.UnsupportedBrowser_container__GyERI {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse 70% 45% at 50% 0%,
      var(--cc-glow),
      rgba(0, 0, 0, 0) 70%
    ),
    var(--cc-bg);
  padding: 40px 20px;
}

.UnsupportedBrowser_content__YkFPZ {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 44px 48px;
  max-width: 720px;
  width: 100%;
  box-shadow: var(--cc-shadow);
  animation: UnsupportedBrowser_slideUp__rENwD 0.5s ease-out;
}

@keyframes UnsupportedBrowser_slideUp__rENwD {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Node-handle eyebrow, matching the landing sections */
.UnsupportedBrowser_eyebrow__OzLft {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-accent-text);
  margin: 0 0 18px;
}

.UnsupportedBrowser_handleDot__wK-cM {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cc-accent-text);
  box-shadow: var(--cc-accent-dot-glow);
  flex-shrink: 0;
}

.UnsupportedBrowser_wire__qadsq {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--cc-accent-soft),
    var(--cc-accent-faint)
  );
}

.UnsupportedBrowser_title__SsocU {
  font-family: var(--cc-font-body);
  font-size: 2.1rem;
  font-weight: 200;
  line-height: 1.15;
  color: var(--cc-text-hi);
  margin: 0 0 14px;
}

.UnsupportedBrowser_subtitle__DwkuS {
  font-family: var(--cc-font-body);
  font-weight: 300;
  color: var(--cc-text-mid);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 28px;
}

.UnsupportedBrowser_explanation__jHCNK {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  border-left: 2px solid var(--cc-accent-border);
  padding: 20px 22px;
  border-radius: 10px;
  margin: 0 0 30px;
}

.UnsupportedBrowser_explanation__jHCNK h2 {
  font-family: var(--cc-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-text-hi);
  margin: 0 0 12px;
}

.UnsupportedBrowser_explanation__jHCNK p {
  font-family: var(--cc-font-body);
  font-weight: 300;
  color: var(--cc-text-mid);
  line-height: 1.65;
  margin: 0 0 12px;
}

.UnsupportedBrowser_explanation__jHCNK ul {
  font-family: var(--cc-font-body);
  font-weight: 300;
  color: var(--cc-text-mid);
  line-height: 1.8;
  margin: 0;
  padding-left: 22px;
}

.UnsupportedBrowser_explanation__jHCNK li::marker {
  color: var(--cc-accent-text);
}

.UnsupportedBrowser_recommendations__1Tgfw {
  margin: 0 0 28px;
}

.UnsupportedBrowser_recommendations__1Tgfw h2 {
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-text-low);
  margin: 0 0 16px;
}

.UnsupportedBrowser_browserGrid__j0z-b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.UnsupportedBrowser_browserCard__uGHDu {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.UnsupportedBrowser_browserCard__uGHDu:hover {
  transform: translateY(-3px);
  border-color: var(--cc-accent-border);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.UnsupportedBrowser_browserIcon__VItkJ {
  font-size: 2.1rem;
  margin-bottom: 10px;
}

.UnsupportedBrowser_browserName__E2jBv {
  font-family: var(--cc-font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cc-text-hi);
}

.UnsupportedBrowser_technicalInfo__SD50s {
  margin: 0 0 30px;
}

.UnsupportedBrowser_technicalInfo__SD50s summary {
  font-family: var(--cc-font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cc-text-mid);
  cursor: pointer;
  padding: 12px 16px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  list-style: none;
}

.UnsupportedBrowser_technicalInfo__SD50s summary::-webkit-details-marker {
  display: none;
}

.UnsupportedBrowser_technicalInfo__SD50s summary::before {
  content: '> ';
  color: var(--cc-accent-text);
}

.UnsupportedBrowser_technicalInfo__SD50s summary:hover {
  border-color: var(--cc-accent-border);
}

.UnsupportedBrowser_technicalInfo__SD50s details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.UnsupportedBrowser_debugInfo__v304E {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  color: var(--cc-text-mid);
  padding: 16px;
  overflow-x: auto;
  margin: 0;
  font-size: 0.82rem;
  font-family: var(--cc-font-mono);
  line-height: 1.55;
}

.UnsupportedBrowser_footer__LtqTr {
  text-align: center;
}

.UnsupportedBrowser_backButton__AizV8 {
  display: inline-block;
  font-family: var(--cc-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-btn-primary-text);
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 13px 28px;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.UnsupportedBrowser_backButton__AizV8:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--cc-glow);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .UnsupportedBrowser_content__YkFPZ {
    padding: 30px 22px;
  }

  .UnsupportedBrowser_title__SsocU {
    font-size: 1.55rem;
  }

  .UnsupportedBrowser_subtitle__DwkuS {
    font-size: 0.95rem;
  }

  .UnsupportedBrowser_browserGrid__j0z-b {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .UnsupportedBrowser_content__YkFPZ {
    animation: none;
  }

  .UnsupportedBrowser_browserCard__uGHDu,
  .UnsupportedBrowser_backButton__AizV8 {
    transition: none;
  }
}

/* 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: var(--cc-font-mono);
  margin: 0;
  background-color: var(--canvas-bg);
  /* background-color: #fffff5; */
}

/* NOTE: was previously the broken selector ".dark-theme body" (dark-theme is
   set on <body> itself via settingsStore, not an ancestor, so that rule
   never matched). Fixed to body.dark-theme and moved off the hardcoded
   slate palette onto the brand tokens. */
body.dark-theme {
  background-color: var(--cc-bg);
  color: var(--cc-text-hi);
}

.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: #ece4df; /* warm paper tone to match the brand light surfaces */
  --minimap-mask-bg: rgba(120, 95, 95, 0.3); /* Semi-transparent warm mask */
}

.dark-theme {
  /* ... other dark theme variables ... */
  --minimap-bg: #1c1c21; /* near-black panel tone to match the brand dark surfaces */
  --minimap-mask-bg: rgba(12, 12, 15, 0.65); /* Semi-transparent dark mask */
}

/* Optional: Style the mask color as well */
.react-flow__minimap-mask {
  fill: rgba(120, 95, 95, 0.3) !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 */

/* Page wrapper: hero (100vh) + marketing sections + footer.
   All section/footer/carousel theming flows through these variables;
   .pageLight overrides them. The hero photo stays dark in both themes. */
.LandingPage_page__0nVYO {
  --lp-bg: #000;
  --lp-text-hi: rgba(255, 255, 255, 0.95);
  --lp-text-mid: rgba(255, 255, 255, 0.7);
  --lp-text-low: rgba(255, 255, 255, 0.45);
  --lp-panel: rgba(30, 30, 35, 0.6);
  --lp-panel-strong: rgba(12, 12, 15, 0.8);
  --lp-border: rgba(100, 100, 110, 0.5);
  --lp-border-soft: rgba(100, 100, 110, 0.25);
  --lp-accent: #e6c7c7;
  --lp-accent-text: #e6c7c7;
  --lp-accent-border: rgba(230, 199, 199, 0.7);
  --lp-accent-soft: rgba(230, 199, 199, 0.5);
  --lp-accent-faint: rgba(230, 199, 199, 0);
  --lp-accent-dot-glow: 0 0 8px rgba(230, 199, 199, 0.8);
  --lp-glow: rgba(230, 199, 199, 0.12);
  --lp-icon-chip: rgba(255, 255, 255, 0.08);
  --lp-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  --lp-success-text: #c9e6c7;
  --lp-success-bg: rgba(90, 140, 90, 0.15);
  --lp-success-border: rgba(150, 200, 150, 0.4);
  --lp-error-text: #e6c7c7;
  --lp-error-bg: rgba(140, 90, 90, 0.15);
  --lp-error-border: rgba(200, 150, 150, 0.4);
  --lp-pro-text: #9fb3c8;
  --lp-pro-bg: rgba(130, 150, 175, 0.15);
  --lp-pro-border: rgba(159, 179, 200, 0.35);
  --lp-premium-text: #d9b96a;
  --lp-premium-bg: rgba(217, 185, 106, 0.15);
  --lp-premium-border: rgba(217, 185, 106, 0.35);

  background: var(--lp-bg);
}

/* Light theme: warm paper with the brand maroon deepened for contrast */
.LandingPage_pageLight__jhxqo {
  --lp-bg: #f7f2ef;
  --lp-text-hi: #262020;
  --lp-text-mid: rgba(38, 32, 32, 0.75);
  --lp-text-low: rgba(38, 32, 32, 0.5);
  --lp-panel: rgba(255, 255, 255, 0.8);
  --lp-panel-strong: #ffffff;
  --lp-border: rgba(120, 95, 95, 0.28);
  --lp-border-soft: rgba(120, 95, 95, 0.16);
  --lp-accent: #e6c7c7;
  --lp-accent-text: #a35252;
  --lp-accent-border: rgba(163, 82, 82, 0.55);
  --lp-accent-soft: rgba(163, 82, 82, 0.45);
  --lp-accent-faint: rgba(163, 82, 82, 0);
  --lp-accent-dot-glow: 0 0 8px rgba(163, 82, 82, 0.45);
  --lp-glow: rgba(163, 82, 82, 0.12);
  --lp-icon-chip: rgba(38, 32, 32, 0.06);
  --lp-shadow: 0 12px 32px rgba(90, 60, 60, 0.14);
  --lp-success-text: #3c6b3a;
  --lp-success-bg: rgba(90, 140, 90, 0.12);
  --lp-success-border: rgba(90, 140, 90, 0.4);
  --lp-error-text: #a04545;
  --lp-error-bg: rgba(160, 69, 69, 0.1);
  --lp-error-border: rgba(160, 69, 69, 0.35);
  --lp-pro-text: #3a5a7a;
  --lp-pro-bg: rgba(90, 120, 160, 0.12);
  --lp-pro-border: rgba(90, 120, 160, 0.4);
  --lp-premium-text: #8a6a1f;
  --lp-premium-bg: rgba(180, 140, 40, 0.14);
  --lp-premium-border: rgba(180, 140, 40, 0.4);
}

/* In light mode the hero photo fades into the paper background
   instead of into black, so the seam reads as a horizon haze. */
.LandingPage_pageLight__jhxqo .LandingPage_landingContainer__2RSUz {
  background:
    linear-gradient(
      to top,
      #f7f2ef 0%,
      rgba(247, 242, 239, 0.75) 12%,
      rgba(247, 242, 239, 0) 35%
    ),
    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%
    ),
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/static/media/scifi.d6e7d0330aab873a92a4.webp) center/cover no-repeat;
}

.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 */
}

/* Hero subheadline under the tagline */
.LandingPage_heroSubheadline__JreMk {
  font-family: 'Urbanist', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 540px;
  margin: 18px 0 0;
  opacity: 0;
  animation: LandingPage_fadeInUp__oAg4x 0.6s ease-out forwards;
  animation-delay: 0.7s;
}

/* Hero CTA buttons */
.LandingPage_ctaRow__bBrxu {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  pointer-events: auto;
  opacity: 0;
  animation: LandingPage_fadeInUp__oAg4x 0.6s ease-out forwards;
  animation-delay: 0.9s;
}

.LandingPage_ctaPrimary__8UMiT {
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  background: #e6c7c7;
  border: 1px solid #e6c7c7;
  border-radius: 10px;
  padding: 14px 26px;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.LandingPage_ctaPrimary__8UMiT:hover {
  background: #f2dcdc;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(230, 199, 199, 0.25);
}

.LandingPage_ctaSecondary__wnRx2 {
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 14px 26px;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.LandingPage_ctaSecondary__wnRx2:hover {
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
  transform: translateY(-2px);
}

.LandingPage_ctaNote__gDSF7 {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 12px 0 0;
  opacity: 0;
  animation: LandingPage_fadeInUp__oAg4x 0.6s ease-out forwards;
  animation-delay: 1.1s;
}

/* Scroll cue at the hero's bottom edge */
.LandingPage_scrollCue__INqQq {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  animation: LandingPage_fadeInUp__oAg4x 0.8s ease-out forwards;
  animation-delay: 2s;
}

.LandingPage_scrollCueText__8wdSC {
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.LandingPage_scrollCueLine__3RYjV {
  width: 1px;
  height: 34px;
  background: linear-gradient(
    to bottom,
    rgba(230, 199, 199, 0.9),
    rgba(230, 199, 199, 0)
  );
  animation: LandingPage_scrollPulse__Sobis 2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes LandingPage_scrollPulse__Sobis {
  0%,
  100% {
    transform: scaleY(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingPage_heroSubheadline__JreMk,
  .LandingPage_ctaRow__bBrxu,
  .LandingPage_ctaNote__gDSF7,
  .LandingPage_scrollCue__INqQq,
  .LandingPage_socialButtons__fEY-S {
    animation: none;
    opacity: 1;
  }

  .LandingPage_scrollCueLine__3RYjV {
    animation: none;
  }
}

/* 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;
}

/* Fixed icon buttons (download, theme toggle) — dark translucent chips
   so the white icons stay readable over the hero photo and over light
   sections alike */
.LandingPage_downloadButton__ISxrM,
.LandingPage_themeToggle__ZhxIF {
  position: fixed;
  top: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid rgba(100, 100, 110, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

.LandingPage_downloadButton__ISxrM {
  right: 20px;
}

.LandingPage_themeToggle__ZhxIF {
  right: 76px;
}

.LandingPage_downloadButton__ISxrM:focus-visible,
.LandingPage_themeToggle__ZhxIF:focus-visible {
  outline: 2px solid #e6c7c7;
  outline: 2px solid var(--lp-accent-text, #e6c7c7);
  outline-offset: 2px;
}

.LandingPage_downloadButton__ISxrM:hover,
.LandingPage_themeToggle__ZhxIF:hover {
  color: #fff;
  background: rgba(50, 50, 55, 0.8);
  border-color: rgba(140, 140, 150, 0.7);
  transform: translateY(-2px);
}

.LandingPage_downloadButton__ISxrM:active,
.LandingPage_themeToggle__ZhxIF:active {
  transform: translateY(0);
}

/* 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);
}

/* Page footer — normal flow at the bottom of the marketing page */
.LandingPage_pageFooter__Tr5-A {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 20px 28px;
  border-top: 1px solid var(--lp-border-soft);
  background: var(--lp-bg);
}

.LandingPage_pageFooter__Tr5-A .LandingPage_footerLink__YCumk {
  border: none;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  padding: 4px 6px;
  color: var(--lp-text-mid);
}

.LandingPage_pageFooter__Tr5-A .LandingPage_footerLink__YCumk:hover {
  color: var(--lp-text-hi);
}

.LandingPage_pageFooter__Tr5-A .LandingPage_footerDot__wOCp7 {
  color: var(--lp-text-low);
}

.LandingPage_pageFooter__Tr5-A .LandingPage_versionButton__GmEF7 {
  color: var(--lp-text-mid);
}

.LandingPage_pageFooter__Tr5-A .LandingPage_versionButton__GmEF7:hover {
  color: var(--lp-text-hi);
  background: var(--lp-icon-chip);
}

/* 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;
  }

  /* On mobile the physics circles own the lower half of the hero;
     the trust bar and problem section directly below carry the full
     pitch, so the hero keeps only brand + tagline + CTAs. */
  .LandingPage_heroSubheadline__JreMk {
    display: none;
  }

  .LandingPage_ctaNote__gDSF7 {
    display: none;
  }

  .LandingPage_ctaRow__bBrxu {
    justify-content: center;
  }

  .LandingPage_ctaPrimary__8UMiT,
  .LandingPage_ctaSecondary__wnRx2 {
    padding: 12px 20px;
    font-size: 0.92rem;
  }

  .LandingPage_scrollCue__INqQq {
    display: none; /* circles occupy the lower half on mobile */
  }

  .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,
  .LandingPage_themeToggle__ZhxIF {
    top: auto;
    bottom: 15px;
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .LandingPage_downloadButton__ISxrM {
    right: 15px;
  }

  .LandingPage_themeToggle__ZhxIF {
    right: 71px;
  }

  .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_circle__3tIN7:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.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;
}

/* LandingSections.module.css
   Marketing sections below the hero. Design language: the page reads like
   the product's own node canvas — mono "terminal" labels, handle dots,
   wires between steps, panels matching the hero's circles.
   All colors come from the --lp-* theme variables defined on the page
   wrapper in LandingPage.module.css (dark default, .pageLight override). */

.LandingSections_sections__e\+Y9j {
  background: var(--lp-bg);
  color: var(--lp-text-hi);
  font-family: 'Urbanist', sans-serif;
  overflow-x: hidden;
}

.LandingSections_section__4ijFi {
  max-width: 1060px;
  margin: 0 auto;
  padding: 96px 24px 0;
}

.LandingSections_section__4ijFi:last-child {
  padding-bottom: 96px;
}

/* --- Eyebrow: a node handle wired into the section title --- */

.LandingSections_eyebrow__nEviC {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-accent-text);
  margin: 0 0 22px;
}

.LandingSections_handleDot__1LPBX {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-accent-text);
  box-shadow: var(--lp-accent-dot-glow);
  flex-shrink: 0;
}

.LandingSections_wire__uDFkR {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--lp-accent-soft),
    var(--lp-accent-faint)
  );
}

.LandingSections_heading__rm2Cb {
  font-family: 'Urbanist', sans-serif;
  font-weight: 200;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--lp-text-hi);
  margin: 0 0 20px;
  max-width: 21ch;
}

.LandingSections_lead__CQjBW {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--lp-text-mid);
  max-width: 62ch;
  margin: 0 0 14px;
}

.LandingSections_leadNote__niJKg {
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  color: var(--lp-text-low);
  margin: 0;
}

/* --- Trust bar: four node pills --- */

.LandingSections_trustBar__Jla9j {
  max-width: 1060px;
  margin: 0 auto;
  padding: 72px 24px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 14px;
  gap: 14px;
}

.LandingSections_chip__PMSCp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 18px 26px;
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}

/* input handle on the left edge, like a canvas node */
.LandingSections_chip__PMSCp::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-accent-text);
  box-shadow: var(--lp-accent-dot-glow);
}

.LandingSections_chipLabel__EBQUE {
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lp-text-hi);
}

.LandingSections_chipDetail__OSPVx {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--lp-text-low);
}

/* --- Feature blocks --- */

.LandingSections_featureBlock__F8goz {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-gap: 48px;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
}

.LandingSections_featureBlock__F8goz + .LandingSections_featureBlock__F8goz {
  border-top: 1px solid var(--lp-border-soft);
}

.LandingSections_featureBlockReverse__dkG7g .LandingSections_featureText__hDVlr {
  order: 2;
}

.LandingSections_featureBlockReverse__dkG7g .LandingSections_featureVisual__meZby {
  order: 1;
}

.LandingSections_featureHeading__\+ERhe {
  font-family: 'Urbanist', sans-serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  color: var(--lp-text-hi);
  margin: 0 0 14px;
}

.LandingSections_featureBody__XTaEN {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--lp-text-mid);
  margin: 0;
}

.LandingSections_featureNote__Rf4Ry {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--lp-accent-text);
  border-left: 2px solid var(--lp-accent-border);
  padding-left: 12px;
  margin: 14px 0 0;
}

.LandingSections_featureVisual__meZby {
  display: flex;
  justify-content: center;
}

.LandingSections_featureImage__6b3rH {
  max-width: 100%;
  width: 320px;
  border-radius: 16px;
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow);
}

/* --- Model showcase --- */

.LandingSections_countsRow__zJ9vw {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 30px 0 34px;
}

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

.LandingSections_countNumber__YH2j- {
  font-family: 'Inconsolata', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--lp-accent-text);
  line-height: 1;
}

.LandingSections_countLabel__oKdlm {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-text-low);
}

.LandingSections_carouselWrap__HYnp9 {
  margin: 0 -24px;
}

.LandingSections_carouselFallback__CEBc9,
.LandingSections_demoFallback__LkWof {
  min-height: 160px;
}

/* --- Feature marquee: slow, two-row auto-scrolling carousel --- */

.LandingSections_fcViewport__CsSBF {
  /* bleed to the section edges so the scroll reads as continuous */
  margin: 34px -24px 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* soft fade at both edges so tiles enter/leave, never hard-cut */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.LandingSections_fcRow__8odx6 {
  overflow: hidden;
}

.LandingSections_fcTrack__epjso {
  display: flex;
  gap: 16px;
  width: -webkit-max-content;
  width: max-content;
  /* slow drift — 64s for a full pass */
  animation: LandingSections_fcMarquee__v3nT0 64s linear infinite;
  will-change: transform;
}

.LandingSections_fcTrackReverse__t2FqY {
  animation-name: LandingSections_fcMarqueeReverse__koGIf;
}

/* Pause whichever row the pointer is over */
.LandingSections_fcRow__8odx6:hover .LandingSections_fcTrack__epjso {
  animation-play-state: paused;
}

/* -50% because the content is duplicated exactly once */
@keyframes LandingSections_fcMarquee__v3nT0 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes LandingSections_fcMarqueeReverse__koGIf {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.LandingSections_fcTile__2vJQM {
  flex: 0 0 auto;
  width: 300px;
  box-sizing: border-box;
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 20px 22px;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.LandingSections_fcTile__2vJQM:hover {
  border-color: var(--lp-accent-border);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px var(--lp-glow);
}

.LandingSections_fcTileHead__3nprN {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.LandingSections_fcIcon__7ljXI {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--lp-icon-chip);
  border: 1px solid var(--lp-border-soft);
  color: var(--lp-accent-text);
  font-size: 1.05rem;
}

.LandingSections_fcTag__H5SXm {
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lp-accent-text);
  white-space: nowrap;
}

.LandingSections_fcTitle__yD5wf {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--lp-text-hi);
  margin: 0 0 8px;
}

.LandingSections_fcBody__eGL83 {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--lp-text-mid);
  margin: 0;
}

/* --- How it works: wired step nodes --- */

.LandingSections_steps__KoPwX {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 18px;
}

.LandingSections_stepNode__ZUQal {
  flex: 1 1;
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
}

/* output + input handles on the node edges */
.LandingSections_stepNode__ZUQal::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-accent-text);
  box-shadow: var(--lp-accent-dot-glow);
}

.LandingSections_stepNode__ZUQal:last-child::after {
  display: none;
}

.LandingSections_stepWire__4FDqm {
  width: 42px;
  align-self: center;
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(
    to right,
    var(--lp-accent-soft),
    var(--lp-accent-faint)
  );
}

.LandingSections_stepTitle__2wCpE {
  font-family: 'Inconsolata', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lp-text-hi);
  margin: 0 0 10px;
}

.LandingSections_stepBody__z9274 {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-text-mid);
  margin: 0;
}

.LandingSections_demoWrap__8L-Jg {
  margin: 34px 0 0; /* also neutralizes the <figure> default margins */
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--lp-panel-strong);
  height: 420px;
  position: relative;
}

.LandingSections_demoCaption__2oZXR {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  color: var(--lp-text-low);
  margin: 0;
  pointer-events: none;
}

/* --- Buttons --- */

.LandingSections_ctaRow__qphBr {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.LandingSections_primaryButton__IUhPS {
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--lp-accent);
  border: 1px solid var(--lp-accent);
  border-radius: 10px;
  padding: 14px 26px;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.LandingSections_primaryButton__IUhPS:hover {
  background: #f2dcdc;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--lp-glow);
}

.LandingSections_secondaryButton__3ot7X {
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lp-text-hi);
  background: transparent;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  padding: 14px 26px;
  cursor: pointer;
  margin-top: 24px;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.LandingSections_ctaRow__qphBr .LandingSections_secondaryButton__3ot7X {
  margin-top: 0;
}

.LandingSections_secondaryButton__3ot7X:hover {
  border-color: var(--lp-accent-border);
  transform: translateY(-2px);
}

.LandingSections_textLink__wgYnW {
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  color: var(--lp-accent-text);
  background: none;
  border: none;
  padding: 0;
  margin-top: 22px;
  cursor: pointer;
}

.LandingSections_textLink__wgYnW:hover {
  text-decoration: underline;
}

/* --- Pricing --- */

.LandingSections_planGrid__EW6M2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-top: 34px;
}

.LandingSections_planCard__B6qx1 {
  position: relative;
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
}

.LandingSections_planCardFeatured__Iw4Aw {
  border-color: var(--lp-accent-border);
  box-shadow: 0 0 24px var(--lp-glow);
}

.LandingSections_planBadge__YZlKu {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inconsolata', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: var(--lp-accent);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.LandingSections_planName__JbqJg {
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-hi);
  margin: 0 0 10px;
}

.LandingSections_planPrice__eZSMI {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--lp-text-hi);
  margin: 0 0 14px;
}

.LandingSections_planSuffix__kGJws {
  font-size: 0.75rem;
  color: var(--lp-text-low);
  margin-left: 4px;
}

.LandingSections_planFeatures__Nu43D {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.LandingSections_planFeatures__Nu43D li {
  font-size: 0.83rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--lp-text-mid);
  padding-left: 14px;
  position: relative;
}

.LandingSections_planFeatures__Nu43D li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lp-accent-soft);
}

.LandingSections_packRow__8C9Dj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.LandingSections_packLead__YhVmK {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  color: var(--lp-text-low);
}

.LandingSections_pack__M8dKr {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  color: var(--lp-text-hi);
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 20px;
  padding: 6px 14px;
}

.LandingSections_finePrint__dkJB0 {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--lp-text-low);
  max-width: 70ch;
  margin: 18px 0 0;
}

/* --- FAQ --- */

.LandingSections_faqList__zAfs0 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.LandingSections_faqItem__G6T5I {
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  padding: 0 20px;
}

.LandingSections_faqItem__G6T5I[open] {
  border-color: var(--lp-accent-border);
}

.LandingSections_faqQuestion__li\+Hu {
  font-family: 'Inconsolata', monospace;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--lp-text-hi);
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.LandingSections_faqQuestion__li\+Hu::-webkit-details-marker {
  display: none;
}

.LandingSections_faqQuestion__li\+Hu::before {
  content: '> ';
  color: var(--lp-accent-text);
}

.LandingSections_faqAnswer__t6X33 {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--lp-text-mid);
  margin: 0;
  padding: 0 0 18px;
}

/* --- Final CTA --- */

.LandingSections_finalCta__aqFPh {
  text-align: center;
  padding-top: 120px;
}

.LandingSections_finalCta__aqFPh .LandingSections_lead__CQjBW {
  margin-left: auto;
  margin-right: auto;
}

.LandingSections_finalCta__aqFPh .LandingSections_ctaRow__qphBr {
  justify-content: center;
}

.LandingSections_finalHeading__QioCX {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  color: var(--lp-text-hi);
  margin: 0 0 18px;
}

/* --- Contact --- */

.LandingSections_contactGrid__DDfC7 {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-gap: 48px;
  gap: 48px;
  align-items: start;
}

.LandingSections_contactForm__Dcehr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 24px;
}

.LandingSections_formInput__UeUm5,
.LandingSections_formTextarea__1DUSF {
  font-family: 'Inconsolata', monospace;
  font-size: 0.95rem;
  color: var(--lp-text-hi);
  background: var(--lp-panel-strong);
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.25s ease;
}

.LandingSections_formInput__UeUm5::placeholder,
.LandingSections_formTextarea__1DUSF::placeholder {
  color: var(--lp-text-low);
}

.LandingSections_formInput__UeUm5:focus,
.LandingSections_formTextarea__1DUSF:focus {
  border-color: var(--lp-accent-border);
}

.LandingSections_formInput__UeUm5:disabled,
.LandingSections_formTextarea__1DUSF:disabled {
  opacity: 0.5;
}

.LandingSections_formTextarea__1DUSF {
  resize: vertical;
  min-height: 110px;
}

.LandingSections_contactForm__Dcehr .LandingSections_primaryButton__IUhPS {
  align-self: flex-start;
  margin-top: 4px;
}

.LandingSections_contactForm__Dcehr .LandingSections_primaryButton__IUhPS:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.LandingSections_successMessage__VBN\+M,
.LandingSections_errorMessage__Qbphf {
  font-family: 'Inconsolata', monospace;
  font-size: 0.88rem;
  line-height: 1.5;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}

.LandingSections_successMessage__VBN\+M {
  color: var(--lp-success-text);
  background: var(--lp-success-bg);
  border: 1px solid var(--lp-success-border);
}

.LandingSections_errorMessage__Qbphf {
  color: var(--lp-error-text);
  background: var(--lp-error-bg);
  border: 1px solid var(--lp-error-border);
}

/* --- Responsive --- */

@media (max-width: 900px) {
  .LandingSections_trustBar__Jla9j {
    grid-template-columns: repeat(2, 1fr);
  }

  .LandingSections_planGrid__EW6M2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .LandingSections_featureBlock__F8goz {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .LandingSections_featureBlockReverse__dkG7g .LandingSections_featureText__hDVlr {
    order: 1;
  }

  .LandingSections_featureBlockReverse__dkG7g .LandingSections_featureVisual__meZby {
    order: 2;
  }

  .LandingSections_steps__KoPwX {
    flex-direction: column;
  }

  .LandingSections_contactGrid__DDfC7 {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .LandingSections_stepWire__4FDqm {
    width: 2px;
    height: 34px;
    align-self: center;
    background: linear-gradient(
      to bottom,
      var(--lp-accent-soft),
      var(--lp-accent-faint)
    );
  }

  .LandingSections_stepNode__ZUQal::after {
    right: 50%;
    top: auto;
    bottom: -5px;
    transform: translateX(50%);
  }
}

@media (max-width: 560px) {
  .LandingSections_section__4ijFi {
    padding: 68px 18px 0;
  }

  .LandingSections_trustBar__Jla9j {
    grid-template-columns: 1fr;
    padding: 56px 18px 0;
  }

  .LandingSections_planGrid__EW6M2 {
    grid-template-columns: 1fr;
  }

  .LandingSections_demoWrap__8L-Jg {
    height: 320px;
  }

  .LandingSections_countsRow__zJ9vw {
    gap: 24px;
  }

  .LandingSections_fcTile__2vJQM {
    width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingSections_primaryButton__IUhPS,
  .LandingSections_secondaryButton__3ot7X {
    transition: none;
  }

  /* No auto-scroll: let each row become a manually-swipeable strip */
  .LandingSections_fcTrack__epjso,
  .LandingSections_fcTrackReverse__t2FqY {
    animation: none;
    transform: none;
  }

  .LandingSections_fcRow__8odx6 {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .LandingSections_fcRow__8odx6::-webkit-scrollbar {
    display: none;
  }
}

/* Docs — dark editorial sidebar hub.
   Display: Fraunces (serif) · Body: Urbanist · Utility: Inconsolata.
   The one signature device: every visual sits in a "canvas viewport"
   frame — a small window onto the app's own light canvas. */

.DocsPage_docsRoot__KjNr1 {
  /* Docs chrome now rides the app-wide brand tokens (brand.css) so the page
     tracks body.light-theme / body.dark-theme automatically. The legacy
     --d-* names are kept (JS + the rules below reference them) and simply
     repointed at --cc-* tokens, which gives both themes for free. */
  --d-bg: var(--cc-bg);
  --d-bg-side: var(--cc-bg);
  --d-raised: var(--cc-panel);
  --d-hover: var(--cc-panel-hover);
  --d-text: var(--cc-text-hi);
  --d-mid: var(--cc-text-mid);
  --d-low: var(--cc-text-low);
  --d-accent: var(--cc-accent-text);
  --d-accent-strong: color-mix(
    in srgb,
    var(--cc-accent-text) 72%,
    var(--cc-text-hi)
  );
  --d-border: var(--cc-border-soft);
  --d-border-strong: var(--cc-border);
  --d-font-display: var(--cc-font-body);
  --d-font-body: var(--cc-font-body);
  --d-font-mono: var(--cc-font-mono);

  min-height: 100vh;
  background: var(--d-bg);
  color: var(--d-text);
  font-family: var(--d-font-body);
  color-scheme: light dark;
  /* .App sets text-align: center globally */
  text-align: left;
}

/* ---------- Sidebar ---------- */

.DocsPage_sidebar__K8PPC {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--d-bg-side);
  border-right: 1px solid var(--d-border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--d-border-strong) transparent;
  z-index: 30;
}

.DocsPage_brand__ZsYOX {
  font-family: var(--d-font-display);
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--d-text);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 30px 28px 20px 28px;
}

.DocsPage_brand__ZsYOX em {
  font-style: italic;
  color: var(--d-accent);
}

.DocsPage_sidebarNav__xCUKH {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding: 0 16px 24px 16px;
}

.DocsPage_navOverview__keV5A {
  font-family: var(--d-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--d-mid);
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.DocsPage_navGroup__niS8A {
  margin-top: 26px;
}

.DocsPage_navGroupLabel__ikvyD {
  font-family: var(--d-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-accent);
  padding: 0 12px 8px 12px;
}

.DocsPage_navItem__RH7OA {
  display: block;
  width: 100%;
  font-family: var(--d-font-body);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--d-mid);
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.DocsPage_navItem__RH7OA:hover,
.DocsPage_navOverview__keV5A:hover {
  color: var(--d-text);
  background: var(--d-raised);
}

.DocsPage_navItemActive__XauD2,
.DocsPage_navItemActive__XauD2:hover {
  color: var(--d-accent-strong);
  background: var(--d-raised);
}

.DocsPage_navItemActive__XauD2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--d-accent);
}

.DocsPage_navItem__RH7OA:focus-visible,
.DocsPage_navOverview__keV5A:focus-visible,
.DocsPage_brand__ZsYOX:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

.DocsPage_sidebarFooter__O\+n6M {
  margin-top: auto;
  padding: 26px 12px 0 12px;
  border-top: 1px solid var(--d-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.DocsPage_footerLink__lZhAM {
  font-family: var(--d-font-mono);
  font-size: 0.78rem;
  color: var(--d-low);
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.18s ease;
}

.DocsPage_footerLink__lZhAM:hover {
  color: var(--d-text);
}

.DocsPage_footerLinkAccent__ravM2 {
  color: var(--d-accent);
}

.DocsPage_footerLinkAccent__ravM2:hover {
  color: var(--d-accent-strong);
}

.DocsPage_footerLink__lZhAM:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

/* ---------- Content column ---------- */

.DocsPage_content__4xHWp {
  margin-left: 280px;
  display: flex;
  justify-content: center;
}

.DocsPage_article__Ru54B {
  width: 100%;
  max-width: 860px;
  padding: 88px 56px 120px 56px;
  box-sizing: border-box;
}

.DocsPage_eyebrow__3pPhB {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--d-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d-accent);
  margin: 0 0 22px 0;
}

.DocsPage_eyebrowDot__Uxy6m {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-accent);
  flex-shrink: 0;
}

.DocsPage_hubTitle__UOq9u {
  font-family: var(--d-font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--d-text);
  margin: 0 0 26px 0;
}

.DocsPage_hubTitle__UOq9u em {
  font-style: italic;
  color: var(--d-accent);
}

.DocsPage_hubLede__zSMFv {
  font-family: var(--d-font-body);
  font-size: 1.22rem;
  line-height: 1.65;
  color: var(--d-mid);
  max-width: 640px;
  margin: 0 0 30px 0;
}

/* ---------- Hub card grid ---------- */

.DocsPage_hubGroup__d-7v7 {
  margin-top: 58px;
}

.DocsPage_groupHeading__APT8v {
  font-family: var(--d-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d-accent);
  border-bottom: 1px solid var(--d-border);
  padding-bottom: 12px;
  margin: 0 0 24px 0;
}

.DocsPage_cardGrid__\+8dzg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.DocsPage_card__jxtuy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: var(--d-raised);
  border: 1px solid var(--d-border);
  border-radius: 14px;
  padding: 26px 28px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.DocsPage_card__jxtuy:hover {
  background: var(--d-hover);
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--cc-glow);
}

.DocsPage_card__jxtuy:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

.DocsPage_cardTitle__1zL7a {
  font-family: var(--d-font-display);
  font-size: 1.42rem;
  font-weight: 400;
  color: var(--d-text);
  line-height: 1.2;
}

.DocsPage_cardBlurb__3qf4M {
  font-family: var(--d-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--d-mid);
}

.DocsPage_cardRead__JBCvf {
  font-family: var(--d-font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--d-accent);
  margin-top: 4px;
  transition: color 0.2s ease;
}

.DocsPage_card__jxtuy:hover .DocsPage_cardRead__JBCvf {
  color: var(--d-accent-strong);
}

/* ---------- Article ---------- */

.DocsPage_articleTitle__Oxjve {
  font-family: var(--d-font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--d-text);
  margin: 0 0 34px 0;
}

.DocsPage_paragraph__\+c7zp {
  font-family: var(--d-font-body);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--d-mid);
  margin: 0 0 20px 0;
  max-width: 68ch;
}

.DocsPage_figure__Ywaua {
  margin: 0 0 34px 0;
}

.DocsPage_caption__YqEQL {
  font-family: var(--d-font-mono);
  font-size: 0.78rem;
  color: var(--d-low);
  text-align: center;
  margin-top: 12px;
}

/* ---------- Canvas viewport (signature frame) ---------- */

.DocsPage_viewport__l9QjZ {
  border: 1px solid var(--d-border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--d-raised);
  box-shadow: var(--cc-shadow);
}

.DocsPage_viewportBar__KUpUx {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--cc-panel-strong);
  border-bottom: 1px solid var(--d-border);
}

.DocsPage_viewportDots__g37oz {
  display: inline-flex;
  gap: 6px;
}

.DocsPage_viewportDots__g37oz i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-border-strong);
}

.DocsPage_viewportLabel__LCJg7 {
  font-family: var(--d-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-low);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.DocsPage_viewportImageWrap__ShlI0 {
  line-height: 0;
}

.DocsPage_screenshot__t5Vty {
  display: block;
  width: 100%;
  height: auto;
}

/* Node mocks are shown on the app's real (light) canvas texture */
.DocsPage_viewportCanvas__rQGRn {
  display: flex;
  justify-content: center;
  padding: 58px 32px 44px 32px;
  background-color: #fffff6;
  background-image: radial-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1.5px);
  background-size: 20px 20px;
  overflow-x: auto;
}

.DocsPage_nodeMockWrap__Brcex {
  line-height: 1.4;
}

/* ---------- Spec list ---------- */

.DocsPage_specList__7oibN {
  list-style: none;
  margin: 6px 0 26px 0;
  padding: 0;
  max-width: 68ch;
}

.DocsPage_specItem__n8E0L {
  font-family: var(--d-font-body);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--d-mid);
  padding: 11px 0 11px 26px;
  border-top: 1px solid var(--d-border);
  position: relative;
}

.DocsPage_specItem__n8E0L:last-child {
  border-bottom: 1px solid var(--d-border);
}

.DocsPage_specItem__n8E0L::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.35em;
  width: 10px;
  height: 1px;
  background: var(--d-accent);
}

/* ---------- Node reference sections ---------- */

.DocsPage_nodeSection__ko--4 {
  margin-top: 58px;
  padding-top: 42px;
  border-top: 1px solid var(--d-border);
}

.DocsPage_nodeTitle__YIv4e {
  font-family: var(--d-font-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--d-text);
  margin: 0 0 22px 0;
}

.DocsPage_nodeSection__ko--4 .DocsPage_viewport__l9QjZ {
  margin-bottom: 24px;
}

/* ---------- Pager ---------- */

.DocsPage_pager__2AeW4 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--d-border);
}

.DocsPage_pagerLink__EF4Qq {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  max-width: 46%;
}

.DocsPage_pagerNext__LQgfC {
  text-align: right;
  align-items: flex-end;
  margin-left: auto;
}

.DocsPage_pagerDirection__-onDd {
  font-family: var(--d-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-low);
}

.DocsPage_pagerTitle__v\+6Xj {
  font-family: var(--d-font-display);
  font-size: 1.18rem;
  color: var(--d-mid);
  transition: color 0.18s ease;
}

.DocsPage_pagerLink__EF4Qq:hover .DocsPage_pagerTitle__v\+6Xj {
  color: var(--d-accent);
}

.DocsPage_pagerLink__EF4Qq:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

/* ---------- Mobile ---------- */

.DocsPage_mobileBar__uFmaP {
  display: none;
}

.DocsPage_mobileNavPanel__QOKX6 {
  display: none;
}

@media (max-width: 920px) {
  .DocsPage_sidebar__K8PPC {
    display: none;
  }

  .DocsPage_content__4xHWp {
    margin-left: 0;
  }

  .DocsPage_article__Ru54B {
    padding: 96px 20px 90px 20px;
  }

  .DocsPage_cardGrid__\+8dzg {
    grid-template-columns: 1fr;
  }

  .DocsPage_mobileBar__uFmaP {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--cc-panel-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--d-border);
  }

  .DocsPage_mobileBrand__FFJR8 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }

  .DocsPage_mobileCurrent__fXytH {
    flex: 1 1;
    font-family: var(--d-font-display);
    font-size: 1rem;
    color: var(--d-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .DocsPage_mobileMenuButton__Bq\+tn {
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-text);
    background: var(--d-raised);
    border: 1px solid var(--d-border-strong);
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
  }

  .DocsPage_mobileMenuButton__Bq\+tn:focus-visible,
  .DocsPage_mobileBrand__FFJR8:focus-visible {
    outline: 2px solid var(--d-accent);
    outline-offset: 2px;
  }

  .DocsPage_mobileNavPanel__QOKX6 {
    display: block;
    position: fixed;
    top: 53px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    background: var(--d-bg);
    overflow-y: auto;
    padding: 18px 8px 40px 8px;
  }

  .DocsPage_viewportCanvas__rQGRn {
    padding: 52px 12px 32px 12px;
  }

  .DocsPage_pagerTitle__v\+6Xj {
    font-size: 1rem;
  }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .DocsPage_card__jxtuy,
  .DocsPage_cardRead__JBCvf,
  .DocsPage_navItem__RH7OA,
  .DocsPage_navOverview__keV5A,
  .DocsPage_pagerTitle__v\+6Xj,
  .DocsPage_footerLink__lZhAM {
    transition: none;
  }

  .DocsPage_card__jxtuy:hover {
    transform: none;
  }
}

/* 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: var(--cc-panel-strong);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  border: 1px solid var(--cc-border);
  padding: 16px;
  width: 280px;
  font-size: 13px;
  font-family: var(--cc-font-body);
  color: var(--cc-text-mid);
  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 var(--cc-border-soft);
}

.DocTooltip_tooltipIcon__UnNJX {
  width: 28px;
  height: 28px;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  box-shadow: 0 2px 8px var(--cc-glow);
}

.DocTooltip_tooltipTitle__KI567 {
  flex: 1 1;
}

.DocTooltip_title__aSKem {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  color: var(--cc-text-hi);
}

.DocTooltip_subtitle__7-\+O\+ {
  font-family: var(--cc-font-mono);
  font-size: 11px;
  color: var(--cc-text-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.DocTooltip_tooltipContent__Mdh2A {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.DocTooltip_description__v82vH {
  color: var(--cc-text-mid);
  font-size: 12px;
  line-height: 1.4;
}

.DocTooltip_features__5JDw0 {
  margin-top: 4px;
}

.DocTooltip_featuresTitle__-bSHi {
  font-family: var(--cc-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cc-accent-text);
  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: var(--cc-text-mid);
  margin-bottom: 3px;
  position: relative;
  line-height: 1.3;
}

.DocTooltip_featuresList__4g8gE li::before {
  content: '•';
  color: var(--cc-accent-text);
  font-weight: bold;
  position: absolute;
  left: -8px;
}

.DocTooltip_action__rD8e3 {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--cc-border-soft);
}

.DocTooltip_actionText__B3VoW {
  font-family: var(--cc-font-mono);
  font-size: 11px;
  color: var(--cc-accent-text);
  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.
   NOTE: nothing in the app sets [data-theme='dark'] (theme is driven by
   body.dark-theme via settingsStore), so this block is effectively dead —
   the base rules above already track both themes through the --cc-* tokens.
   Kept here (repointed at the same tokens) only to avoid stranding the old
   slate/blue palette; it is redundant, not load-bearing. */
[data-theme='dark'] .DocTooltip_tooltip__0R4ko {
  background: var(--cc-panel-strong);
  border-color: var(--cc-border);
  color: var(--cc-text-mid);
}

[data-theme='dark'] .DocTooltip_title__aSKem {
  color: var(--cc-text-hi);
}

[data-theme='dark'] .DocTooltip_subtitle__7-\+O\+ {
  color: var(--cc-text-low);
}

[data-theme='dark'] .DocTooltip_description__v82vH {
  color: var(--cc-text-mid);
}

[data-theme='dark'] .DocTooltip_featuresTitle__-bSHi {
  color: var(--cc-accent-text);
}

[data-theme='dark'] .DocTooltip_featuresList__4g8gE li {
  color: var(--cc-text-mid);
}

[data-theme='dark'] .DocTooltip_actionText__B3VoW {
  color: var(--cc-accent-text);
}

[data-theme='dark'] .DocTooltip_tooltipHeader__wqPbn,
[data-theme='dark'] .DocTooltip_action__rD8e3 {
  border-color: var(--cc-border-soft);
}

/* 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;
}

@keyframes DocTextNode_scaleInNode__ZROZv {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocTextNode_docContainer__LyEuj {
  position: relative;
  display: block;
  z-index: 1;
}

.DocTextNode_nodeBase__Z33jI {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  padding: 14px;
  border-radius: 8px;
  background-color: #1e293b; /* slate-800, matches the Text library tile */
  border: 1px solid #334155;
  color: #e2e8f0;
  font-family: 'Inconsolata', monospace;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px 0 rgba(0, 0, 0, 0.12);
  position: relative;
  animation: DocTextNode_scaleInNode__ZROZv 0.3s ease-out;
}

.DocTextNode_nodeHeader__tplN7 {
  position: absolute;
  top: -34px;
  left: 0;
}

.DocTextNode_floatingIcon__aBLl3 {
  background-color: #334155;
  color: #e2e8f0;
  border: 1px solid #475569;
  border-radius: 20%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocTextNode_textContent__rP2SI {
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #cbd5e1;
  min-height: 84px;
}

.DocTextNode_handleRow__cAHB\+ {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #64748b;
}

.DocTextNode_handleSpacer__9YRy8 {
  flex: 1 1;
}

.DocTextNode_handleDot__JfDtt {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background-color: #64748b;
  border: 1px solid #94a3b8;
}

.DocTextNode_handleLabel__pbzsH {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 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;
}

@keyframes DocPostCreatorNode_scaleInNode__ldEns {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocPostCreatorNode_docContainer__NrwQ3 {
  position: relative;
  display: block;
  z-index: 1;
}

.DocPostCreatorNode_nodeBase__u0aWq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  padding: 12px;
  border-radius: 8px;
  background-color: #fdf4ff; /* fuchsia-50 */
  border: 1px solid #f0abfc; /* fuchsia-300 */
  color: #701a75; /* fuchsia-900 */
  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);
  position: relative;
  animation: DocPostCreatorNode_scaleInNode__ldEns 0.3s ease-out;
}

.DocPostCreatorNode_nodeHeader__\+ahvb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: 0;
}

.DocPostCreatorNode_floatingIcon__FALTs {
  background-color: #fae8ff; /* fuchsia-100 */
  color: #86198f;
  border: 1px solid #f0abfc;
  border-radius: 20%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocPostCreatorNode_buttonsWrapper__Savd2 button {
  padding: 4px 10px;
  border: none;
  background-color: #f0abfc;
  color: #701a75;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
}

.DocPostCreatorNode_postCanvas__iv8A6 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 220px;
  background:
    linear-gradient(45deg, #fae8ff 25%, transparent 25%),
    linear-gradient(-45deg, #fae8ff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fae8ff 75%),
    linear-gradient(-45deg, transparent 75%, #fae8ff 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  border: 1px dashed #e879f9;
  border-radius: 6px;
  overflow: hidden;
}

.DocPostCreatorNode_imageLayer__rbIYw {
  position: absolute;
  top: 12%;
  left: 10%;
  right: 10%;
  bottom: 38%;
  border: 2px solid #d946ef;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #a21caf;
}

.DocPostCreatorNode_textLayer__ZRY4y {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 12%;
  height: 20%;
  border: 2px dashed #c026d3;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #86198f;
}

.DocPostCreatorNode_presetRow__MEaCK {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.DocPostCreatorNode_preset__9yMpQ {
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #f0abfc;
  background: #fae8ff;
  color: #86198f;
}

@keyframes DocSocialPublishNode_scaleInNode__BVvo9 {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocSocialPublishNode_docContainer__YJ5n9 {
  position: relative;
  display: block;
  z-index: 1;
}

.DocSocialPublishNode_nodeBase__xqsR6 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f0f9ff; /* sky-50 */
  border: 1px solid #7dd3fc; /* sky-300 */
  color: #0c4a6e; /* sky-900 */
  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);
  position: relative;
  animation: DocSocialPublishNode_scaleInNode__BVvo9 0.3s ease-out;
}

.DocSocialPublishNode_nodeHeader__zzECi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: 0;
}

.DocSocialPublishNode_floatingIcon__x-5g8 {
  background-color: #e0f2fe; /* sky-100 */
  color: #075985; /* sky-800 */
  border: 1px solid #7dd3fc; /* sky-300 */
  border-radius: 20%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocSocialPublishNode_buttonsWrapper__NDpW9 button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: none;
  background-color: #38bdf8; /* sky-400 */
  color: #0c4a6e; /* sky-900 */
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: 'Inconsolata', monospace;
}

.DocSocialPublishNode_inputRows__TwGHG {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.DocSocialPublishNode_inputRow__uDktN {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px dashed #bae6fd; /* sky-200 */
  border-radius: 6px;
  background: #e0f2fe; /* sky-100 */
  font-size: 0.75rem;
  color: #0369a1; /* sky-700 */
}

.DocSocialPublishNode_chipRow__uXBN6 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.DocSocialPublishNode_chip__eYbvX {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #7dd3fc; /* sky-300 */
  background: #e0f2fe; /* sky-100 */
  color: #075985; /* sky-800 */
}

.DocSocialPublishNode_chipDot__I2R61 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.DocSocialPublishNode_publishButton__frghi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background-color: #38bdf8; /* sky-400 */
  color: #0c4a6e; /* sky-900 */
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
  cursor: pointer;
}

/* 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;
}

@keyframes DocGroupNode_scaleInNode__XvXKF {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocGroupNode_docContainer__DTfjV {
  position: relative;
  display: block;
  z-index: 1;
}

.DocGroupNode_groupFrame__p9xp9 {
  position: relative;
  width: 360px;
  min-height: 230px;
  border-radius: 12px;
  border: 2px solid rgba(59, 130, 246, 0.5);
  background-color: rgba(59, 130, 246, 0.12);
  padding: 16px;
  font-family: 'Inconsolata', monospace;
  animation: DocGroupNode_scaleInNode__XvXKF 0.3s ease-out;
  box-sizing: border-box;
}

.DocGroupNode_groupTitle__dYiLv {
  font-size: 1rem;
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: 2px;
}

.DocGroupNode_groupDescription__w\+qAX {
  font-size: 0.78rem;
  color: #3b82f6;
  margin-bottom: 16px;
}

.DocGroupNode_ghostNodes__VC38L {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.DocGroupNode_ghostNode__hyGjX {
  width: 76px;
  height: 88px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.DocGroupNode_ghostNodeWide__JIEmB {
  width: 110px;
  height: 108px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.DocGroupNode_resizeHandle__izgCn {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid #3b82f6;
  background: #fff;
}

@keyframes DocCustomNode_scaleInNode__3\+oJp {
  from {
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.DocCustomNode_docContainer__jT8G\+ {
  position: relative;
  display: block;
  z-index: 1;
}

.DocCustomNode_nodeBase__Kwdsw {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 330px;
  padding: 14px;
  border-radius: 8px;
  background-color: #f8fafc; /* slate-50 */
  border: 1px solid #cbd5e1; /* slate-300 */
  color: #334155;
  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);
  position: relative;
  animation: DocCustomNode_scaleInNode__3\+oJp 0.3s ease-out;
}

.DocCustomNode_nodeHeader__lNrJ1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
  width: 100%;
  position: absolute;
  top: -34px;
  left: 0;
}

.DocCustomNode_floatingIcon__5yuqM {
  background-color: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 20%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DocCustomNode_buttonsWrapper__z\+Xto {
  display: flex;
  gap: 5px;
  align-items: center;
}

.DocCustomNode_apiBadge__WqPj4 {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #e0e7ff; /* indigo-100 */
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.DocCustomNode_buttonsWrapper__z\+Xto button {
  padding: 4px 10px;
  border: none;
  background-color: #cbd5e1;
  color: #1e293b;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: 'Inconsolata', monospace;
}

.DocCustomNode_nodeName__DFObH {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}

.DocCustomNode_handleColumn__txhT3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.DocCustomNode_handleChipRow__JpKiC {
  display: flex;
  gap: 6px;
}

.DocCustomNode_handleChipRowRight__E1g8z {
  display: flex;
  justify-content: flex-end;
}

.DocCustomNode_handleChipIn__PIGgb,
.DocCustomNode_handleChipOut__KLCSO {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}

.DocCustomNode_handleChipIn__PIGgb {
  border-left: 3px solid #64748b;
}

.DocCustomNode_handleChipOut__KLCSO {
  border-right: 3px solid #4338ca;
  background: #eef2ff;
  color: #4338ca;
}

.DocCustomNode_requestLine__zr4qb {
  font-size: 0.78rem;
  color: #475569;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
}

/* 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 {
  /* Light theme tokens mirror the brand palette (brand.css :root). Dark
     overrides live in .dark below. This page themes via a .dark class prop,
     not body.dark-theme, so brand values are inlined per theme here. */
  --gv-text: #262020;
  --gv-title: #262020;
  --gv-strong: #262020;
  --gv-mid: rgba(38, 32, 32, 0.6);
  --gv-label: rgba(38, 32, 32, 0.7);
  --gv-border-soft: rgba(120, 95, 95, 0.16);
  --gv-row: rgba(255, 255, 255, 0.8);
  --gv-row-even: rgba(255, 255, 255, 0.55);
  --gv-panel: rgba(255, 255, 255, 0.8);
  --gv-panel-hover: rgba(255, 255, 255, 0.95);
  --gv-shadow: 0 4px 14px rgba(90, 60, 60, 0.1);
  --gv-close-text: rgba(38, 32, 32, 0.5);
  --gv-close-border: rgba(120, 95, 95, 0.28);
  --gv-close-hover-bg: rgba(38, 32, 32, 0.06);
  --gv-close-hover-border: rgba(163, 82, 82, 0.55);
  --gv-close-hover-text: #262020;
  --gv-stat-bg: rgba(255, 255, 255, 0.8);
  --gv-stat-text: rgba(38, 32, 32, 0.6);
  --gv-stat-border: rgba(120, 95, 95, 0.28);
  --gv-stat-hover-bg: rgba(255, 255, 255, 0.95);
  --gv-logo-bg: rgba(255, 255, 255, 0.9);

  /* Brand accent (dusty rose / deep maroon) */
  --gv-accent-solid: #e6c7c7;
  --gv-accent-solid-hover: #f2dcdc;
  --gv-accent-on: #1a1a1a;
  --gv-accent-text: #a35252;
  --gv-accent-line: rgba(163, 82, 82, 0.28);
  --gv-accent-line-strong: rgba(163, 82, 82, 0.5);
  --gv-accent-tint: rgba(163, 82, 82, 0.08);
  --gv-glow: rgba(163, 82, 82, 0.15);

  padding: 40px;
  border-radius: 12px;
  /* background: #ffffff; */
  color: var(--gv-text);
  font-family: 'Urbanist', sans-serif;
  animation: GridView_fadeIn__jBCGt 0.3s ease-out;
  box-shadow: var(--gv-shadow);
  border: 1px solid var(--gv-border-soft);
}

.GridView_gridViewContainer__1ZpJQ.GridView_dark__KYSL7 {
  --gv-text: rgba(255, 255, 255, 0.95);
  --gv-title: rgba(255, 255, 255, 0.95);
  --gv-strong: rgba(255, 255, 255, 0.9);
  --gv-mid: rgba(255, 255, 255, 0.55);
  --gv-label: rgba(255, 255, 255, 0.7);
  --gv-border-soft: rgba(100, 100, 110, 0.25);
  --gv-row: rgba(30, 30, 35, 0.6);
  --gv-row-even: rgba(30, 30, 35, 0.42);
  --gv-panel: rgba(30, 30, 35, 0.6);
  --gv-panel-hover: rgba(40, 40, 46, 0.75);
  --gv-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  --gv-close-text: rgba(255, 255, 255, 0.45);
  --gv-close-border: rgba(100, 100, 110, 0.5);
  --gv-close-hover-bg: rgba(255, 255, 255, 0.08);
  --gv-close-hover-border: rgba(230, 199, 199, 0.7);
  --gv-close-hover-text: rgba(255, 255, 255, 0.95);
  --gv-stat-bg: rgba(30, 30, 35, 0.6);
  --gv-stat-text: rgba(255, 255, 255, 0.7);
  --gv-stat-border: rgba(100, 100, 110, 0.5);
  --gv-stat-hover-bg: rgba(40, 40, 46, 0.75);
  --gv-logo-bg: rgba(255, 255, 255, 0.9);

  /* Brand accent (dusty rose on dark) */
  --gv-accent-solid: #e6c7c7;
  --gv-accent-solid-hover: #f2dcdc;
  --gv-accent-on: #1a1a1a;
  --gv-accent-text: #e6c7c7;
  --gv-accent-line: rgba(230, 199, 199, 0.3);
  --gv-accent-line-strong: rgba(230, 199, 199, 0.55);
  --gv-accent-tint: rgba(230, 199, 199, 0.1);
  --gv-glow: rgba(230, 199, 199, 0.14);
}

@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 var(--gv-border-soft);
  padding-bottom: 24px;
}

.GridView_headerLeft__8EfcK {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.GridView_summaryToggle__kyPta {
  background: var(--gv-accent-solid);
  border: 1px solid var(--gv-accent-solid);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--gv-accent-on);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  align-self: flex-start;
}

.GridView_summaryToggle__kyPta:hover {
  background: var(--gv-accent-solid-hover);
  border-color: var(--gv-accent-solid);
  color: var(--gv-accent-on);
  transform: translateY(-1px);
}

.GridView_headerTitle__TZKOc {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--gv-title);
  margin: 0;
}

.GridView_closeButton__oogqs {
  background: transparent;
  color: var(--gv-close-text);
  border: 1px solid var(--gv-close-border);
  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: var(--gv-close-hover-bg);
  border-color: var(--gv-close-hover-border);
  color: var(--gv-close-hover-text);
}

/* Leaderboard Container */
.GridView_leaderboardContainer__FBQO\+ {
  border-radius: 16px;
  border: 1px solid var(--gv-border-soft);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Leaderboard Header */
.GridView_leaderboardHeader__Pw68s {
  display: flex;
  align-items: center;
  background: var(--gv-accent-tint);
  color: var(--gv-accent-text);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 16px 0;
  border-bottom: 2px solid var(--gv-accent-line);
}

.GridView_headerCell__qL2Kt {
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-family: 'Inconsolata', monospace;
}

/* Leaderboard Body */
.GridView_leaderboardBody__SqtvN {
  background: transparent;
}

.GridView_leaderboardRow__Yylko {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--gv-border-soft);
  transition: all 0.2s ease;
  position: relative;
  background: var(--gv-row);
}

.GridView_leaderboardRow__Yylko:nth-child(even) {
  background: var(--gv-row-even);
}

.GridView_leaderboardRow__Yylko:hover {
  background: var(--gv-panel-hover) !important;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--gv-glow);
}

.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: var(--gv-accent-text);
  font-family: 'Inconsolata', monospace;
}

/* 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: var(--gv-strong);
  font-size: 1rem;
  font-family: 'Urbanist', sans-serif;
  line-height: 1.3;
}

.GridView_modelDescription__AZBpb {
  color: var(--gv-mid);
  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: var(--gv-panel);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--gv-border-soft);
  -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: var(--gv-panel-hover);
  border-color: var(--gv-accent-line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--gv-glow);
}

.GridView_priceMain__wlcrC {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gv-strong);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.GridView_priceUnit__7lCfQ {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gv-mid);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-top: 2px;
}

.GridView_detailsButton__vEeEF {
  background: var(--gv-accent-solid);
  color: var(--gv-accent-on);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Inconsolata', monospace;
}

.GridView_detailsButton__vEeEF:hover {
  background: var(--gv-accent-solid-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--gv-glow);
}

/* 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: var(--gv-logo-bg);
  padding: 2px;
  border: 1px solid var(--gv-border-soft);
}

.GridView_providerFallback__JhtOU {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--gv-accent-solid);
  color: var(--gv-accent-on);
  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: var(--gv-label);
  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: var(--gv-accent-solid);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--gv-accent-on);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.GridView_showAllButton__UOzRY:hover {
  background: var(--gv-accent-solid-hover);
}

.GridView_pricingText__MsYDr {
  font-size: 0.875rem;
  color: var(--gv-text);
  line-height: 1.4;
  font-family: 'Inconsolata', monospace;
  background: var(--gv-panel);
  padding: 8px 12px;
  border-radius: 6px;
  border: 2px solid var(--gv-border-soft);
  border-left: 3px solid var(--gv-accent-line-strong);
  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: 'Inconsolata', monospace;
  border: 2px solid;
  transition: all 0.2s ease;
}

/* Cost-tier ramp: dusty rose -> deep maroon (single brand accent, varying depth) */
.GridView_tierBadge1__y9bAK {
  background: linear-gradient(135deg, #c98a8a 0%, #bd7d7d 100%);
  border-color: rgba(163, 82, 82, 0.4);
}

.GridView_tierBadge2__c12Fc {
  background: linear-gradient(135deg, #bd7d7d 0%, #b06e6e 100%);
  border-color: rgba(163, 82, 82, 0.45);
}

.GridView_tierBadge3__v53FE {
  background: linear-gradient(135deg, #b06e6e 0%, #a15e5e 100%);
  border-color: rgba(163, 82, 82, 0.5);
}

.GridView_tierBadge4__WQgjj {
  background: linear-gradient(135deg, #a15e5e 0%, #8f4f4f 100%);
  border-color: rgba(163, 82, 82, 0.55);
}

.GridView_tierBadge5__yG9HF {
  background: linear-gradient(135deg, #8f4f4f 0%, #7d4141 100%);
  border-color: rgba(163, 82, 82, 0.6);
}

.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 var(--gv-glow);
}

/* 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: var(--gv-accent-tint);
    border-radius: 4px;
  }

  .GridView_leaderboardContainer__FBQO\+::-webkit-scrollbar-thumb {
    background: var(--gv-accent-line-strong);
    border-radius: 4px;
  }

  .GridView_leaderboardContainer__FBQO\+::-webkit-scrollbar-thumb:hover {
    background: var(--gv-accent-text);
  }

  .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 var(--gv-border-soft);
}

.GridView_footerStats__Njxbi {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.GridView_footerStat__rOQuA {
  background: var(--gv-stat-bg);
  border: 1px solid var(--gv-stat-border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--gv-stat-text);
  font-weight: 500;
  transition: all 0.2s ease;
}

.GridView_footerStat__rOQuA:hover {
  background: var(--gv-stat-hover-bg);
  border-color: var(--gv-accent-line-strong);
  color: var(--gv-accent-text);
}

/* Pricing Legend */
.GridView_pricingLegend__j9ipP {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gv-border-soft);
}

.GridView_legendTitle__PEO4M {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gv-label);
  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: 'Inconsolata', monospace;
  font-weight: 700;
  color: var(--gv-accent-text);
  background: var(--gv-accent-tint);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  min-width: 20px;
  text-align: center;
  border: 1px solid var(--gv-accent-line);
}

.GridView_legendText__WfhLr {
  color: var(--gv-mid);
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
}

/* Removed 480px breakpoint - keep table layout for all mobile sizes */

.PricingSummaryCard_summaryCard__tKoET {
  /* Light theme tokens mirror the brand palette (brand.css :root). Dark
     overrides live in .dark below. Themed via a .dark class prop, not
     body.dark-theme, so brand values are inlined per theme here. */
  --sc-title: #262020;
  --sc-subtle: rgba(38, 32, 32, 0.7);
  --sc-mid: rgba(38, 32, 32, 0.6);
  --sc-strong: #262020;
  --sc-count: rgba(38, 32, 32, 0.7);
  --sc-border: rgba(120, 95, 95, 0.16);
  --sc-divider: rgba(120, 95, 95, 0.16);
  --sc-track: rgba(38, 32, 32, 0.1);
  --sc-count-bg: rgba(38, 32, 32, 0.06);

  /* Brand accent + chips */
  --sc-accent-solid: #e6c7c7;
  --sc-accent-on: #1a1a1a;
  --sc-accent-text: #a35252;
  --sc-accent-line: rgba(163, 82, 82, 0.28);
  --sc-chip-bg: rgba(38, 32, 32, 0.05);
  --sc-chip-hover: rgba(255, 255, 255, 0.9);

  /* background: rgba(255, 255, 255, 0.95); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sc-border);
  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;
}

.PricingSummaryCard_summaryCard__tKoET.PricingSummaryCard_dark__lnDYq {
  --sc-title: rgba(255, 255, 255, 0.95);
  --sc-subtle: rgba(255, 255, 255, 0.7);
  --sc-mid: rgba(255, 255, 255, 0.6);
  --sc-strong: rgba(255, 255, 255, 0.9);
  --sc-count: rgba(255, 255, 255, 0.7);
  --sc-border: rgba(100, 100, 110, 0.25);
  --sc-divider: rgba(100, 100, 110, 0.25);
  --sc-track: rgba(255, 255, 255, 0.12);
  --sc-count-bg: rgba(255, 255, 255, 0.1);

  /* Brand accent + chips (dark) */
  --sc-accent-solid: #e6c7c7;
  --sc-accent-on: #1a1a1a;
  --sc-accent-text: #e6c7c7;
  --sc-accent-line: rgba(230, 199, 199, 0.3);
  --sc-chip-bg: rgba(255, 255, 255, 0.06);
  --sc-chip-hover: rgba(255, 255, 255, 0.1);
}

@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 var(--sc-border);
}

.PricingSummaryCard_cardTitle__\+Qkm5 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--sc-title);
  margin: 0;
}

.PricingSummaryCard_modelCount__DkT-l {
  background: var(--sc-accent-solid);
  color: var(--sc-accent-on);
  padding: 10px 20px;
  border-radius: 25px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  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 var(--sc-divider);
  /* 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: var(--sc-subtle);
  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: var(--sc-chip-bg);
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.PricingSummaryCard_providerItem__ypD9u:hover {
  background: var(--sc-chip-hover);
  transform: translateX(4px);
  border-color: var(--sc-accent-line);
}

.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: var(--sc-strong);
  flex: 1 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PricingSummaryCard_providerCount__uYlc- {
  background: var(--sc-count-bg);
  color: var(--sc-count);
  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: var(--sc-mid);
  min-width: 60px;
}

.PricingSummaryCard_tierBar__rrgyW {
  flex: 1 1;
  height: 8px;
  background: var(--sc-track);
  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, #e6c7c7, #a35252);
  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: var(--sc-count);
  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: var(--sc-mid);
  font-weight: 500;
}

.PricingSummaryCard_pricingValue__pmlqP {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sc-strong);
  font-family: 'Inconsolata', monospace;
}

.PricingSummaryCard_progressBar__5rxw9 {
  height: 8px;
  background: var(--sc-track);
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0;
}

.PricingSummaryCard_progressFill__RWiA9 {
  height: 100%;
  background: linear-gradient(90deg, #e6c7c7, #a35252);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.PricingSummaryCard_percentage__9c-TZ {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sc-accent-text);
  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\+\+ {
  /* Light theme tokens mirror the brand palette (brand.css :root). Dark
     overrides live in .dark below. Themed via a .dark class prop, not
     body.dark-theme, so brand values are inlined per theme here. */
  --pm-panel: rgba(255, 255, 255, 0.96);
  --pm-panel-border: rgba(120, 95, 95, 0.28);
  --pm-header-grad-a: rgba(255, 255, 255, 0.8);
  --pm-header-grad-b: rgba(247, 242, 239, 0.6);
  --pm-divider: rgba(120, 95, 95, 0.16);
  --pm-title: #262020;
  --pm-text: rgba(38, 32, 32, 0.75);
  --pm-subtitle: rgba(38, 32, 32, 0.7);
  --pm-group-bg: rgba(247, 242, 239, 0.85);
  --pm-item-bg: rgba(255, 255, 255, 0.7);
  --pm-item-hover: rgba(255, 255, 255, 0.95);
  --pm-item-border: rgba(120, 95, 95, 0.16);
  --pm-close-bg: rgba(255, 255, 255, 0.8);
  --pm-close-border: rgba(120, 95, 95, 0.28);
  --pm-close-text: rgba(38, 32, 32, 0.5);

  /* Brand accent + tier chip */
  --pm-accent-solid: #e6c7c7;
  --pm-accent-on: #1a1a1a;
  --pm-accent-text: #a35252;
  --pm-accent-line-strong: rgba(163, 82, 82, 0.5);
  --pm-glow: rgba(163, 82, 82, 0.15);
  --pm-pro-text: #3a5a7a;
  --pm-pro-bg: rgba(90, 120, 160, 0.12);
  --pm-pro-border: rgba(90, 120, 160, 0.4);

  background: var(--pm-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--pm-panel-border);
  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 */
}

.PricingModal_modalContent__ldk\+\+.PricingModal_dark__FinOV {
  --pm-panel: rgba(12, 12, 15, 0.88);
  --pm-panel-border: rgba(100, 100, 110, 0.5);
  --pm-header-grad-a: rgba(40, 40, 46, 0.6);
  --pm-header-grad-b: rgba(24, 23, 22, 0.5);
  --pm-divider: rgba(100, 100, 110, 0.25);
  --pm-title: rgba(255, 255, 255, 0.95);
  --pm-text: rgba(255, 255, 255, 0.7);
  --pm-subtitle: rgba(255, 255, 255, 0.7);
  --pm-group-bg: rgba(30, 30, 35, 0.6);
  --pm-item-bg: rgba(40, 40, 46, 0.55);
  --pm-item-hover: rgba(40, 40, 46, 0.75);
  --pm-item-border: rgba(100, 100, 110, 0.25);
  --pm-close-bg: rgba(30, 30, 35, 0.6);
  --pm-close-border: rgba(100, 100, 110, 0.5);
  --pm-close-text: rgba(255, 255, 255, 0.7);

  /* Brand accent + tier chip (dark) */
  --pm-accent-solid: #e6c7c7;
  --pm-accent-on: #1a1a1a;
  --pm-accent-text: #e6c7c7;
  --pm-accent-line-strong: rgba(230, 199, 199, 0.55);
  --pm-glow: rgba(230, 199, 199, 0.14);
  --pm-pro-text: #9fb3c8;
  --pm-pro-bg: rgba(130, 150, 175, 0.15);
  --pm-pro-border: rgba(159, 179, 200, 0.35);
}

@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 var(--pm-divider);
  background: linear-gradient(
    135deg,
    var(--pm-header-grad-a),
    var(--pm-header-grad-b)
  );
}

.PricingModal_modelInfo__cdQdi {
  flex: 1 1;
}

.PricingModal_modelName__N\+6W6 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--pm-title);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.PricingModal_modelDescription__HnNZR {
  font-size: 1rem;
  color: var(--pm-text);
  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: var(--pm-pro-bg);
  color: var(--pm-pro-text);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--pm-pro-border);
}

.PricingModal_closeButton__oaUP3 {
  background: var(--pm-close-bg);
  border: 2px solid var(--pm-close-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  color: var(--pm-close-text);
  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: var(--pm-accent-solid);
  border-color: var(--pm-accent-solid);
  color: var(--pm-accent-on);
  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: var(--pm-group-bg);
  border-radius: 15px;
  padding: 20px;
  border-left: 4px solid var(--pm-accent-line-strong);
  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: var(--pm-title);
  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: var(--pm-subtitle);
  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: var(--pm-item-bg);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--pm-item-border);
  transition: all 0.2s ease;
}

.PricingModal_priceItem__54zQm:hover,
.PricingModal_resolutionItem__qby6Y:hover {
  background: var(--pm-item-hover);
  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: var(--pm-text);
  font-weight: 500;
}

.PricingModal_priceValue__hf99M,
.PricingModal_resolutionPrice__buspq {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pm-accent-text);
  font-family: 'Inconsolata', monospace;
  background: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--pm-accent-text);
  background-clip: text;
}

.PricingModal_modalFooter__VUlAR {
  padding: 20px 30px;
  border-top: 1px solid var(--pm-divider);
  background: linear-gradient(
    135deg,
    var(--pm-header-grad-a),
    var(--pm-header-grad-b)
  );
  text-align: center;
}

.PricingModal_pricingUnit__Xyg1o {
  font-size: 0.9rem;
  color: var(--pm-text);
  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: var(--pm-item-border);
    border-radius: 3px;
  }

  .PricingModal_priceGrid__eLVfu::-webkit-scrollbar-thumb,
  .PricingModal_resolutionGrid__riEPp::-webkit-scrollbar-thumb {
    background: var(--pm-accent-line-strong);
    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;
  }
}

.RoadMapPage_roadmapContainer__abSAR {
  /* Light theme mirrors the brand palette (brand.css :root). Themed via a
     wrapper class (.roadmapDark), not body.dark-theme, so brand values are
     inlined per theme. The Vanta canvas background colour is set in
     RoadMapPage.js and should be synced to #f7f2ef / #0f0e0d there. */
  --rm-bg: rgba(247, 242, 239, 0.9);
  --rm-bg-solid: #f7f2ef;
  --rm-text-hi: #262020;
  --rm-text-mid: rgba(38, 32, 32, 0.75);
  --rm-title: rgba(38, 32, 32, 0.4);
  --rm-border-soft: rgba(120, 95, 95, 0.16);
  --rm-panel: rgba(255, 255, 255, 0.95);
  --rm-panel-border: rgba(120, 95, 95, 0.16);
  --rm-panel-shadow: rgba(90, 60, 60, 0.14);
  --rm-tag-bg: rgba(38, 32, 32, 0.06);
  --rm-tag-text: #262020;
  --rm-scroll-panel: rgba(255, 255, 255, 0.9);
  --rm-scroll-shadow: rgba(90, 60, 60, 0.14);
  --rm-scrollbar-track: rgba(38, 32, 32, 0.06);
  --rm-accent: #e6c7c7;
  --rm-accent-text: #a35252;
  --rm-accent-strong: #a35252;
  --rm-accent-border: rgba(163, 82, 82, 0.4);
  --rm-glow: rgba(163, 82, 82, 0.18);
  --rm-toggle-bg: rgba(255, 255, 255, 0.7);
  --rm-toggle-border: rgba(120, 95, 95, 0.28);
  --rm-toggle-color: rgba(38, 32, 32, 0.7);
  --rm-toggle-hover-bg: rgba(255, 255, 255, 0.9);
  --rm-toggle-hover-border: rgba(163, 82, 82, 0.55);
  --rm-toggle-hover-color: #262020;

  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--rm-bg);
}

/* Dark theme overrides */
.RoadMapPage_roadmapDark__2yFzn {
  --rm-bg: rgba(15, 14, 13, 0.9);
  --rm-bg-solid: #0f0e0d;
  --rm-text-hi: rgba(255, 255, 255, 0.95);
  --rm-text-mid: rgba(255, 255, 255, 0.7);
  --rm-title: rgba(255, 255, 255, 0.55);
  --rm-border-soft: rgba(100, 100, 110, 0.25);
  --rm-panel: rgba(30, 30, 35, 0.9);
  --rm-panel-border: rgba(100, 100, 110, 0.5);
  --rm-panel-shadow: rgba(0, 0, 0, 0.6);
  --rm-tag-bg: rgba(255, 255, 255, 0.1);
  --rm-tag-text: rgba(255, 255, 255, 0.95);
  --rm-scroll-panel: rgba(30, 30, 35, 0.85);
  --rm-scroll-shadow: rgba(0, 0, 0, 0.5);
  --rm-scrollbar-track: rgba(255, 255, 255, 0.08);
  --rm-accent-text: #e6c7c7;
  --rm-accent-strong: #e6c7c7;
  --rm-accent-border: rgba(230, 199, 199, 0.5);
  --rm-glow: rgba(230, 199, 199, 0.22);
  --rm-toggle-bg: rgba(30, 30, 35, 0.6);
  --rm-toggle-border: rgba(100, 100, 110, 0.5);
  --rm-toggle-color: rgba(255, 255, 255, 0.85);
  --rm-toggle-hover-bg: rgba(50, 50, 55, 0.8);
  --rm-toggle-hover-border: rgba(140, 140, 150, 0.7);
  --rm-toggle-hover-color: #fff;
}

/* 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 var(--rm-border-soft);
}

.RoadMapPage_mainTitle__pxuWm {
  margin-left: 20px;
  transform: translateX(0); /* Remove horizontal centering */
  font-size: 3rem;
  font-weight: 100;
  color: var(--rm-title);
  z-index: 5;
  font-family: 'Urbanist';
}

.RoadMapPage_titleAccent__jP1tn {
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--rm-accent-strong) 0%,
    var(--rm-accent-strong) 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: var(--rm-text-mid);
  margin: 0;
  position: absolute;
  left: 40px;
}

/* Theme toggle button */
.RoadMapPage_themeToggle__RBaB1 {
  position: fixed;
  top: 25px;
  right: 84px;
  z-index: 100;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--rm-toggle-bg);
  border: 1px solid var(--rm-toggle-border);
  color: var(--rm-toggle-color);
}

.RoadMapPage_themeToggle__RBaB1:hover {
  background: var(--rm-toggle-hover-bg);
  border-color: var(--rm-toggle-hover-border);
  color: var(--rm-toggle-hover-color);
  transform: translateY(-2px);
}

.RoadMapPage_themeToggle__RBaB1:active {
  transform: translateY(0);
}

.RoadMapPage_themeToggle__RBaB1:focus-visible {
  outline: 2px solid var(--rm-accent);
  outline-offset: 2px;
}

/* Close Button */
.RoadMapPage_closeButton__wWEKA {
  position: fixed;
  top: 25px;
  right: 25px;
  background: transparent;
  color: var(--rm-toggle-color);
  border: 2px solid var(--rm-toggle-border);
  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: var(--rm-accent);
  color: #1a1a1a;
  border-color: var(--rm-accent);
  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: var(--rm-scrollbar-track);
  border-radius: 4px;
}

.RoadMapPage_scrollContainer__AYHZd::-webkit-scrollbar-thumb {
  background: var(--rm-accent);
  border-radius: 4px;
}

.RoadMapPage_scrollContainer__AYHZd::-webkit-scrollbar-thumb:hover {
  background: var(--rm-accent-strong);
}

/* 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, #a35252 0%, #7d3d3d 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: var(--rm-text-hi);
  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 var(--rm-glow);
}

.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: var(--rm-panel);
  border-radius: 16px;
  padding: 18px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--rm-panel-border);
  box-shadow: 0 4px 16px var(--rm-panel-shadow);
  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,
    var(--rm-accent-strong),
    transparent
  );
  background: linear-gradient(
    90deg,
    transparent,
    var(--status-color, var(--rm-accent-strong)),
    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: var(--rm-text-hi);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.RoadMapPage_nodeSubtitle__0OxW8 {
  font-weight: 400;
  color: var(--rm-text-mid);
  display: block;
  font-size: 0.95rem;
}

.RoadMapPage_nodeDescription__LvJfB {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.8rem;
  color: var(--rm-text-mid);
  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: var(--rm-tag-text);
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--rm-tag-bg); /* 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: var(--rm-scroll-panel);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--rm-accent-border);
  font-family: 'Urbanist', sans-serif;
  font-size: 0.85rem;
  color: var(--rm-text-mid);
  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 var(--rm-scroll-shadow);
}

/* Footer Stats - Fixed */
.RoadMapPage_footer__ET-qQ {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: var(--rm-bg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 15px 0;
  border-top: 1px solid var(--rm-border-soft);
  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;
  color: var(--rm-accent-strong);
  -webkit-text-fill-color: var(--rm-accent-strong);
  background: none;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}

.RoadMapPage_statLabel__PPTKy {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.8rem;
  color: var(--rm-text-mid);
  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: var(
      --rm-bg-solid
    ); /* 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 {
  /* Light theme mirrors the brand palette (brand.css :root). Themed via a
     wrapper class (.teamDark), not body.dark-theme, so brand values are
     inlined per theme. The Vanta canvas background colour is set in
     TeamPage.js and should be synced to #f7f2ef / #0f0e0d there. */
  --tm-bg-solid: #f7f2ef;
  --tm-text-hi: #262020;
  --tm-text-mid: rgba(38, 32, 32, 0.75);
  --tm-card-bg: rgba(255, 255, 255, 0.85);
  --tm-card-bg-hover: rgba(255, 255, 255, 0.95);
  --tm-card-border: rgba(120, 95, 95, 0.28);
  --tm-card-shadow: rgba(90, 60, 60, 0.14);
  --tm-image-border: rgba(120, 95, 95, 0.25);
  --tm-image-shadow: rgba(90, 60, 60, 0.14);
  --tm-footer-bg: rgba(255, 255, 255, 0.7);
  --tm-footer-border: rgba(120, 95, 95, 0.16);
  --tm-scrollbar-track: rgba(38, 32, 32, 0.08);
  --tm-scrollbar-thumb: rgba(163, 82, 82, 0.35);
  --tm-scrollbar-thumb-hover: rgba(163, 82, 82, 0.55);
  --tm-accent: #e6c7c7;
  --tm-accent-text: #a35252;
  --tm-toggle-bg: rgba(255, 255, 255, 0.7);
  --tm-toggle-border: rgba(120, 95, 95, 0.28);
  --tm-toggle-color: rgba(38, 32, 32, 0.7);
  --tm-toggle-hover-bg: rgba(255, 255, 255, 0.9);
  --tm-toggle-hover-border: rgba(163, 82, 82, 0.55);
  --tm-toggle-hover-color: #262020;

  min-height: 100vh;
  width: 100vw;
  overflow-y: auto;
  position: relative;
  padding: 0;
  scroll-behavior: smooth;
}

/* Dark theme overrides */
.TeamPage_teamDark__IKK-C {
  --tm-bg-solid: #0f0e0d;
  --tm-text-hi: rgba(255, 255, 255, 0.95);
  --tm-text-mid: rgba(255, 255, 255, 0.7);
  --tm-card-bg: rgba(30, 30, 35, 0.6);
  --tm-card-bg-hover: rgba(40, 40, 46, 0.75);
  --tm-card-border: rgba(100, 100, 110, 0.5);
  --tm-card-shadow: rgba(0, 0, 0, 0.6);
  --tm-image-border: rgba(100, 100, 110, 0.5);
  --tm-image-shadow: rgba(0, 0, 0, 0.5);
  --tm-footer-bg: rgba(30, 30, 35, 0.6);
  --tm-footer-border: rgba(100, 100, 110, 0.5);
  --tm-scrollbar-track: rgba(255, 255, 255, 0.08);
  --tm-scrollbar-thumb: rgba(230, 199, 199, 0.3);
  --tm-scrollbar-thumb-hover: rgba(230, 199, 199, 0.5);
  --tm-accent-text: #e6c7c7;
  --tm-toggle-bg: rgba(30, 30, 35, 0.6);
  --tm-toggle-border: rgba(100, 100, 110, 0.5);
  --tm-toggle-color: rgba(255, 255, 255, 0.85);
  --tm-toggle-hover-bg: rgba(50, 50, 55, 0.8);
  --tm-toggle-hover-border: rgba(140, 140, 150, 0.7);
  --tm-toggle-hover-color: #fff;
}

.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: var(--tm-text-hi);
  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: var(--tm-text-mid);
  font-family: 'Inconsolata', monospace;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Theme toggle button */
.TeamPage_themeToggle__Vlrl6 {
  position: fixed;
  top: 25px;
  right: 84px;
  z-index: 100;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--tm-toggle-bg);
  border: 1px solid var(--tm-toggle-border);
  color: var(--tm-toggle-color);
}

.TeamPage_themeToggle__Vlrl6:hover {
  background: var(--tm-toggle-hover-bg);
  border-color: var(--tm-toggle-hover-border);
  color: var(--tm-toggle-hover-color);
  transform: translateY(-2px);
}

.TeamPage_themeToggle__Vlrl6:active {
  transform: translateY(0);
}

.TeamPage_themeToggle__Vlrl6:focus-visible {
  outline: 2px solid var(--tm-accent);
  outline-offset: 2px;
}

.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: var(--tm-card-bg);
  border-radius: 20px;
  padding: 30px;
  border: 1px solid var(--tm-card-border);
  -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, var(--tm-accent-text), transparent);
  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 var(--tm-card-shadow);
  background: var(--tm-card-bg-hover);
}

.TeamPage_memberImage__87nfB {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--tm-image-border);
  box-shadow: 0 8px 32px var(--tm-image-shadow);
}

.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: var(--tm-text-hi);
  margin: 0 0 8px 0;
}

.TeamPage_memberRole__bLZy4 {
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tm-accent-text);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.TeamPage_memberDescription__kW9PQ {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.95rem;
  color: var(--tm-text-mid);
  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: var(--tm-text-mid);
  margin: 0;
  padding: 16px 24px;
  background: var(--tm-footer-bg);
  border-radius: 25px;
  border: 1px solid var(--tm-footer-border);
  -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: var(
      --tm-bg-solid
    ); /* 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: var(--tm-scrollbar-track);
  border-radius: 4px;
}

.TeamPage_teamContainer__h2\+ZN::-webkit-scrollbar-thumb {
  background: var(--tm-scrollbar-thumb);
  border-radius: 4px;
}

.TeamPage_teamContainer__h2\+ZN::-webkit-scrollbar-thumb:hover {
  background: var(--tm-scrollbar-thumb-hover);
}

/* 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;

  /* Theme tokens — literal values copied from the Concept Canvas brand
     tokens (brand.css). Kept as hardcoded per-state literals (rather than
     referencing var(--cc-*) directly) because this page toggles
     `.pageDark` from its own local state, independent of the global
     body.dark-theme/light-theme class — a live var(--cc-*) reference would
     follow whatever theme the rest of the app last set on <body>, not this
     page's own toggle. */
  --tp-bg: #f7f2ef;
  --tp-title: #262020;
  --tp-subtitle: #262020;
  --tp-section-title: #262020;
  --tp-section-border: #e6c7c7;
  --tp-section-text: rgba(38, 32, 32, 0.75);
  --tp-intro-text: #262020;
  --tp-email: #a35252;
  --tp-email-hover: #b88888;
  --tp-scrollbar-thumb: rgba(230, 199, 199, 0.5);
  --tp-scrollbar-thumb-hover: rgba(230, 199, 199, 0.8);
}

.TermsPage_termsContainer__qgebN.TermsPage_pageDark__hdK11 {
  --tp-bg: #000000;
  --tp-title: rgba(255, 255, 255, 0.95);
  --tp-subtitle: rgba(255, 255, 255, 0.95);
  --tp-section-title: rgba(255, 255, 255, 0.95);
  --tp-section-border: #e6c7c7;
  --tp-section-text: rgba(255, 255, 255, 0.7);
  --tp-intro-text: rgba(255, 255, 255, 0.95);
  --tp-email: #e6c7c7;
  --tp-email-hover: #f2dcdc;
  --tp-scrollbar-thumb: rgba(230, 199, 199, 0.5);
  --tp-scrollbar-thumb-hover: rgba(230, 199, 199, 0.8);
}

.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: var(--tp-title) !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: var(--tp-subtitle) !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: var(--tp-scrollbar-thumb) 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: var(--tp-scrollbar-thumb);
  border-radius: 4px;
}

.TermsPage_content__AGzly::-webkit-scrollbar-thumb:hover {
  background: var(--tp-scrollbar-thumb-hover);
}

.TermsPage_section__IYCDz {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
}

.TermsPage_sectionTitle__3Qj2e {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--tp-section-title) !important;
  margin-bottom: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--tp-section-border);
  padding-bottom: 8px;
}

.TermsPage_sectionText__UYqP3 {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--tp-section-text) !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: var(--tp-intro-text) !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: var(--tp-email) !important;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.TermsPage_emailLink__na62e:hover {
  color: var(--tp-email-hover) !important;
  text-decoration: none;
}

/* Bullet List Styling */
.TermsPage_bulletList__Fw3fg {
  margin: 15px 0;
  padding-left: 30px;
  color: var(--tp-section-text) !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: var(
      --tp-bg
    ); /* 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;
  }
}

/* Theme toggle button (top-right, just left of the × close button) */
.TermsPage_themeToggle__bAc2t {
  position: fixed;
  top: 25px;
  right: 84px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(120, 95, 95, 0.28);
  color: rgba(38, 32, 32, 0.75);
}

.TermsPage_termsContainer__qgebN.TermsPage_pageDark__hdK11 .TermsPage_themeToggle__bAc2t {
  background: rgba(30, 30, 35, 0.6);
  border-color: rgba(100, 100, 110, 0.5);
  color: rgba(255, 255, 255, 0.7);
}

.TermsPage_themeToggle__bAc2t:hover {
  transform: translateY(-2px);
}

.TermsPage_themeToggle__bAc2t:focus-visible {
  outline: 2px solid #e6c7c7;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .TermsPage_themeToggle__bAc2t {
    right: 78px;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}

/* 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;

  /* Theme tokens — literal values copied from the Concept Canvas brand
     tokens (brand.css). Kept as hardcoded per-state literals (rather than
     referencing var(--cc-*) directly) because this page toggles
     `.pageDark` from its own local state, independent of the global
     body.dark-theme/light-theme class — a live var(--cc-*) reference would
     follow whatever theme the rest of the app last set on <body>, not this
     page's own toggle. */
  --pp-bg: #f7f2ef;
  --pp-title: #262020;
  --pp-subtitle: #262020;
  --pp-section-title: #262020;
  --pp-section-border: #e6c7c7;
  --pp-section-text: rgba(38, 32, 32, 0.75);
  --pp-intro-text: rgba(38, 32, 32, 0.75);
  --pp-email: #a35252;
  --pp-email-hover: #b88888;
  --pp-scrollbar-thumb: rgba(230, 199, 199, 0.5);
  --pp-scrollbar-thumb-hover: rgba(230, 199, 199, 0.8);
}

.PrivacyPage_privacyContainer__V5TIy.PrivacyPage_pageDark__1oGAh {
  --pp-bg: #000000;
  --pp-title: rgba(255, 255, 255, 0.95);
  --pp-subtitle: rgba(255, 255, 255, 0.95);
  --pp-section-title: rgba(255, 255, 255, 0.95);
  --pp-section-border: #e6c7c7;
  --pp-section-text: rgba(255, 255, 255, 0.7);
  --pp-intro-text: rgba(255, 255, 255, 0.7);
  --pp-email: #e6c7c7;
  --pp-email-hover: #f2dcdc;
  --pp-scrollbar-thumb: rgba(230, 199, 199, 0.5);
  --pp-scrollbar-thumb-hover: rgba(230, 199, 199, 0.8);
}

.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: var(--pp-title) !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: var(--pp-subtitle) !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: var(--pp-scrollbar-thumb) 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: var(--pp-scrollbar-thumb);
  border-radius: 4px;
}

.PrivacyPage_content__XLKNA::-webkit-scrollbar-thumb:hover {
  background: var(--pp-scrollbar-thumb-hover);
}

.PrivacyPage_section__mGR7o {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
}

.PrivacyPage_sectionTitle__ZsXKE {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--pp-section-title) !important;
  margin-bottom: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--pp-section-border);
  padding-bottom: 8px;
}

.PrivacyPage_sectionText__xg6fN {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--pp-section-text) !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: var(--pp-intro-text) !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: var(--pp-email) !important;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.PrivacyPage_emailLink__fsJms:hover {
  color: var(--pp-email-hover) !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: var(
      --pp-bg
    ); /* 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;
  }
}

/* Theme toggle button (top-right, just left of the × close button) */
.PrivacyPage_themeToggle__IIrcd {
  position: fixed;
  top: 25px;
  right: 84px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(120, 95, 95, 0.28);
  color: rgba(38, 32, 32, 0.75);
}

.PrivacyPage_privacyContainer__V5TIy.PrivacyPage_pageDark__1oGAh .PrivacyPage_themeToggle__IIrcd {
  background: rgba(30, 30, 35, 0.6);
  border-color: rgba(100, 100, 110, 0.5);
  color: rgba(255, 255, 255, 0.7);
}

.PrivacyPage_themeToggle__IIrcd:hover {
  transform: translateY(-2px);
}

.PrivacyPage_themeToggle__IIrcd:focus-visible {
  outline: 2px solid #e6c7c7;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .PrivacyPage_themeToggle__IIrcd {
    right: 78px;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}

/* 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;

  /* Theme tokens — literal values copied from the Concept Canvas brand
     tokens (brand.css). Kept as hardcoded per-state literals (rather than
     referencing var(--cc-*) directly) because this page toggles
     `.pageDark` from its own local state, independent of the global
     body.dark-theme/light-theme class — a live var(--cc-*) reference would
     follow whatever theme the rest of the app last set on <body>, not this
     page's own toggle. */
  --cp-bg: #f7f2ef;
  --cp-title: #262020;
  --cp-subtitle: #262020;
  --cp-section-title: #262020;
  --cp-section-border: #e6c7c7;
  --cp-section-text: rgba(38, 32, 32, 0.75);
  --cp-intro-text: #262020;
  --cp-email: #a35252;
  --cp-email-hover: #b88888;
  --cp-scrollbar-thumb: rgba(230, 199, 199, 0.5);
  --cp-scrollbar-thumb-hover: rgba(230, 199, 199, 0.8);
}

.CookiePage_cookieContainer__XBo32.CookiePage_pageDark__wjBQl {
  --cp-bg: #000000;
  --cp-title: rgba(255, 255, 255, 0.95);
  --cp-subtitle: rgba(255, 255, 255, 0.95);
  --cp-section-title: rgba(255, 255, 255, 0.95);
  --cp-section-border: #e6c7c7;
  --cp-section-text: rgba(255, 255, 255, 0.7);
  --cp-intro-text: rgba(255, 255, 255, 0.95);
  --cp-email: #e6c7c7;
  --cp-email-hover: #f2dcdc;
  --cp-scrollbar-thumb: rgba(230, 199, 199, 0.5);
  --cp-scrollbar-thumb-hover: rgba(230, 199, 199, 0.8);
}

.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: var(--cp-title) !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: var(--cp-subtitle) !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: var(--cp-scrollbar-thumb) 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: var(--cp-scrollbar-thumb);
  border-radius: 4px;
}

.CookiePage_content__ihzVo::-webkit-scrollbar-thumb:hover {
  background: var(--cp-scrollbar-thumb-hover);
}

.CookiePage_section__RwYyp {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  border: none;
}

.CookiePage_sectionTitle__Ygr7s {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--cp-section-title) !important;
  margin-bottom: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--cp-section-border);
  padding-bottom: 8px;
}

.CookiePage_sectionText__bC2Ju {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--cp-section-text) !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: var(--cp-intro-text) !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: var(--cp-email) !important;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.CookiePage_emailLink__KadWm:hover {
  color: var(--cp-email-hover) !important;
  text-decoration: none;
}

/* Bullet List Styling */
.CookiePage_bulletList__KcMe9 {
  margin: 15px 0;
  padding-left: 30px;
  color: var(--cp-section-text) !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: var(
      --cp-bg
    ); /* 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;
  }
}

/* Theme toggle button (top-right, just left of the × close button) */
.CookiePage_themeToggle__SriSE {
  position: fixed;
  top: 25px;
  right: 84px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(120, 95, 95, 0.28);
  color: rgba(38, 32, 32, 0.75);
}

.CookiePage_cookieContainer__XBo32.CookiePage_pageDark__wjBQl .CookiePage_themeToggle__SriSE {
  background: rgba(30, 30, 35, 0.6);
  border-color: rgba(100, 100, 110, 0.5);
  color: rgba(255, 255, 255, 0.7);
}

.CookiePage_themeToggle__SriSE:hover {
  transform: translateY(-2px);
}

.CookiePage_themeToggle__SriSE:focus-visible {
  outline: 2px solid #e6c7c7;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .CookiePage_themeToggle__SriSE {
    right: 78px;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}

/* src/Landing Page/FAQ/FAQPage.module.css */

.FAQPage_faqContainer__aL03- {
  /* Theme tokens. The light values below mirror the app's brand palette
     (see src/styles/brand.css); the `.pageDark` block at the end of this
     file overrides them (plus a few surfaces that can't be expressed as a
     single token) for dark mode. */
  --faq-bg: #f7f2ef;
  --faq-panel: rgba(255, 255, 255, 0.8);
  --faq-text: #262020;
  --faq-text-secondary: rgba(38, 32, 32, 0.75);

  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--faq-bg);
  color: var(--faq-text);
  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: rgba(38, 32, 32, 0.75);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.FAQPage_searchButton__qu-JX:hover {
  color: #262020;
  background: rgba(38, 32, 32, 0.06);
}

.FAQPage_searchInputContainer__BZmZ3 {
  display: flex;
  align-items: center;
  background: var(--faq-panel);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid rgba(120, 95, 95, 0.16);
  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: rgba(38, 32, 32, 0.75);
  cursor: pointer;
  margin-top: 2px;
  font-size: 1rem;
}

.FAQPage_searchCloseButton__B8G35:hover {
  color: #262020;
}

/* 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: var(--faq-panel);
  border-radius: 20px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(120, 95, 95, 0.16);
  box-shadow: 0 4px 24px rgba(90, 60, 60, 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: #262020;
  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: rgba(38, 32, 32, 0.75);
  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(38, 32, 32, 0.06);
  color: #262020;
  transform: translateX(4px);
}

.FAQPage_categoryActive__hlDGd {
  background: #e6c7c7 !important;
  color: #1a1a1a !important;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(90, 60, 60, 0.18);
}

.FAQPage_categoryActive__hlDGd:hover {
  transform: none !important;
  background: #f2dcdc !important;
}

/* Right Section - Questions/Answer View */
.FAQPage_rightSection__WUR4w {
  flex: 1 1;
  background: var(--faq-panel);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(120, 95, 95, 0.28);
  box-shadow:
    0 8px 32px rgba(90, 60, 60, 0.12),
    0 2px 16px rgba(90, 60, 60, 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(90, 60, 60, 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(38, 32, 32, 0.06);
  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(163, 82, 82, 0.2);
  width: 12px;
}

.FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR {
  background: rgba(163, 82, 82, 0.4);
  width: 12px;
  box-shadow: 0 0 15px rgba(163, 82, 82, 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(120, 95, 95, 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(120, 95, 95, 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(163, 82, 82, 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(163, 82, 82, 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: var(--faq-panel);
  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: #262020;
  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(120, 95, 95, 0.16);
  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(90, 60, 60, 0.1);
}

.FAQPage_faqItem__BuJ3r:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(163, 82, 82, 0.3);
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(163, 82, 82, 0.15),
    0 4px 12px rgba(90, 60, 60, 0.1);
}

.FAQPage_faqItemSelected__bTbgt {
  /* background: linear-gradient(135deg, rgba(163, 82, 82, 0.08) 0%, rgba(163, 82, 82, 0.05) 100%); */
  border-color: rgba(163, 82, 82, 0.4);
  transform: translateY(-1px);
  box-shadow:
    0 4px 15px rgba(163, 82, 82, 0.2),
    0 2px 6px rgba(90, 60, 60, 0.1);
}

.FAQPage_faqItemSelected__bTbgt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e6c7c7;
  border-radius: 2px 0 0 2px;
}

.FAQPage_faqQuestion__VIz50 {
  font-size: 1rem;
  font-weight: 500;
  color: #262020;
  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(163, 82, 82, 0.12);
  color: #a35252;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(163, 82, 82, 0.55);
  transition: all 0.2s ease;
}

.FAQPage_faqCategory__uP9nv:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(90, 60, 60, 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(163, 82, 82, 0.12);
  color: #a35252;
  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(163, 82, 82, 0.55);
  transition: all 0.2s ease;
}

.FAQPage_faqTag__zCwDq:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(90, 60, 60, 0.1);
}

/* Enhanced Status Tags */
.FAQPage_faqTag__zCwDq.FAQPage_pending__SBaIP {
  background: rgba(180, 140, 40, 0.14);
  color: #8a6a1f;
  border: 1px solid rgba(180, 140, 40, 0.4);
}

.FAQPage_faqTag__zCwDq.FAQPage_pending__SBaIP::before {
  content: '❓';
  font-size: 0.8rem;
}

.FAQPage_faqTag__zCwDq.FAQPage_userSubmitted__85l3s {
  background: rgba(90, 120, 160, 0.12);
  color: #3a5a7a;
  border: 1px solid rgba(90, 120, 160, 0.4);
}

.FAQPage_faqTag__zCwDq.FAQPage_userSubmitted__85l3s::before {
  content: '👤';
  font-size: 0.8rem;
}

.FAQPage_faqTag__zCwDq.FAQPage_approved__wMRQg {
  background: rgba(90, 140, 90, 0.12);
  color: #3c6b3a;
  border: 1px solid rgba(90, 140, 90, 0.4);
}

.FAQPage_faqTag__zCwDq.FAQPage_approved__wMRQg::before {
  content: '✅';
  font-size: 0.8rem;
}

.FAQPage_faqTag__zCwDq.FAQPage_official__WY05q {
  background: #e6c7c7;
  color: #1a1a1a;
  border: 1px solid rgba(163, 82, 82, 0.55);
}

.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: #a35252; */
  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(163, 82, 82, 0.55);
  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(90, 60, 60, 0.1);
}

/* Status-specific styling for answer tags */
.FAQPage_answerTag__0pUsg.FAQPage_pending__SBaIP {
  background: rgba(180, 140, 40, 0.14);
  color: #8a6a1f;
  border: 1px solid rgba(180, 140, 40, 0.4);
}

.FAQPage_answerTag__0pUsg.FAQPage_pending__SBaIP::before {
  content: '❓';
  font-size: 0.8rem;
}

.FAQPage_answerTag__0pUsg.FAQPage_userSubmitted__85l3s {
  background: rgba(90, 120, 160, 0.12);
  color: #3a5a7a;
  border: 1px solid rgba(90, 120, 160, 0.4);
}

.FAQPage_answerTag__0pUsg.FAQPage_userSubmitted__85l3s::before {
  content: '👤';
  font-size: 0.8rem;
}

.FAQPage_answerTag__0pUsg.FAQPage_approved__wMRQg {
  background: rgba(90, 140, 90, 0.12);
  color: #3c6b3a;
  border: 1px solid rgba(90, 140, 90, 0.4);
}

.FAQPage_answerTag__0pUsg.FAQPage_approved__wMRQg::before {
  content: '✅';
  font-size: 0.8rem;
}

.FAQPage_answerTag__0pUsg.FAQPage_official__WY05q {
  background: #e6c7c7;
  color: #1a1a1a;
  border: 1px solid rgba(163, 82, 82, 0.55);
}

.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: #a04545;
  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(160, 69, 69, 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(120, 95, 95, 0.16);
  position: relative;
}

.FAQPage_questionDetailHeader__qx\+s-::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #e6c7c7;
  border-radius: 2px;
}

.FAQPage_questionDetailTitle__TabET {
  font-size: 2rem;
  font-weight: 700;
  color: #262020;
  margin: 0 0 1.5rem 0;
  font-family: 'Urbanist', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.025em;
  background: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #262020;
}

.FAQPage_questionDetailCategory__lha0G {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  background: #e6c7c7;
  color: #1a1a1a;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(163, 82, 82, 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(163, 82, 82, 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: #e6c7c7;
  border-radius: 2px;
  opacity: 0.6;
}

/* Enhanced Tags Section */
.FAQPage_tagsSection__44mqn {
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(163, 82, 82, 0.03) 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  border-radius: 16px;
  border: 1px solid rgba(120, 95, 95, 0.16);
  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(163, 82, 82, 0.3),
    transparent
  );
}

.FAQPage_tagsSection__44mqn h4 {
  color: #262020;
  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(38, 32, 32, 0.06);
  border-radius: 12px;
  border-left: 4px solid rgba(120, 95, 95, 0.28);
  color: rgba(38, 32, 32, 0.5);
  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(163, 82, 82, 0.2),
    transparent
  );
}

/* Enhanced No Answer Section */
.FAQPage_noAnswerSection__POrRh {
  padding: 4rem 2rem;
  text-align: center;
  background: rgba(163, 82, 82, 0.05);
  border-radius: 20px;
  margin: 2rem 0;
  border: 1px solid rgba(120, 95, 95, 0.16);
  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(163, 82, 82, 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: #262020;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: 'Urbanist', sans-serif;
  background: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #262020;
}

.FAQPage_noAnswerContent__RzDXP p {
  color: rgba(38, 32, 32, 0.75);
  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: var(--faq-panel);
  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: rgba(38, 32, 32, 0.75);
  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: #262020;
}

.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: #e6c7c7;
  border: none;
  border-radius: 50%;
  color: #1a1a1a;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(163, 82, 82, 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(163, 82, 82, 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: #d9b96a;
  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(90, 140, 90, 0.15);
  border-radius: 8px;
  border-left: 4px solid #c9e6c7;
}

.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: #c9e6c7;
  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: #e6c7c7;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 4px rgba(230, 199, 199, 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: #e6c7c7;
  border: none;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Urbanist', sans-serif;
  box-shadow: 0 4px 12px rgba(230, 199, 199, 0.3);
}

.FAQPage_submitButton__6LPDC:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 199, 199, 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 rgba(120, 95, 95, 0.16);
  transition: background-color 0.2s ease;
}

.FAQPage_faqItem__BuJ3r:last-child {
  border-bottom: none;
}

.FAQPage_faqItem__BuJ3r:hover {
  background-color: rgba(255, 255, 255, 0.95);
}

.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 rgba(120, 95, 95, 0.16);
  border-top: 3px solid #e6c7c7;
  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: #a04545;
}

.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: #e6c7c7;
  color: #1a1a1a;
  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: #f2dcdc;
}

/* Load More Button */
.FAQPage_loadMoreContainer__Ojpyu {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
  margin-top: 1rem;
}

.FAQPage_loadMoreButton__yVhmm {
  background: #e6c7c7;
  color: #1a1a1a;
  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(163, 82, 82, 0.3);
}

.FAQPage_loadMoreButton__yVhmm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(163, 82, 82, 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(26, 26, 26, 0.3);
  border-top: 2px solid #1a1a1a;
  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: rgba(38, 32, 32, 0.5);
  font-style: italic;
}

.FAQPage_autoLoadingIndicator__pysXy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: rgba(38, 32, 32, 0.5);
  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: #a35252;
  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: #e6c7c7;
  color: #1a1a1a;
  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(163, 82, 82, 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: rgba(38, 32, 32, 0.5);
}

.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: rgba(38, 32, 32, 0.75);
  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: #262020;
  background: rgba(38, 32, 32, 0.06);
}

.FAQPage_loginIcon__WjhDf {
  font-size: 1rem;
}

.FAQPage_userInfo__y2IWC {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: rgba(38, 32, 32, 0.06);
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative; /* For dropdown positioning */
}

.FAQPage_userInfo__y2IWC:hover {
  background: rgba(38, 32, 32, 0.1);
}

.FAQPage_avatarImage__vdQD5 {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(120, 95, 95, 0.16);
  background-color: rgba(255, 255, 255, 0.1);
}

.FAQPage_userIcon__08N5B {
  font-size: 1rem;
  color: rgba(38, 32, 32, 0.75);
}

.FAQPage_userDetails__6UGDt {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.FAQPage_userName__4zLwu {
  font-size: 0.8rem;
  font-weight: 400;
  color: #262020;
  line-height: 1.2;
  font-family: 'Inconsolata';
}

.FAQPage_username__NbcSp {
  font-size: 0.7rem;
  font-weight: 300;
  color: rgba(38, 32, 32, 0.5);
  line-height: 1.2;
  font-family: 'Inconsolata';
}

/* Profile Dropdown Styles */
.FAQPage_profileDropdownIcon__-lR9W {
  font-size: 0.8rem;
  color: rgba(38, 32, 32, 0.5);
  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(140, 90, 90, 0.15);
  color: #e6c7c7;
}

.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: var(--faq-panel);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(120, 95, 95, 0.28);
  box-shadow:
    0 8px 32px rgba(90, 60, 60, 0.12),
    0 2px 16px rgba(90, 60, 60, 0.08);
  overflow: hidden;
}

.FAQPage_mobileDetailHeader__WRoE7 {
  padding: 1rem;
  border-bottom: 2px solid rgba(120, 95, 95, 0.16);
  background: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.FAQPage_mobileBackButton__WfJN2 {
  background: none;
  border: none;
  color: #a35252;
  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(163, 82, 82, 0.12);
  color: #a35252;
}

.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.4);
  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(163, 82, 82, 0.15);
  box-shadow: 0 4px 12px rgba(90, 60, 60, 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(90, 60, 60, 0.15);
  transform: translateY(-2px);
  border-color: rgba(163, 82, 82, 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,
    #a35252 0%,
    rgba(163, 82, 82, 0.4) 40%,
    rgba(120, 95, 95, 0.16) 100%
  );
  border-radius: 2px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(163, 82, 82, 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(163, 82, 82, 0.08);
  border-radius: 4px;
  z-index: 2;
}

.FAQPage_mobileQuestionList__W0USI {
  flex: 1 1;
  background: var(--faq-panel);
  border-radius: 16px;
  padding: 1rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(120, 95, 95, 0.28);
  box-shadow:
    0 8px 32px rgba(90, 60, 60, 0.12),
    0 2px 16px rgba(90, 60, 60, 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(120, 95, 95, 0.16);
  cursor: pointer;
  transition: all 0.2s ease;
}

.FAQPage_mobileFaqItem__y0iGk:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(163, 82, 82, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163, 82, 82, 0.12);
}

.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(120, 95, 95, 0.16);
  }

  /* 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: var(
      --faq-bg
    ); /* 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: var(
      --faq-bg
    ); /* 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(120, 95, 95, 0.16);
}

.FAQPage_userAnswersSection__0Mvbe h4 {
  color: rgba(38, 32, 32, 0.75);
  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: #ffffff;
  border: 1px solid rgba(120, 95, 95, 0.16);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  box-shadow: 0 2px 4px rgba(90, 60, 60, 0.05);
  transition: all 0.2s ease;
}

.FAQPage_userAnswer__T7bpx:hover {
  box-shadow: 0 4px 12px rgba(90, 60, 60, 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, #a35252, rgba(120, 95, 95, 0.16));
  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 rgba(120, 95, 95, 0.16);
}

.FAQPage_userAnswerAuthor__MGgtc {
  font-weight: 600;
  color: #a35252;
  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: rgba(38, 32, 32, 0.5);
}

.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: rgba(38, 32, 32, 0.75);
  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(120, 95, 95, 0.16);
}

.FAQPage_addAnswerButton__k8wD8 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #e6c7c7;
  color: #1a1a1a;
  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: #f2dcdc;
  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: #262020;
  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(120, 95, 95, 0.28);
  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: rgba(163, 82, 82, 0.55);
  box-shadow: 0 0 0 3px rgba(163, 82, 82, 0.12);
}

.FAQPage_answerTextarea__KPBEd::placeholder {
  color: rgba(38, 32, 32, 0.5);
}

.FAQPage_answerFormActions__DKCRF {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 10rem;
}

.FAQPage_cancelAnswerButton__VH3\+f {
  background: none;
  color: rgba(38, 32, 32, 0.75);
  border: 2px solid rgba(120, 95, 95, 0.16);
  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(38, 32, 32, 0.06);
  border-color: rgba(120, 95, 95, 0.28);
}

.FAQPage_submitAnswerButton__YLmAs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #e6c7c7;
  color: #1a1a1a;
  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: #f2dcdc;
}

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

.FAQPage_loginPrompt__DqUX4 {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(163, 82, 82, 0.06);
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(163, 82, 82, 0.2);
}

.FAQPage_loginPrompt__DqUX4 p {
  color: rgba(38, 32, 32, 0.75);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.FAQPage_loginPromptButton__W2o0A {
  background: #e6c7c7;
  color: #1a1a1a;
  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: #f2dcdc;
  transform: translateY(-1px);
}

/* Responsive Design for Answer Forms */
@media (max-width: 768px) {
  .FAQPage_faqContainer__aL03- {
    background-color: var(
      --faq-bg
    ); /* 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 rgba(120, 95, 95, 0.16);
    box-shadow: 0 3px 8px rgba(90, 60, 60, 0.08);
    position: relative;
  }

  .FAQPage_userAnswer__T7bpx:hover {
    box-shadow: 0 6px 16px rgba(90, 60, 60, 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,
      #a35252 0%,
      rgba(163, 82, 82, 0.4) 50%,
      rgba(120, 95, 95, 0.16) 100%
    );
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(163, 82, 82, 0.2);
  }

  .FAQPage_userAnswer__T7bpx:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    bottom: -1rem;
    width: 5px;
    height: 1rem;
    background: rgba(163, 82, 82, 0.12);
    border-radius: 3px;
    z-index: 1;
  }

  .FAQPage_userAnswerAuthor__MGgtc {
    font-size: 0.95rem;
    font-weight: 700;
  }

  .FAQPage_userAnswerDate__gqgKb {
    font-size: 0.85rem;
    color: rgba(38, 32, 32, 0.5);
  }

  .FAQPage_userAnswerText__rKutU {
    font-size: 1rem;
    line-height: 1.7;
    color: #262020;
  }

  /* 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: rgba(38, 32, 32, 0.5);
  font-size: 0.85rem;
  font-style: italic;
}

.FAQPage_communityStats__1WJaM {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(163, 82, 82, 0.06);
  border-radius: 8px;
  text-align: center;
}

.FAQPage_communityNote__z9\+A8 {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(90, 140, 90, 0.12);
  border-radius: 8px;
  border-left: 3px solid #3c6b3a;
}

.FAQPage_communityNote__z9\+A8 small {
  color: rgba(38, 32, 32, 0.75);
  line-height: 1.4;
}

/* Report Modal Styles */
.FAQPage_reportModalOverlay__gDI9f {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(38, 32, 32, 0.45);
  -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(90, 60, 60, 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: #a04545;
  font-size: 1.5rem;
}

.FAQPage_reportModalHeader__72eT9 h3 {
  margin: 0;
  color: #262020;
  font-weight: 600;
}

.FAQPage_reportModalContent__YHZut {
  margin-bottom: 1.5rem;
}

.FAQPage_reportModalContent__YHZut p {
  margin: 0 0 1rem 0;
  color: rgba(38, 32, 32, 0.75);
  line-height: 1.5;
}

.FAQPage_reportedQuestion__kSLsO {
  background: rgba(163, 82, 82, 0.12);
  border-left: 3px solid #a35252;
  padding: 0.75rem;
  border-radius: 4px;
  margin: 1rem 0;
}

.FAQPage_reportedQuestion__kSLsO strong {
  color: #262020;
  font-style: italic;
}

.FAQPage_reportWarning__-rbNB {
  color: #a04545;
  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: rgba(38, 32, 32, 0.06);
  color: rgba(38, 32, 32, 0.75);
}

.FAQPage_reportCancelButton__jxfxz:hover {
  background: rgba(38, 32, 32, 0.1);
}

.FAQPage_reportConfirmButton__9REbC {
  background: #a04545;
  color: white;
}

.FAQPage_reportConfirmButton__9REbC:hover {
  background: #8a3838;
}

.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(160, 69, 69, 0.1);
  border: 1px solid rgba(160, 69, 69, 0.35);
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: #a04545;
  line-height: 1.4;
  animation: FAQPage_slideIn__18kpV 0.3s ease-out;
}

.FAQPage_moderationError__PJOhg .FAQPage_errorIcon__TfcqU {
  color: #a04545;
  margin-top: 2px;
  flex-shrink: 0;
}

.FAQPage_moderationLoading__rHCTE {
  background: rgba(163, 82, 82, 0.12);
  border: 1px solid rgba(163, 82, 82, 0.55);
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #a35252;
  animation: FAQPage_slideIn__18kpV 0.3s ease-out;
}

.FAQPage_moderationLoading__rHCTE .FAQPage_loadingSpinner__8-jwM {
  width: 16px;
  height: 16px;
  border: 2px solid #a35252;
  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;
  }
}

/* =========================================================================
   THEME TOGGLE BUTTON
   Sits inline in the top-right controls row (just left of the close ×).
   Base (below) is the light look; `.pageDark` inverts it.
   ========================================================================= */
.FAQPage_themeToggle__kw1RP {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  color: rgba(38, 32, 32, 0.75);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(120, 95, 95, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  pointer-events: auto;
}

.FAQPage_themeToggle__kw1RP:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
}

.FAQPage_themeToggle__kw1RP:focus-visible {
  outline: 2px solid #e6c7c7;
  outline-offset: 2px;
}

.FAQPage_pageDark__wkWwz .FAQPage_themeToggle__kw1RP {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(30, 30, 35, 0.6);
  border: 1px solid rgba(100, 100, 110, 0.5);
}

.FAQPage_pageDark__wkWwz .FAQPage_themeToggle__kw1RP:hover {
  color: #fff;
  background: rgba(50, 50, 55, 0.8);
  border-color: rgba(140, 140, 150, 0.7);
}

/* =========================================================================
   DARK THEME
   The root element gets `.pageDark` when theme === 'dark'. The base (light)
   rules above use the app's brand palette; here we flip the theme tokens
   and re-color the surfaces that can't ride a single token (gradient text,
   light cards, inputs, the report modal, etc.).
   ========================================================================= */
.FAQPage_pageDark__wkWwz {
  --faq-bg: #000000;
  --faq-panel: rgba(30, 30, 35, 0.6);
  --faq-text: rgba(255, 255, 255, 0.95);
  --faq-text-secondary: rgba(255, 255, 255, 0.7);
}

/* Header */
.FAQPage_pageDark__wkWwz .FAQPage_faqTitle__URWAi {
  color: rgba(255, 255, 255, 0.55);
}

/* Search controls */
.FAQPage_pageDark__wkWwz .FAQPage_searchButton__qu-JX {
  color: rgba(255, 255, 255, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_searchButton__qu-JX:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.FAQPage_pageDark__wkWwz .FAQPage_searchInputContainer__BZmZ3 {
  background: rgba(30, 30, 35, 0.9);
  border-color: rgba(100, 100, 110, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_searchInputExpanded__fd3T4 {
  color: var(--faq-text);
}

.FAQPage_pageDark__wkWwz .FAQPage_searchInputExpanded__fd3T4::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_searchCloseButton__B8G35 {
  color: rgba(255, 255, 255, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_searchCloseButton__B8G35:hover {
  color: #fff;
}

/* Left sidebar / categories */
.FAQPage_pageDark__wkWwz .FAQPage_leftSidebar__8tfLH {
  border-color: rgba(100, 100, 110, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.FAQPage_pageDark__wkWwz .FAQPage_sidebarTitle__xBwpu {
  color: rgba(255, 255, 255, 0.95);
}

.FAQPage_pageDark__wkWwz .FAQPage_categoryItem__RRAZr {
  color: rgba(255, 255, 255, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_categoryItem__RRAZr:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.FAQPage_pageDark__wkWwz .FAQPage_categoryActive__hlDGd,
.FAQPage_pageDark__wkWwz .FAQPage_categoryActive__hlDGd:hover {
  background: #e6c7c7 !important;
  color: #171615 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Right panel + resize handle */
.FAQPage_pageDark__wkWwz .FAQPage_rightSection__WUR4w {
  border-color: rgba(100, 100, 110, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 2px 16px rgba(0, 0, 0, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+ {
  background: rgba(255, 255, 255, 0.08);
}

.FAQPage_pageDark__wkWwz .FAQPage_resizeGrip__SUZAs,
.FAQPage_pageDark__wkWwz .FAQPage_resizeGrip__SUZAs::before,
.FAQPage_pageDark__wkWwz .FAQPage_resizeGrip__SUZAs::after {
  background: rgba(255, 255, 255, 0.25);
}

/* Section titles */
.FAQPage_pageDark__wkWwz .FAQPage_sectionTitle__WrSgw {
  color: rgba(255, 255, 255, 0.95);
}

/* Question cards */
.FAQPage_pageDark__wkWwz .FAQPage_faqItem__BuJ3r {
  border-color: rgba(100, 100, 110, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqItem__BuJ3r:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(230, 199, 199, 0.5);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqQuestion__VIz50 {
  color: rgba(255, 255, 255, 0.95);
}

/* Question details */
.FAQPage_pageDark__wkWwz .FAQPage_questionDetailHeader__qx\+s- {
  border-bottom-color: rgba(100, 100, 110, 0.3);
}

.FAQPage_pageDark__wkWwz .FAQPage_questionDetailTitle__TabET {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
  color: rgba(255, 255, 255, 0.95);
}

.FAQPage_pageDark__wkWwz .FAQPage_answerText__XZQlW {
  color: rgba(255, 255, 255, 0.85);
}

.FAQPage_pageDark__wkWwz .FAQPage_answerText__XZQlW p:first-letter {
  color: #fff;
}

/* Community answers */
.FAQPage_pageDark__wkWwz .FAQPage_userAnswersSection__0Mvbe {
  border-bottom-color: rgba(100, 100, 110, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswersSection__0Mvbe h4 {
  color: rgba(255, 255, 255, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswer__T7bpx {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(100, 100, 110, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswer__T7bpx:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswerHeader__5lIZH {
  border-bottom-color: rgba(100, 100, 110, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswerDate__gqgKb {
  color: rgba(255, 255, 255, 0.45);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswerText__rKutU {
  color: rgba(255, 255, 255, 0.85);
}

/* No-answer / tags / meta blocks */
.FAQPage_pageDark__wkWwz .FAQPage_noAnswerSection__POrRh {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(100, 100, 110, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_noAnswerContent__RzDXP h4 {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

.FAQPage_pageDark__wkWwz .FAQPage_noAnswerContent__RzDXP p {
  color: rgba(255, 255, 255, 0.6);
}

.FAQPage_pageDark__wkWwz .FAQPage_tagsSection__44mqn {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(100, 100, 110, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_tagsSection__44mqn h4 {
  color: rgba(255, 255, 255, 0.9);
}

.FAQPage_pageDark__wkWwz .FAQPage_answerMeta__FNtUH {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(100, 100, 110, 0.5);
  color: rgba(255, 255, 255, 0.6);
}

/* Answer submission form */
.FAQPage_pageDark__wkWwz .FAQPage_answerSubmissionSection__u-1mZ {
  border-top-color: rgba(100, 100, 110, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_answerForm__dFn3v h4 {
  color: rgba(255, 255, 255, 0.95);
}

.FAQPage_pageDark__wkWwz .FAQPage_answerTextarea__KPBEd {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(100, 100, 110, 0.4);
  color: var(--faq-text);
}

.FAQPage_pageDark__wkWwz .FAQPage_answerTextarea__KPBEd::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_cancelAnswerButton__VH3\+f {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(100, 100, 110, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_cancelAnswerButton__VH3\+f:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(100, 100, 110, 0.6);
}

/* Login prompt */
.FAQPage_pageDark__wkWwz .FAQPage_loginPrompt__DqUX4 {
  background: rgba(230, 199, 199, 0.12);
  border-color: rgba(230, 199, 199, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_loginPrompt__DqUX4 p {
  color: rgba(255, 255, 255, 0.7);
}

/* Empty details + no-results states */
.FAQPage_pageDark__wkWwz .FAQPage_noSelection__6SDSz {
  color: rgba(255, 255, 255, 0.6);
}

.FAQPage_pageDark__wkWwz .FAQPage_noSelection__6SDSz h3 {
  color: rgba(255, 255, 255, 0.9);
}

.FAQPage_pageDark__wkWwz .FAQPage_noResults__J4NSo {
  color: rgba(255, 255, 255, 0.6);
}

.FAQPage_pageDark__wkWwz .FAQPage_autoLoadHint__35YmW,
.FAQPage_pageDark__wkWwz .FAQPage_autoLoadingIndicator__pysXy {
  color: rgba(255, 255, 255, 0.5);
}

/* Auth area */
.FAQPage_pageDark__wkWwz .FAQPage_loginButton__p5O1i {
  color: rgba(255, 255, 255, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_loginButton__p5O1i:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.FAQPage_pageDark__wkWwz .FAQPage_userInfo__y2IWC {
  background: rgba(255, 255, 255, 0.06);
}

.FAQPage_pageDark__wkWwz .FAQPage_userInfo__y2IWC:hover {
  background: rgba(255, 255, 255, 0.12);
}

.FAQPage_pageDark__wkWwz .FAQPage_userName__4zLwu {
  color: rgba(255, 255, 255, 0.95);
}

.FAQPage_pageDark__wkWwz .FAQPage_username__NbcSp,
.FAQPage_pageDark__wkWwz .FAQPage_userIcon__08N5B,
.FAQPage_pageDark__wkWwz .FAQPage_profileDropdownIcon__-lR9W {
  color: rgba(255, 255, 255, 0.6);
}

/* Report modal (rendered inline, so `.pageDark` reaches it) */
.FAQPage_pageDark__wkWwz .FAQPage_reportModal__xt6p2 {
  background: rgba(24, 23, 22, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportModalHeader__72eT9 h3 {
  color: rgba(255, 255, 255, 0.95);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportModalContent__YHZut p {
  color: rgba(255, 255, 255, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportedQuestion__kSLsO strong {
  color: rgba(255, 255, 255, 0.95);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportCancelButton__jxfxz {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportCancelButton__jxfxz:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Accent-colored chips/badges (dark pairs for classes that only had a
   single light-mode literal above) */
.FAQPage_pageDark__wkWwz .FAQPage_faqCategory__uP9nv {
  background: rgba(230, 199, 199, 0.12);
  color: #e6c7c7;
  border-color: rgba(230, 199, 199, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqTag__zCwDq {
  background: rgba(230, 199, 199, 0.12);
  color: #e6c7c7;
  border-color: rgba(230, 199, 199, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqTag__zCwDq.FAQPage_pending__SBaIP,
.FAQPage_pageDark__wkWwz .FAQPage_answerTag__0pUsg.FAQPage_pending__SBaIP {
  background: rgba(217, 185, 106, 0.15);
  color: #d9b96a;
  border-color: rgba(217, 185, 106, 0.35);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqTag__zCwDq.FAQPage_userSubmitted__85l3s,
.FAQPage_pageDark__wkWwz .FAQPage_answerTag__0pUsg.FAQPage_userSubmitted__85l3s {
  background: rgba(130, 150, 175, 0.15);
  color: #9fb3c8;
  border-color: rgba(159, 179, 200, 0.35);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqTag__zCwDq.FAQPage_approved__wMRQg,
.FAQPage_pageDark__wkWwz .FAQPage_answerTag__0pUsg.FAQPage_approved__wMRQg {
  background: rgba(90, 140, 90, 0.15);
  color: #c9e6c7;
  border-color: rgba(150, 200, 150, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_faqTag__zCwDq.FAQPage_official__WY05q,
.FAQPage_pageDark__wkWwz .FAQPage_answerTag__0pUsg.FAQPage_official__WY05q {
  border-color: rgba(230, 199, 199, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportButton__HiBq7 {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_reportButton__HiBq7:hover {
  background-color: rgba(140, 90, 90, 0.15);
}

.FAQPage_pageDark__wkWwz .FAQPage_questionDetailCategory__lha0G {
  box-shadow: 0 4px 20px rgba(230, 199, 199, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_questionDetailCategory__lha0G:hover {
  box-shadow: 0 8px 30px rgba(230, 199, 199, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_spinner__czvWO {
  border-color: rgba(100, 100, 110, 0.25);
  border-top-color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_error__MusxS {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_searchQuery__fuXdz {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_loadMoreButton__yVhmm {
  box-shadow: 0 2px 10px rgba(230, 199, 199, 0.3);
}

.FAQPage_pageDark__wkWwz .FAQPage_loadMoreButton__yVhmm:hover:not(:disabled) {
  box-shadow: 0 4px 15px rgba(230, 199, 199, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_clearSearchButton__-Y5ae:hover {
  box-shadow: 0 4px 15px rgba(230, 199, 199, 0.3);
}

.FAQPage_pageDark__wkWwz .FAQPage_floatingButton__93Z-j {
  box-shadow: 0 4px 20px rgba(230, 199, 199, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_floatingButton__93Z-j:hover {
  box-shadow: 0 6px 25px rgba(230, 199, 199, 0.6);
}

/* Resize handle hover/active states */
.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+:hover {
  background: rgba(230, 199, 199, 0.2);
}

.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR {
  background: rgba(230, 199, 199, 0.4);
  box-shadow: 0 0 15px rgba(230, 199, 199, 0.5);
}

.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+:hover .FAQPage_resizeGrip__SUZAs,
.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+:hover .FAQPage_resizeGrip__SUZAs::before,
.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+:hover .FAQPage_resizeGrip__SUZAs::after {
  background: rgba(230, 199, 199, 0.7);
}

.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR .FAQPage_resizeGrip__SUZAs,
.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR .FAQPage_resizeGrip__SUZAs::before,
.FAQPage_pageDark__wkWwz .FAQPage_resizeHandle__tiqJ\+.FAQPage_resizing__mLlLR .FAQPage_resizeGrip__SUZAs::after {
  background: rgba(230, 199, 199, 0.9);
}

/* Mobile panels */
.FAQPage_pageDark__wkWwz .FAQPage_mobileFaqDetail__9ir5u {
  border-color: rgba(100, 100, 110, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 2px 16px rgba(0, 0, 0, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_mobileDetailHeader__WRoE7 {
  border-bottom-color: rgba(100, 100, 110, 0.25);
  background: rgba(30, 30, 35, 0.6);
}

.FAQPage_pageDark__wkWwz .FAQPage_mobileBackButton__WfJN2 {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_mobileBackButton__WfJN2:hover {
  background: rgba(230, 199, 199, 0.12);
}

.FAQPage_pageDark__wkWwz .FAQPage_mobileQuestionList__W0USI {
  border-color: rgba(100, 100, 110, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 2px 16px rgba(0, 0, 0, 0.4);
}

.FAQPage_pageDark__wkWwz .FAQPage_mobileFaqItem__y0iGk {
  background: rgba(30, 30, 35, 0.6);
  border-color: rgba(100, 100, 110, 0.25);
}

.FAQPage_pageDark__wkWwz .FAQPage_mobileFaqItem__y0iGk:hover {
  background: rgba(40, 40, 46, 0.75);
  border-color: rgba(230, 199, 199, 0.3);
  box-shadow: 0 4px 12px rgba(230, 199, 199, 0.12);
}

/* Answer submission form */
.FAQPage_pageDark__wkWwz .FAQPage_answerTextarea__KPBEd:focus {
  border-color: rgba(230, 199, 199, 0.7);
  box-shadow: 0 0 0 3px rgba(230, 199, 199, 0.12);
}

.FAQPage_pageDark__wkWwz .FAQPage_userAnswerAuthor__MGgtc {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_loginPrompt__DqUX4 small {
  color: rgba(255, 255, 255, 0.45);
}

.FAQPage_pageDark__wkWwz .FAQPage_communityStats__1WJaM {
  background: rgba(230, 199, 199, 0.06);
}

.FAQPage_pageDark__wkWwz .FAQPage_communityNote__z9\+A8 {
  background: rgba(90, 140, 90, 0.15);
  border-left-color: #c9e6c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_communityNote__z9\+A8 small {
  color: rgba(255, 255, 255, 0.7);
}

/* Report modal */
.FAQPage_pageDark__wkWwz .FAQPage_reportModalOverlay__gDI9f {
  background-color: rgba(0, 0, 0, 0.65);
}

.FAQPage_pageDark__wkWwz .FAQPage_reportModalIcon__wEyk8 {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_reportedQuestion__kSLsO {
  background: rgba(230, 199, 199, 0.12);
  border-left-color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_reportWarning__-rbNB {
  color: #e6c7c7;
}

/* Moderation banners */
.FAQPage_pageDark__wkWwz .FAQPage_moderationError__PJOhg {
  background: rgba(140, 90, 90, 0.15);
  border-color: rgba(200, 150, 150, 0.4);
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_moderationError__PJOhg .FAQPage_errorIcon__TfcqU {
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_moderationLoading__rHCTE {
  background: rgba(230, 199, 199, 0.12);
  border-color: rgba(230, 199, 199, 0.7);
  color: #e6c7c7;
}

.FAQPage_pageDark__wkWwz .FAQPage_moderationLoading__rHCTE .FAQPage_loadingSpinner__8-jwM {
  border-color: #e6c7c7;
  border-top-color: transparent;
}

/* Mobile category pills carry a solid fill in the base sheet — darken it */
@media (max-width: 480px) {
  .FAQPage_pageDark__wkWwz .FAQPage_categoryItem__RRAZr {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(100, 100, 110, 0.4);
  }
}

/* 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: rgba(38, 32, 32, 0.75);
  color: var(--sp-text-mid, rgba(38, 32, 32, 0.75));
}

.ShopBrowser_accessContent__ZWCjo h3 {
  color: #262020;
  color: var(--sp-text-high, #262020);
  margin-bottom: 10px;
}

.ShopBrowser_errorMessage__AmbXl {
  background: rgba(160, 69, 69, 0.1);
  background: var(--sp-error-bg, rgba(160, 69, 69, 0.1));
  border: 1px solid rgba(160, 69, 69, 0.35);
  border: 1px solid var(--sp-error-border, rgba(160, 69, 69, 0.35));
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  color: #a04545;
  color: var(--sp-error-text, #a04545);
  text-align: center;
}

.ShopBrowser_retryButton__Hc2w\+ {
  background: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
}

.ShopBrowser_retryButton__Hc2w\+:hover {
  background: #f2dcdc;
}

.ShopBrowser_loadingContainer__T8Prz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: rgba(38, 32, 32, 0.75);
  color: var(--sp-text-mid, rgba(38, 32, 32, 0.75));
}

.ShopBrowser_loadingSpinner__xy6NB {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(120, 95, 95, 0.16);
  border: 4px solid var(--sp-border-soft, rgba(120, 95, 95, 0.16));
  border-top: 4px solid #a35252;
  border-top: 4px solid var(--sp-accent-text, #a35252);
  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: rgba(38, 32, 32, 0.75);
  color: var(--sp-text-mid, rgba(38, 32, 32, 0.75));
  text-align: center;
}

.ShopBrowser_emptyIcon__jRLXX {
  font-size: 4rem;
  margin-bottom: 20px;
}

.ShopBrowser_emptyState__ifAMh h3 {
  color: #262020;
  color: var(--sp-text-high, #262020);
  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: #ffffff;
  background: var(--sp-card, #ffffff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-shadow: var(--sp-shadow-card, 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);
  box-shadow: var(--sp-shadow-card-hover, 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: #f0ebe7;
  background: var(--sp-media-bg, #f0ebe7);
  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(38, 32, 32, 0.6);
  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(90, 140, 90, 0.92);
  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: #f0ebe7;
  background: var(--sp-media-bg, #f0ebe7);
}

.ShopBrowser_videoLoading__tHfZR {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #f0ebe7;
  background: var(--sp-media-bg, #f0ebe7);
  position: relative;
}

.ShopBrowser_audioPreview__U5eok,
.ShopBrowser_unknownPreview__qXFUo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a35252 0%, #7d3d3d 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, #2a2422 0%, #1a1616 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: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  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: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  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: #f2dcdc;
}

.ShopBrowser_playButton__pfJUh {
  background: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
}

.ShopBrowser_playButton__pfJUh:hover {
  background: #f2dcdc;
}

.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: #262020;
  color: var(--sp-text-high, #262020);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  border-bottom: rgba(120, 95, 95, 0.28) solid 1px;
  border-bottom: var(--sp-item-divider, rgba(120, 95, 95, 0.28)) 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: rgba(38, 32, 32, 0.75);
  color: var(--sp-text-mid, rgba(38, 32, 32, 0.75));
  font-weight: 500;
}

.ShopBrowser_ownerAvatar__XzFTw {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  padding: 5px;
  background: #f0ebe7;
  background: var(--sp-media-bg, #f0ebe7);
  border: rgba(120, 95, 95, 0.28) solid 1px;
  border: var(--sp-border, rgba(120, 95, 95, 0.28)) solid 1px;
}

.ShopBrowser_ownerName__KpIBR {
  font-size: 0.9rem;
  color: rgba(38, 32, 32, 0.75);
  color: var(--sp-text-mid, rgba(38, 32, 32, 0.75));
  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: rgba(38, 32, 32, 0.5);
  color: var(--sp-text-low, rgba(38, 32, 32, 0.5));
}

.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: rgba(38, 32, 32, 0.45);
  color: var(--sp-text-faint, rgba(38, 32, 32, 0.45));
}

.ShopBrowser_fileSize__A95qp {
  font-weight: 500;
  margin-top: 4px;
}

.ShopBrowser_compression__P0Jht {
  color: #3c6b3a;
  color: var(--sp-success-text, #3c6b3a);
  font-weight: 500;
}

.ShopBrowser_actionButtons__T6HU2 {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}

.ShopBrowser_promptButton__FO0OC {
  background: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  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: #f2dcdc;
}

.ShopBrowser_purchaseButton__x\+be2 {
  background: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  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: #f2dcdc;
}

.ShopBrowser_previewAudioButton__6NOc9 {
  background: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  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: #f2dcdc;
}

.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);
  background: var(--sp-overlay, 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-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: #a35252;
  color: var(--sp-accent-text, #a35252);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ShopBrowser_promptFullText__eIAR9 {
  font-size: 0.95rem;
  color: #262020;
  color: var(--sp-overlay-text, #262020);
  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(163, 82, 82, 0.1);
  background: var(--sp-accent-tint, rgba(163, 82, 82, 0.1));
  color: #a35252;
  color: var(--sp-accent-text, #a35252);
  padding: 4px 10px;
  border-radius: 12px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(163, 82, 82, 0.28);
  border: 1px solid var(--sp-accent-line, rgba(163, 82, 82, 0.28));
}

.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);
  background: var(--sp-overlay-warm, 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: #e6c7c7;
  background: var(--sp-accent, #e6c7c7);
  color: #1a1a1a;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ShopBrowser_loadMoreButton__3-uOM:hover:not(:disabled) {
  background: #f2dcdc;
}

.ShopBrowser_loadMoreButton__3-uOM:disabled {
  background: rgba(255, 255, 255, 0.7);
  background: var(--sp-panel-soft, rgba(255, 255, 255, 0.7));
  color: rgba(38, 32, 32, 0.5);
  color: var(--sp-text-low, rgba(38, 32, 32, 0.5));
  cursor: not-allowed;
}

.ShopBrowser_buttonSpinner__wIZRO {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid #1a1a1a;
  border-radius: 50%;
  animation: ShopBrowser_spin__12gf9 1s linear infinite;
}

.ShopBrowser_pageInfo__gIGtK {
  text-align: center;
  color: rgba(38, 32, 32, 0.75);
  color: var(--sp-text-mid, rgba(38, 32, 32, 0.75));
  font-size: 0.9rem;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(120, 95, 95, 0.16);
  border-top: 1px solid var(--sp-hairline, rgba(120, 95, 95, 0.16));
}

/* 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 */

/* Theme tokens. The values declared on .storeContainer are the LIGHT theme
   (the original cream design, preserved pixel-for-pixel). .storeContainerDark
   overrides them for dark mode. These custom properties cascade to the nested
   ShopBrowser component, which references the same names. */
.StorePage_storeContainer__cFrt3 {
  /* Light theme mirrors the brand palette (brand.css :root). Themed via a
     wrapper class (.storeContainerDark), not body.dark-theme, so brand
     values are inlined per theme. The Vanta canvas background colour is set
     in StorePage.js and should be synced to #f7f2ef / #0f0e0d there. */
  --sp-bg: #f7f2ef;
  --sp-text-high: #262020;
  --sp-text-mid: rgba(38, 32, 32, 0.75);
  --sp-text-low: rgba(38, 32, 32, 0.5);
  --sp-text-faint: rgba(38, 32, 32, 0.45);
  --sp-text-note: rgba(38, 32, 32, 0.7);
  --sp-title: rgba(38, 32, 32, 0.4);

  --sp-panel: rgba(255, 255, 255, 0.8);
  --sp-panel-electron: rgba(255, 255, 255, 0.95);
  --sp-panel-soft: rgba(255, 255, 255, 0.7);
  --sp-panel-hover: rgba(255, 255, 255, 0.95);
  --sp-panel-faint: rgba(255, 255, 255, 0.5);
  --sp-panel-access: rgba(255, 255, 255, 0.8);
  --sp-dropdown: rgba(255, 255, 255, 0.98);
  --sp-search-bg: rgba(255, 255, 255, 0.9);

  --sp-border: rgba(120, 95, 95, 0.28);
  --sp-border-soft: rgba(120, 95, 95, 0.16);
  --sp-border-faint: rgba(120, 95, 95, 0.1);
  --sp-border-strong: rgba(120, 95, 95, 0.45);
  --sp-right-border: rgba(120, 95, 95, 0.16);

  --sp-hover-bg: rgba(163, 82, 82, 0.06);
  --sp-active-bg: rgba(163, 82, 82, 0.1);
  --sp-faint-bg: rgba(38, 32, 32, 0.05);
  --sp-divider: rgba(120, 95, 95, 0.2);
  --sp-search-hover-bg: rgba(38, 32, 32, 0.05);

  --sp-active-solid-bg: #a35252;
  --sp-active-solid-bg-hover: #8f4747;
  --sp-active-solid-text: #fff;
  --sp-active-icon-filter: brightness(0) invert(1);
  --sp-icon-filter: none;

  --sp-coin-filter: invert(0) brightness(0) saturate(100%) contrast(100%);

  --sp-credits-bg: rgba(180, 140, 40, 0.14);
  --sp-credits-border: rgba(180, 140, 40, 0.4);
  --sp-credits-icon: #8a6a1f;

  --sp-shadow-panel: 0 4px 14px rgba(90, 60, 60, 0.1);
  --sp-shadow-right: 0 12px 32px rgba(90, 60, 60, 0.14);
  --sp-shadow-dropdown: 0 8px 24px rgba(90, 60, 60, 0.14);
  --sp-shadow-search: 0 2px 8px rgba(90, 60, 60, 0.1);

  --sp-danger: #a04545;
  --sp-danger-bg: rgba(160, 69, 69, 0.1);

  /* Consumed by the nested ShopBrowser storefront */
  --sp-card: #ffffff;
  --sp-media-bg: #f0ebe7;
  --sp-item-divider: rgba(120, 95, 95, 0.28);
  --sp-hairline: rgba(120, 95, 95, 0.16);
  --sp-overlay: rgba(247, 242, 239, 0.95);
  --sp-overlay-warm: rgba(247, 242, 239, 0.96);
  --sp-overlay-text: #262020;
  --sp-error-bg: rgba(160, 69, 69, 0.1);
  --sp-error-border: rgba(160, 69, 69, 0.35);
  --sp-error-text: #a04545;
  --sp-shadow-card: 0 4px 14px rgba(90, 60, 60, 0.1);
  --sp-shadow-card-hover: 0 10px 28px rgba(163, 82, 82, 0.14);
  --sp-accent: #e6c7c7;
  --sp-accent-text: #a35252;
  --sp-accent-tint: rgba(163, 82, 82, 0.1);
  --sp-accent-line: rgba(163, 82, 82, 0.28);
  --sp-success-text: #3c6b3a;

  /* Theme toggle button (light values) */
  --sp-toggle-bg: rgba(255, 255, 255, 0.7);
  --sp-toggle-border: rgba(120, 95, 95, 0.28);
  --sp-toggle-color: rgba(38, 32, 32, 0.7);
  --sp-toggle-hover-bg: rgba(255, 255, 255, 0.95);
  --sp-toggle-hover-border: rgba(163, 82, 82, 0.55);
  --sp-toggle-hover-color: #262020;

  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--sp-bg);
  color: var(--sp-text-high);
  position: relative;
  font-family: 'Inconsolata', monospace;
}

.StorePage_storeContainerDark__yjuee {
  --sp-bg: #0f0e0d;
  --sp-text-high: rgba(255, 255, 255, 0.95);
  --sp-text-mid: rgba(255, 255, 255, 0.7);
  --sp-text-low: rgba(255, 255, 255, 0.5);
  --sp-text-faint: rgba(255, 255, 255, 0.45);
  --sp-text-note: rgba(255, 255, 255, 0.6);
  --sp-title: rgba(255, 255, 255, 0.4);

  --sp-panel: rgba(30, 30, 35, 0.6);
  --sp-panel-electron: rgba(18, 17, 16, 0.9);
  --sp-panel-soft: rgba(30, 30, 35, 0.6);
  --sp-panel-hover: rgba(45, 45, 52, 0.8);
  --sp-panel-faint: rgba(30, 30, 35, 0.4);
  --sp-panel-access: rgba(30, 30, 35, 0.6);
  --sp-dropdown: rgba(18, 17, 16, 0.95);
  --sp-search-bg: rgba(30, 30, 35, 0.9);

  --sp-border: rgba(100, 100, 110, 0.5);
  --sp-border-soft: rgba(100, 100, 110, 0.35);
  --sp-border-faint: rgba(100, 100, 110, 0.25);
  --sp-border-strong: rgba(100, 100, 110, 0.7);
  --sp-right-border: rgba(100, 100, 110, 0.25);

  --sp-hover-bg: rgba(255, 255, 255, 0.06);
  --sp-active-bg: rgba(255, 255, 255, 0.1);
  --sp-faint-bg: rgba(255, 255, 255, 0.05);
  --sp-divider: rgba(100, 100, 110, 0.4);
  --sp-search-hover-bg: rgba(255, 255, 255, 0.1);

  --sp-active-solid-bg: rgba(230, 199, 199, 0.16);
  --sp-active-solid-bg-hover: rgba(230, 199, 199, 0.24);
  --sp-active-solid-text: rgba(255, 255, 255, 0.95);
  --sp-active-icon-filter: brightness(0) invert(1);
  --sp-icon-filter: invert(0.9);

  --sp-coin-filter: brightness(0) invert(1);

  --sp-credits-bg: rgba(217, 185, 106, 0.15);
  --sp-credits-border: rgba(217, 185, 106, 0.35);
  --sp-credits-icon: #d9b96a;

  --sp-shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.6);
  --sp-shadow-right: 0 12px 40px rgba(0, 0, 0, 0.6);
  --sp-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6);
  --sp-shadow-search: 0 4px 16px rgba(0, 0, 0, 0.5);

  --sp-danger: #e6a5a5;
  --sp-danger-bg: rgba(200, 150, 150, 0.15);

  --sp-card: rgba(30, 30, 35, 0.6);
  --sp-media-bg: rgba(18, 17, 16, 0.85);
  --sp-item-divider: rgba(100, 100, 110, 0.4);
  --sp-hairline: rgba(100, 100, 110, 0.25);
  --sp-overlay: rgba(15, 14, 13, 0.92);
  --sp-overlay-warm: rgba(15, 14, 13, 0.92);
  --sp-overlay-text: rgba(255, 255, 255, 0.9);
  --sp-error-bg: rgba(140, 90, 90, 0.15);
  --sp-error-border: rgba(200, 150, 150, 0.4);
  --sp-error-text: #e6c7c7;
  --sp-accent-text: #e6c7c7;
  --sp-accent-tint: rgba(230, 199, 199, 0.12);
  --sp-accent-line: rgba(230, 199, 199, 0.3);
  --sp-success-text: #c9e6c7;
  --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sp-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.6);

  --sp-toggle-bg: rgba(30, 30, 35, 0.6);
  --sp-toggle-border: rgba(100, 100, 110, 0.5);
  --sp-toggle-color: rgba(255, 255, 255, 0.85);
  --sp-toggle-hover-bg: rgba(50, 50, 55, 0.8);
  --sp-toggle-hover-border: rgba(140, 140, 150, 0.7);
  --sp-toggle-hover-color: #fff;
}

/* Theme toggle button */
.StorePage_themeToggle__xnkcu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--sp-toggle-color);
  background: var(--sp-toggle-bg);
  border: 1px solid var(--sp-toggle-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.StorePage_themeToggle__xnkcu:hover {
  color: var(--sp-toggle-hover-color);
  background: var(--sp-toggle-hover-bg);
  border-color: var(--sp-toggle-hover-border);
  transform: translateY(-2px);
}

.StorePage_themeToggle__xnkcu:active {
  transform: translateY(0);
}

.StorePage_themeToggle__xnkcu:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

/* 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: var(--sp-title);
  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: var(--sp-text-mid);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.StorePage_searchButton__YWPTB:hover {
  color: var(--sp-text-high);
  background: var(--sp-search-hover-bg);
}

.StorePage_refreshButton__VJekp {
  background: none;
  border: none;
  color: var(--sp-text-mid);
  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: var(--sp-text-high);
  background: var(--sp-search-hover-bg);
  transform: rotate(180deg);
}

.StorePage_refreshButton__VJekp:active {
  transform: rotate(360deg);
}

.StorePage_searchInputContainer__ugx\+b {
  display: flex;
  align-items: center;
  background: var(--sp-search-bg);
  border-radius: 10px;
  padding: 4px 8px;
  border: 1px solid var(--sp-border-soft);
  width: 250px;
  animation: StorePage_expandSearch__ENpSK 0.3s ease-out;
  box-shadow: var(--sp-shadow-search);
}

@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: var(--sp-text-high);
  font-family: inherit;
}

.StorePage_searchInputExpanded__6jioK::placeholder {
  color: var(--sp-text-faint);
}

.StorePage_searchCloseButton__w3ha0 {
  background: none;
  border: none;
  color: var(--sp-text-mid);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.StorePage_searchCloseButton__w3ha0:hover {
  color: var(--sp-text-high);
}

/* Authentication Section */
.StorePage_authSection__ol-eH {
  position: relative;
}

.StorePage_loginButton__CqFLp {
  background: var(--sp-panel-soft);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-mid);
  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: var(--sp-text-high);
  border-color: var(--sp-border-strong);
  background: var(--sp-panel-hover);
}

.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: var(--sp-panel-soft);
  border: 1px solid var(--sp-border);
}

.StorePage_userInfo__JoVyJ:hover {
  background: var(--sp-panel-hover);
}

.StorePage_avatarImage__h\+Buf {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.StorePage_userIcon__5PHuA {
  font-size: 1.2rem;
  color: var(--sp-text-mid);
}

.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: var(--sp-text-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.StorePage_username__9evM- {
  font-size: 0.7rem;
  color: var(--sp-text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.StorePage_profileDropdownIcon__73vME {
  font-size: 0.8rem;
  color: var(--sp-text-mid);
  transition: transform 0.2s ease;
}

.StorePage_profileDropdownIconOpen__maxMW {
  transform: rotate(180deg);
}

.StorePage_coinImage__UcFbo {
  width: 25px;
  height: 25px;
  filter: var(--sp-coin-filter);
}

.StorePage_profileDropdown__APsVW {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--sp-dropdown);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  padding: 4px;
  margin-top: 4px;
  min-width: 120px;
  box-shadow: var(--sp-shadow-dropdown);
  z-index: 1000;
}

.StorePage_signOutButton__ZT92v {
  width: 100%;
  background: none;
  border: none;
  color: var(--sp-text-mid);
  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: var(--sp-danger);
  background: var(--sp-danger-bg);
}

.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: var(--sp-panel);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sp-border-faint);
  box-shadow: var(--sp-shadow-panel);
  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: var(--sp-panel-electron); /* 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: var(--sp-text-high);
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  letter-spacing: 0.02em;
}

.StorePage_collapseButton__vQAlo {
  background: none;
  border: none;
  color: var(--sp-text-low);
  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: var(--sp-text-high);
  background: var(--sp-faint-bg);
}

.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: var(--sp-text-mid);
  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: var(--sp-hover-bg);
  color: var(--sp-text-high);
  transform: translateX(4px);
}

.StorePage_leftSidebarCollapsed__Es2nT .StorePage_categoryItem__qllne:hover {
  transform: none;
  background: var(--sp-active-bg);
}

.StorePage_categoryActive__fQB-a {
  background: var(--sp-active-solid-bg) !important;
  color: var(--sp-active-solid-text) !important;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.StorePage_categoryActive__fQB-a:hover {
  transform: none !important;
  background: var(--sp-active-solid-bg-hover) !important;
}

.StorePage_categoryIcon__yVGgC {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  filter: var(--sp-icon-filter);
  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: var(--sp-active-icon-filter);
}

/* 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,
    var(--sp-divider),
    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: var(--sp-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.StorePage_userSectionButton__BBFQ7:hover {
  background: var(--sp-hover-bg);
  color: var(--sp-text-high);
}

.StorePage_userSectionActive__6IC4Q {
  background: var(--sp-active-bg) !important;
  color: var(--sp-text-high) !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 var(--sp-border-faint);
}

.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: var(--sp-text-low);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.StorePage_listingSubsectionButton__ZQgPA:hover {
  background: var(--sp-hover-bg);
  color: var(--sp-text-note);
  transform: translateX(2px);
}

.StorePage_listingSubsectionActive__4IJhK {
  background: var(--sp-active-bg) !important;
  color: var(--sp-text-high) !important;
  font-weight: 600;
}

.StorePage_listingSubsectionIcon__Hq542 {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  filter: var(--sp-icon-filter);
}

.StorePage_listingSubsectionActive__4IJhK .StorePage_listingSubsectionIcon__Hq542 {
  opacity: 1;
}

/* Right Section */
.StorePage_rightSection__IV1pU {
  flex: 1 1;
  background: var(--sp-panel);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--sp-right-border);
  box-shadow: var(--sp-shadow-right);
  overflow: hidden;
  display: flex;
}

/* Electron specific overrides */
body.is-electron .StorePage_rightSection__IV1pU {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--sp-panel-electron); /* 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: var(--sp-text-high);
  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;
  filter: var(--sp-icon-filter);
}

.StorePage_headerRightSection__AC4iP {
  display: flex;
  align-items: center;
  gap: 15px;
}

.StorePage_creditsDisplay__nuAys {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sp-credits-bg);
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--sp-credits-border);
}

.StorePage_creditsIcon__dYTyz {
  font-size: 1.2rem;
  color: var(--sp-credits-icon);
}

.StorePage_creditsAmount__iD3gV {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sp-text-high);
  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: var(--sp-panel-faint);
  border: 2px dashed var(--sp-border);
  border-radius: 12px;
  max-width: 400px;
}

.StorePage_comingSoonBox__uE9Bj h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--sp-text-high);
  margin-bottom: 12px;
  font-family: 'Urbanist';
}

.StorePage_comingSoonBox__uE9Bj p {
  color: var(--sp-text-mid);
  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: var(--sp-panel-access);
  border: 1px solid var(--sp-border-soft);
  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: var(--sp-danger);
  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: var(--sp-credits-icon);
  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: var(--sp-text-high);
  margin-bottom: 12px;
  font-family: 'Urbanist';
}

.StorePage_accessContent__6GDkb p {
  color: var(--sp-text-mid);
  line-height: 1.5;
  margin-bottom: 8px;
}

.StorePage_ticketNote__oDSSH {
  font-size: 0.8rem;
  color: var(--sp-text-note);
  margin: 16px 0;
  line-height: 1.5;
}

.StorePage_ticketMessage__wIzTk {
  font-size: 0.9rem;
  color: var(--sp-text-faint);
  font-style: italic;
  margin-top: 8px;
}

.StorePage_signInButton__zpPvF {
  background: var(--sp-accent);
  color: #1a1a1a;
  border: 1px solid var(--sp-accent);
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.StorePage_signInButton__zpPvF:hover {
  background: #f2dcdc;
  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: var(--sp-text-faint);
    font-style: italic;
    margin-top: 20px;
    padding: 15px;
    background: var(--sp-faint-bg);
    border-radius: 8px;
    border-left: 3px solid var(--sp-danger);
  }

  .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: var(--cc-bg);
  padding: 20px;
  font-family: var(--cc-font-body);
}

.mobile-not-supported-content {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 40px 30px;
  max-width: 500px;
  width: 100%;
  box-shadow: var(--cc-shadow);
  text-align: center;
}

.mobile-not-supported-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.mobile-not-supported-content h1 {
  font-family: var(--cc-font-body);
  font-size: 28px;
  color: var(--cc-text-hi);
  margin-bottom: 15px;
  font-weight: 300;
}

.mobile-not-supported-content > p {
  font-size: 16px;
  color: var(--cc-text-mid);
  line-height: 1.6;
  margin-bottom: 30px;
}

.mobile-not-supported-reasons {
  text-align: left;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-radius-sm);
  padding: 20px;
  margin-bottom: 25px;
}

.mobile-not-supported-reasons h3 {
  font-size: 18px;
  color: var(--cc-text-hi);
  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: var(--cc-text-mid);
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
}

.mobile-not-supported-reasons li::before {
  content: '•';
  position: absolute;
  left: 8px;
  color: var(--cc-accent-text);
  font-weight: bold;
  font-size: 18px;
}

.mobile-not-supported-actions {
  margin-bottom: 25px;
}

.mobile-not-supported-actions h3 {
  font-size: 18px;
  color: var(--cc-text-hi);
  margin-bottom: 15px;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  font-family: var(--cc-font-mono);
  padding: 14px 28px;
  border-radius: var(--cc-radius-sm);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
}

.btn-primary:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.btn-secondary {
  background: var(--cc-panel);
  color: var(--cc-accent-text);
  border: 2px solid var(--cc-accent-border);
}

.btn-secondary:hover {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--cc-glow);
}

.mobile-not-supported-footer {
  font-size: 13px;
  color: var(--cc-text-low);
  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: var(--cc-bg);
  color: var(--cc-text-hi);
  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 var(--cc-border-soft);
  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: var(--cc-text-hi);
  font-weight: 200;
  font-size: 3rem;
  font-family: var(--cc-font-body);
}

.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: var(--cc-text-hi);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.AdminPanel_tabs__So4bK {
  display: flex;
  gap: 8px;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  padding: 6px;
  border-radius: var(--cc-radius-pill);
}

.AdminPanel_tab__BDegg,
.AdminPanel_tabActive__N7mkL {
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: var(--cc-radius-pill);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--cc-font-mono);
  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: var(--cc-text-mid);
}

.AdminPanel_tab__BDegg:hover {
  background: var(--cc-panel-hover);
  color: var(--cc-text-hi);
}

.AdminPanel_tabActive__N7mkL {
  background: var(--cc-accent);
  color: var(--cc-btn-primary-text);
  font-weight: 700;
  box-shadow: 0 2px 8px var(--cc-glow);
}

/* 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: var(--cc-text-hi);
}

.AdminPanel_userUsername__YekXs {
  font-size: 14px;
  color: var(--cc-text-hi);
  font-weight: 600;
}

.AdminPanel_userEmail__CJ1rx {
  font-size: 12px;
  color: var(--cc-text-mid);
  font-weight: 400;
}

.AdminPanel_userAvatarHeader__2pkrE {
  width: 50px;
  height: 50px;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px var(--cc-glow);
}

.AdminPanel_userAvatarImg__4gj9n {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.AdminPanel_userAvatarInitial__IJDqi {
  color: var(--cc-btn-primary-text);
  font-size: 15px;
  font-weight: 600;
}

.AdminPanel_authError__G\+ALG {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-error-text);
  font-size: 14px;
  font-weight: 500;
}

.AdminPanel_authError__G\+ALG svg {
  font-size: 16px;
}

.AdminPanel_content__95UMk {
  /* background: white; */
  padding: 30px;
  border-radius: var(--cc-radius);
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  min-height: 500px;
  flex: 1 1;
}

.AdminPanel_error__iJVPD {
  background: var(--cc-error-bg);
  border: 1px solid var(--cc-error-border);
  color: var(--cc-error-text);
  padding: 15px;
  border-radius: var(--cc-radius-sm);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.AdminPanel_error__iJVPD button {
  background: transparent;
  border: none;
  color: var(--cc-error-text);
  font-size: 20px;
  cursor: pointer;
  padding: 0 10px;
}

/* Overview */
.AdminPanel_overview__LUSvP h2 {
  margin-top: 0;
  color: var(--cc-text-hi);
}

.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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  padding: 25px;
  border-radius: var(--cc-radius);
  color: var(--cc-text-hi);
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_statCard__swIdS h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--cc-text-mid);
}

.AdminPanel_statValue__WNblo {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
}

/* 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 var(--cc-border-soft);
}

.AdminPanel_metricsHeader__sO9\+V h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  letter-spacing: -0.5px;
}

.AdminPanel_lastUpdated__ZpIId {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-mid);
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  padding: 8px 16px;
  border-radius: var(--cc-radius-pill);
}

.AdminPanel_lastUpdated__ZpIId svg {
  font-size: 14px;
}

.AdminPanel_metricsSection__B3GRy {
  margin-bottom: 40px;
}

.AdminPanel_metricsSectionTitle__-vp2w {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.AdminPanel_metricsGrid__uWtW3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.AdminPanel_metricCard__5TbZ6 {
  background: var(--cc-panel);
  padding: 24px;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_metricCard__5TbZ6:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px var(--cc-glow);
  border-color: var(--cc-accent-border);
}

.AdminPanel_metricIconWrapper__o1\+wg {
  width: 52px;
  height: 52px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.AdminPanel_metricIconWrapper__o1\+wg svg {
  font-size: 24px;
  color: var(--cc-btn-primary-text);
}

.AdminPanel_coinIcon__Y1Pi2 {
  width: 28px;
  height: 28px;
  filter: brightness(0);
}

.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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.AdminPanel_metricValue__2rulh {
  font-size: 32px;
  font-weight: 700;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  line-height: 1.1;
  letter-spacing: -1px;
}

.AdminPanel_metricSubtext__GiT9r {
  font-size: 12px;
  color: var(--cc-text-low);
  margin-top: 2px;
}

/* Metric Card Color Variants */
.AdminPanel_metricPrimary__99EDf .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricPrimary__99EDf:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricSuccess__riJRu .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricSuccess__riJRu:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricInfo__FQ36Q .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricInfo__FQ36Q:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricWarning__Z7U7w .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricWarning__Z7U7w:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricPurple__qiOtY .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricPurple__qiOtY:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricTeal__UwxDC .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricTeal__UwxDC:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricDanger__wjUky .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricDanger__wjUky:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_metricOrange__NuIWb .AdminPanel_metricIconWrapper__o1\+wg {
  background: var(--cc-accent);
}

.AdminPanel_metricOrange__NuIWb:hover {
  background: var(--cc-panel-hover);
}

/* Empty Metrics State */
.AdminPanel_emptyMetrics__GOGMg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 2px dashed var(--cc-border-soft);
}

.AdminPanel_emptyMetrics__GOGMg .AdminPanel_emptyIcon__xPRGF {
  font-size: 64px;
  color: var(--cc-text-low);
  margin-bottom: 20px;
}

.AdminPanel_emptyMetrics__GOGMg h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--cc-text-mid);
  margin: 0 0 8px 0;
}

.AdminPanel_emptyMetrics__GOGMg p {
  font-size: 14px;
  color: var(--cc-text-low);
  margin: 0;
}

/* Admins */
.AdminPanel_admins__rSqdr {
  max-width: 1200px;
  margin: 0 auto;
}

.AdminPanel_admins__rSqdr h2 {
  font-size: 28px;
  font-weight: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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: var(--cc-accent);
  border-radius: 3px;
}

.AdminPanel_section__V9Srk {
  margin-bottom: 40px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  padding: 28px;
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_section__V9Srk h3 {
  color: var(--cc-text-hi);
  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: var(--cc-accent);
  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: var(--cc-text-mid);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.AdminPanel_formGroup__oUwtT input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-size: 15px;
  font-family: var(--cc-font-mono);
  box-sizing: border-box;
  background: var(--cc-input-bg);
  color: var(--cc-input-text);
  font-weight: 500;
  transition: all 0.3s ease;
}

.AdminPanel_formGroup__oUwtT input:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.AdminPanel_formGroup__oUwtT input::placeholder {
  color: var(--cc-text-low);
  font-weight: 400;
}

.AdminPanel_formGroup__oUwtT small {
  display: block;
  margin-top: 10px;
  color: var(--cc-text-low);
  font-size: 13px;
  font-weight: 500;
}

.AdminPanel_btnPrimary__gzdyL,
.AdminPanel_btnDanger__h4vXH {
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.AdminPanel_btnPrimary__gzdyL {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_btnPrimary__gzdyL:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--cc-glow);
}

.AdminPanel_btnPrimary__gzdyL:active:not(:disabled) {
  transform: translateY(0);
}

.AdminPanel_btnPrimary__gzdyL:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-low);
  box-shadow: none;
}

.AdminPanel_btnDanger__h4vXH {
  background: var(--cc-error-bg);
  border-color: var(--cc-error-border);
  color: var(--cc-error-text);
  font-size: 13px;
  padding: 10px 18px;
  box-shadow: none;
}

.AdminPanel_btnDanger__h4vXH:hover:not(:disabled) {
  background: var(--cc-error-border);
  color: var(--cc-error-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--cc-glow);
}

.AdminPanel_btnDanger__h4vXH:active:not(:disabled) {
  transform: translateY(0);
}

.AdminPanel_btnDanger__h4vXH:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-low);
  box-shadow: none;
}

/* Table */
.AdminPanel_table__TEx-U {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 24px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  overflow: hidden;
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_table__TEx-U thead {
  background: var(--cc-icon-chip);
}

.AdminPanel_table__TEx-U th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--cc-border);
}

.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 var(--cc-border-soft);
  font-size: 14px;
  color: var(--cc-text-hi);
  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: var(--cc-panel-hover);
}

.AdminPanel_table__TEx-U tbody tr:last-child td {
  border-bottom: none;
}

.AdminPanel_uid__ErUeb {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  color: var(--cc-text-mid);
  background: transparent;
  padding: 0;
  white-space: nowrap;
}

.AdminPanel_statusActive__FpQOX,
.AdminPanel_statusDisabled__eXjHB {
  padding: 8px 16px;
  border-radius: var(--cc-radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.AdminPanel_statusActive__FpQOX {
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
}

.AdminPanel_statusDisabled__eXjHB {
  background: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
}

/* Update Info */
.AdminPanel_updateInfo__SwTDl {
  margin-top: 20px;
  padding: 15px;
  background: var(--cc-success-bg);
  border: 1px solid var(--cc-success-border);
  border-radius: var(--cc-radius-sm);
  text-align: center;
}

.AdminPanel_updateInfo__SwTDl small {
  color: var(--cc-success-text);
  font-size: 13px;
  font-weight: 500;
}

.AdminPanel_metricCard__5TbZ6 small {
  display: block;
  margin-top: 8px;
  color: var(--cc-text-low);
  font-size: 12px;
}

/* Footer */
.AdminPanel_footer__CzsFK {
  margin-top: auto;
  padding-top: 1rem;
  text-align: center;
  border-top: 1px solid var(--cc-border-soft);
}

/* 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: var(--cc-text-hi);
  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: var(--cc-panel);
  border-radius: var(--cc-radius);
  padding: 8px 8px 8px 24px;
  box-shadow: var(--cc-shadow-soft);
  transition: all 0.3s ease;
  border: 1px solid var(--cc-border);
}

.AdminPanel_searchContainer__oau3x:focus-within {
  box-shadow: 0 0 0 3px var(--cc-glow);
  border-color: var(--cc-accent-border);
  background: var(--cc-panel-hover);
}

.AdminPanel_searchInput__OHkKN {
  flex: 1 1;
  padding: 16px 16px;
  border: none;
  background: transparent;
  color: var(--cc-text-hi);
  font-size: 16px;
  outline: none;
  font-family: var(--cc-font-mono);
  font-weight: 500;
}

.AdminPanel_searchInput__OHkKN::placeholder {
  color: var(--cc-text-low);
  font-weight: 400;
}

.AdminPanel_searchButton__\+C6lB {
  padding: 14px 36px;
  border: 1px solid var(--cc-btn-primary-bg);
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border-radius: var(--cc-radius-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  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 var(--cc-glow);
}

.AdminPanel_searchButton__\+C6lB:hover:not(:disabled) {
  background: var(--cc-btn-primary-bg-hover);
  box-shadow: 0 6px 20px var(--cc-glow);
  transform: translateY(-1px);
}

.AdminPanel_searchButton__\+C6lB:active:not(:disabled) {
  transform: translateY(0);
}

.AdminPanel_searchButton__\+C6lB:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cc-panel);
  border-color: var(--cc-border);
  color: var(--cc-text-low);
  box-shadow: none;
}

.AdminPanel_searchResults__JiD12 {
  margin-top: 40px;
  width: 100%;
  max-width: 900px;
}

.AdminPanel_searchResults__JiD12 h3 {
  color: var(--cc-text-hi);
  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: var(--cc-accent);
  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: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--cc-shadow-soft);
  position: relative;
  overflow: hidden;
}

.AdminPanel_userCard__0iWms::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cc-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.AdminPanel_userCard__0iWms:hover {
  border-color: var(--cc-accent-border);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--cc-glow);
}

.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: var(--cc-radius);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_userCardInfo__zZDEP {
  flex: 1 1;
  min-width: 0;
}

.AdminPanel_userCardName__z-a0z {
  font-size: 18px;
  font-weight: 700;
  color: var(--cc-text-hi);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.3px;
}

.AdminPanel_userCardEmail__N3bAz {
  font-size: 14px;
  color: var(--cc-text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.AdminPanel_userCardMeta__EyAdM {
  padding-top: 16px;
  border-top: 1px solid var(--cc-border-soft);
  margin-top: 4px;
}

.AdminPanel_userCardMeta__EyAdM .AdminPanel_uid__ErUeb {
  display: block;
  font-size: 12px;
  color: var(--cc-text-mid);
  background: var(--cc-icon-chip);
  padding: 8px 12px;
  border-radius: var(--cc-radius-sm);
  font-family: var(--cc-font-mono);
  letter-spacing: 0.3px;
}

.AdminPanel_noResults__lQeN6 {
  text-align: center;
  padding: 60px 40px;
  color: var(--cc-text-mid);
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 2px dashed var(--cc-border-soft);
}

.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: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition: all 0.3s ease;
}

.AdminPanel_backButton__N2M3c:hover {
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  background: var(--cc-panel-hover);
}

.AdminPanel_userDetailCard__ip-a\+ {
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 30px;
  max-width: 800px;
}

.AdminPanel_detailSection__47Zil {
  margin-bottom: 30px;
}

.AdminPanel_detailSection__47Zil:last-child {
  margin-bottom: 0;
}

.AdminPanel_detailSection__47Zil h3 {
  color: var(--cc-text-hi);
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cc-border-soft);
}

.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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.AdminPanel_detailItem__uXuUI span {
  font-size: 15px;
  color: var(--cc-text-hi);
  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: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 32px;
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_backButton__N2M3c:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px var(--cc-glow);
}

/* User Profile Header */
.AdminPanel_userProfileHeader__oqpaE {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  margin-bottom: 28px;
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_userAvatarLarge__qvBXr {
  width: 100px;
  height: 100px;
  border-radius: var(--cc-radius);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  font-size: 42px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow:
    0 8px 24px var(--cc-glow),
    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: 300;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-body);
  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: var(--cc-accent-text);
  font-weight: 600;
  font-family: var(--cc-font-mono);
  margin-bottom: 6px;
  background: var(--cc-glow);
  padding: 6px 14px;
  border-radius: var(--cc-radius-pill);
  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: var(--cc-text-mid);
  font-weight: 500;
}

.AdminPanel_quickInfoItem__pYUuO svg {
  color: var(--cc-text-low);
  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: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--cc-shadow-soft);
}

.AdminPanel_infoCard__rm0Jo:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px var(--cc-glow);
  border-color: var(--cc-accent-border);
}

.AdminPanel_infoCardHeader__nIb1x {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--cc-icon-chip);
  border-bottom: 1px solid var(--cc-border-soft);
}

.AdminPanel_infoCardHeader__nIb1x h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-text-hi);
  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: var(--cc-text-mid);
}

.AdminPanel_dateFilterInput__8M2Co {
  padding: 8px 12px;
  border: 1px solid var(--cc-input-border);
  border-radius: var(--cc-radius-sm);
  font-size: 13px;
  font-family: var(--cc-font-mono);
  color: var(--cc-input-text);
  background: var(--cc-input-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.AdminPanel_dateFilterInput__8M2Co:hover {
  border-color: var(--cc-accent-border);
}

.AdminPanel_dateFilterInput__8M2Co:focus {
  outline: none;
  border-color: var(--cc-accent-border);
  box-shadow: 0 0 0 3px var(--cc-glow);
}

.AdminPanel_clearFilterBtn__CpU-O {
  padding: 8px 14px;
  border: 1px solid var(--cc-border);
  background: var(--cc-panel);
  color: var(--cc-text-mid);
  border-radius: var(--cc-radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--cc-font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}

.AdminPanel_clearFilterBtn__CpU-O:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  color: var(--cc-text-hi);
}

.AdminPanel_infoCardIcon__wL8Og {
  width: 44px;
  height: 44px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  font-size: 20px;
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconGreen__XZ7wv {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconPurple__xStjG {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.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 var(--cc-border-soft);
}

.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: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.AdminPanel_infoLabel__z5nUy svg {
  font-size: 14px;
  color: var(--cc-text-low);
}

.AdminPanel_infoValue__DKX24 {
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-text-hi);
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

.AdminPanel_uidValue__PZgx3 {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  color: var(--cc-text-mid);
  background: var(--cc-icon-chip);
  padding: 6px 10px;
  border-radius: var(--cc-radius-sm);
}

.AdminPanel_planValue__JUgs9 {
  text-transform: capitalize;
  background: var(--cc-premium-bg);
  color: var(--cc-premium-text);
  border: 1px solid var(--cc-premium-border);
  padding: 6px 14px;
  border-radius: var(--cc-radius-pill);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
}

/* Credits Display */
.AdminPanel_creditsDisplay__etutP {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--cc-glow);
  border-radius: var(--cc-radius);
  margin-bottom: 20px;
  border: 1px solid var(--cc-accent-border);
}

.AdminPanel_creditsIcon__yv1BI {
  width: 38px;
  height: 38px;
  background: var(--cc-accent);
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  font-size: 24px;
  box-shadow: 0 4px 12px var(--cc-glow);
  padding: 10px;
}

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

.AdminPanel_creditsLabel__spvtW {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-accent-text);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.AdminPanel_creditsValue__ClQ9M {
  font-size: 28px;
  font-weight: 800;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  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: var(--cc-radius-pill);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
}

.AdminPanel_statusBadgeActive__RU-Gx {
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
}

.AdminPanel_statusBadgeActive__RU-Gx svg {
  color: var(--cc-success-text);
}

.AdminPanel_statusBadgeInactive__MtuZS {
  background: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
}

.AdminPanel_statusBadgeInactive__MtuZS svg {
  color: var(--cc-error-text);
}

.AdminPanel_noSubscription__ZNjLg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--cc-text-low);
  text-align: center;
}

.AdminPanel_noSubscription__ZNjLg svg {
  font-size: 40px;
  color: var(--cc-text-low);
}

.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: var(--cc-text-mid);
}

.AdminPanel_loadingSpinner__ykBjC {
  width: 48px;
  height: 48px;
  border: 4px solid var(--cc-border-soft);
  border-top-color: var(--cc-accent-text);
  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: var(--cc-text-low);
  font-size: 16px;
}

/* Full Width Card */
.AdminPanel_fullWidthCard__Ye2PH {
  grid-column: 1 / -1;
  background: var(--cc-panel);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--cc-shadow-soft);
  margin-top: 24px;
}

.AdminPanel_fullWidthCard__Ye2PH:hover {
  box-shadow: 0 8px 24px var(--cc-glow);
  border-color: var(--cc-accent-border);
}

/* Additional Icon Colors */
.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconBlue__wvPYo {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconOrange__dwiMy {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconPink__FE8LA {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconTeal__Wi1bE {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

.AdminPanel_infoCardIcon__wL8Og.AdminPanel_iconGray__RsB-w {
  background: var(--cc-accent);
  box-shadow: 0 4px 12px var(--cc-glow);
}

/* Graph Container */
.AdminPanel_graphContainer__OZI0N {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid var(--cc-border-soft);
  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 var(--cc-border-soft);
}

.AdminPanel_legendItem__EB04J {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cc-text-mid);
  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: var(--cc-success-text);
}

.AdminPanel_legendDotNegative__glN5e {
  background: var(--cc-error-text);
}

.AdminPanel_legendDotNeutral__f\+ijE {
  background: var(--cc-accent-text);
}

/* 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: var(--cc-text-hi);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cc-border-soft);
}

/* Timeline Amount Colors */
.AdminPanel_timelineAmount__ORTSt {
  font-size: 14px;
  font-weight: 700;
  color: var(--cc-text-mid);
}

.AdminPanel_amountPositive__-8CeG {
  color: var(--cc-success-text);
}

.AdminPanel_amountNegative__yAtx9 {
  color: var(--cc-error-text);
}

.AdminPanel_timelineDescription__rrAmv {
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-text-hi);
}

.AdminPanel_timelineBalance__c2gJM {
  font-size: 13px;
  color: var(--cc-text-mid);
  font-weight: 500;
  background: var(--cc-icon-chip);
  padding: 4px 10px;
  border-radius: var(--cc-radius-sm);
}

.AdminPanel_modelBadge__rg1XH {
  font-size: 11px;
  font-weight: 600;
  color: var(--cc-accent-text);
  background: var(--cc-glow);
  padding: 4px 10px;
  border-radius: var(--cc-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--cc-font-mono);
}

/* Category Colors for Timeline Dots */
.AdminPanel_categorySystem__Njt25 {
  background: var(--cc-accent) !important;
}

.AdminPanel_categorySubscription__avTtQ {
  background: var(--cc-accent) !important;
}

.AdminPanel_categoryPurchase__rnFJG {
  background: var(--cc-accent) !important;
}

.AdminPanel_categoryPositive__ehwPG {
  background: var(--cc-accent) !important;
}

.AdminPanel_categoryNegative__QrEsO {
  background: var(--cc-accent) !important;
}

.AdminPanel_categoryNeutral__mDgRV {
  background: var(--cc-accent) !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: var(--cc-icon-chip);
  border-radius: 3px;
}

.AdminPanel_historyTimeline__j6uD1::-webkit-scrollbar-thumb {
  background: var(--cc-border);
  border-radius: 3px;
}

.AdminPanel_historyTimeline__j6uD1::-webkit-scrollbar-thumb:hover {
  background: var(--cc-text-low);
}

.AdminPanel_timelineItem__-HjO5 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.AdminPanel_timelineItem__-HjO5:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_timelineDot__UDQjI {
  width: 40px;
  height: 40px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  font-size: 16px;
  flex-shrink: 0;
}

.AdminPanel_upgradeIcon__QTTxi {
  color: var(--cc-success-text);
}

.AdminPanel_downgradeIcon__Dj0\+m {
  color: var(--cc-error-text);
}

.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: var(--cc-radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: -webkit-fit-content;
  width: fit-content;
}

.AdminPanel_actionPositive__2iH0P {
  background: var(--cc-success-bg);
  color: var(--cc-success-text);
  border: 1px solid var(--cc-success-border);
}

.AdminPanel_actionNegative__qu8c8 {
  background: var(--cc-error-bg);
  color: var(--cc-error-text);
  border: 1px solid var(--cc-error-border);
}

.AdminPanel_actionNeutral__RTJzK {
  background: var(--cc-icon-chip);
  color: var(--cc-text-mid);
  border: 1px solid var(--cc-border);
}

.AdminPanel_timelineDetails__FRDhU {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.AdminPanel_creditsAdded__O8AyQ {
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-success-text);
}

.AdminPanel_planBadge__Ct0xy {
  padding: 4px 12px;
  background: var(--cc-premium-bg);
  color: var(--cc-premium-text);
  border: 1px solid var(--cc-premium-border);
  border-radius: var(--cc-radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--cc-font-mono);
  text-transform: capitalize;
}

.AdminPanel_amountPaid__0Ah1t {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-text-mid);
}

.AdminPanel_timelineDate__gv7H- {
  font-size: 13px;
  color: var(--cc-text-low);
  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: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.AdminPanel_purchaseItem__U86L-:hover {
  background: var(--cc-panel-hover);
}

.AdminPanel_purchaseIcon__i9F4D {
  width: 44px;
  height: 44px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  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: var(--cc-success-text);
}

.AdminPanel_purchaseDisplay__xgWN8 {
  font-size: 13px;
  color: var(--cc-text-mid);
  font-weight: 500;
}

.AdminPanel_purchaseDate__5ufqr {
  font-size: 13px;
  color: var(--cc-text-low);
  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: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
  text-align: center;
}

.AdminPanel_statNumber__U4Nyv {
  font-size: 28px;
  font-weight: 800;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  letter-spacing: -1px;
}

.AdminPanel_statLabel__LIiAh {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-text-mid);
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Raw Data Container */
.AdminPanel_rawDataContainer__JSwqb {
  max-height: 400px;
  overflow: auto;
  background: #16110f;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 20px;
}

.AdminPanel_rawDataPre__6xKQ0 {
  margin: 0;
  font-family: var(--cc-font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(240, 233, 230, 0.9);
  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: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
  transition: all 0.2s ease;
}

.AdminPanel_shopItemCard__pmSAE:hover {
  background: var(--cc-panel-hover);
  border-color: var(--cc-accent-border);
  transform: translateY(-2px);
}

.AdminPanel_shopItemIcon__20iBK {
  width: 48px;
  height: 48px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  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: var(--cc-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AdminPanel_shopItemType__yynbN {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-accent-text);
  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: var(--cc-success-text);
}

.AdminPanel_shopItemDate__soG\+z {
  font-size: 12px;
  color: var(--cc-text-low);
  font-weight: 500;
}

.AdminPanel_listingStats__0\+0kb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
  color: var(--cc-text-mid);
  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: var(--cc-text-low);
  text-align: center;
}

.AdminPanel_emptyState__yJ26V svg {
  font-size: 48px;
  color: var(--cc-text-low);
}

.AdminPanel_emptyState__yJ26V span {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-text-mid);
}

/* Mini Loading */
.AdminPanel_miniLoading__EoP8V {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--cc-text-mid);
  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: var(--cc-overlay);
  -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: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  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 var(--cc-border-soft);
  background: var(--cc-icon-chip);
  flex-shrink: 0;
}

.AdminPanel_modalIcon__OXKim {
  width: 48px;
  height: 48px;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  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: var(--cc-text-hi);
  margin: 0 0 4px 0;
}

.AdminPanel_modalDate__vMc2d {
  font-size: 13px;
  color: var(--cc-text-mid);
  font-weight: 500;
}

.AdminPanel_modalClose__i7s15 {
  background: none;
  border: none;
  color: var(--cc-text-low);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cc-radius-sm);
  transition: all 0.2s ease;
}

.AdminPanel_modalClose__i7s15:hover {
  background: var(--cc-icon-chip);
  color: var(--cc-text-hi);
}

.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: var(--cc-icon-chip);
  border-radius: var(--cc-radius);
  margin-bottom: 24px;
}

.AdminPanel_modalAmount__HA3f4 {
  font-size: 32px;
  font-weight: 800;
  color: var(--cc-text-hi);
  font-family: var(--cc-font-mono);
  letter-spacing: -1px;
}

.AdminPanel_modalBalance__ALw8B {
  font-size: 14px;
  color: var(--cc-text-mid);
  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: var(--cc-icon-chip);
  border-radius: var(--cc-radius-sm);
}

.AdminPanel_modalDetailLabel__fhXlk {
  font-size: 14px;
  color: var(--cc-text-mid);
  font-weight: 500;
}

.AdminPanel_modalDetailValue__XN-b7 {
  font-size: 14px;
  color: var(--cc-text-hi);
  font-weight: 600;
}

.AdminPanel_modalRawData__3RDCu {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cc-border-soft);
}

.AdminPanel_modalRawData__3RDCu h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-text-mid);
  margin: 0 0 12px 0;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0 {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: auto;
  font-size: 11px;
  background: #16110f;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 16px;
  color: rgba(240, 233, 230, 0.9);
  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: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.AdminPanel_modalRawData__3RDCu .AdminPanel_rawDataPre__6xKQ0::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* 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: var(--cc-radius);
  }

  .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 var(--cc-border-soft);
  }
}

/* Cluster Modal Styles */
.AdminPanel_clusterModal__LA0Hj {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  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 var(--cc-error-border);
  background: var(--cc-error-bg);
  flex-shrink: 0;
}

.AdminPanel_clusterModalTitle__RF0nY h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.AdminPanel_clusterCount__XoINA {
  font-size: 14px;
  color: var(--cc-text-mid);
  font-weight: 500;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border-soft);
  padding: 4px 12px;
  border-radius: var(--cc-radius-sm);
  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 var(--cc-border-soft);
}

.AdminPanel_subGraphTitle__4MonA {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cc-text-hi);
}

.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: var(--cc-icon-chip);
  padding: 16px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AdminPanel_clusterStatLabel__prv8J {
  font-size: 12px;
  color: var(--cc-text-mid);
  font-weight: 600;
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.AdminPanel_clusterStatValue__RLWS\+ {
  font-size: 18px;
  font-weight: 700;
  color: var(--cc-text-hi);
}

.AdminPanel_clusterDetailPanel__AiFhM {
  width: 400px;
  background: var(--cc-panel);
  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: 1px solid var(--cc-border);
}

.AdminPanel_detailIcon__quLVs {
  width: 40px;
  height: 40px;
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-btn-primary-text);
  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: var(--cc-text-hi);
}

.AdminPanel_detailDate__Yx8eZ {
  font-size: 12px;
  color: var(--cc-text-mid);
  font-weight: 500;
}

.AdminPanel_detailAmountDisplay__-MZW4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  background: var(--cc-panel-strong);
  border-radius: var(--cc-radius-sm);
  margin-bottom: 20px;
  border: 1px solid var(--cc-border);
}

.AdminPanel_detailAmount__7DYbP {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--cc-font-mono);
  letter-spacing: -0.5px;
}

.AdminPanel_detailBalance__ow\+tR {
  font-size: 13px;
  color: var(--cc-text-mid);
  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: var(--cc-panel-strong);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-border-soft);
}

.AdminPanel_detailLabel__UjjLv {
  font-size: 13px;
  color: var(--cc-text-mid);
  font-weight: 600;
  font-family: var(--cc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.AdminPanel_detailValue__E8Lno {
  font-size: 14px;
  color: var(--cc-text-hi);
  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 var(--cc-border-soft);
  }

  .AdminPanel_clusterDetailPanel__AiFhM {
    width: 100%;
  }
}

.NotFoundPage_container__YNLty {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;

  /* Theme tokens — this page manages its own light/dark toggle
     independent of body.dark-theme (see NotFoundPage.js), so the values
     below are literal copies of the --cc-* brand tokens rather than
     var(--cc-*) references (those would follow the app-wide theme, not
     this page's local one). Light (default) values mirror --cc-* :root;
     .pageDark values mirror --cc-* body.dark-theme. */
  --nf-container-bg:
    radial-gradient(
      ellipse 70% 45% at 50% 0%,
      rgba(163, 82, 82, 0.12),
      rgba(0, 0, 0, 0) 70%
    ),
    #f7f2ef;
  --nf-card-bg: #ffffff;
  --nf-card-border: rgba(120, 95, 95, 0.28);
  --nf-card-shadow: 0 12px 32px rgba(90, 60, 60, 0.14);
  --nf-title: #262020;
  --nf-subtitle: rgba(38, 32, 32, 0.75);
  --nf-accent: #a35252;

  background: var(--nf-container-bg);
}

.NotFoundPage_pageDark__Bl9Xc {
  --nf-container-bg:
    radial-gradient(
      ellipse 70% 45% at 50% 0%,
      rgba(230, 199, 199, 0.12),
      rgba(0, 0, 0, 0) 70%
    ),
    #000;
  --nf-card-bg: rgba(12, 12, 15, 0.8);
  --nf-card-border: rgba(100, 100, 110, 0.5);
  --nf-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  --nf-title: rgba(255, 255, 255, 0.95);
  --nf-subtitle: rgba(255, 255, 255, 0.7);
  --nf-accent: #e6c7c7;
}

.NotFoundPage_content__9rMOD {
  background: var(--nf-card-bg);
  border: 1px solid var(--nf-card-border);
  border-radius: 20px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--nf-card-shadow);
}

.NotFoundPage_code__OliyG {
  font-family: var(--cc-font-mono);
  font-size: 4rem;
  font-weight: 800;
  color: var(--nf-accent);
  line-height: 1;
  margin-bottom: 12px;
}

.NotFoundPage_title__q392v {
  font-family: var(--cc-font-body);
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 12px;
  color: var(--nf-title);
}

.NotFoundPage_subtitle__IvX6f {
  font-size: 1rem;
  color: var(--nf-subtitle);
  line-height: 1.5;
  margin-bottom: 28px;
}

.NotFoundPage_homeButton__qfIN0 {
  display: inline-block;
  font-family: var(--cc-font-mono);
  /* --cc-btn-primary-* are identical in both :root and body.dark-theme,
     so these literals stay correct regardless of the app's global theme
     or this page's own local toggle. */
  background: #e6c7c7;
  color: #1a1a1a;
  border: 1px solid #e6c7c7;
  text-decoration: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.NotFoundPage_homeButton__qfIN0:hover {
  background: #f2dcdc;
  transform: translateY(-1px);
}

/* Theme toggle button — this page has no close button, so top-right corner */
.NotFoundPage_themeToggle__ZgWsZ {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #555;
}

.NotFoundPage_pageDark__Bl9Xc .NotFoundPage_themeToggle__ZgWsZ {
  background: rgba(30, 30, 35, 0.6);
  border-color: rgba(100, 100, 110, 0.5);
  color: rgba(255, 255, 255, 0.85);
}

.NotFoundPage_themeToggle__ZgWsZ:hover {
  transform: translateY(-2px);
}

.NotFoundPage_themeToggle__ZgWsZ:focus-visible {
  outline: 2px solid #e6c7c7;
  outline-offset: 2px;
}

.ErrorBoundary_container__YTe4t {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-bg);
  padding: 20px;
}

.ErrorBoundary_content__IDEnI {
  background: var(--cc-panel-strong);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 40px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: var(--cc-shadow);
}

.ErrorBoundary_icon__l9sGG {
  font-size: 4rem;
  margin-bottom: 20px;
}

.ErrorBoundary_title__V8oxg {
  font-family: var(--cc-font-body);
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 12px;
  color: var(--cc-text-hi);
}

.ErrorBoundary_subtitle__mWdA4 {
  font-size: 1rem;
  color: var(--cc-text-mid);
  line-height: 1.5;
  margin-bottom: 28px;
}

.ErrorBoundary_reloadButton__EITbm {
  font-family: var(--cc-font-mono);
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-text);
  border: 1px solid var(--cc-btn-primary-bg);
  border-radius: var(--cc-radius-sm);
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.ErrorBoundary_reloadButton__EITbm:hover {
  background: var(--cc-btn-primary-bg-hover);
  transform: translateY(-1px);
}