@twick/studio 0.14.5 → 0.14.7

package/dist/studio.css

@@ -1,284 +1,2176 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  * {
-    @apply border-gray-600;
-  }
-  
-  body {
-    @apply bg-neutral-900 text-gray-100 font-sans;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-  
-  html {
-    @apply scroll-smooth;
-  }
-}
-@layer components {
-  /* Custom scrollbar */
-  .custom-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: theme('colors.purple.600') theme('colors.gray.700');
-  }
-  
-  .custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  
-  .custom-scrollbar::-webkit-scrollbar-track {
-    @apply bg-neutral-700;
-  }
-  
-  .custom-scrollbar::-webkit-scrollbar-thumb {
-    @apply bg-purple-600 rounded-full;
-  }
-  
-  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    @apply bg-purple-500;
-  }
-  
-  /* Glass morphism effect */
-  .glass {
-    @apply bg-neutral-800/70 backdrop-blur-md border border-gray-600/50 shadow-lg;
-  }
-  
-  /* Button styles */
-  .btn {
-    @apply inline-flex items-center justify-center rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-  
-  .btn-primary {
-    @apply bg-gradient-to-r from-purple-600 to-purple-700 text-white hover:from-purple-700 hover:to-purple-800 focus:ring-purple-500 shadow-lg shadow-purple-500/25 hover:shadow-xl hover:shadow-purple-500/30;
-  }
-  
-  .btn-secondary {
-    @apply bg-gradient-to-r from-purple-200 to-purple-300 text-gray-600 hover:from-purple-200 hover:to-purple-300 focus:ring-purple-100 shadow-lg shadow-purple-100/25 hover:shadow-xl hover:shadow-purple-100/30;
-  }
-  
-  .btn-ghost {
-    @apply text-gray-300 hover:text-white hover:bg-neutral-700/50 focus:ring-gray-500;
-  }
-  
-  .btn-outline {
-    @apply border border-purple-500 text-purple-400 hover:bg-purple-500 hover:text-white focus:ring-purple-500;
-  }
-  
-  .btn-danger {
-    @apply bg-gradient-to-r from-red-600 to-red-700 text-white hover:from-red-700 hover:to-red-800 focus:ring-red-500;
-  }
-  
-  /* Input styles */
-  .input {
-    @apply w-full rounded-lg border border-gray-600 bg-neutral-700/80 px-3 py-2 text-sm text-gray-100 placeholder-gray-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm shadow-sm;
-  }
-  
-  /* Card styles */
-  .card {
-    @apply rounded-xl border border-gray-600/50 bg-neutral-800/60 backdrop-blur-md shadow-lg;
-  }
-  
-  /* Panel styles */
-  .panel {
-    @apply card p-4;
-  }
-  
-  /* Sidebar styles */
-  .sidebar {
-    @apply w-16 bg-neutral-800/80 border-r border-gray-600/50 flex flex-col backdrop-blur-md shadow-lg;
-  }
-  
-  /* Timeline track styles */
-  .timeline-track {
-    @apply relative h-12 bg-neutral-700/50 border border-gray-600/50 rounded-lg overflow-hidden backdrop-blur-sm shadow-md;
-  }
-  
-  .timeline-element {
-    @apply absolute top-1 bottom-1 rounded-md border border-purple-500/50 bg-gradient-to-r from-purple-600/30 to-purple-600/30 hover:from-purple-600/50 hover:to-purple-600/50 transition-all duration-200 cursor-pointer shadow-lg;
-  }
-  
-  /* Canvas styles */
-  .canvas-container {
-    @apply relative overflow-hidden shadow-xl;
-  }
-  
-  /* Toolbar styles */
-  .toolbar {
-    @apply flex items-center gap-2 p-3 bg-neutral-800/80 backdrop-blur-md border-b border-gray-600/50 shadow-md;
-  }
-  
-  /* Header styles */
-  .header {
-    @apply h-14 bg-neutral-800/90 border-b border-gray-600/50 flex items-center justify-between px-4 backdrop-blur-md shadow-lg;
-  }
-  
-  /* Media library styles */
-  .media-item {
-    @apply transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/20;
-  }
-  
-  /* Progress bar styling */
-  .progress-bar {
-    @apply transition-all duration-150 ease-out bg-gradient-to-r from-purple-500 to-purple-500;
-  }
-  
-  /* Button hover effects */
-  .btn-hover {
-    @apply transform hover:scale-105 active:scale-95 transition-transform duration-200;
-  }
-  
-  /* Accent colors */
-  .accent-purple {
-    @apply text-purple-400;
-  }
-  
-  .accent-blue {
-    @apply text-purple-400;
-  }
-  
-  /* Gradient text */
-  .text-gradient-purple {
-    @apply bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent;
-  }
-  
-  .text-gradient-blue {
-    @apply bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent;
-  }
-  
-  /* Glow effects */
-  .glow-purple {
-    box-shadow: 0 0 20px theme('colors.purple.500/20');
-  }
-  
-  .glow-blue {
-    box-shadow: 0 0 20px theme('colors.blue.500/20');
-  }
-  
-  /* Form elements */
-  .aspect-ratio-btn {
-    @apply px-3 py-1.5 rounded-lg border border-gray-600 text-gray-300 hover:border-purple-500 hover:text-purple-400 transition-all duration-200 text-sm;
-  }
-  
-  .aspect-ratio-btn.active {
-    @apply border-purple-500 bg-purple-500/20 text-purple-400 shadow-md shadow-purple-500/25;
-  }
-  
-  .slider-thumb {
-    @apply appearance-none bg-transparent cursor-pointer;
-  }
-  
-  .slider-thumb::-webkit-slider-thumb {
-    @apply appearance-none w-3 h-3 bg-gradient-to-r from-purple-500 to-purple-500 rounded-full shadow-lg cursor-pointer hover:shadow-xl hover:shadow-purple-500/30 transition-all duration-200;
-  }
-  
-  .slider-thumb::-moz-range-thumb {
-    @apply appearance-none w-3 h-3 bg-gradient-to-r from-purple-500 to-purple-500 rounded-full shadow-lg cursor-pointer border-0 hover:shadow-xl hover:shadow-purple-500/30 transition-all duration-200;
-  }
-  
-  .slider-thumb::-webkit-slider-track {
-    @apply w-full h-1.5 bg-neutral-600/50 rounded-full;
-  }
-  
-  .slider-thumb::-moz-range-track {
-    @apply w-full h-1.5 bg-neutral-600/50 rounded-full border-0;
-  }
-  
-  /* Form control buttons */
-  .form-btn {
-    @apply w-8 h-8 bg-gradient-to-br from-gray-700 to-gray-800 hover:from-gray-600 hover:to-gray-700 rounded-lg flex items-center justify-center text-gray-300 hover:text-white transition-all duration-200 shadow-sm hover:shadow-md hover:shadow-purple-500/20;
-  }
-  
-  .form-btn.active {
-    @apply bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md shadow-purple-500/25;
-  }
-  
-  /* Toolbar buttons */
-  .toolbar-btn {
-    @apply w-12 max-h-12 rounded-lg flex flex-col items-center justify-center transition-all duration-200 shadow-sm hover:shadow-md;
-  }
-  
-  .toolbar-btn.active {
-    @apply bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/25;
-  }
-  
-  .toolbar-btn:not(.active) {
-    @apply text-gray-400 hover:text-white hover:bg-neutral-700/50;
-  }
-
-   /* Props Toolbar buttons */
-   .props-toolbar-btn {
-    @apply w-14 max-h-14 rounded-lg flex flex-col items-center justify-center transition-all duration-200 shadow-sm hover:shadow-md;
-  }
-  
-  .props-toolbar-btn.active {
-    @apply bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/25;
-  }
-  
-  .props-toolbar-btn:not(.active) {
-    @apply text-gray-400 hover:text-white hover:bg-neutral-700/50;
-  }
-}
-@layer utilities {
-  /* Text gradients */
-  .text-gradient {
-    @apply bg-gradient-to-r from-purple-400 to-purple-400 bg-clip-text text-transparent;
-  }
-  
-  /* Glow effects */
-  .glow-primary {
-    box-shadow: 0 0 20px theme('colors.purple.500/20');
-  }
-  
-  .glow-accent {
-    box-shadow: 0 0 20px theme('colors.blue.500/20');
-  }
-  
-  /* Grid layouts */
-  .grid-auto-fit {
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  }
-  
-  .grid-auto-fill {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  }
-  
-  /* Backdrop blur utilities */
-  .backdrop-blur-sm {
-    -webkit-backdrop-filter: blur(4px);
-            backdrop-filter: blur(4px);
-  }
-  
-  .backdrop-blur-md {
-    -webkit-backdrop-filter: blur(12px);
-            backdrop-filter: blur(12px);
-  }
-  
-  .backdrop-blur-lg {
-    -webkit-backdrop-filter: blur(16px);
-            backdrop-filter: blur(16px);
-  }
-}
-/* Video player customizations */
-video::-webkit-media-controls,
-video::-webkit-media-controls-panel {
-  display: none;
-}
-.main-container {
-  max-width: calc(100% - 634px);
-}
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-}
-::-webkit-scrollbar-track {
-  background: #374151;
-}
-::-webkit-scrollbar-thumb {
-  background: #9333ea;
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #a855f7;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Birthstone&family=Corinthia:wght@400;700&family=Imperial+Script&family=Kumar+One+Outline&family=Londrina+Outline&family=Marck+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pattaya&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');@import url('https://fonts.cdnfonts.com/css/peralta');@import url('https://fonts.cdnfonts.com/css/impact');@import url('https://fonts.cdnfonts.com/css/lumanosimo');@import url('https://fonts.cdnfonts.com/css/kapakana');@import url('https://fonts.cdnfonts.com/css/handyrush');@import url('https://fonts.cdnfonts.com/css/dasher');@import url('https://fonts.cdnfonts.com/css/brittany-signature');
+
+:root {
+  /* Additional Studio-specific variables */
+  --transition-all: all 0.2s ease;
+}
+
+/* Base styles */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  border-color: var(--color-neutral-600);
+}
+
+body {
+  background-color: var(--color-neutral-900);
+  color: var(--color-gray-100);
+  font-family: 'Inter', sans-serif;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Components */
+
+/* ========================================
+   SEARCH UTILITIES
+   ======================================== */
+
+.search-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.search-input {
+  width: 100%;
+  padding-left: 2.5rem !important;
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-gray-400);
+  transition: var(--transition-all);
+  pointer-events: none;
+}
+
+.search-icon:hover {
+  color: var(--color-gray-300);
+}
+
+/* ========================================
+    FILE INPUT UTILITIES
+    ======================================== */
+
+.file-input-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.file-input-hidden {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.file-input-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700));
+  color: white;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: var(--transition-all);
+}
+
+/* Panel styles */
+
+.panel-container {  
+  height: 100%;
+  width: 18rem;
+  min-width: 18rem;
+  max-width: 18rem;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-neutral-900);
+  padding: 0.5rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.panel-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-gray-100);
+  margin-bottom: 1rem;
+}
+
+.panel-section {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.75rem;
+}
+
+.panel-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Properties Panel */
+
+.properties-panel {
+  width: 18rem;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(38, 38, 38, 0.9), rgba(23, 23, 23, 0.8));
+  border-left: 1px solid rgba(75, 85, 99, 0.4);
+  overflow-y: hidden;
+  overflow-x: hidden;
+  backdrop-filter: blur(24px);
+  box-shadow: var(--shadow-xl);
+}
+
+.properties-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid rgba(75, 85, 99, 0.3);
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.1), transparent);
+}
+
+.properties-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: white;
+}
+
+/* Property Groups */
+
+.properties-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.property-section {
+  background-color: rgba(38, 38, 38, 0.4);
+  border-radius: 0.5rem;
+  padding: 0.625rem;
+  border: 1px solid rgba(75, 85, 99, 0.2);
+}
+
+.property-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-gray-200);
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.property-indicator {
+  width: 0.375rem;
+  height: 0.375rem;
+  background-color: var(--color-purple-400);
+  border-radius: 9999px;
+}
+
+.property-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.property-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-gray-400);
+  margin-bottom: 0.25rem;
+}
+
+.property-input {
+  width: 100%;
+  background-color: rgba(64, 64, 64, 0.6);
+  border: 1px solid rgba(75, 85, 99, 0.4);
+  border-radius: 0.375rem;
+  color: white;
+  font-size: 0.75rem;
+  padding: 0.375rem 0.5rem;
+  transition: var(--transition-all);
+}
+
+.property-input:focus {
+  border-color: var(--color-purple-500);
+  outline: none;
+  box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.3);
+}
+
+.property-range-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--color-gray-400);
+  margin-top: 0.25rem;
+}
+
+.media-content {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 300px;
+}
+
+/* Media List */
+
+.media-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.media-list-item {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  background-color: var(--color-neutral-800);
+  overflow: hidden;
+  transition: background-color 0.2s;
+}
+
+.media-list-item:hover {
+  background-color: var(--color-neutral-700);
+}
+
+.media-list-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.media-list-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-neutral-700);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-300);
+  transition: all 0.2s;
+}
+
+.media-list-icon.active {
+  background-color: var(--color-purple-500);
+  color: white;
+}
+
+.media-list-title {
+  flex: 1;
+  font-size: 0.875rem;
+  color: var(--color-gray-100);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Icon Grid */
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(56px, 1fr));
+  gap: 0.75rem;
+  padding: 0.25rem;
+}
+
+.icon-item {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  background-color: var(--color-neutral-800);
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.icon-item:hover {
+  background-color: var(--color-neutral-700);
+}
+
+.icon-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.icon-content svg {
+  width: 100%;
+  height: 100%;
+  color: var(--color-gray-300);
+  transition: color 0.2s;
+}
+
+.icon-item:hover .icon-content svg {
+  color: var(--color-gray-100);
+}
+
+.icon-actions {
+  position: absolute;
+  width: 100%;
+  justify-content: space-between;
+  top: 0rem;
+  right: 0rem;
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.icon-item:hover .icon-actions {
+  opacity: 1;
+}
+
+.icon-action-btn {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.icon-action-btn:hover {
+  background-color: var(--color-purple-500);
+}
+
+.icon-name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.2rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 0.75rem;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.icon-item:hover .icon-name {
+  opacity: 1;
+}
+
+.media-count {
+  padding: 0.5rem 0.75rem;
+  color: var(--color-gray-400);
+  font-size: 0.875rem;
+}
+
+/* Media styles */
+
+.media-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(125px, 1fr));
+  gap: 0.75rem;
+  padding: 0.25rem;
+  overflow: hidden;
+}
+
+.media-item {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background-color: var(--color-neutral-800);
+  aspect-ratio: 9/16;
+}
+
+.media-item:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.media-item-content {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.media-duration {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.media-video {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  transition: transform 200ms;
+}
+
+.media-video.playing {
+  transform: scale(1.05);
+}
+
+.media-video:not(.playing):hover {
+  transform: scale(1.05);
+}
+
+.media-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: black;
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.media-overlay.active {
+  opacity: 0.3;
+}
+
+.media-item:hover .media-overlay:not(.active) {
+  opacity: 0.2;
+}
+
+.media-actions {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.media-item:hover .media-actions {
+  opacity: 1;
+}
+
+.media-action-btn {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.media-action-btn:hover {
+  background-color: var(--color-purple-500);
+}
+
+/* Empty state */
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 6rem;
+}
+
+.empty-state-content {
+  text-align: center;
+}
+
+.empty-state-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0 auto 0.5rem;
+  color: rgba(147, 51, 234, 0.5);
+}
+
+.empty-state-text {
+  color: var(--color-gray-300);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.empty-state-subtext {
+  color: var(--color-gray-400);
+  font-size: 0.75rem;
+}
+
+/* Icon sizes - using twick-utilities.css */
+
+/* Sidebar styles */
+
+.sidebar {
+  min-width: 3.5rem;
+  max-width: 3.5rem;
+  padding-top: 0.75rem;
+  background-color: rgba(38, 38, 38, 0.8);
+  border-right: 1px solid rgba(75, 85, 99, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.35rem;
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-lg);
+}
+
+.toolbar-label {
+  text-align: center;
+  font-size: smaller;
+  color: var(--color-gray-300); 
+}
+
+/* Timeline track styles */
+
+.timeline-track {
+  position: relative;
+  height: 3rem;
+  background-color: rgba(64, 64, 64, 0.5);
+  border: 1px solid rgba(75, 85, 99, 0.5);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+  box-shadow: var(--shadow-md);
+}
+
+.timeline-element {
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  border-radius: 0.375rem;
+  border: 1px solid rgba(147, 51, 234, 0.5);
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(147, 51, 234, 0.3));
+  transition: var(--transition-all);
+  cursor: pointer;
+  box-shadow: var(--shadow-lg);
+}
+
+.timeline-element:hover {
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.5));
+}
+
+/* Canvas styles */
+
+.canvas-container {
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--shadow-xl);
+}
+
+/* Props Toolbar styles */
+
+.props-toolbar-label {
+  text-align: center;
+  font-size: xx-small;
+  color: var(--color-gray-300); 
+  margin-top: 0.25rem;
+  transition: var(--transition-all);
+  word-wrap: break-word;
+  hyphens: auto;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Toolbar styles */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background-color: rgba(38, 38, 38, 0.8);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(75, 85, 99, 0.5);
+  box-shadow: var(--shadow-md);
+}
+
+/* Header styles */
+
+.header {
+  height: 3.5rem;
+  background-color: rgba(38, 38, 38, 0.9);
+  border-bottom: 1px solid rgba(75, 85, 99, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Media library styles */
+
+.media-item {
+  transition: var(--transition-all);
+}
+
+.media-item:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2);
+}
+
+/* Progress bar styling */
+
+.progress-bar {
+  transition: all 150ms ease-out;
+  background: linear-gradient(to right, var(--color-purple-500), var(--color-purple-500));
+}
+
+/* Button hover effects - using twick-utilities.css */
+
+/* Accent colors */
+
+.accent-purple {
+  color: var(--color-purple-400);
+}
+
+/* Gradient text - using twick-utilities.css */
+
+/* Glow effects - using twick-utilities.css */
+
+/* Form elements */
+
+.aspect-ratio-btn {
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-gray-600);
+  color: var(--color-gray-300);
+  transition: var(--transition-all);
+  font-size: 0.875rem;
+}
+
+.aspect-ratio-btn:hover {
+  border-color: var(--color-purple-500);
+  color: var(--color-purple-400);
+}
+
+.aspect-ratio-btn.active {
+  border-color: var(--color-purple-500);
+  background-color: rgba(147, 51, 234, 0.2);
+  color: var(--color-purple-400);
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.25);
+}
+
+/* Slider styles */
+
+.slider-thumb {
+  appearance: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.slider-thumb::-webkit-slider-thumb {
+  appearance: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: linear-gradient(to right, var(--color-purple-500), var(--color-purple-500));
+  border-radius: 9999px;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  transition: var(--transition-all);
+}
+
+.slider-thumb::-webkit-slider-thumb:hover {
+  box-shadow: 0 20px 25px -5px rgba(147, 51, 234, 0.3);
+}
+
+.slider-thumb::-moz-range-thumb {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: linear-gradient(to right, var(--color-purple-500), var(--color-purple-500));
+  border-radius: 9999px;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  border: 0;
+  transition: var(--transition-all);
+}
+
+.slider-thumb::-webkit-slider-track {
+  width: 100%;
+  height: 0.375rem;
+  background-color: rgba(64, 64, 64, 0.5);
+  border-radius: 9999px;
+}
+
+.slider-thumb::-moz-range-track {
+  width: 100%;
+  height: 0.375rem;
+  background-color: rgba(64, 64, 64, 0.5);
+  border-radius: 9999px;
+  border: 0;
+}
+
+/* Form control buttons */
+
+.form-btn {
+  width: 2rem;
+  height: 2rem;
+  background: linear-gradient(to bottom right, var(--color-gray-700), var(--color-gray-800));
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-300);
+  transition: var(--transition-all);
+  box-shadow: var(--shadow-sm);
+}
+
+.form-btn:hover {
+  background: linear-gradient(to bottom right, var(--color-gray-600), var(--color-gray-700));
+  color: white;
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2);
+}
+
+.form-btn.active {
+  background: linear-gradient(to bottom right, var(--color-purple-500), var(--color-purple-600));
+  color: white;
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.25);
+}
+
+/* Toolbar buttons */
+
+.toolbar-btn {
+  padding: 0.25rem 0;
+  width: 3rem;
+  max-height: 3rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-all);
+  box-shadow: var(--shadow-sm);
+}
+
+.toolbar-btn.active {
+  background: linear-gradient(to bottom right, var(--color-purple-500), var(--color-purple-600));
+  color: white;
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.25);
+}
+
+.toolbar-btn:not(.active) {
+  color: var(--color-gray-400);
+}
+
+.toolbar-btn:not(.active):hover {
+  color: white;
+  background-color: rgba(64, 64, 64, 0.5);
+}
+
+/* Props Toolbar buttons */
+
+.props-toolbar-btn {
+  width: 3.5rem;
+  max-height: 3.5rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-all);
+  box-shadow: var(--shadow-sm);
+}
+
+.props-toolbar-btn.active {
+  background: linear-gradient(to bottom right, var(--color-purple-500), var(--color-purple-600));
+  color: white;
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.25);
+}
+
+.props-toolbar-btn:not(.active) {
+  color: var(--color-gray-400);
+}
+
+.props-toolbar-btn:not(.active):hover {
+  color: white;
+  background-color: rgba(64, 64, 64, 0.5);
+}
+
+/* Props Container */
+
+.prop-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  color: var(--color-gray-200);
+  transition: var(--transition-all);
+  border-left: 2px solid transparent;
+}
+
+.prop-header:hover {
+  color: white;
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.2), rgba(147, 51, 234, 0.1));
+  border-left-color: rgba(147, 51, 234, 0.5);
+}
+
+.prop-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0.25rem;
+  transition: var(--transition-all);
+}
+
+/* Accordion */
+
+.accordion-item {
+  border-bottom: 1px solid rgba(75, 85, 99, 0.3);
+  background: linear-gradient(to bottom, rgba(38, 38, 38, 0.4), rgba(38, 38, 38, 0.2));
+  backdrop-filter: blur(4px);
+}
+
+.accordion-item:last-child {
+  border-bottom: none;
+}
+
+.accordion-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  color: var(--color-gray-200);
+  transition: var(--transition-all);
+  border-left: 2px solid transparent;
+}
+
+.accordion-header:hover {
+  color: white;
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.2), rgba(147, 51, 234, 0.1));
+  border-left-color: rgba(147, 51, 234, 0.5);
+}
+
+.accordion-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 0;
+  opacity: 0;
+  transition: all 300ms ease-in-out;
+}
+
+.accordion-content.expanded {
+  max-height: 24rem;
+  opacity: 1;
+}
+
+.accordion-panel {
+  padding: 0.5rem 0.75rem;
+  background-color: rgba(23, 23, 23, 0.3);
+  border-left: 2px solid rgba(147, 51, 234, 0.3);
+  margin-left: 0.5rem;
+}
+
+/* Studio-specific utilities */
+
+.label-dark {
+  display: block;
+  color: var(--color-gray-300);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.label-small {
+  display: block;
+  color: var(--color-gray-400);
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+/* input-dark - using twick-utilities.css */
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.slider-purple {
+  flex: 1;
+  height: 0.25rem;
+  background: var(--color-neutral-700);
+  border-radius: 9999px;
+  appearance: none;
+  cursor: pointer;
+}
+
+.slider-purple::-webkit-slider-thumb {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  background: var(--color-purple-500);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--color-neutral-900);
+}
+
+.slider-value {
+  min-width: 3rem;
+  color: var(--color-gray-300);
+  font-size: 0.875rem;
+}
+
+.font-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.select-dark {
+  flex: 1;
+  background-color: var(--color-neutral-800);
+  border: 1px solid var(--color-gray-600);
+  border-radius: 0.5rem;
+  color: var(--color-gray-100);
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.btn-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-neutral-800);
+  border: 1px solid var(--color-gray-600);
+  border-radius: 0.5rem;
+  color: var(--color-gray-300);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.btn-icon-active {
+  background-color: var(--color-purple-500);
+  border-color: var(--color-purple-600);
+  color: white;
+}
+
+.color-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.color-control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.color-inputs {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.color-picker {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background: none;
+}
+
+.color-text {
+  flex: 1;
+  background-color: var(--color-neutral-800);
+  border: 1px solid var(--color-gray-600);
+  border-radius: 0.5rem;
+  color: var(--color-gray-100);
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.checkbox-control {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-gray-300);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.checkbox-purple {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 2px solid var(--color-gray-600);
+  appearance: none;
+  cursor: pointer;
+}
+
+.checkbox-purple:checked {
+  background-color: var(--color-purple-500);
+  border-color: var(--color-purple-600);
+}
+
+/* btn-primary - using twick-utilities.css */
+
+/* Studio layout */
+
+.studio-container {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  width: 100dvw;
+  overflow: hidden;
+  background-color: var(--color-neutral-900);
+  color: var(--color-gray-100);
+}
+
+.studio-content {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 56px);
+}
+
+.main-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-neutral-700);
+  max-width: calc(100% - 43rem);
+}
+
+.canvas-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+/* Color Input */
+
+.color-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.color-picker {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-gray-600);
+  cursor: pointer;
+}
+
+.text-error {
+  color: var(--color-error);
+  font-size: 0.875rem;
+}
+
+/* Video player customizations */
+
+video::-webkit-media-controls,
+video::-webkit-media-controls-panel {
+  display: none;
+}
+
+/* Global scrollbar styles */
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-gray-700);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-purple-600);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-purple-500);
+}:root {
+    /* Colors */
+    --color-purple-100: #f3e8ff;
+    --color-purple-200: #e9d5ff;
+    --color-purple-300: #d8b4fe;
+    --color-purple-400: #c084fc;
+    --color-purple-500: #a855f7;
+    --color-purple-600: #9333ea;
+    --color-purple-700: #7e22ce;
+    --color-purple-800: #6b21a8;
+    --color-purple-900: #581c87;
+  
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5db;
+    --color-gray-400: #9ca3af;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #4b5563;
+    --color-gray-700: #374151;
+    --color-gray-800: #1f2937;
+    --color-gray-900: #111827;
+  
+    --color-neutral-100: #f5f5f5;
+    --color-neutral-200: #e5e5e5;
+    --color-neutral-300: #d4d4d4;
+    --color-neutral-400: #a3a3a3;
+    --color-neutral-500: #737373;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+  
+    --color-red-100: #fee2e2;
+    --color-red-200: #fecaca;
+    --color-red-300: #fca5a5;
+    --color-red-400: #f87171;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-red-900: #7f1d1d;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    
+    /* Transitions */
+    --transition-all: all 0.2s ease;
+  }/* ========================================
+   LAYOUT UTILITIES
+   ======================================== *//* Flexbox utilities */.flex {
+  display: flex;
+}.flex-col {
+  flex-direction: column;
+}.flex-row {
+  flex-direction: row;
+}.flex-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}.items-center {
+  align-items: center;
+}.justify-center {
+  justify-content: center;
+}.justify-between {
+  justify-content: space-between;
+}/* Gap utilities */.gap-1 {
+  gap: 0.25rem;
+}.gap-2 {
+  gap: 0.5rem;
+}.gap-3 {
+  gap: 0.75rem;
+}.gap-4 {
+  gap: 1rem;
+}/* Width/Height utilities */.w-full {
+  width: 100%;
+}.h-full {
+  height: 100%;
+}/* ========================================
+   ICON UTILITIES
+   ======================================== */.icon-xs {
+  width: 0.75rem;
+  height: 0.75rem;
+}.icon-sm {
+  width: 1rem;
+  height: 1rem;
+}.icon-md {
+  width: 1.5rem;
+  height: 1.5rem;
+}.icon-lg {
+  width: 2rem;
+  height: 2rem;
+}.icon-margin {
+  margin-right: 0.5rem;
+}/* ========================================
+   TEXT UTILITIES
+   ======================================== */.text-sm {
+  font-size: 0.875rem;
+}.text-base {
+  font-size: 1rem;
+}.text-lg {
+  font-size: 1.125rem;
+}.font-bold {
+  font-weight: 700;
+}.text-gradient {
+  background: linear-gradient(to right, var(--color-purple-500), var(--color-purple-300));
+  -webkit-background-clip: text;
+  background-clip: text;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: transparent;
+}.text-gradient-purple,
+.text-gradient-blue {
+  background: linear-gradient(135deg, var(--color-purple-400), var(--color-purple-600));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}/* ========================================
+   GRID UTILITIES
+   ======================================== */.grid-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}.grid-auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}/* ========================================
+   BACKDROP UTILITIES
+   ======================================== */.backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+}.backdrop-blur-md {
+  backdrop-filter: blur(8px);
+}.backdrop-blur-lg {
+  backdrop-filter: blur(12px);
+}/* ========================================
+   SCROLLBAR UTILITIES
+   ======================================== */.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-600) var(--color-neutral-800);
+}.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--color-neutral-800);
+  border-radius: 3px;
+}.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-600);
+  border-radius: 3px;
+}.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-500);
+}/* ========================================
+   GLASS EFFECT UTILITIES
+   ======================================== */.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(75, 85, 99, 0.5);
+  box-shadow: var(--shadow-lg);
+}/* ========================================
+   GLOW EFFECTS
+   ======================================== */.glow-purple {
+  box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
+}.glow-blue {
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+}/* ========================================
+   BUTTON BASE UTILITIES
+   ======================================== */.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
+}.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
+  border-radius: 0.75rem 0.75rem 0 0;
+  pointer-events: none;
+}.btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.15);
+}.btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+}.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+}/* Button variants */.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700), var(--color-purple-800));
+  color: white;
+  border: 1px solid var(--color-purple-500);
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-primary:hover {
+  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600), var(--color-purple-700));
+  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}.btn-primary:active {
+  background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
+  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, var(--color-purple-200), var(--color-purple-300), var(--color-purple-400));
+  color: var(--color-neutral-700);
+  border: 1px solid var(--color-purple-300);
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}.btn-secondary:hover {
+  background: linear-gradient(135deg, var(--color-purple-100), var(--color-purple-200), var(--color-purple-300));
+  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  transform: translateY(-2px);
+}.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(64, 64, 64, 0.3);
+  color: var(--color-neutral-300);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent;
+  border: 2px solid var(--color-purple-500);
+  color: var(--color-purple-400);
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}.btn-outline:hover {
+  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
+  color: white;
+  border-color: var(--color-purple-400);
+  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, var(--color-red-600), var(--color-red-700), var(--color-red-800));
+  color: white;
+  border: 1px solid var(--color-red-500);
+  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-danger:hover {
+  background: linear-gradient(135deg, var(--color-red-500), var(--color-red-600), var(--color-red-700));
+  box-shadow: 0 12px 35px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}.btn-danger:active {
+  background: linear-gradient(135deg, var(--color-red-700), var(--color-red-800), var(--color-red-900));
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-primary {
+  background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700));
+  color: white;
+  border: 1px solid var(--color-purple-500);
+  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.25);
+}.btn-primary:hover {
+  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.35);
+}/* ========================================
+   INPUT UTILITIES
+   ======================================== */.input {
+  width: 100%;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--color-neutral-600);
+  background-color: var(--color-neutral-800);
+  color: var(--color-neutral-100);
+  transition: var(--transition-all);
+}.input::placeholder {
+  color: var(--color-neutral-400);
+}.input:focus {
+  outline: none;
+  border-color: var(--color-purple-500);
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+}.input-dark {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--color-neutral-700);
+  border: 1px solid var(--color-neutral-600);
+  border-radius: 0.5rem;
+  color: var(--color-neutral-100);
+  font-size: 0.875rem;
+  transition: var(--transition-all);
+}.input-dark:focus {
+  outline: none;
+  border-color: var(--color-purple-500);
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+}/* ========================================
+   CARD UTILITIES
+   ======================================== */.card {
+  background: var(--color-neutral-800);
+  border: 1px solid var(--color-neutral-700);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: var(--shadow-md);
+}.twick-editor-main-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 6px;
+}.twick-editor-view-section {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+}.twick-editor-timeline-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: #252525;
+  border-radius: 10px;
+  overflow-x: hidden;
+}.twick-editor-container {
+  position: relative;
+  height: 80dvh;
+  overflow: hidden;
+  border-radius: 10px;
+  background-color: #000;
+  color: #fff;
+}.twick-editor-canvas-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}.twick-editor-canvas {
+  width: 100%;
+  height: 100%;
+}.twick-editor-loading-overlay {
+  position: absolute;
+  z-index: 30;
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}.twick-editor-loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 6px solid #444;
+  border-top: 6px solid #fff;
+  border-radius: 50%;
+  animation: twick-editor-spin 1s linear infinite;
+  margin: auto;
+}@keyframes twick-editor-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}.twick-timeline-scroll-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+}/* Timeline Container Styles */.twick-timeline-container {
+  display: flex;
+  height: 2.75rem;
+  position: relative;
+}.twick-timeline-header-container {
+  position: sticky;
+  left: 0;
+  z-index: 30;
+}.twick-seek-track-container {
+  display: flex;
+  position: relative;
+  min-width: 100%;
+  height: 2rem;
+  width: 100%;
+}.twick-seek-track-container-no-scrollbar {
+  display: flex;
+  position: relative;
+  min-width: 100%;
+  height: 2rem;
+  width: 100%;
+  /* Hide scrollbar for all browsers */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}.twick-seek-track-container-no-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}.twick-seek-track-empty-space {
+  position: sticky;
+  left: 0;
+  z-index: 40;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 0;
+  min-width: 40px;
+  height: 34px;
+  background-color: #171717;
+}.twick-seek-track {
+  position: relative;
+  width: 100%;
+  border-top: 1px solid #262626;
+  border-bottom: 1px solid #262626;
+  background-color: #171717;
+}.twick-seek-track-canvas {
+  min-width: 100%;
+  height: 2rem;
+}.twick-seek-track-playhead {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+  cursor: ew-resize;
+  width: 100%;
+  height: 100%;
+}.twick-seek-track-pin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+  width: 1.5px;
+  height: 100%;
+  background-color: #FFFFFF;
+}.twick-seek-track-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  transform: translate(-50%, -50%);
+  background-color: #FFFFFF;
+  border-radius: 25%;
+}.twick-track-element {
+  position: absolute;
+  height: 100%;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.2s ease-in-out;
+}.twick-track-element-selected {
+  border: 2px solid #FFFFFF;
+  z-index: 10;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
+}.twick-track-element-default {
+  border: 1px solid #d1d1d1;
+}.twick-track-element-dragging {
+  border: 1px solid #ffffff;
+}.twick-track-element-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  transition: background-color 0.2s ease-in-out;
+  padding: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}.twick-track-element-handle {
+  position: absolute;
+  width: 2px;
+  height: 60%;
+  cursor: ew-resize;
+  transition: background-color 0.2s ease-in-out;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #FFFFFF;
+  border-radius: 25%;
+  z-index: 10;
+}.twick-track-element-handle-start {
+  left: 0px;
+}.twick-track-element-handle-end {
+  right: -2px;
+}.twick-track-element-frame-effect {
+  position: absolute;
+  flex: 1;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  opacity: 0.5;
+}.twick-track-header {
+  display: flex;
+  flex: none;
+  position: relative;
+  width: 40px;
+  height: 100%;
+  background-color: #171717;
+  border-right: 1px solid #262626;
+  align-items: center;
+}.twick-track-header-selected {
+  border: 2px solid #FFFFFF;
+  z-index: 10;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
+  outline: 2px solid #FFFFFF;
+}.twick-track-header-default {
+  border: 1px solid #404040;
+}.twick-track-header-lock {
+  position: absolute;
+  top: 14px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  z-index: 20;
+  color: #333;
+}.twick-track-header-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.5rem;
+}.twick-track-header-grip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+}.twick-track-header-name {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.5rem;
+}.twick-track {
+  min-width: 100%;
+  position: relative;
+  height: 2.5rem;
+  margin-top: 2px;
+  background-color: #474747;
+}:root {
+    /* Colors */
+    --color-purple-100: #f3e8ff;
+    --color-purple-200: #e9d5ff;
+    --color-purple-300: #d8b4fe;
+    --color-purple-400: #c084fc;
+    --color-purple-500: #a855f7;
+    --color-purple-600: #9333ea;
+    --color-purple-700: #7e22ce;
+    --color-purple-800: #6b21a8;
+    --color-purple-900: #581c87;
+  
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5db;
+    --color-gray-400: #9ca3af;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #4b5563;
+    --color-gray-700: #374151;
+    --color-gray-800: #1f2937;
+    --color-gray-900: #111827;
+  
+    --color-neutral-100: #f5f5f5;
+    --color-neutral-200: #e5e5e5;
+    --color-neutral-300: #d4d4d4;
+    --color-neutral-400: #a3a3a3;
+    --color-neutral-500: #737373;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+  
+    --color-red-100: #fee2e2;
+    --color-red-200: #fecaca;
+    --color-red-300: #fca5a5;
+    --color-red-400: #f87171;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-red-900: #7f1d1d;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    
+    /* Transitions */
+    --transition-all: all 0.2s ease;
+  }/* ========================================
+   LAYOUT UTILITIES
+   ======================================== *//* Flexbox utilities */.flex {
+  display: flex;
+}.flex-col {
+  flex-direction: column;
+}.flex-row {
+  flex-direction: row;
+}.flex-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}.items-center {
+  align-items: center;
+}.justify-center {
+  justify-content: center;
+}.justify-between {
+  justify-content: space-between;
+}/* Gap utilities */.gap-1 {
+  gap: 0.25rem;
+}.gap-2 {
+  gap: 0.5rem;
+}.gap-3 {
+  gap: 0.75rem;
+}.gap-4 {
+  gap: 1rem;
+}/* Width/Height utilities */.w-full {
+  width: 100%;
+}.h-full {
+  height: 100%;
+}/* ========================================
+   ICON UTILITIES
+   ======================================== */.icon-xs {
+  width: 0.75rem;
+  height: 0.75rem;
+}.icon-sm {
+  width: 1rem;
+  height: 1rem;
+}.icon-md {
+  width: 1.5rem;
+  height: 1.5rem;
+}.icon-lg {
+  width: 2rem;
+  height: 2rem;
+}.icon-margin {
+  margin-right: 0.5rem;
+}/* ========================================
+   TEXT UTILITIES
+   ======================================== */.text-sm {
+  font-size: 0.875rem;
+}.text-base {
+  font-size: 1rem;
+}.text-lg {
+  font-size: 1.125rem;
+}.font-bold {
+  font-weight: 700;
+}.text-gradient {
+  background: linear-gradient(to right, var(--color-purple-500), var(--color-purple-300));
+  -webkit-background-clip: text;
+  background-clip: text;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: transparent;
+}.text-gradient-purple,
+.text-gradient-blue {
+  background: linear-gradient(135deg, var(--color-purple-400), var(--color-purple-600));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}/* ========================================
+   GRID UTILITIES
+   ======================================== */.grid-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}.grid-auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}/* ========================================
+   BACKDROP UTILITIES
+   ======================================== */.backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+}.backdrop-blur-md {
+  backdrop-filter: blur(8px);
+}.backdrop-blur-lg {
+  backdrop-filter: blur(12px);
+}/* ========================================
+   SCROLLBAR UTILITIES
+   ======================================== */.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-600) var(--color-neutral-800);
+}.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--color-neutral-800);
+  border-radius: 3px;
+}.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-600);
+  border-radius: 3px;
+}.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-500);
+}/* ========================================
+   GLASS EFFECT UTILITIES
+   ======================================== */.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(75, 85, 99, 0.5);
+  box-shadow: var(--shadow-lg);
+}/* ========================================
+   GLOW EFFECTS
+   ======================================== */.glow-purple {
+  box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
+}.glow-blue {
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+}/* ========================================
+   BUTTON BASE UTILITIES
+   ======================================== */.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
+}.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
+  border-radius: 0.75rem 0.75rem 0 0;
+  pointer-events: none;
+}.btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.15);
+}.btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+}.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+}/* Button variants */.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700), var(--color-purple-800));
+  color: white;
+  border: 1px solid var(--color-purple-500);
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-primary:hover {
+  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600), var(--color-purple-700));
+  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}.btn-primary:active {
+  background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
+  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, var(--color-purple-200), var(--color-purple-300), var(--color-purple-400));
+  color: var(--color-neutral-700);
+  border: 1px solid var(--color-purple-300);
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}.btn-secondary:hover {
+  background: linear-gradient(135deg, var(--color-purple-100), var(--color-purple-200), var(--color-purple-300));
+  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  transform: translateY(-2px);
+}.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(64, 64, 64, 0.3);
+  color: var(--color-neutral-300);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent;
+  border: 2px solid var(--color-purple-500);
+  color: var(--color-purple-400);
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}.btn-outline:hover {
+  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
+  color: white;
+  border-color: var(--color-purple-400);
+  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, var(--color-red-600), var(--color-red-700), var(--color-red-800));
+  color: white;
+  border: 1px solid var(--color-red-500);
+  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-danger:hover {
+  background: linear-gradient(135deg, var(--color-red-500), var(--color-red-600), var(--color-red-700));
+  box-shadow: 0 12px 35px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}.btn-danger:active {
+  background: linear-gradient(135deg, var(--color-red-700), var(--color-red-800), var(--color-red-900));
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-primary {
+  background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700));
+  color: white;
+  border: 1px solid var(--color-purple-500);
+  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.25);
+}.btn-primary:hover {
+  background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
+  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.35);
+}/* ========================================
+   INPUT UTILITIES
+   ======================================== */.input {
+  width: 100%;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--color-neutral-600);
+  background-color: var(--color-neutral-800);
+  color: var(--color-neutral-100);
+  transition: var(--transition-all);
+}.input::placeholder {
+  color: var(--color-neutral-400);
+}.input:focus {
+  outline: none;
+  border-color: var(--color-purple-500);
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+}.input-dark {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--color-neutral-700);
+  border: 1px solid var(--color-neutral-600);
+  border-radius: 0.5rem;
+  color: var(--color-neutral-100);
+  font-size: 0.875rem;
+  transition: var(--transition-all);
+}.input-dark:focus {
+  outline: none;
+  border-color: var(--color-purple-500);
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+}/* ========================================
+   CARD UTILITIES
+   ======================================== */.card {
+  background: var(--color-neutral-800);
+  border: 1px solid var(--color-neutral-700);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: var(--shadow-md);
+}/* Player Controls */.player-controls {
+  height: 3rem;
+  background-color: var(--color-neutral-800);
+  border-top: 1px solid var(--color-neutral-600);
+  padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}/* Edit Controls */.edit-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}.playback-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}/* Control Buttons */.control-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  border: none;
+  color: var(--color-neutral-400);
+  transition: var(--transition-all);
+  cursor: pointer;
+}.control-btn:hover {
+  color: var(--color-neutral-100);
+  background-color: var(--color-neutral-700);
+}.control-btn:active {
+  transform: scale(0.95);
+  background-color: var(--color-neutral-600);
+}.control-btn.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--color-neutral-600);
+}/* Specific Button Styles */.delete-btn {
+  color: var(--color-red-400);
+}.delete-btn:hover {
+  color: var(--color-red-300);
+}.split-btn {
+  color: var(--color-purple-400);
+}.split-btn:hover {
+  color: var(--color-purple-300);
+}.play-pause-btn {
+  padding: 0.75rem;
+  color: white;
+}/* Time Display */.time-display {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-neutral-400);
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+}.current-time {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-neutral-200);
+}.time-separator {
+  color: var(--color-neutral-600);
+}.total-time {
+  font-size: 0.875rem;
+  color: var(--color-neutral-500);
+}/* Zoom Controls */.twick-track-zoom-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}.zoom-level {
+  font-size: 0.875rem;
+  color: var(--color-neutral-400);
+  font-weight: 500;
+  min-width: 3rem;
+  text-align: center;
+}/* Icon sizes */.icon-md {
+  width: 1.25rem;
+  height: 1.25rem;
+}.icon-lg {
+  width: 1.5rem;
+  height: 1.5rem;
+}/* Animation */.animate-spin {
+  animation: spin 1s linear infinite;
+}@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}/* Undo/Redo Controls */.undo-redo-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}