/* Lineage tree styles */
.lineage-tree {
  margin-top: 12px;
  overflow: hidden; /* zoom container handles scrolling */
  border: 1px solid var(--border-color, #2a2a2a);
  border-radius: 8px;
  background: var(--panel-color, #0f0f10);
  height: 250px; /* Half the previous height */
  min-height: 250px; /* Ensure minimum height */
  position: relative;
  width: 100%;
  min-width: 0; /* Allow flex item to shrink */
  box-sizing: border-box;
  display: block; /* Ensure it's a block element */
}

.lineage-tree-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  gap: 4px;
  background: var(--surface-2, #151517);
  border-radius: 6px;
  padding: 4px;
  border: 1px solid var(--border-color, #2a2a2a);
}

.lineage-zoom-btn {
  background: var(--bg-tertiary, #1a1a1c);
  border: 1px solid var(--border-color, #2a2a2a);
  color: var(--text-primary, #e5e7eb);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.lineage-zoom-btn:hover {
  background: var(--accent, #4f46e5);
  border-color: var(--accent, #4f46e5);
}

.lineage-zoom-btn:active {
  background: var(--accent-secondary, #6366f1);
}

.lineage-tree-zoom-container {
  width: 100%;
  height: 100%;
  overflow: auto; /* Allow scrolling if content is too wide */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 120px; /* Ensure minimum height for smaller container */
}

.lineage-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transition: transform 0.1s ease-out;
}

.lineage-link {
  fill: none;
  stroke: var(--accent-secondary, #6366f1);
  stroke-opacity: 0.8;
  stroke-width: 3px;
}

.lineage-link-group {
  fill: none;
  stroke: var(--accent, #818cf8);
  stroke-opacity: 0.6;
  stroke-width: 2.5px;
}



.lineage-node-bg {
  fill: var(--surface-2, #151517);
  stroke: var(--border-color, #2a2a2a);
  stroke-width: 1px;
}

.lineage-node.current .lineage-node-bg {
  stroke: var(--accent, #4f46e5);
  stroke-width: 2px;
}

.lineage-node-title {
  fill: var(--text-primary, #e5e7eb);
  font-size: 12px;
  font-weight: 600;
}

.lineage-node-thumb {
  rx: 4;
}

.lineage-thumb-placeholder {
  fill: #222327;
}
/* Palette editor styles */
.palette-step-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}

.palette-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 200px;
}

.color-list {
  border-right: 1px solid var(--border-secondary);
  padding-right: 20px;
}

.palette-colors,
.editable-palette-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 6px;
  margin-top: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.palette-color-item,
.editable-palette-color {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 2px solid var(--border-secondary);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.palette-color-item:hover,
.editable-palette-color:hover {
  transform: scale(1.05);
  border-color: var(--accent-primary);
}

.palette-color-item.selected,
.editable-palette-color.selected {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3);
}

.color-editor {
  padding-left: 10px;
}

#colorPickerContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

/* Loaded palette section styles */
.loaded-palette-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}



.loaded-palette-colors-container {
  margin-bottom: 15px;
}

.loaded-palette-colors-container h5 {
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: 14px;
}

.loaded-palette-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 4px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px;
  background-color: var(--bg-secondary);
  border-radius: 4px;
}

.loaded-palette-color {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.loaded-palette-color:hover {
  transform: scale(1.1);
  border-color: var(--accent-primary);
  box-shadow: 0 0 4px rgba(46, 204, 113, 0.3);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CSS Custom Properties for theming */
:root {
  --bg-primary: #1e1e2e;
  --bg-secondary: #292940;
  --bg-tertiary: #2e2e48;
  --bg-quaternary: #34495e;
  --text-primary: #ddd;
  --text-secondary: #ccc;
  --text-muted: #888;
  --text-on-accent: #ffffff;
  --border-primary: #444;
  --border-secondary: #555;
  --accent-primary: #27ae60;
  --accent-secondary: #2ecc71;
  --accent-hover: #3e5770;
  --button-bg: #34495e;
  --button-hover: #3a3a50;
  --input-bg: #1e1e2e;
  --input-border: #555;
  --input-focus: #27ae60;
  --accent-color: #2ecc71;
  --checkbox-size: 16px;
}

/* Global checkbox styling */
input[type="checkbox"] {
  /* Use custom rendering so unchecked state can be themed */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  line-height: 1;
  vertical-align: middle;
  border: 1px solid var(--border-secondary);
  background-color: var(--bg-primary);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  overflow: hidden; /* ensure tick doesn't protrude */
  cursor: pointer;
}

/* Tick mark */
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  width: 4px; /* slimmer leg */
  height: 8px; /* balanced height */
  left: 4px; /* center within 16px box */
  top: 1px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease-in-out;
}

input[type="checkbox"]:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out;
}

input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--accent-primary);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Normalize legacy checkbox scalings and overrides */
.setting-item input[type="checkbox"],
#addFunctionModal input[type="checkbox"],
.checkbox-group input[type="checkbox"],
.gif-toggle-checkbox {
  transform: none !important;
  width: var(--checkbox-size) !important;
  height: var(--checkbox-size) !important;
  min-width: var(--checkbox-size) !important;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

/* Outer Container */
.outer-container {
  width: 100%;
  height: calc(100vh - 45px); /* Account for top bar only (controls moved to left panel) */
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 45px;
}

/* NEW LAYOUT STRUCTURE */
.layout-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--bg-primary);
}

/* Sidebar */
.sidebar {
  width: 100px;
  background-color: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-primary);
  position: relative;
  height: 100%;
  flex-shrink: 0;
  z-index: 10; /* Higher than editor panel so dropdowns can appear above it */
  overflow: visible; /* Allow dropdown to extend beyond sidebar */
}

.sidebar-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar-button:hover {
  background-color: var(--button-hover);
}

.sidebar-button.active {
  background-color: var(--accent-primary);
  color: white;
}

/* Sidebar Auto-save Controls */
.sidebar-auto-save {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2; /* Ensure it's above the texture filtering button */
}

.sidebar-save-btn, .sidebar-restore-btn {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sidebar-save-btn:hover, .sidebar-restore-btn:hover {
  background-color: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.sidebar .auto-save-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.sidebar .auto-save-indicator {
  font-size: 10px;
  color: var(--text-muted);
}

/* Sidebar Editor Controls */
.sidebar-editor-controls {
  position: absolute;
  bottom: 200px; /* Position above texture filtering button */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
  z-index: 1;
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-secondary);
  /* Removed overflow constraints to allow dropdown to escape */
}

.sidebar-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.sidebar-control-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 4px;
  min-height: 36px;
  background-color: var(--button-bg);
  border: 1px solid var(--border-secondary);
}

.sidebar-control-button:hover {
  background-color: var(--button-hover);
  color: var(--text-primary);
}

.sidebar-control-button.enabled {
  background-color: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.sidebar-control-button.enabled:hover {
  background-color: var(--accent-secondary);
}

.sidebar-controls-fullwidth {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.sidebar-control-button-full {
  width: 100%;
}

/* Sidebar file operations styling */
.sidebar-controls-grid label[for="loadButton"] {
  cursor: pointer;
  margin: 0;
}

.sidebar-controls-grid input[type="file"] {
  display: none;
}

.sidebar-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Fill grid cell */
}

.sidebar-dropdown .sidebar-control-button {
  width: 100%; /* Fill the dropdown wrapper */
}

.sidebar-dropdown-content {
  display: none;
  position: absolute;
  left: calc(100% - 10px); /* Overlap with button area for seamless hover */
  top: -10px; /* Extend above to create vertical hover area */
  padding-left: 14px; /* Invisible hover bridge */
  padding-top: 10px; /* Match the top offset */
  z-index: 10002;
}

.sidebar-dropdown-menu {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 4px 0;
  min-width: 144px;
}

.sidebar-dropdown-menu a {
  color: var(--text-primary);
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  white-space: nowrap;
}

.sidebar-dropdown-menu a:hover {
  background-color: var(--accent-hover);
}

.sidebar-dropdown:hover .sidebar-dropdown-content {
  display: block;
}

/* Texture Filtering Button in Sidebar */
.texture-filtering-button {
  position: absolute;
  bottom: 130px; /* Position above auto-save controls (2 buttons ~80px + status ~20px + padding ~16px + gap ~14px = ~130px) */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  font-size: 11px;
  gap: 2px;
  z-index: 1;
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-secondary);
  min-height: 50px;
}

.texture-filtering-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.texture-filtering-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.texture-filtering-button.nearest-active .texture-filtering-value {
  color: var(--accent-primary);
}

.texture-filtering-button:hover {
  background-color: var(--button-hover);
}

.sidebar .auto-save-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-muted);
  display: inline-block;
  margin-right: 4px;
}

.sidebar .auto-save-indicator.saved::before {
  background-color: var(--accent-primary);
}

.sidebar .auto-save-indicator.saving::before {
  background-color: #f39c12;
  animation: pulse 1s infinite;
}

.sidebar .auto-save-indicator.error::before {
  background-color: #e74c3c;
}

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

/* Main Content Area */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
}

/* Toolbar */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-tertiary);
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-primary);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-left label {
  color: var(--text-primary);
  font-size: 14px;
}

.toolbar-left select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 14px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Content Area */
.content-area {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 100%;
}

/* Left Panel */
.left-panel {
  width: 400px;
  min-width: 100px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  border-right: 1px solid var(--border-primary);
  height: 100%;
  overflow: hidden;
}

/* Editor Section */
.editor-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 50px;
}

/* Channel Tabs */
.channel-tabs {
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-quaternary);
  border-bottom: 1px solid var(--border-primary);
  overflow: hidden;
}

.channel-tabs-left,
.channel-tabs-right {
  display: flex;
}

.channel-tabs-left {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.channel-tabs-right {
  flex-shrink: 0;
}

.channel-tab {
  background-color: var(--tab-color, var(--bg-quaternary));
  color: var(--text-primary);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s, padding 0.3s ease, min-width 0.3s ease;
  border-right: 1px solid var(--border-primary);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* Responsive behavior for iChannel tabs */
.channel-tab[data-channel^="iChannel"] {
  transition: padding 0.3s ease, min-width 0.3s ease;
}

/* When space is limited, shrink iChannel tabs */
@media (max-width: 1200px) {
  .channel-tab[data-channel^="iChannel"] {
    padding: 10px 8px;
    min-width: 40px;
  }
  
  .channel-tab[data-channel^="iChannel"]:hover {
    min-width: auto;
    padding: 10px 15px;
  }
}

@media (max-width: 1000px) {
  .channel-tab[data-channel^="iChannel"] {
    padding: 10px 6px;
    min-width: 35px;
  }
  
  .channel-tab[data-channel^="iChannel"]:hover {
    min-width: auto;
    padding: 10px 15px;
  }
}

@media (max-width: 800px) {
  .channel-tab[data-channel^="iChannel"] {
    padding: 10px 4px;
    min-width: 30px;
  }
  
  .channel-tab[data-channel^="iChannel"]:hover {
    min-width: auto;
    padding: 10px 15px;
  }
}

/* Ensure minimum usable width for channel tabs */
.channel-tab[data-channel^="iChannel"] {
  min-width: 25px !important; /* Minimum width for usability */
}

/* Ensure channel tabs container doesn't overflow */
.channel-tabs {
  min-width: 0;
}

/* Ensure channel tabs left section can shrink */
.channel-tabs-left {
  min-width: 0;
  flex: 1;
}

/* Ensure individual channel tabs can shrink */
.channel-tab[data-channel^="iChannel"] {
  min-width: 0;
  flex-shrink: 1;
  max-width: 120px; /* Prevent tabs from becoming too wide */
}

/* Keep Display and Common tabs at full size */
.channel-tab[data-channel="displayMode"],
.channel-tab[data-channel="common"] {
  flex-shrink: 0;
  min-width: auto;
}

/* Add button should always be visible */
#addChannelButton {
  flex-shrink: 0;
  min-width: auto;
  padding: 10px 15px;
}

.channel-tab:hover {
  background-color: var(--accent-hover);
}

.channel-tab.active {
  background-color: var(--accent-primary) !important;
  color: white;
}

.channel-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 2px;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: none;
  z-index: 1000;
  transition: background-color 0.2s;
}

.channel-delete-btn:hover {
  background: rgba(255, 0, 0, 0.9);
}

.channel-tab:hover .channel-delete-btn {
  display: block;
}

#editor {
  flex: 1;
  height: 100%;
  min-height: 50px;
}

/* Uniforms Section */
.uniforms-section {
  height: 50px;
  min-height: 50px;
  max-height: 800px;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
}

.uniforms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
  font-size: 14px;
  color: var(--text-primary);
}

.uniforms-header button {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.uniforms-header button:hover {
  background-color: var(--accent-secondary);
}

#uniformList {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* Loop Section */
.loop-section {
  height: 50px;
  min-height: 50px;
  max-height: 400px;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
}

.loop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
  font-size: 14px;
  color: var(--text-primary);
}

.loop-toggle-btn {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.loop-toggle-btn:hover {
  background-color: var(--accent-secondary);
}

.loop-toggle-btn.active {
  background-color: var(--accent-secondary);
}

.loop-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px;
}

/* Uniforms Resizer */
.uniforms-resizer {
  height: 5px;
  background-color: var(--border-primary);
  cursor: row-resize;
  position: relative;
  transition: background-color 0.3s;
  flex-shrink: 0; /* Prevent shrinking */
}

.uniforms-resizer:hover {
  background-color: var(--accent-primary);
}

.uniforms-resizer::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  right: 0;
  background-color: transparent;
}

/* Resizer */
.resizer {
  width: 5px;
  background-color: var(--border-primary);
  cursor: col-resize;
  position: relative;
  transition: background-color 0.3s;
}

.resizer:hover {
  background-color: var(--accent-primary);
}

.resizer::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  background-color: transparent;
}

/* Right Panel */
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #000;
  height: 100%;
  min-width: 0;
}

.canvas-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  object-fit: contain;
}

#canvas:fullscreen {
  width: 100vw;
  height: 100vh;
  object-fit: fill;
}

/* Tab Content Container */
.tab-content-container {
  position: absolute;
  top: 45px;
  left: 100px; /* Account for sidebar width */
  right: 0;
  bottom: 0px;
  z-index: 100;
  background-color: var(--bg-primary);
  display: none;
}

/* Legacy styles for backward compatibility */
.container {
  display: flex;
  width: 100%;
  aspect-ratio: 2 / 1;
}

.editor-container,
.shader-container {
  flex: 1;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--bg-quaternary);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}



.tab-button {
  flex: 1;
  padding: 10px;
  border: none;
  background-color: var(--bg-quaternary);
  cursor: pointer;
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
}

.tab-button.active {
  background-color: var(--accent-hover);
  border-bottom: 2px solid var(--accent-primary);
}

#uniformList {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.uniform {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.uniform input[type="text"] {
  margin-right: 4px;
  padding: 5px;
  font-size: 14px;
  width: 100px;
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-primary);
}

.uniform input[type="number"] {
  width: 60px;
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-primary);
}

.uniform input[type="range"] {
  flex: 1;
  margin-left: 4px;
  accent-color: var(--accent-color);
}

.uniform button {
  margin-left: 10px;
  background-color: #844141;
  color: white;
  padding: 1px 3px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.uniform button:hover {
  background-color: darkred;
}



.controls {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  padding: 4px 6px;
  min-height: 36px;
  flex-flow: wrap;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

.controls > * {
  font-size: 13px;
}

.controls button,
.controls label {
  position: relative;
}

.controls button:hover::after,
.controls label:hover::after {
  content: attr(data-title);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
}

.controls input[type="file"] {
  display: none;
}

/* Resolution Scale Control */
.resolution-scale-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

.resolution-scale-control label {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
}

.resolution-scale-control select {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 12px;
  outline: none;
}

.resolution-scale-control select:hover {
  background-color: var(--accent-hover);
}

/* Interactive Resolution Display */
.interactive-resolution {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--text-primary);
}

.resolution-part {
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.resolution-part:hover {
  background-color: var(--accent-hover);
}

/* Special hover for x that spans both width and height */
#resolutionX:hover {
  background-color: var(--accent-hover);
  margin: -2px -4px;
  padding: 4px 8px;
}

.resolution-part.editing {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
}

.resolution-part.locked {
  background-color: var(--bg-quaternary);
  color: var(--text-on-accent);
  /*font-weight: bold;*/
  /*box-shadow: 0 0 0 1px var(--accent-primary);*/
}

/* Loop Controls Modal */
.loop-modal-content {
  max-width: 500px;
  width: 90%;
  min-width: 400px;
  min-height: 300px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loop-modal-content .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

/* Ensure proper resize behavior */
.loop-modal-content {
  position: relative;
  box-sizing: border-box;
}

.loop-controls-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  flex-wrap: wrap;
}

.loop-controls-row.button-row {
  justify-content: center;
  gap: 15px;
}

.loop-controls-row.status-row {
  padding: 8px 0;
  border-top: 1px solid var(--bg-quaternary);
  border-bottom: 1px solid var(--bg-quaternary);
}

.loop-btn {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 100px;
}

.loop-btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

.loop-btn.active {
  background-color: var(--accent-primary);
  color: white;
}

.loop-btn i {
  margin-right: 6px;
}

.loop-controls-row label {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  font-weight: 500;
}

.loop-controls-row input[type="number"] {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 14px;
  width: 80px;
  text-align: center;
}

.loop-controls-row span {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.loop-controls-row.status-row span {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* Timeline Container */
.timeline-container,
.examination-timeline-container {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  width: 100%;
}

.timeline-container, .examination-timeline-container label {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}

.timeline-slider-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.timeline-container input[type="range"] {
  width: 100%;
  background: transparent;
  border-radius: 4px;
  height: 6px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--bg-quaternary);
  position: relative;
  z-index: 2;
}

.timeline-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.timeline-overlay.examination-mode {
  background: linear-gradient(
    to right,
    var(--bg-tertiary) 0%,
    var(--bg-tertiary) var(--exam-start-end, 0%),
    color-mix(in srgb, var(--bg-tertiary) 30%, transparent) var(--exam-start-end, 0%),
    color-mix(in srgb, var(--bg-tertiary) 30%, transparent) var(--exam-end-start, 0%),
    var(--bg-tertiary) var(--exam-end-start, 0%),
    var(--bg-tertiary) 100%
  );
}

.timeline-container input[type="range"]::-webkit-slider-track {
  background: transparent;
  height: 6px;
  border-radius: 3px;
}

.timeline-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid var(--bg-primary);
  transition: all 0.2s ease;
}

.timeline-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.timeline-container input[type="range"]::-moz-range-track {
  background: transparent;
  height: 6px;
  border-radius: 3px;
  border: none;
}

.timeline-container input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.timeline-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.timeline-container span {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
  flex-shrink: 0;
}

/* Loop Examination Section */
.loop-examination-section {
  border-top: 1px solid var(--bg-quaternary);
  padding-top: 4px;
  margin-top: 4px;
}

.examination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.examination-controls label {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  font-weight: 500;
}

.examination-controls input[type="number"] {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  width: 60px;
  text-align: center;
}

.examination-controls i {
  color: var(--text-secondary);
  font-size: 14px;
  cursor: help;
}

.examination-mode-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.examination-mode-controls button {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: 1px solid var(--bg-quaternary);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.examination-mode-controls button:hover {
  background-color: var(--button-hover);
  border-color: var(--accent-primary);
}

.examination-mode-controls button.active {
  background-color: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.examination-mode-controls i {
  /*color: var(--text-secondary);*/
  font-size: 12px;
  cursor: help;
}

/*.examination-seek-controls {
  margin-top: 8px;
}*/

.examination-duration-controls button {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.examination-duration-controls button:hover {
  background-color: var(--button-hover);
  border-color: var(--accent-primary);
}

/* Examination Timeline Container */
.examination-timeline-container {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  width: 100%;
}

.examination-timeline-slider-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.examination-timeline-container input[type="range"] {
  width: 100%;
  background: var(--bg-tertiary);
  border-radius: 4px;
  height: 6px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--bg-quaternary);
}

.examination-timeline-container input[type="range"]::-webkit-slider-track {
  background: transparent;
  height: 6px;
  border-radius: 3px;
}

.examination-timeline-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid var(--bg-primary);
  transition: all 0.2s ease;
}

.examination-timeline-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.examination-timeline-container input[type="range"]::-moz-range-track {
  background: transparent;
  height: 6px;
  border-radius: 3px;
  border: none;
}

.examination-timeline-container input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.examination-timeline-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.examination-timeline-container span {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
}

/* Disabled state for seek slider when seek mode is off */
.examination-timeline-container.disabled {
  opacity: 0.5;
  pointer-events: auto; /* Keep it functional */
}

.examination-timeline-container.disabled input[type="range"] {
  background: var(--bg-secondary);
  border-color: var(--bg-quaternary);
  cursor: pointer; /* Keep cursor as pointer to indicate it's still usable */
}

.examination-timeline-container.disabled input[type="range"]::-webkit-slider-thumb {
  background: var(--text-secondary);
  border-color: var(--bg-secondary);
}

.examination-timeline-container.disabled input[type="range"]::-moz-range-thumb {
  background: var(--text-secondary);
  border-color: var(--bg-secondary);
}

.examination-timeline-container.disabled span {
  color: var(--text-tertiary);
}

/* X-Seek Indicator Bar */
.x-seek-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 10;
  /*transition: left 0.1s ease;*/
}

.x-seek-indicator .seek-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--accent-primary);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.examination-range-display {
  background-color: var(--bg-tertiary);
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 6px;
  border-left: 3px solid var(--accent-primary);
}

.examination-range-display span {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.stats {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--bg-secondary);
  border-top: 2px solid var(--bg-quaternary);
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50%;
  height: 60px;
}

.loadButton-label {
  padding: 2px 5px;
  font-size: 16px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


button {
  padding: 3px 5px;
  font-size: 16px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: var(--accent-secondary);
}

.loadButton-label:hover {
  background-color: var(--accent-secondary);
}

#fpsDisplay, #resolutionDisplay {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 13px;
  margin-left: 8px;
}
/* Modal styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1050; /* Sit on top */
  left: 50%;
  top: 25%;
  width: auto; 
  height: auto;
  pointer-events: none; /* Allow clicks to pass through the container */
  /* Use transform for initial centering, but allow absolute positioning for resize */
  transform: translate(-50%, -25%);
}

/* Make modal visible when targeted */
.modal[style*="display: block"] {
    display: block !important;
}

.modal-content {
  background-color: var(--bg-quaternary); /* Darker background */
  padding: 10px;
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--text-primary);
  position: relative;
  width: auto;
  max-width: 600px; /* Max width for larger modals */
  min-width: 400px; /* Min width for smaller modals */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto; /* Re-enable clicks for the modal content itself */
  overflow: auto;
}

.modal-content.no-resize {
    resize: none;
}

/* Custom resize handles for modals */
.modal-resize-handle {
  position: absolute;
  background: transparent;
  z-index: 1000;
}

.modal-resize-handle.se {
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  cursor: se-resize;
}

.modal-resize-handle.se::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-bottom: 8px solid var(--border-secondary);
}

.modal-resize-handle.se:hover::after {
  border-bottom-color: var(--accent-primary);
}


.modal-content::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
  width: 0;
  height: 0;
}

.close {
  position: absolute;
  top: 5px;
  right: 15px;
  color: var(--text-muted);
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.close:hover,
.close:focus {
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}

.modal-footer {
  padding: 10px;
}

.modal-header {
  background-color: var(--bg-tertiary);
}

.modal-footer {
  background-color: var(--bg-tertiary);
  text-align: right;
}

.modal-body {
  padding: 2px 16px;
}

.modal-header {
    background-color: #00000040;
    cursor: move;
    margin: auto;
    width: 20%;
    height: 8px;
    min-height: 8px;
    margin-bottom: 5px;
    border-radius: 8px;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  display: flex;
  margin-top: 10px; 
  justify-content: center;
}

.modal-grab-handle {
  background-color: #00000040;
  cursor: move;
  margin: auto;
  width: 20%;
  height: 8px;
  min-height: 8px;
  margin-bottom: 5px;
  border-radius: 8px;
}

.modal-grab-handle h2 {
margin: 0;
font-size: 18px;
display: flex;
margin-top: 10px;
justify-content: center;
}

.modal-content > h2 {
  margin: 0;
  font-size: 18px;
  display: flex;
  margin-top: 2px;
  justify-content: center;
}

.modal-body {
  padding: 4px 0;
}

.tabs-bottom {
  background-color: #1b2530;
}

.tabs-container {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
}

.tabs {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.tab-button {
  flex: 1 1 auto;
  padding: 5px;
  cursor: pointer;
  border: none;
  background: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #213756;
  transition: flex-grow 0.2s ease;
}


.tab-button span {
  display: inline-block;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 0.2s ease;
}

.tabs-container:hover .tab-button span {
  transform: scaleX(0.5); /* Adjust this value to control the squeezing effect */
}

.tab-button:hover {
  background-color: #209367 !important;
}

/* Dropdown Button */
.dropbtn {
  background-color: var(--accent-primary);
  color: white;
  /*padding: 10px 20px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: var(--accent-secondary);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
  bottom: 100%; /* Drop-up effect */
  right: -5.5em;
  color: #4d4d4d;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 2px 6px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #545454}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

#editor, #render {
  flex: 1;
}

.render-settings {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top:30px;
}

.render-settings label {
  margin-right: 10px;
}

.render-settings select {
  padding: 5px;
  font-size: 14px;
  border: 1px solid #34495e;
  border-radius: 4px;
  background-color: #1d2630;
  color: white;
}

/* add this to your existing styles.css */
.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.mt-4 {
    margin-top: 1rem;
}

.border {
    border: 1px solid #34495e;
}

.rounded {
    border-radius: 4px;
}

.p-2 {
    padding: 0.25rem;
}

.bg-blue-500 {
    background-color: #3490dc;
}

.hover\:bg-blue-700:hover {
    background-color: #2779bd;
}

.text-white {
    color: white;
}

.font-bold {
    font-weight: bold;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.rounded {
    border-radius: 0.25rem;
}

.h-64 {
    height: 4rem;
}

.connection-status-dot {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.render-status-container {
    margin-top: 10px;
    align-items: center;
}

.render-status {
    color: white;
}

.mb-4 {
    margin-bottom: 1rem;
}

/* Style for status container */
.render-status-container {
    background-color: #272822; /* Molokai background */
    color: #F8F8F2; /* Off-white text */
    padding: 10px;
    border-radius: 5px;
    max-width: 96%; /* Adjust width */
    margin: auto; /* Center align */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

button:hover {
    background-color: #A6E22E; /* Bright green */
}
.project:hover {
    background-color: #f3f4f6;
    cursor: pointer;
}


.status-message {
    white-space: pre-wrap; /* Keeps the format of the output */
    margin-bottom: 5px;
    font-size: 11px;
}
#renderStatus {
    overflow-y: auto; /* Enable vertical scrolling */
    height: 100px; /* Or any fixed height */
    width: 100%;
    /* Other styles as needed */
}
.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 8px;
}

.project-name {
    margin: 0;
    flex-grow: 1;
}

.delete-button {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-button:hover {
    background-color: darkred;
}

/* Visual feedback when Ctrl is held down for video delete buttons */
.video-thumbnail .delete-button.ctrl-active {
    background-color: #ff4444 !important;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
    transform: scale(1.1);
    border: 2px solid #fff;
}

.video-thumbnail .delete-button.ctrl-active:hover {
    background-color: #ff2222 !important;
    box-shadow: 0 0 12px rgba(255, 34, 34, 0.8);
}

/* Visual feedback when Ctrl is held down for image delete buttons */
.image-thumbnail .delete-button.ctrl-active {
    background-color: #ff4444 !important;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
    transform: scale(1.1);
    border: 2px solid #fff;
}

.image-thumbnail .delete-button.ctrl-active:hover {
    background-color: #ff2222 !important;
    box-shadow: 0 0 12px rgba(255, 34, 34, 0.8);
}

.generate-thumbnail-button {
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.generate-thumbnail-button:hover {
    background-color: #2980b9;
}
.connection-status-dot {
    height: 10px;
    width: 10px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

/* add this to your existing styles.css */
.w-12 {
    width: 50%;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

/* add this to your existing styles.css */
.grid {
    display: grid;
}

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

.gap-4 {
    gap: 1rem;
}

.shader-list-container {
    height: calc(100vh - 106px); /* Adjust as needed */
    width: 100vw;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--bg-quaternary);
    border-radius: 8px;
    background-color: var(--bg-quaternary);
}

.loading-shaders {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 1.2em;
    color: var(--text-secondary);
    background-color: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--bg-quaternary);
}

.error-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 1.2em;
    color: #e74c3c;
    background-color: var(--input-bg);
    border-radius: 8px;
    border: 1px solid #e74c3c;
    text-align: center;
    padding: 20px;
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    background-color: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--bg-quaternary);
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-btn {
    padding: 8px 16px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--bg-quaternary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--accent-primary);
    color: white;
}

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

.pagination-page {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin: 0 10px;
}

.shader-list-header {
    margin-top: 45px;
    padding: 10px;
    background-color: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--bg-quaternary);
}

.search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shader-search-input {
    flex: 1;
    padding: 10px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--bg-quaternary);
    border-radius: 4px;
    font-size: 1em;
}

.shader-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.clear-search-btn {
    padding: 8px 16px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--bg-quaternary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.clear-search-btn:hover {
    background-color: var(--accent-primary);
    color: white;
}

.shader-filter-select {
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--bg-quaternary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: border-color 0.2s ease;
}

.shader-filter-select:hover {
    border-color: var(--accent-primary);
}

.shader-filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.pagination-controls-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}

@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .pagination-controls-inline {
        margin-left: 0;
        justify-content: center;
    }
    
    .shader-search-input {
        width: 100%;
    }
    
    .shader-filter-select {
        width: 100%;
    }
}

.pagination-btn-inline {
    padding: 6px 12px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--bg-quaternary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s ease;
}

.pagination-btn-inline:hover:not(:disabled) {
    background-color: var(--accent-primary);
    color: white;
}

.pagination-btn-inline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info-inline {
    color: var(--text-secondary);
    font-size: 0.8em;
    min-width: 60px;
    text-align: center;
}

.no-results {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 1.2em;
    color: var(--text-secondary);
    background-color: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--bg-quaternary);
    text-align: center;
    padding: 20px;
}

.shader-item {
    display: flex;
    border: 1px solid var(--bg-quaternary);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.shader-item-link {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.shader-item-link:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

.shader-thumbnail {
    width: 100px;
    height: 100px;
    background-color: var(--bg-quaternary);
    border-radius: 4px;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
}

.shader-username-signature {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
}

.shader-thumbnail img {
    transition: opacity 0.3s ease;
}

.shader-thumbnail .preview-canvas {
    animation: fadeIn 0.3s ease;
}

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

.shader-thumbnail.loading-preview::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 5;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.shader-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shader-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Variant grouping styles */
.shader-item.has-variants {
    border-left: 3px solid var(--accent-primary);
}

.variant-count {
    font-size: 0.8em;
    color: var(--accent-secondary);
    font-weight: normal;
    margin-left: 8px;
}

.toggle-variants-btn {
    margin-top: 8px;
    padding: 5px 10px;
    background-color: var(--accent-secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
}

.toggle-variants-btn:hover {
    background-color: var(--accent-primary);
}

.variants-container {
    margin-left: 20px;
    padding-left: 15px;
    border-left: 2px solid var(--bg-quaternary);
}

.shader-item.variant-item {
    margin-top: 10px;
    background-color: var(--bg-secondary);
    opacity: 0.95;
}

.shader-item.variant-item::before {
    content: '↳';
    position: absolute;
    left: -15px;
    color: var(--accent-secondary);
    font-size: 1.2em;
}

/* Lineage display styles */
.lineage-info {
    padding: 10px;
    background-color: var(--bg-secondary);
    border-radius: 4px;
    margin-top: 5px;
}

.lineage-info p {
    margin: 8px 0;
    color: var(--text-primary);
}

.lineage-type {
    font-style: italic;
    color: var(--text-muted);
}

/* Lineage shader item with thumbnail (for "Forked from") */
.lineage-shader-item {
    margin: 12px 0;
}

.lineage-shader-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid var(--border-primary);
}

.lineage-shader-link:hover {
    background-color: var(--bg-quaternary);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.lineage-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.lineage-thumbnail-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background-color: var(--bg-quaternary);
    flex-shrink: 0;
}

.lineage-shader-title {
    color: var(--text-primary);
    font-weight: 500;
}

/* Lineage shader grid (for variants) */
.lineage-shader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.lineage-shader-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid var(--border-primary);
}

.lineage-shader-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-primary);
}

.lineage-card-thumbnail {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.lineage-card-thumbnail-placeholder {
    width: 100%;
    height: 100px;
    background-color: var(--bg-quaternary);
}

.lineage-card-info {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lineage-card-title {
    color: var(--text-primary);
    font-size: 0.85em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lineage-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.parent-badge {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.4);
}

.lineage-badge.variant-badge {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.lineage-group-members {
    margin-top: 12px;
}

.lineage-standalone-forks {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

.lineage-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-muted);
    font-style: italic;
}

.lineage-loading i {
    color: var(--accent-primary);
}

.fork-badge {
    background-color: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.4);
}

/* Shader badges for flat list view */
.shader-badges {
    display: flex;
    gap: 6px;
    margin: 6px 0;
    flex-wrap: wrap;
}

.shader-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.variant-badge {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.4);
}

.fork-badge {
    background-color: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.4);
}

.has-variants-badge {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.rendered-videos {
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--bg-quaternary);
    border-radius: 8px;
    background-color: var(--bg-secondary);
}



#gif {
    height: 100%;
    margin: 10px;
}

#hotkeysModal {
    position: absolute;
    top: 250px;
    left: 220px;
    z-index: 10;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-secondary);
  padding: 2px 4px;
  padding-left: 10px;
  position: fixed;
  height: 45px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--accent-primary);
  text-decoration: none;
}

.logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.top-bar nav {
  display: flex;
  align-items: center;
}

.account-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.login-form input {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  min-width: 120px;
}

.login-form input:focus {
  outline: none;
  border-color: var(--input-focus);
}

.create-account-btn {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.create-account-btn:hover {
  background-color: var(--accent-secondary);
}

.top-bar button {
  background-color: var(--accent-primary);
  color: var(--text-on-accent, #ffffff);
  border: none;
  /*padding: 8px 12px;*/
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.top-bar button:hover {
  background-color: var(--accent-secondary);
}

/* User Profile Section - Groups username and settings together */
#loggedInView {
  display: flex;
  align-items: center;
  gap: 8px;
}
#loggedOutView {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-profile-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user-profile-section:hover {
  background-color: var(--bg-quaternary);
  border-color: var(--accent-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

#userDisplayName {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  margin: 0;
}

.settings-btn {
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  padding: 4px !important;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.user-profile-section:hover .settings-btn {
  color: var(--accent-primary) !important;
}

.settings-btn:hover {
  color: var(--accent-primary) !important;
  background-color: var(--bg-quaternary) !important;
}

/* Improve logout button styling to match the new design */
#logoutButton {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  font-weight: 500;
}

#logoutButton:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-primary);
  color: white;
}



/* Settings Modal Styles */
.settings-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 0;
}

.settings-section {
  margin-bottom: 25px;
  padding: 15px;
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border-primary);
}

.settings-section h3 {
  margin: 0 0 15px 0;
  color: var(--accent-primary);
  font-size: 16px;
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: 8px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  /*padding: 8px 0;*/
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item label {
  flex: 1;
  color: var(--text-primary);
  font-size: 14px;
  margin-right: 15px;
}

.setting-item select,
.setting-item input:not([type="checkbox"]) {
  flex: 0 0 auto;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  min-width: 120px;
}

.setting-item select:focus,
.setting-item input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
}

.setting-item input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
  padding: 0;
  flex: none;
}

.setting-item input[type="number"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.setting-item input[type="checkbox"] + input[type="number"] {
  margin-left: 4px;
}

/* Theme selector buttons */
.theme-selector-buttons {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.theme-selector-btn {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  border-radius: 3px;
  padding: 0;
  background: none;
}

.theme-selector-btn:hover {
  transform: scale(1.1);
}

.theme-selector-btn.active {
  border-color: var(--text-primary);
}

.theme-selector-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.theme-selector-btn:disabled:hover {
  transform: none;
}

/* Theme selector group layout */
.theme-setting-item {
  flex-direction: column;
  align-items: stretch;
}

.theme-selector-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  position: relative;
}

.theme-selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}

.theme-selector-row:first-child {
  margin-bottom: 4px; /* 50% of 8px (setting-item margin-bottom) */
}

.theme-selector-row:last-child {
  margin-top: 4px; /* 50% of 8px (setting-item margin-bottom) */
}

.theme-selector-row label {
  flex: 1;
  margin-right: 0;
  min-width: 140px;
}

.theme-link-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 8px; /* Match the spacing between rows */
  position: relative;
  margin: 4px 0; /* 50% of 8px spacing */
  padding-left: 0;
}

.theme-link-line {
  position: absolute;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  z-index: 20;
  font-family: monospace;
}

.theme-link-line-top {
  top: 24px;
  right: calc(204px + 6px); /* Match link button position */
  transform: translateX(0);
}

.theme-link-line-bottom {
  bottom: 24px;
  right: calc(204px + 6px); /* Match link button position */
  transform: translateX(0);
}

.theme-link-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-bg);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-primary);
  flex-shrink: 0;
  position: absolute;
  /* Position to align with left edge of first theme button */
  /* 7 buttons (24px each) + 6 gaps (6px each) = 168px + 36px = 204px total */
  right: calc(204px + 6px); /* buttons width + gap between link and first button */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* On narrow screens, adjust positioning to prevent overlap */
@media (max-width: 600px) {
  .theme-selector-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .theme-selector-row label {
    min-width: auto;
    width: 100%;
    font-size: 13px; /* Slightly smaller on mobile */
  }
  
  .theme-selector-buttons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px; /* Smaller gap on mobile */
  }
  
  .theme-selector-btn {
    width: 28px; /* Slightly larger on mobile for easier tapping */
    height: 28px;
  }
  
  .theme-link-container {
    align-items: center;
    padding-right: 0;
    width: 100%;
    margin: 12px 0; /* More spacing on mobile for clarity */
    height: auto;
    min-height: 40px;
  }
  
  .theme-link-btn {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto; /* Center the button */
    width: 36px; /* Slightly larger on mobile for easier tapping */
    height: 36px;
  }
  
  .theme-link-line {
    display: none; /* Hide lines on very narrow screens to prevent clutter */
  }
  
  .theme-link-line-top,
  .theme-link-line-bottom {
    display: none; /* Hide lines on mobile */
  }
}

.theme-link-btn.linked .theme-link-line {
  color: var(--accent-primary);
  opacity: 0.7;
}

.theme-link-btn:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-primary);
}

.theme-link-btn.linked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.theme-link-btn.linked:hover {
  background-color: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

/* Theme button gradients based on theme colors */
.theme-selector-btn[data-theme="ace/theme/monokai"] {
  background: linear-gradient(135deg, #1e1e2e 50%, #2ecc71 50%);
}

.theme-selector-btn[data-theme="ace/theme/tomorrow_night"] {
  background: linear-gradient(135deg, #1d1f21 50%, #81a2be 50%);
}

.theme-selector-btn[data-theme="ace/theme/twilight"] {
  background: linear-gradient(135deg, #141414 50%, #8f9d6a 50%);
}

.theme-selector-btn[data-theme="ace/theme/dracula"] {
  background: linear-gradient(135deg, #282a36 50%, #bd93f9 50%);
}

.theme-selector-btn[data-theme="ace/theme/github"] {
  background: linear-gradient(135deg, #ffffff 50%, #0366d6 50%);
}

.theme-selector-btn[data-theme="ace/theme/xcode"] {
  background: linear-gradient(135deg, #ffffff 50%, #007aff 50%);
}

.theme-selector-btn[data-theme="ace/theme/eclipse"] {
  background: linear-gradient(135deg, #ffffff 50%, #4c97ff 50%);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border-primary);
}

.settings-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

/* Admin link in settings */
.admin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-primary);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 14px;
}

.admin-link:hover {
  background-color: var(--bg-quaternary);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.admin-link i {
  font-size: 14px;
}

.primary-btn {
  background-color: var(--accent-primary);
  color: white;
}

.primary-btn:hover {
  background-color: var(--accent-secondary);
}

.secondary-btn {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
}

.secondary-btn:hover {
  background-color: var(--button-hover);
}

/* Bug Report Button */
.bug-report-btn {
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  padding: 4px !important;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.bug-report-btn:hover {
  color: var(--accent-primary) !important;
  background-color: var(--bg-quaternary) !important;
}

.bug-report-btn i {
  font-size: 14px;
}

/* Bug Report Modal Styles */
#bugReportModal .modal-content {
  max-width: 700px;
  min-width: 500px;
}

#bugReportModal .form-group {
  margin-bottom: 20px;
}

#bugReportModal .form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

#bugReportModal .form-group label .required {
  color: #ef4444;
  margin-left: 2px;
}

#bugReportModal .form-control {
  width: 100%;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

#bugReportModal .form-control:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

#bugReportModal .form-control[type="text"],
#bugReportModal .form-control[type="email"] {
  height: 38px;
}

#bugReportModal .form-control textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

#bugReportModal .form-control select {
  height: 38px;
  cursor: pointer;
}

#bugReportModal .form-group input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}

#bugReportModal .form-group label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  font-weight: normal;
  cursor: pointer;
}

#bugReportModal .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--border-primary);
}

#bugReportModal .form-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#bugReportModal .form-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#bugReportModal .alert {
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

#bugReportModal .alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

#bugReportModal .alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Register Modal */
#registerModal .modal-content {
  max-width: 500px;
  min-width: 400px;
}

#registerModal .modal-body {
  padding: 20px;
}

#registerModal .form-group {
  margin-bottom: 20px;
}

#registerModal .form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

#registerModal .form-control {
  width: 100%;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

#registerModal .form-control:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

#registerModal .form-control[type="text"],
#registerModal .form-control[type="email"],
#registerModal .form-control[type="password"] {
  height: 38px;
}

#registerModal .register-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--border-primary);
}

#registerModal .register-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

#registerModal .register-error {
  color: #ff6b6b;
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(255, 107, 107, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 107, 107, 0.3);
  font-size: 14px;
}

/* Email field is now visible and optional */
/* Email field is now visible and optional - removed hiding CSS */

#gifContainer {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  /*padding: 10px 0;*/
}
#gifControls {
  display: flex;
  
  justify-content: space-between;
}
.gif-wrapper {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
}
.gif-thumbnail {
  width: 150px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.download-link {
  display: block;
  margin-top: 5px;
}
.render-status-area {
  width: 100%;
  height: 4em;
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 5px;
  font-family: monospace;
}
.gif-section {
  background-color: var(--bg-quaternary);
  color: var(--text-primary);
  padding: 20px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--accent-secondary);
}

.gif-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.control-group {
  display: flex;
  flex-direction: column;
}

.control-group label {
  margin-bottom: 5px;
  font-weight: bold;
}

.control-group input,
.control-group select {
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-primary);
  font-size: 14px;
}

.render-button {
  background-color: var(--accent-secondary);
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.render-button:hover {
  background-color: var(--accent-primary);
}

.render-status-area {
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  font-family: monospace;
  color: var(--text-primary);
  resize: vertical;
}

.gif-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--border-primary);
}

.gif-container::-webkit-scrollbar {
  height: 8px;
}

.gif-container::-webkit-scrollbar-track {
  background: var(--border-primary);
}

.gif-container::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border-radius: 4px;
}

.gif-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-secondary);
}

.gif-wrapper {
  display: inline-block;
  margin-right: 20px;
  text-align: center;
}

.gif-thumbnail {
  width: 50px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.gif-thumbnail:hover {
  transform: scale(1.05);
}

.download-link {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: var(--accent-secondary);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.download-link:hover {
  background-color: var(--accent-primary);
}

@media (max-width: 768px) {
  .gif-controls {
    grid-template-columns: 1fr;
  }
}

/* Existing styles... */

.new-shader-button {
    top: 10px;
    right: 10px;
    background-color: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.new-shader-button:hover {
    background-color: var(--accent-secondary);
}

.back-button {
    top: 10px;
    left: 10px;
    background-color: var(--accent-secondary);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.back-button:hover {
    background-color: var(--accent-primary);
}

.fork-button {
  background-color: var(--accent-secondary);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.fork-button:hover {
  background-color: var(--accent-primary);
}

/* Info Tab Styles */
#info {
    padding: 20px;
    /*background-color: var(--bg-quaternary);*/
    color: var(--text-primary);
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}


.info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 4px;
}

.info-section {
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    padding: 5px;
}

.info-section h3 {
    margin-bottom: 5px;
    color: var(--accent-secondary);
}

.input-group, .select-group, .checkbox-group {
    margin-bottom: 15px;
}

.input-group label, .select-group label {
    display: block;
    margin-bottom: 5px;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}

.button-group {
    display: flex;
    gap: 10px;
}

.primary-btn, .secondary-btn, .danger-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.primary-btn {
    background-color: #2ecc71;
    color: white;
}

.primary-btn:hover {
    background-color: #27ae60;
}

.secondary-btn {
    background-color: #3498db;
    color: white;
}

.secondary-btn:hover {
    background-color: #2980b9;
}

.danger-btn {
    background-color: #e74c3c;
    color: white;
}

.danger-btn:hover {
    background-color: #c0392b;
}

#thumbnailContainer {
    margin-top: 10px;
    min-height: 100px;
    background-color: var(--bg-quaternary);
    border: 1px dashed var(--accent-secondary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .info-container {
        grid-template-columns: 1fr;
    }
}
/* Info Tab Styles */
.tab-content {
    position: relative;
    height: 100%;
    display: none;
}

.tab-content-container .tab-content {
    display: block;
}



.info-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px; /* Adjust this value based on the height of your bottom tabs */
    overflow-y: auto;
    padding: 20px;
}

.info-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.info-section {
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    padding: 15px;
}

.info-section h3 {
    margin-bottom: 15px;
    color: var(--accent-secondary);
}

/* Removed - lineage should be in right column, not full width */

/* Info Tab Layout Structure */
.info-actions-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
}

.btn-action-primary {
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.actions-secondary {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.btn-action-secondary {
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
}

/* Project Information: Single section with internal columns */
.info-section-main {
    grid-column: 1 / -1;
}

.info-project-grid {
    display: grid;
    grid-template-columns: 1fr 280px; /* Left expands, right fixed at 280px */
    gap: 24px;
    margin-top: 16px;
    max-width: 100%;
}

.info-project-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0; /* Allow flex item to shrink */
}

/* Left column: Text fields - expand naturally but cap max width */
.info-project-column:first-child {
    max-width: 750px; /* Cap at 750px to prevent excessively wide fields */
}

/* Right column: Thumbnail - fixed width block */
.info-project-column:last-child {
    width: 280px; /* Fixed width for thumbnail area */
    flex-shrink: 0; /* Don't shrink */
    align-items: flex-start; /* Align thumbnail to start */
}

.info-project-column .btn-small {
    align-self: flex-start; /* Button aligns to start, not full width */
}

/* Lineage: Full width below project info */
.info-section-lineage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    grid-column: 1 / -1;
}

.info-destructive-bar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    margin-top: 20px;
}

.btn-destructive {
    padding: 8px 20px;
    font-size: 13px;
    max-width: 200px;
    width: 100%;
}

/* Thumbnail Section */
.thumbnail-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thumbnail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.thumbnail-header h3 {
    margin: 0;
}

.thumbnail-container {
    min-height: 150px;
    background-color: var(--bg-quaternary);
    border: 1px dashed var(--accent-secondary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.thumbnail-container img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
}

/* Square thumbnail */
.thumbnail-container-square {
    width: 200px;
    height: 200px;
    background-color: var(--bg-quaternary);
    border: 1px dashed var(--accent-secondary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
    position: relative;
}

.thumbnail-container-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.thumbnail-container-square p {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
    margin: 0;
}

/* Visibility Section */
.visibility-section {
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Input with Action Button */
.input-with-action {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-action input {
    flex: 1;
}

.text-button {
    padding: 6px 12px;
    font-size: 0.9em;
    background-color: var(--bg-quaternary);
    color: var(--text-primary);
    border: 1px solid var(--bg-quaternary);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.text-button:hover {
    background-color: var(--accent-secondary);
    color: white;
    border-color: var(--accent-secondary);
}

/* Button Variants */
.btn-small {
    padding: 6px 12px;
    font-size: 0.9em;
}

.btn-destructive {
    font-size: 0.85em;
    padding: 6px 12px;
    width: 100%;
}

@media (max-width: 1024px) {
    .info-project-grid {
        grid-template-columns: 1fr;
    }
    
    .info-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .actions-secondary {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
    }
    
    .btn-action-secondary {
        width: 100%;
    }
    
    .thumbnail-container-square {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}

.input-group, .select-group, .checkbox-group {
  margin-bottom: 15px;
}

.input-group label, .select-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input, .input-group textarea, .select-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--bg-quaternary);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-primary);
  box-sizing: border-box;
}

.info-display-text {
  padding: 8px;
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 1.5em;
  word-wrap: break-word;
}

.info-display-text:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}

.button-group {
    display: flex;
    gap: 10px;
}

.primary-btn, .secondary-btn, .danger-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.primary-btn {
    background-color: var(--accent-secondary);
    color: white;
}

.primary-btn:hover {
    background-color: var(--accent-primary);
}

.secondary-btn {
    background-color: var(--accent-secondary);
    color: white;
}

.secondary-btn:hover {
    background-color: var(--accent-primary);
}

.danger-btn {
    background-color: #e74c3c;
    color: white;
}

.danger-btn:hover {
    background-color: #c0392b;
}


#useCurrentTimeBtn {
    margin-top: 5px;
    padding: 5px 10px;
    background-color: var(--accent-secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#useCurrentTimeBtn:hover {
    background-color: var(--accent-primary);
}

#useCurrentTimeButton {
    padding: 5px 10px;
    background-color: var(--accent-secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

#useCurrentTimeButton:hover {
    background-color: var(--accent-primary);
}

#useCurrentResolutionButton {
    padding: 5px 10px;
    background-color: var(--accent-secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

#useCurrentResolutionButton:hover {
    background-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .info-container {
        grid-template-columns: 1fr;
    }
}

/* Add these styles to your existing CSS file */

.render-scroll-container {
  height: 100%;
  overflow-y: auto;
  min-width: 0;
}

.render-container {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.render-sections-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.render-sections-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.new-project-section {
  background-color: var(--bg-quaternary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 8px;
  padding: 15px;
}

.progress-section {
  background-color: var(--bg-quaternary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 8px;
  padding: 15px;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.progress-bar {
  flex: 1;
  height: 20px;
  background-color: var(--bg-secondary);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 10px;
}

.progress-fill.pulsing {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.progress-text {
  min-width: 50px;
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
}

.progress-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 0.9em;
  color: var(--text-secondary);
}

.progress-details span {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  border-radius: 4px;
}

.video-section, .image-section, .gif-section {
  background-color: var(--bg-quaternary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.video-section, .image-section {
  min-height: 400px;
}

  .gif-section {
    height: 100%;
    min-height: 650px;
  }
  
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  /* For input groups that should span full width */
  .input-group.full-width {
    grid-column: 1 / -1;
  }
  
  /* For input groups that should span two columns */
  .input-group.two-columns {
    grid-column: span 2;
  }
  
  /* Make input fields more appropriately sized */
  .render-section .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .render-section .input-group label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
  }
  
  .render-section .input-group select,
  .render-section .input-group input {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .render-section .input-group select:focus,
  .render-section .input-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  }
  
  /* Special handling for input groups with buttons */
  .input-group .input-button-row {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .input-group .input-button-row input,
  .input-group .input-button-row select {
    flex: 1;
  }
  
  .input-group .input-button-row button {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    min-height: 40px;
    background: var(--accent-primary);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .input-group .input-button-row button:hover {
    background: var(--accent-secondary);
  }
  
  /* Style for unit labels (s, px, etc.) */
  .input-button-row span {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px 0 2px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  
  /* Ensure proper spacing for input groups */
  .render-section .input-group {
    min-width: 0; /* Allow grid items to shrink */
  }
  
  /* Make number inputs a bit wider for better readability */
  .render-section .input-group input[type="number"] {
    min-width: 80px;
  }
  
  .video-section h3, .image-section h3, .gif-section h3 {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: 10px;
  margin-bottom: 20px;
  flex-shrink: 0;
  font-size: 1.2em;
}

.rendered-videos h4, .rendered-images h4, .gif-preview-section h4 {
  color: var(--text-secondary);
  margin: 15px 0 10px 0;
  font-size: 1em;
  font-weight: 600;
}

.gif-settings {
  margin-bottom: 15px;
}

.gif-section .input-group {
  margin-bottom: 10px;
}

.gif-section .button-group {
  margin-bottom: 15px;
}

.gif-section .primary-btn {
  width: 100%;
  margin-bottom: 15px;
}

/* Ensure content fills available space in each section */
.video-section .rendered-videos,
.image-section .rendered-images,
.gif-section .gif-preview-section {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

/* Ensure the content areas expand to fill space */
.rendered-videos > div,
.rendered-images > div,
.gif-preview-section > div:last-child {
  flex: 1;
  min-height: 150px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Make settings grids consistent height */
.settings-grid {
  flex: 1;
  margin-bottom: 20px;
}

/* Ensure buttons are at the bottom of each section */
.video-section .button-group,
.image-section .button-group,
.gif-section .button-group {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--border-secondary);
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
  .render-sections-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .progress-details {
    flex-direction: column;
    gap: 5px;
  }
  
  .progress-details span {
    text-align: center;
  }
  
  .render-container {
    padding: 15px;
    gap: 15px;
  }
  
  .render-section {
    padding: 12px;
  }
  
  .settings-grid {
    gap: 8px;
  }
  
  .render-section .input-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .render-section .input-group label {
    flex: none;
    font-size: 0.9em;
  }
  
  .render-section .input-group select,
  .render-section .input-group input {
    flex: none;
    width: 100%;
  }
  
  .button-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .button-group button {
    width: 100%;
  }
}

.render-section {
  background-color: var(--bg-tertiary);
  border-radius: 5px;
  padding: 15px;
}

.render-section h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.2em;
}

.render-section .input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.render-section .input-group label {
  flex: 1;
}

.render-section .input-group select,
.render-section .input-group input {
  flex: 2;
  padding: 5px;
}

.input-group select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button-group {
  display: flex;
  gap: 10px;
}

.rendered-videos {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}

.rendered-images {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}

.image-thumbnail {
  display: inline-block;
  width: 120px;
  margin: 5px;
  position: relative;
  cursor: pointer;
  border: 1px solid #34495e;
  border-radius: 4px;
  overflow: hidden;
}

.image-thumbnail img {
  width: 100%;
  height: 120px;
  display: block;
}

.image-thumbnail:hover .download-button,
.image-thumbnail:hover .delete-button {
  opacity: 1;
}

.download-button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: rgba(0, 255, 0, 0.8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.download-button:hover {
  background-color: #00ff00;
}

.image-info {
  font-size: 10px;
  color: #bdc3c9;
  text-align: center;
  padding: 2px 4px;
  background-color: rgba(0, 0, 0, 0.7);
}

.image-render-status {
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.rendered-gifs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}


.render-status-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connection-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.connection-status-dot.connected {
  background-color: #4CAF50;
}

.connection-status-dot.disconnected {
  background-color: #F44336;
}

.render-status {
  font-style: italic;
}

.video-thumbnail {
  display: inline-block;
  width: auto;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

.gif-thumbnail {
  position: relative;
  width: 120px;
  height: 68px;
  overflow: hidden;
}
.gif-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumbnail:hover .play-button {
  opacity: 1;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.delete-button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.delete-button:hover {
  background-color: red;
}

.video-download-button {
  position: absolute;
  bottom: 32px;
  right: 4px;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s, background-color 0.2s;
  pointer-events: auto;
}

.video-thumbnail:hover .video-download-button {
  opacity: 1;
}

.video-download-button:hover {
  background-color: rgba(79, 70, 229, 0.9);
}

.gif-preview-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border-secondary);
  border-radius: 6px;
  padding: 15px;
  background-color: var(--bg-secondary);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gif-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.current-gif-preview {
    max-width: 100%;
    height: 300px;
    image-rendering: pixelated;
    border-radius: 4px;
}

.gif-preview-controls {
    display: flex;
    align-items: center;
    width: 250px;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    min-height: 40px;
}

.gif-nav-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gif-nav-btn:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}

#gifTypeDisplay {
    font-weight: bold;
    color: #ecf0f1;
    text-align: center;
    min-width: 120px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gif-set-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}


.gif-set-thumbnail {
    width: 100px;
    height: 100px;
    overflow: visible;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    position: relative;
}

.gif-set-thumbnail:hover {
    transform: scale(1.05);
}

.gif-set-thumbnail.active {
    border: 3px solid #3498db;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
    transform: scale(1.02);
}

.gif-set-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gif-set-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    z-index: 1;
}

/* GIF Set Delete All Button (hover only) */
.gif-set-delete-all-button {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.gif-set-delete-all-button:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

.no-gifs-message, .error-message {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
    grid-column: 1 / -1;
}

.error-message {
    color: #ff6b6b;
}

/* GIF Preview Delete Button (hover only) */
.gif-preview-container {
    position: relative;
    display: inline-block;
}

.gif-preview-delete-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.gif-preview-delete-button:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

.gif-preview-container:hover .gif-preview-delete-button {
    display: flex;
}

/* Simplified Palette Editor Styles */
.palette-instructions {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 10px;
    text-align: center;
}

.palette-color-item {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.palette-color-item:hover {
    border-color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.palette-color-item.selected {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3);
}

/* Custom Color Picker Styles */
.custom-color-picker {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    min-width: 240px;
}

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

.color-picker-input {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.hex-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: monospace;
    font-size: 14px;
}

.hex-input:focus {
    outline: none;
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3);
}

/* Buttons removed for immediate apply UX */

.palette-quick-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

/* Recorder styles */
.recorder-interface {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recorder-scroll-container {
    height: 100%;
    overflow-y: auto;
    padding: 15px;
    flex: 1;
}

.recorder-container {
    max-width: none;
    display: grid;
    gap: 20px;
    margin: 0;
}

.recorder-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.recorder-section h3 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

/* Recorder settings form element styling */
.recorder-section .input-group {
    display: flex;
    flex-direction: column;
}

.recorder-section .input-group label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.recorder-section .input-group select,
.recorder-section .input-group input {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.recorder-section .input-group select:focus,
.recorder-section .input-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.recorder-section .input-group select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.recorder-description {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.recorder-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.recording-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.recording-status-top {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.recording-indicator {
    color: #e74c3c;
    font-size: 16px;
    animation: recording-pulse 1.5s ease-in-out infinite alternate;
}

.recording-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    margin-left: auto;
}

.recording-progress-bar {
    flex: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.recording-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}

.recording-progress-text {
    font-size: 12px;
    color: var(--text-primary);
    min-width: 30px;
    text-align: right;
}

.aspect-ratio-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.aspect-ratio-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.aspect-ratio-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.recordings-list {
    min-height: 100px;
}

.no-recordings {
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
    margin: 20px 0;
}

.recording-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
}

.recording-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.recording-name {
    font-weight: 600;
    color: var(--text-primary);
}

.recording-details {
    font-size: 12px;
    color: var(--text-secondary);
}

.recording-actions {
    display: flex;
    gap: 5px;
}

.recording-actions button {
    padding: 5px 10px;
    font-size: 12px;
}

.library-container {
    padding: 20px;
    height: 100%;
    padding-top: 0px;
    overflow-y: auto;
}

.library-grid {
    display: block; /* Change from 'grid' to 'block' */
}

.library-tile {
    background-color: var(--bg-quaternary);
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.library-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.library-tile-img-wrapper {
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.library-tile img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    display: block;
}

.library-tile h3 {
    margin-top: 3px;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
    min-height: 20px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.library-category-header {
    grid-column: 1 / -1; /* Make header span all columns */
    color: var(--accent-primary);
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-primary);
}

.library-category-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 15px;
}

.shader-item {
    position: relative;
    display: flex;
    border: 1px solid var(--bg-quaternary);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    height: 120px; /* Fixed height */
    overflow: hidden; /* Prevent content from expanding the container */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shader-thumbnail {
    width: 100px;
    min-width: 100px; /* Prevent thumbnail from shrinking */
    height: 100px;
    background-color: var(--bg-quaternary);
    border-radius: 4px;
    margin-right: 10px;
}

.shader-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow content */
}

.shader-title {
    margin: 0 0 5px 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shader-description {
    font-size: 14px;
    margin: 0;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add tooltip functionality */
.shader-title {
    position: relative;
}

.shader-title:hover::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 100%;
    background: #34495e;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 14px;
    white-space: normal;
    max-width: 200px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.project-indicator {
  font-size: 0.75em;
  color: var(--text-muted);
  font-style: italic;
  font-weight: normal;
  margin-left: 8px;
  padding: 2px 6px;
  background-color: var(--bg-quaternary);
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
  vertical-align: middle;
}
#pasting-helper {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 15px;
    border-radius: 8px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border: 1px solid #555;
    max-width: 500px;
    text-align: center;
}

#pasting-instructions {
    font-size: 1em;
    margin-bottom: 10px;
}

#pasting-code {
    background-color: #222;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 150px;
    overflow-y: auto;
    text-align: left;
    margin-bottom: 15px; /* Added margin to separate from buttons */
}

.pasting-buttons {
    display: flex;
    justify-content: center;
}

#pasting-helper button {
    background-color: #555;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px; /* Added margin for spacing */
}

#pasting-helper button:hover {
    background-color: #777;
}

#paste-from-library {
    background-color: #4a9eff;
}

#paste-from-library:hover {
    background-color: #6aaaff;
}

#cancel-pasting {
    background-color: #555;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

#cancel-pasting:hover {
    background-color: #777;
}

#cursor-tooltip {
    position: absolute;
    background-color: #4a9eff;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    z-index: 1002;
    pointer-events: none; /* So it doesn't interfere with editor clicks */
    white-space: nowrap;
}

.project-setup-message {
    background-color: #34495e;
    border: 1px solid #4a5f7a;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
    text-align: center;
    color: #bdc3c7;
}

.project-setup-message h4 {
    color: #ecf0f1;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
}

.project-setup-message p {
    margin: 8px 0;
    line-height: 1.4;
    font-size: 14px;
}

/* Tag functionality styles */
.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.tag-suggestion {
    background-color: var(--bg-quaternary);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.tag-suggestion:hover {
    background-color: var(--accent-primary);
    color: white;
    transform: scale(1.05);
}

.tag-suggestion.selected {
    background-color: var(--accent-primary);
    color: white;
    border-color: var(--accent-secondary);
}

.shader-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.shader-tag {
    background-color: var(--border-secondary);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
}

.shader-tag:hover {
    background-color: var(--border-primary);
}

/* Email field is now visible and optional - removed hiding CSS */

.modal-header.no-drag {
    cursor: default;
    background-color: var(--bg-quaternary);
}

.modal-header.no-drag::before {
    display: none;
}

/* Toggle button states */
.controls button.enabled {
  background-color: var(--accent-secondary) !important;
  color: white !important;
}

.controls button.enabled:hover {
  background-color: var(--accent-primary) !important;
}

/* Specific styling for toggle buttons */
#toggleDisplayModeButton.enabled,
#turboFpsButton.enabled,
#instantRenderButton.enabled,
#pauseButton.enabled,
#pauseTimeButton.enabled {
  background-color: var(--accent-secondary) !important;
  color: white !important;
}

#toggleDisplayModeButton.enabled:hover,
#turboFpsButton.enabled:hover,
#instantRenderButton.enabled:hover,
#pauseButton.enabled:hover,
#pauseTimeButton.enabled:hover,
#recordButton.enabled:hover {
  background-color: var(--accent-primary) !important;
}

/* Recording button styles */
#recordButton.recording {
  background-color: #e74c3c !important;
  color: white !important;
  animation: recording-pulse 1.5s ease-in-out infinite alternate;
}

#recordButton.recording:hover {
  background-color: #c0392b !important;
}

#recordButton.countdown {
  background-color: #f39c12 !important;
  color: white !important;
  animation: countdown-button-pulse 1s ease-in-out infinite alternate;
}

#recordButton.countdown:hover {
  background-color: #e67e22 !important;
}

@keyframes countdown-button-pulse {
  from {
    box-shadow: 0 0 5px #f39c12;
  }
  to {
    box-shadow: 0 0 20px #f39c12, 0 0 30px #f39c12;
  }
}

@keyframes recording-pulse {
  from {
    box-shadow: 0 0 5px #e74c3c;
  }
  to {
    box-shadow: 0 0 20px #e74c3c, 0 0 30px #e74c3c;
  }
}

/* Recording message styles */
.recording-message {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Recording countdown (small corner display) */
#recordingCountdownDisplay {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(39, 174, 96, 0.9);
  color: white;
  padding: 12px 16px;
  border-radius: 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: bold;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: countdown-bounce 1s ease-in-out infinite;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(39, 174, 96, 1);
  cursor: pointer;
  min-width: 120px;
}

.countdown-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.countdown-progress-bar {
  width: 100px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.countdown-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  border-radius: 3px;
  width: 100%;
  transition: width 0.1s ease-out, background 0.3s ease;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

.countdown-progress-fill.warning {
  animation: progress-warning-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes progress-warning-pulse {
  0% {
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.6);
  }
  100% {
    box-shadow: 0 0 16px rgba(243, 156, 18, 0.8);
  }
}

.countdown-progress-fill.danger {
  animation: progress-danger-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes progress-danger-pulse {
  0% {
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.9);
  }
}

#countdownNumber {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

@keyframes countdown-bounce {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
  }
}

/* For medium screens, use 2 columns */
@media (min-width: 769px) and (max-width: 1200px) {
  .render-sections-row {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .video-section, .image-section, .gif-section {
    min-height: auto;
    height: auto;
  }
}

/* Render Status Section */
.render-section:not(.video-section):not(.image-section):not(.gif-section):not(.new-project-section):not(.progress-section) {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--bg-quaternary);
  border-radius: 8px;
  padding: 20px;
}

.render-status-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connection-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.connection-status-dot.connected {
  background-color: #4CAF50;
}

.connection-status-dot.disconnected {
  background-color: #F44336;
}

.render-status {
  font-style: italic;
  color: var(--text-secondary);
}

/* Input group styling for consistent form elements */
.render-section .input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.render-section .input-group label {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

.render-section .input-group select,
.render-section .input-group input {
  flex: 2;
  padding: 8px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-primary);
}

.render-section .input-group select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button group styling */
.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button-group button {
  flex: 1;
  min-width: 120px;
}

/* Thumbnail and preview styling */
.rendered-videos, .rendered-images {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
  background-color: var(--bg-secondary);
}


.image-thumbnail {
  display: inline-block;
  width: auto;
  margin: 5px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.image-thumbnail:hover {
  transform: scale(1.05);
}

.image-thumbnail img {
  width: 100%;
  height: 120px;
  display: block;
}

.image-thumbnail:hover .download-button,
.image-thumbnail:hover .delete-button {
  opacity: 1;
}

.download-button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: rgba(0, 255, 0, 0.8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.download-button:hover {
  background-color: #00ff00;
}

.image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  white-space: nowrap;
}

.image-render-status {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}

/* Video thumbnail styling */
.video-thumbnail {
  display: inline-block;
  width: auto;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

.video-thumbnail:hover .play-button {
  opacity: 1;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.delete-button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.delete-button:hover {
  background-color: red;
}

/* GIF preview styling */
.gif-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.current-gif-preview {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border-secondary);
}

.gif-preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  position: relative;
  min-height: 40px;
}

/* GIF playback controls */
.gif-canvas {
  max-width: 100%;
  height: 300px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
}

.gif-playback-controls {
  display: none;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.gif-frame-toggle {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.gif-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  transition: all 0.2s ease;
  color: var(--text-primary);
}

.gif-toggle-label:hover {
  background-color: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.gif-toggle-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.gif-toggle-text {
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

/* Metadata overlays */
.metadata-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.metadata-resolution {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
  font-family: monospace;
  line-height: 1;
}

.metadata-duration {
  position: absolute;
  top: 20px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
  font-family: monospace;
  line-height: 1;
}

.metadata-size {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
  font-family: monospace;
  line-height: 1;
}

.metadata-date {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
  font-family: monospace;
  line-height: 1;
}

/* For videos, put size in bottom-right and date in bottom-left (moved up to avoid filename) */
.video-thumbnail .metadata-size {
  bottom: 14px;
  right: 4px;
  left: auto;
}

.video-thumbnail .metadata-date {
  bottom: 14px;
  left: 4px;
  right: auto;
}

/* For images, put date in bottom-left (moved up to avoid filename) */
.image-thumbnail .metadata-date {
  bottom: 14px;
  left: 4px;
  right: auto;
}

.image-thumbnail .metadata-size {
  bottom: 14px;
}

/* For narrow image thumbnails, stack metadata vertically to avoid overlap */
.image-thumbnail .metadata-date {
  bottom: 14px;
  left: 4px;
  right: auto;
}

.image-thumbnail .metadata-size {
  bottom: 14px;
  right: 4px;
  left: auto;
}

/* When thumbnail is narrow (aspect ratio > 1.5), stack metadata vertically */
.image-thumbnail[data-aspect-ratio="narrow"] .metadata-date {
  bottom: 28px; /* Move date up */
  left: 4px;
  right: auto;
}

.image-thumbnail[data-aspect-ratio="narrow"] .metadata-size {
  bottom: 14px; /* Keep size at bottom */
  right: 4px;
  left: auto;
}

/* Same fix for video thumbnails */
.video-thumbnail[data-aspect-ratio="narrow"] .metadata-date {
  bottom: 28px; /* Move date up */
  left: 4px;
  right: auto;
}

.video-thumbnail[data-aspect-ratio="narrow"] .metadata-size {
  bottom: 14px; /* Keep size at bottom */
  right: 4px;
  left: auto;
}

.metadata-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}



/* Video filename display */
.video-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-secondary);
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
  white-space: nowrap;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* GIF file size display */
.gif-file-size {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  display: none;
}

/* GIF transform controls */
.gif-transform-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}

.gif-transform-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 4px;
}

.gif-transform-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 44px;
}

.gif-transform-btn:hover:not(:disabled) {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gif-transform-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.gif-transform-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-secondary);
}

.gif-ctrl-btn {
  padding: 6px 10px;
  border: 1px solid var(--border-secondary);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
}

.gif-ctrl-btn.playing {
  background: var(--accent-secondary);
}

.gif-frame-info {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: center;
}

.gif-nav-btn {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.2s ease;
  position: absolute;
  width: 40px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gif-nav-btn:hover {
  background-color: var(--accent-secondary);
}

.gif-nav-btn:disabled {
  background-color: var(--bg-secondary);
  cursor: not-allowed;
}

#prevGifBtn {
  left: 10px;
}

#nextGifBtn {
  right: 10px;
}

#gifTypeDisplay {
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  min-width: 120px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gif-set-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.gif-set-thumbnail {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  border: 1px solid var(--border-secondary);
}

.gif-set-thumbnail:hover {
  transform: scale(1.05);
}

.gif-set-thumbnail.active {
  border: 3px solid var(--accent-primary);
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  transform: scale(1.02);
}

.gif-set-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Advanced toggle styling */
.advanced-toggle {
  cursor: pointer;
  margin-top: 8px;
  padding: 8px;
  background-color: var(--bg-tertiary);
  border-radius: 4px;
  border: 1px solid var(--border-secondary);
  transition: background-color 0.2s ease;
}

.advanced-toggle:hover {
  background-color: var(--bg-secondary);
}

.advanced-panel {
  margin-top: 8px;
  padding: 15px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .render-section .input-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .render-section .input-group label {
    flex: none;
    font-size: 0.9em;
  }
  
  .render-section .input-group select,
  .render-section .input-group input {
    flex: none;
    width: 100%;
  }
  
  .button-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .button-group button {
    width: 100%;
  }
  
  .render-container {
    padding: 15px;
    gap: 15px;
  }
  
  .render-section {
    padding: 15px;
  }
  
  .settings-grid {
    gap: 8px;
  }
}

/* Color Palette Sidebar Styles */
.color-palette-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 0;
  min-width: 0;
  max-width: 420px;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  flex-shrink: 0;
  border-right: 1px solid transparent;
  z-index: 1000;
}

.color-palette-sidebar.open {
  width: min(380px, 32vw);
  min-width: 320px;
  opacity: 1;
  pointer-events: auto;
  border-right-color: var(--border-primary);
}

/* Ensure sidebar is visible on all tabs */
.tab-content-container ~ .color-palette-sidebar.open {
  display: flex;
}

.color-palette-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

.color-palette-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}

.color-palette-sidebar-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-secondary);
}

.color-palette-sidebar-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.color-palette-sidebar-close:hover {
  background: var(--bg-secondary);
  color: var(--accent-secondary);
}

.color-palette-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}



.color-palette-container .main-nav {
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.color-palette-container .nav-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.9em;
  flex: 1;
  min-width: 0;
}

.color-palette-container .nav-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.color-palette-container .nav-btn.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-secondary);
  font-weight: 600;
}

.color-palette-container .palette-page {
  display: none;
  flex: 1;
}

.color-palette-container .palette-page.active {
  display: block;
}

.color-palette-container .view-toggle {
  text-align: center;
  margin-bottom: 20px;
}

.color-palette-container .toggle-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: 6px 12px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.8em;
}

.color-palette-container .toggle-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.color-palette-container .toggle-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-secondary);
  color: white;
}

.color-palette-container .view-container {
  display: none;
}

.color-palette-container .view-container.active {
  display: block;
}

/* Compact View */
.color-palette-container .compact-section {
  margin-bottom: 16px;
}

.color-palette-container .compact-title {
  font-size: 0.95em;
  margin-bottom: 8px;
  color: var(--accent-secondary);
  font-weight: 600;
}

.color-palette-container .compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 4px;
}

.color-palette-container .compact-color {
  position: relative;
  height: 45px;
  cursor: pointer;
  transition: transform 0.2s, z-index 0s;
  border-radius: 4px;
  overflow: hidden;
}

.color-palette-container .compact-color:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.color-palette-container .compact-color:hover .compact-tooltip {
  opacity: 1;
  visibility: visible;
}

.color-palette-container .compact-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-quaternary);
  color: var(--text-primary);
  padding: 6px;
  border-radius: 4px;
  font-size: 0.7em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  z-index: 100;
  border: 1px solid var(--border-secondary);
  margin-bottom: 5px;
  pointer-events: none;
}

.color-palette-container .compact-tooltip .tooltip-name {
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--accent-secondary);
}

.color-palette-container .compact-tooltip .tooltip-values {
  font-family: 'Courier New', monospace;
  line-height: 1.3;
}

.color-palette-container .compact-color-name {
  position: absolute;
  bottom: 2px;
  left: 3px;
  right: 3px;
  font-size: 0.6em;
  background: var(--bg-quaternary);
  padding: 2px 3px;
  border-radius: 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

/* Card View */
.color-palette-container .color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.color-palette-container .color-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-secondary);
}

.color-palette-container .color-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.color-palette-container .color-preview {
  height: 60px;
}

.color-palette-container .color-info {
  padding: 10px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.color-palette-container .color-name {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.85em;
}

.color-palette-container .color-values {
  font-family: 'Courier New', monospace;
  font-size: 0.75em;
  line-height: 1.4;
}

.color-palette-container .color-value {
  display: block;
  padding: 2px 4px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 3px;
  margin: 2px 0;
}

.color-palette-container .color-value:hover {
  background: var(--bg-secondary);
}

/* Function Cards */
.color-palette-container .function-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.color-palette-container .function-header {
  padding: 12px 15px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-secondary);
}

.color-palette-container .function-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--accent-secondary);
  margin-bottom: 3px;
}

.color-palette-container .function-desc {
  color: var(--text-secondary);
  font-size: 0.8em;
}

.color-palette-container .function-preview {
  height: 60px;
  position: relative;
  cursor: pointer;
}

.color-palette-container .function-code {
  padding: 15px;
  background: var(--bg-tertiary);
}

.color-palette-container .code-block {
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.75em;
  line-height: 1.4;
  overflow-x: auto;
  cursor: pointer;
  position: relative;
  color: var(--text-primary);
}

.color-palette-container .code-block:hover {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
}

.color-palette-container .copy-hint {
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 0.7em;
  color: var(--text-muted);
  font-family: 'Segoe UI', sans-serif;
}

.color-palette-container .code-block:hover .copy-hint {
  color: var(--text-secondary);
}

.color-palette-container .label {
  color: var(--text-muted);
  font-size: 0.8em;
}

.color-palette-container .section-divider {
  margin: 20px 0;
  padding: 8px 0;
  border-top: 1px solid var(--border-secondary);
}

.color-palette-container .section-header {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--accent-secondary);
  margin-bottom: 15px;
  text-align: center;
}

.color-palette-container .func-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.color-palette-container .func-compact {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.color-palette-container .func-compact:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.color-palette-container .func-compact-preview {
  height: 30px;
}

.color-palette-container .func-compact-info {
  padding: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.color-palette-container .func-compact-title {
  font-weight: 600;
  font-size: 0.8em;
  color: var(--accent-secondary);
  margin-bottom: 2px;
}

.color-palette-container .func-compact-type {
  font-size: 0.7em;
  color: var(--text-muted);
}

/* Discretizer styles */
.color-palette-container .discretizer {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-palette-container .discretizer.collapsed {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
  box-shadow: none;
}

.color-palette-container .discretizer-header {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--accent-secondary);
  padding: 15px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-palette-container .discretizer-header:hover {
  background: var(--bg-tertiary);
}

.color-palette-container .discretizer.collapsed .discretizer-header {
  color: var(--text-secondary);
}

.color-palette-container #discretizerToggleIcon {
  font-size: 0.8em;
  display: inline-block;
  width: 16px;
  transition: transform 0.2s ease;
}

.color-palette-container .discretizer-content {
  padding: 0 15px 15px;
}

.color-palette-container .discretizer-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.color-palette-container .discretizer-select {
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.8em;
}

.color-palette-container .discretizer-input {
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  width: 60px;
  font-size: 0.8em;
}

.color-palette-container .discretizer-label {
  color: var(--text-secondary);
  font-size: 0.85em;
  white-space: nowrap;
}

.color-palette-container .discrete-preview {
  height: 60px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  cursor: pointer;
}

.color-palette-container .discrete-step {
  flex: 1;
  position: relative;
  transition: transform 0.2s;
}

.color-palette-container .discrete-step:hover {
  transform: scaleY(1.1);
  z-index: 10;
}

.color-palette-container .discrete-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.color-palette-container .discrete-color-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.color-palette-container .discrete-color-card:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.color-palette-container .discrete-color-preview {
  height: 30px;
  border-radius: 3px;
  margin-bottom: 6px;
}

.color-palette-container .discrete-color-value {
  font-family: 'Courier New', monospace;
  font-size: 0.7em;
  color: var(--text-primary);
  text-align: center;
}

.color-palette-container .discretizer-actions {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-secondary);
}

.color-palette-container .discretizer-actions .primary-btn {
  background: var(--accent-primary);
  border: none;
  padding: 10px 16px;
  font-weight: 600;
  color: white;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-palette-container .discretizer-actions .primary-btn:hover {
  background: var(--accent-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Copied notification */
.color-palette-container .copied {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent-secondary);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.color-palette-container .copied.show {
  opacity: 1;
}

/* Global copied notification */
#colorPaletteCopied {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#colorPaletteCopied.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* GIF Progress Dots */
.gif-progress-section {
  margin: 15px 0;
  padding: 15px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
}

.gif-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.gif-progress-dots {
  display: flex;
  gap: 12px;
  align-items: center;
}

.gif-progress-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--border-secondary);
  border: 2px solid var(--border-secondary);
  transition: all 0.3s ease;
  position: relative;
}

.gif-progress-dot.active {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.4);
  animation: pulse 1.5s infinite;
}

.gif-progress-dot.completed {
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.gif-progress-dot::after {
  content: attr(data-label);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gif-progress-dot.active::after,
.gif-progress-dot.completed::after {
  opacity: 1;
  color: var(--text-primary);
}

/* Alternating pattern: Bayer2, Sierra, and Floyd have labels below */
.gif-progress-dot[data-stage="bayer2"]::after,
.gif-progress-dot[data-stage="sierra"]::after,
.gif-progress-dot[data-stage="floyd"]::after {
  top: -18px;
}

.gif-progress-text {
  font-size: 14px;
  color: var(--text-primary);
  text-align: center;
  min-height: 20px;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.6);
  }
}

/* Global scrollbar styles using theme variables */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--border-primary);
}

/* WebKit scrollbar styles for all elements */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--border-primary);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
  transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--accent-secondary);
}

/* Specific overrides for horizontal scrollbars */
*::-webkit-scrollbar:horizontal {
  height: 6px;
}

/* Override for elements that should have hidden scrollbars */
.modal-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ===== LIBRARY FUNCTIONS STYLES ===== */

/* Add Function Tile */
.add-function-tile {
  border: 2px dashed var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-function-tile:hover {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
  transform: translateY(-2px);
}

.add-function-content {
  text-align: center;
  color: var(--text-muted);
}

.add-function-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--accent-primary);
}

.add-function-tile h3 {
  margin: 0.5rem 0;
  color: var(--text-primary);
}

/* User Function Tile */
.user-function-tile {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-function-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.function-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.user-function-tile:hover .function-actions {
  opacity: 1;
}

.edit-function-btn,
.delete-function-btn {
  background: var(--bg-quaternary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
}

.edit-function-btn:hover {
  background: var(--accent-primary);
  color: white;
}

.delete-function-btn:hover {
  background: #dc3545;
  color: white;
}

/* Public Function Tile */
.public-function-tile {
  cursor: pointer;
  transition: all 0.3s ease;
}

.public-function-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.function-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

/* Function Form Modal Styles */
#addFunctionModal .modal-content {
  max-width: 1000px;
  width: 90vw;
  max-height: 90vh;
  min-width: 700px;
}

.function-form-container {
  display: flex;
  gap: 20px;
  height: 60vh;
  min-height: 400px;
  margin-top: 12px;
}

.function-form-left {
  flex: 1;
  overflow-y: auto;
}

.function-form-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.function-form-right .settings-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.function-parts-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.function-part {
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 15px;
  background: var(--bg-secondary);
}

.part-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.part-header h4 {
  margin: 0;
  color: var(--accent-primary);
  font-size: 16px;
  font-weight: 600;
}

.part-name {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 10px;
}

.part-name:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.remove-part-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease;
}

.remove-part-btn:hover {
  background: #c82333;
}

.part-instruction {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 10px;
}

.part-instruction:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.part-code {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
  min-height: 120px;
}

.part-code:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Style all inputs in function form */
#addFunctionModal input[type="text"],
#addFunctionModal input[type="email"],
#addFunctionModal input[type="password"],
#addFunctionModal textarea,
#addFunctionModal select {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

#addFunctionModal input[type="text"]:focus,
#addFunctionModal input[type="email"]:focus,
#addFunctionModal input[type="password"]:focus,
#addFunctionModal textarea:focus,
#addFunctionModal select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

#addFunctionModal input[type="checkbox"] {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #addFunctionModal .modal-content {
    width: 95vw;
    max-width: 95vw;
    min-width: 95vw;
  }
  
  .function-form-container {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
  
  .function-form-left,
  .function-form-right {
    flex: none;
  }
}

/* Video Player Modal Styles */
.video-player-modal {
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;
  min-width: 400px;
  overflow: auto;
}

.video-player-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.video-container {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  flex: 1;
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

.video-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  flex-shrink: 0;
}

.video-controls button {
  padding: 3px 5px;
  font-size: 16px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.video-controls button:hover {
  background-color: var(--accent-secondary);
}

.video-controls button.enabled {
  background-color: var(--accent-secondary);
  color: white;
}

.video-controls button.enabled:hover {
  background-color: var(--accent-primary);
}

/* Responsive adjustments for video player */
@media (max-width: 768px) {
  .video-player-modal {
    width: 95vw;
    max-width: 95vw;
    min-width: 95vw;
    max-height: 95vh;
  }
  
  .video-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .video-controls button {
    justify-content: center;
  }
}

/* Job Queue Floating Button and Slide-out */
.queue-floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.queue-toggle-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
}

.queue-toggle-btn:hover {
  background: var(--accent-secondary);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.queue-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  border: 2px solid var(--bg-primary);
}

.queue-slideout {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-primary);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.queue-slideout.open {
  right: 0;
}

.queue-slideout-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-tertiary);
}

.queue-slideout-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2em;
}

.queue-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.queue-close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.queue-slideout-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.queue-header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-slideout-tabs {
  display: flex;
  gap: 8px;
}

.queue-tab {
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.queue-tab.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.queue-panel {
  display: none;
}

.queue-panel.active {
  display: block;
}

.worker-status-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.worker-status-updated {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.small-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.worker-status-message {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.worker-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.worker-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.worker-card.online {
  border-color: var(--accent-primary);
}

.worker-card.busy {
  border-color: #f39c12;
}

.worker-card.offline {
  opacity: 0.85;
}

.worker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.worker-name {
  font-weight: 600;
  color: var(--text-primary);
}

.worker-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.worker-card-body div {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--text-secondary);
}

.worker-card-body div span:first-child {
  font-weight: 500;
  color: var(--text-primary);
}

.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-pill.online,
.status-pill.job-completed {
  background: rgba(39, 174, 96, 0.15);
  color: #2ecc71;
}

.status-pill.busy,
.status-pill.job-rendering,
.status-pill.job-assigned {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
}

.status-pill.offline,
.status-pill.job-failed {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.status-pill.job-queued {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.worker-jobs-header {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.worker-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.worker-job-item {
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 10px;
  background: var(--bg-tertiary);
}

.worker-job-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.worker-job-title {
  font-weight: 500;
  color: var(--text-primary);
}

.worker-job-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.job-progress {
  margin-top: 6px;
  height: 4px;
  background: var(--border-primary);
  border-radius: 999px;
  overflow: hidden;
}

.job-progress-fill {
  height: 100%;
  background: var(--accent-primary);
  transition: width 0.2s ease;
}

.job-remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.current-job {
  padding: 15px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 20px;
}

.current-job-label {
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.current-job-name {
  color: var(--text-primary);
  font-size: 1em;
  font-weight: 500;
}

.queue-divider {
  height: 1px;
  background: var(--border-primary);
  margin: 20px 0;
}

.queue-list-header {
  font-size: 0.9em;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.job-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-queue-list .job-item {
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.job-queue-list .job-item:hover {
  background: var(--bg-quaternary);
  border-color: var(--accent-primary);
}

.job-queue-list .job-item .job-number {
  color: var(--text-secondary);
  font-weight: 600;
  margin-right: 8px;
}

.job-queue-list .job-item .job-name {
  color: var(--text-primary);
  flex: 1;
}

.job-queue-list .job-item .job-remove-btn {
  padding: 4px 10px;
  font-size: 12px;
}

.queue-actions {
  padding-top: 15px;
  border-top: 1px solid var(--border-primary);
}

/* ===========================================
   MOBILE RESPONSIVE LAYOUT
   =========================================== */

/* Mobile menu toggle - hidden on desktop */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 20px;
  padding: 8px 12px;
  cursor: pointer;
  margin-right: 8px;
}

.mobile-menu-toggle:hover {
  color: var(--accent-primary);
}

/* Mobile bottom navigation - hidden on desktop */
.mobile-bottom-nav {
  display: none;
}

/* Mobile menu panel - hidden on desktop */
.mobile-menu-panel {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

/* Mobile editor controls - hidden on desktop */
.mobile-editor-controls {
  display: none;
}

/* Mobile stats bar - hidden on desktop */
.mobile-stats-bar {
  display: none !important;
}

/* Note: .mobile-hidden class is handled in mobile media query - no desktop styles needed */

/* Mobile breakpoint: 768px and below */
@media (max-width: 768px) {
  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Top bar mobile adjustments */
  .top-bar {
    padding: 4px 8px;
    height: 50px;
    z-index: 1001;
  }

  .top-bar .logo {
    font-size: 16px;
    margin-right: auto;
    gap: 8px;
  }

  .top-bar .logo img {
    width: 24px;
    height: 24px;
  }

  /* Hide nav buttons on mobile by default */
  .top-bar nav {
    display: none;
  }

  /* Hide login form on mobile - use menu instead */
  .top-bar .account-section .login-form {
    display: none;
  }

  /* Simplify account section on mobile */
  .top-bar .account-section {
    gap: 4px;
  }

  .top-bar .account-section #loggedOutView {
    display: flex;
    gap: 4px;
  }

  .top-bar .account-section #loggedOutView .login-form {
    display: none;
  }

  .top-bar .account-section #registerButton {
    padding: 6px 10px;
    font-size: 12px;
  }

  .top-bar .account-section .bug-report-btn {
    padding: 6px 8px;
  }

  /* Mobile menu panel */
  .mobile-menu-panel {
    display: block;
    position: fixed;
    top: 50px;
    left: 0;
    width: 280px;
    height: calc(100vh - 50px);
    background: var(--bg-secondary);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    border-right: 1px solid var(--border-primary);
  }

  .mobile-menu-panel.active {
    transform: translateX(0);
  }

  /* Mobile menu overlay */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .mobile-menu-overlay.active {
    display: block;
  }

  .mobile-menu-panel .menu-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-primary);
  }

  .mobile-menu-panel .menu-section h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
  }

  .mobile-menu-panel .menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background 0.2s;
  }

  .mobile-menu-panel .menu-item:hover,
  .mobile-menu-panel .menu-item.active {
    background: var(--accent-primary);
    color: white;
  }

  .mobile-menu-panel .menu-toggles {
    padding: 8px 0;
  }

  .mobile-menu-panel .menu-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 14px;
  }

  .mobile-menu-panel .menu-toggle-item span {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-menu-panel .menu-toggle-item i {
    width: 18px;
    text-align: center;
    color: var(--text-secondary);
  }

  .mobile-menu-panel .menu-toggle-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    min-width: 50px;
    text-align: center;
    transition: all 0.2s;
  }

  .mobile-menu-panel .menu-toggle-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
  }

  /* Texture filter button - don't highlight the button, just the text */
  #mobileFilterBtn.active {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
  }

  .mobile-menu-panel .menu-toggle-btn .filter-highlight {
    color: #4CAF50;
    font-weight: 600;
  }

  /* Mobile submenu (export etc) */
  .mobile-menu-panel .mobile-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    z-index: 10;
    overflow-y: auto;
  }

  .mobile-menu-panel .mobile-submenu.active {
    display: block;
  }

  .mobile-menu-panel .mobile-submenu h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-primary);
    margin: 0;
    font-size: 14px;
  }

  .mobile-menu-panel .submenu-back {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
  }

  .mobile-menu-panel .submenu-back:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .mobile-menu-panel .mobile-submenu .menu-item {
    margin: 4px 16px;
    width: calc(100% - 32px);
  }

  .mobile-menu-panel .login-section {
    padding: 16px;
  }

  .mobile-menu-panel .login-section input {
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .mobile-menu-panel .login-section button {
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
  }

  /* Main outer container on mobile - FULL SCREEN CANVAS */
  .outer-container {
    margin-top: 50px;
    height: calc(100vh - 50px - 42px); /* Account for top bar and bottom nav */
  }

  /* Layout container on mobile */
  .layout-container {
    flex-direction: column;
    position: relative;
  }

  /* Hide sidebar on mobile - use bottom nav instead */
  .sidebar {
    display: none;
  }

  /* Mobile bottom navigation */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: color-mix(in srgb, var(--bg-secondary) 98%, transparent);
    border-top: 1px solid var(--border-primary);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 50px;
  }

  .mobile-nav-item i {
    font-size: 18px;
    margin-bottom: 2px;
  }

  .mobile-nav-item span {
    font-size: 9px;
    font-weight: 500;
  }

  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    background: var(--accent-primary);
    color: var(--text-primary);
  }

  /* Main content - needs to be visible on mobile for canvas to render */
  .main-content {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    position: relative;
  }

  /* Content area - container for canvas */
  .content-area {
    flex: 1;
    display: flex !important;
    position: relative;
    height: 100%;
    overflow: visible;
  }

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

  /* LEFT PANEL - OVERLAY EDITOR on mobile */
  .left-panel {
    position: fixed !important;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 42px;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent) !important;
    z-index: 900;
    border: none !important;
    display: flex !important;
    flex-direction: column;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .left-panel.mobile-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Right panel - FULL SCREEN CANVAS on mobile */
  .right-panel {
    position: fixed !important;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 42px;
    width: auto !important;
    height: auto !important;
    z-index: 10;
    display: flex !important;
    background: #000;
    flex-direction: column;
  }

  .canvas-container {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  #canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain;
  }

  /* Channel tabs on mobile overlay */
  .channel-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--bg-quaternary) 90%, transparent);
    flex-shrink: 0;
  }

  .channel-tabs::-webkit-scrollbar {
    display: none;
  }

  .channel-tab {
    padding: 10px 14px;
    font-size: 12px;
    flex-shrink: 0;
    background: transparent;
  }

  .channel-tab.active {
    background: var(--accent-primary);
  }

  .channel-tab[data-channel^="iChannel"] {
    min-width: auto;
    max-width: none;
  }

  /* Editor section in overlay */
  .editor-section {
    flex: 1;
    min-height: 0;
    background: transparent !important;
  }

  #editor {
    font-size: 13px !important;
    background: transparent !important;
  }

  /* Make Ace editor background transparent so shader shows through */
  .ace_editor {
    background: transparent !important;
  }

  .ace_gutter {
    background: color-mix(in srgb, var(--bg-secondary) 75%, transparent) !important;
  }

  .ace_scroller {
    background: transparent !important;
  }
  
  .ace_content {
    background: transparent !important;
  }

  /* Hide uniforms on mobile overlay by default */
  .uniforms-section {
    display: none;
  }

  .uniforms-resizer {
    display: none;
  }

  /* Hide loop controls on mobile overlay */
  .loop-section {
    display: none;
  }

  /* Controls bar on mobile - compact bottom strip */
  .controls {
    flex-wrap: nowrap;
    padding: 6px 10px;
    gap: 10px;
    font-size: 11px;
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    justify-content: space-between;
    flex-shrink: 0;
  }

  .controls > div {
    margin-right: 0;
  }

  .resolution-scale-control {
    width: auto;
  }

  .resolution-scale-control label {
    display: none;
  }

  /* Mobile Stats Bar - visible in view mode (editor hidden) */
  .mobile-stats-bar {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-primary) 70%, transparent), transparent);
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    z-index: 800;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    pointer-events: none;
  }

  .mobile-stats-bar.visible {
    display: flex;
  }

  .mobile-stats-bar span {
    white-space: nowrap;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--bg-primary) 80%, transparent);
  }

  /* Mobile floating action buttons */
  .mobile-editor-controls {
    position: fixed;
    bottom: 120px;
    right: 8px;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
  }

  .mobile-editor-controls button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--border-primary) 50%, transparent);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bg-primary) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background-color 0.15s;
  }

  .mobile-editor-controls button:active {
    transform: scale(0.92);
  }

  .mobile-editor-controls button.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
  }

  /* Toggle editor button - always visible */
  #mobileToggleEditorBtn {
    background: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  #mobileToggleEditorBtn.editor-visible {
    background: var(--accent-primary);
  }

  #mobileToggleEditorBtn:not(.editor-visible) {
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  }

  /* Compile button highlight */
  #mobileCompileBtn {
    background: var(--accent-primary);
  }

  /* Tab content panels on mobile - full screen overlays */
  .tab-content-container {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 42px;
    z-index: 950;
    background: color-mix(in srgb, var(--bg-primary) 98%, transparent);
  }

  .tab-content {
    height: 100%;
    overflow-y: auto;
  }

  /* Render tab can be slightly more transparent to show shader preview */
  #render.tab-content {
    background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
  }

  /* Render tab on mobile */
  .render-scroll-container {
    padding-bottom: 20px;
  }

  .render-sections-row {
    grid-template-columns: 1fr !important;
  }

  .render-section {
    padding: 12px;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* Info tab on mobile */
  .info-container {
    padding: 12px;
  }

  .info-project-grid {
    grid-template-columns: 1fr !important;
  }

  .info-actions-bar {
    flex-direction: column;
    gap: 8px;
  }

  .info-actions-bar .actions-secondary {
    flex-wrap: wrap;
  }

  /* Library tab on mobile */
  .library-container {
    padding: 12px;
  }

  .library-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* Modals on mobile - only apply when visible */
  .modal[style*="display: block"] {
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    z-index: 2000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    pointer-events: auto;
  }

  .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: auto !important;
    max-height: 85vh;
    margin: 0;
    position: relative;
  }

  .modal-body {
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Shader list view on mobile */
  #shaderListView {
    padding: 8px;
  }

  .shader-list-header .search-container {
    flex-direction: column;
    gap: 8px;
  }

  .shader-search-input {
    width: 100%;
  }

  .shader-filter-select {
    width: 100%;
  }

  .pagination-controls-inline {
    width: 100%;
    justify-content: center;
  }

  .shader-list-container .grid {
    grid-template-columns: 1fr !important;
  }

  /* Color palette sidebar on mobile */
  .color-palette-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Queue slideout on mobile */
  .queue-slideout {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* GIF preview on mobile */
  .gif-preview-container {
    max-width: 100%;
  }

  .current-gif-preview {
    max-width: 100%;
    height: auto;
  }

  /* Recording countdown on mobile */
  #recordingCountdownDisplay {
    font-size: 14px;
    padding: 8px 12px;
  }
}

/* Small mobile devices (phones in portrait) */
@media (max-width: 480px) {
  .top-bar .logo {
    font-size: 14px;
    gap: 8px;
  }

  .top-bar .logo img {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-item {
    min-width: 44px;
    padding: 4px 6px;
  }

  .mobile-nav-item i {
    font-size: 16px;
  }

  .mobile-nav-item span {
    font-size: 8px;
  }

  .channel-tab {
    padding: 8px 10px;
    font-size: 11px;
  }

  #editor {
    font-size: 12px !important;
  }

  .controls {
    font-size: 10px;
    padding: 4px 6px;
  }

  .mobile-editor-controls {
    bottom: 100px;
    right: 6px;
    gap: 4px;
  }

  .mobile-editor-controls button {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  #mobileToggleEditorBtn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .library-grid {
    grid-template-columns: 1fr !important;
  }

  .mobile-stats-bar {
    font-size: 10px;
    padding: 6px 10px;
  }
}

/* Landscape mobile */
@media (max-width: 900px) and (orientation: landscape) {
  .outer-container {
    height: calc(100vh - 50px - 44px);
  }

  .mobile-bottom-nav {
    height: 44px;
  }

  .mobile-nav-item span {
    display: none;
  }

  .mobile-nav-item {
    min-width: 44px;
    padding: 6px 10px;
  }

  .mobile-nav-item i {
    font-size: 20px;
    margin-bottom: 0;
  }

  /* In landscape, editor overlay is narrower */
  .left-panel {
    position: fixed !important;
    top: 50px;
    left: 0;
    width: 55% !important;
    max-width: 55% !important;
    min-width: 55% !important;
    bottom: 44px;
    height: auto !important;
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent) !important;
  }

  .mobile-editor-controls {
    bottom: 55px;
    gap: 4px;
  }

  .mobile-editor-controls button {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  #mobileToggleEditorBtn {
    width: 40px;
    height: 40px;
  }

  /* Channel tabs more compact in landscape */
  .channel-tabs {
    padding: 0;
  }

  .channel-tab {
    padding: 6px 10px;
    font-size: 11px;
  }

  .controls {
    padding: 4px 8px;
  }

  .mobile-stats-bar {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ==========================================================================
   SEO Landing Section
   Visible to crawlers, visually hidden once app loads
   ========================================================================== */

.seo-landing {
  /* Visually hidden but accessible to screen readers and crawlers */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* When JavaScript is disabled, show the landing section */
noscript + .seo-landing,
.seo-landing:target {
  position: static;
  width: auto;
  height: auto;
  padding: 40px 20px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  color: #e5e7eb;
  min-height: 100vh;
}

.seo-landing article {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
}

.seo-landing h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-landing h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #a5b4fc;
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
  padding-bottom: 0.5rem;
}

.seo-landing p {
  margin-bottom: 1rem;
  color: #d1d5db;
}

.seo-landing ul,
.seo-landing ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.seo-landing li {
  margin-bottom: 0.75rem;
  color: #d1d5db;
}

.seo-landing strong {
  color: #f3f4f6;
}

.seo-landing section {
  margin-bottom: 2rem;
}

/* ============================================================================
   VIBE MODE PANEL - AI-Assisted Shader Editing
   ============================================================================ */

.vibe-mode-panel {
  height: 40px;
  min-height: 40px;
  max-height: 400px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.vibe-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  transition: background 0.2s ease;
}

.vibe-mode-header:hover {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.vibe-mode-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #e2e8f0;
  font-size: 13px;
}

.vibe-icon {
  font-size: 14px;
}

.vibe-beta-badge {
  font-size: 9px;
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.vibe-mode-toggle {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.vibe-mode-toggle:hover {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

.vibe-mode-toggle i {
  transition: transform 0.3s ease;
}

.vibe-mode-panel.expanded .vibe-mode-toggle i {
  transform: rotate(180deg);
}

.vibe-mode-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
}

/* Prompt Input */
.vibe-prompt-section {
  position: relative;
}

.vibe-prompt-input {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  padding: 10px 12px;
  background: rgba(15, 15, 35, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.vibe-prompt-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.vibe-prompt-input::placeholder {
  color: #64748b;
  font-style: italic;
}

/* Mode Selector */
.vibe-options-row {
  display: flex;
  justify-content: flex-start;
}

.vibe-mode-selector {
  display: flex;
  gap: 6px;
  font-size: 12px;
}

.vibe-mode-selector label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.vibe-mode-selector input[type="radio"] {
  display: none;
}

.vibe-edit-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(30, 30, 50, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #94a3b8;
  transition: all 0.2s ease;
  font-size: 11px;
}

.vibe-edit-option i {
  font-size: 10px;
  opacity: 0.8;
}

.vibe-edit-option:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

.vibe-mode-selector input[type="radio"]:checked + .vibe-edit-option {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  color: #e2e8f0;
}

.vibe-mode-selector input[type="radio"]:checked + .vibe-edit-option i {
  opacity: 1;
}

/* Model Selector */
.vibe-model-selector {
  display: flex;
  gap: 8px;
  font-size: 12px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
}

.vibe-model-dropdown-wrapper {
  position: relative;
}

.vibe-model-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(30, 30, 50, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  min-width: 100px;
  font-family: inherit;
}

.vibe-model-button:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

.vibe-model-button:focus,
.vibe-model-button.active {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  color: #e2e8f0;
}

.vibe-model-button-text {
  flex: 1;
  text-align: left;
}

.vibe-model-button-chevron {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.vibe-model-button.active .vibe-model-button-chevron {
  transform: rotate(180deg);
}

.vibe-model-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 100px;
  background: rgba(30, 30, 50, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow: hidden;
  padding: 2px 0;
}

.vibe-model-option {
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  text-align: left;
  border: none;
  width: 100%;
  font-family: inherit;
}

.vibe-model-option:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}

.vibe-model-option.selected {
  background: rgba(139, 92, 246, 0.25);
  color: #e2e8f0;
}

/* Toggles */
.vibe-toggles-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.vibe-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.2s ease;
}

.vibe-toggle:hover {
  color: #c4b5fd;
}

.vibe-toggle input[type="checkbox"] {
  accent-color: #8b5cf6;
  margin: 0;
}

.vibe-toggle input[type="checkbox"]:checked + span {
  color: #c4b5fd;
}

/* Actions Row */
.vibe-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.vibe-credits-estimate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
  background: rgba(15, 15, 35, 0.5);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.credits-icon {
  font-size: 14px;
}

.vibe-action-buttons {
  display: flex;
  gap: 8px;
}

.vibe-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.vibe-btn-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.vibe-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.vibe-btn-secondary {
  background: rgba(51, 65, 85, 0.8);
  color: #cbd5e1;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.vibe-btn-secondary:hover:not(:disabled) {
  background: rgba(71, 85, 105, 0.8);
  border-color: rgba(139, 92, 246, 0.5);
}

.vibe-btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.vibe-btn-warning:hover:not(:disabled) {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* Status Row */
.vibe-status-row {
  padding: 8px 10px;
  background: rgba(15, 15, 35, 0.5);
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.vibe-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.vibe-status-icon {
  font-size: 14px;
}

.vibe-status-text {
  color: #94a3b8;
}

.vibe-status.processing .vibe-status-icon {
  animation: vibe-spin 1s linear infinite;
}

@keyframes vibe-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vibe-status.success .vibe-status-text {
  color: #4ade80;
}

.vibe-status.error .vibe-status-text {
  color: #f87171;
}

/* Usage Details */
.vibe-usage-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(15, 15, 35, 0.3);
  border-radius: 6px;
  font-size: 11px;
}

.vibe-usage-item {
  display: flex;
  gap: 6px;
  color: #64748b;
}

.vibe-usage-item span:last-child {
  color: #94a3b8;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Edit Results (per-file stats) */
.vibe-edit-results {
  background: rgba(15, 15, 35, 0.4);
  border-radius: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.vibe-edit-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.vibe-edit-results-title {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vibe-details-btn {
  background: none;
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.vibe-details-btn:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.vibe-edit-results-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vibe-file-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(30, 30, 50, 0.6);
  border-radius: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.vibe-file-stat.success {
  border-left: 2px solid #22c55e;
}

.vibe-file-stat.failed {
  border-left: 2px solid #ef4444;
  opacity: 0.7;
}

.vibe-file-name {
  color: #e2e8f0;
  font-weight: 500;
}

.vibe-file-adds {
  color: #22c55e;
}

.vibe-file-removes {
  color: #ef4444;
}

/* Vibe Details Modal */
#vibeDetailsModal .modal-content {
  max-width: 900px;
  min-width: 600px;
}

#vibeDetailsModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#vibeDetailsModal .vibe-details-section {
  background: rgba(15, 15, 35, 0.5);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(139, 92, 246, 0.15);
}

#vibeDetailsModal .vibe-details-section h4 {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#vibeDetailsModal .vibe-details-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 12px;
}

#vibeDetailsModal .vibe-details-summary-item {
  display: flex;
  gap: 6px;
}

#vibeDetailsModal .vibe-details-summary-item .label {
  color: #64748b;
}

#vibeDetailsModal .vibe-details-summary-item .value {
  color: #e2e8f0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

#vibeDetailsModal .vibe-details-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#vibeDetailsModal .vibe-details-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(30, 30, 50, 0.6);
  border-radius: 4px;
  font-size: 12px;
}

#vibeDetailsModal .vibe-details-file-row.success {
  border-left: 3px solid #22c55e;
}

#vibeDetailsModal .vibe-details-file-row.failed {
  border-left: 3px solid #ef4444;
}

#vibeDetailsModal .vibe-details-file-name {
  color: #e2e8f0;
  font-weight: 500;
  min-width: 120px;
}

#vibeDetailsModal .vibe-details-file-stats {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

#vibeDetailsModal .vibe-details-file-error {
  color: #f87171;
  font-size: 11px;
}

#vibeDetailsModal .vibe-details-code {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #94a3b8;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

#vibeDetailsModal .vibe-details-diff {
  color: #e2e8f0;
}

/* Processing State */
.vibe-mode-panel.processing .vibe-prompt-input {
  pointer-events: none;
  opacity: 0.7;
}

.vibe-mode-panel.processing .vibe-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.vibe-mode-panel.processing .vibe-btn-primary i {
  animation: vibe-spin 1s linear infinite;
}

/* Compile Error Highlight */
.vibe-mode-panel.has-errors .vibe-mode-header {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.vibe-mode-panel.has-errors .vibe-mode-title {
  color: #fca5a5;
}

/* Keyboard shortcut hints */
.vibe-btn[title]::after {
  content: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vibe-mode-content {
    padding: 10px;
    gap: 8px;
  }
  
  .vibe-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .vibe-action-buttons {
    justify-content: flex-end;
  }
  
  .vibe-toggles-row {
    gap: 10px;
  }
}