@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Video Editor Professional Theme */
  --background: #1f2937;
  --foreground: #ffffff;
  --card: #2a2e35;
  --card-foreground: #ffffff;
  --popover: #2a2e35;
  --popover-foreground: #ffffff;
  --primary: #8b5cf6;
  --primary-foreground: #ffffff;
  --secondary: #6b7280;
  --secondary-foreground: #ffffff;
  --muted: #475569;
  --muted-foreground: #ffffff;
  --accent: #10b981;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #4b5563;
  --input: #2a2e35;
  --ring: #8b5cf6;
  --chart-1: #facc15;
  --chart-2: #3b82f6;
  --chart-3: #22c55e;
  --chart-4: #f43f5e;
  --chart-5: #9333ea;
  --radius: 0.25rem;
  --sidebar: #2a2e35;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #1f2937;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #8b5cf6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #4b5563;
  --sidebar-ring: #8b5cf6;

  /* Video Editor Specific Variables */
  --timeline-bg: #1e293b;
  --timeline-track: #334155;
  --timeline-clip: #8b5cf6;
  --timeline-playhead: #ef4444;
  --tool-panel: #2a2e35;
  --preview-bg: #000000;
  --waveform-color: #10b981;
  --keyframe-color: #facc15;
  --transition-color: #3b82f6;
  --text-overlay: #ffffff;
  --audio-track: #22c55e;
  --video-track: #8b5cf6;
  --effect-color: #f43f5e;
  --export-progress: #10b981;
  --scrubber-handle: #ffffff;
  --zoom-control: #6b7280;
  --layer-active: #8b5cf6;
  --layer-inactive: #475569;
  --marker-color: #facc15;
  --selection-color: rgba(139, 92, 246, 0.3);
  --hover-overlay: rgba(255, 255, 255, 0.1);
  --active-tool: #10b981;
  --inactive-tool: #6b7280;
  --panel-divider: #4b5563;
  --dropdown-bg: #374151;
  --tooltip-bg: #1f2937;
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --progress-bar: #8b5cf6;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --info-color: #3b82f6;
  --timeline-ruler: #6b7280;
  --clip-border: #ffffff;
  --transition-handle: #3b82f6;
  --audio-waveform: #22c55e;
  --video-thumbnail: #8b5cf6;
  --effect-badge: #f43f5e;
  --keyframe-diamond: #facc15;
  --playback-controls: #ffffff;
  --volume-slider: #10b981;
  --speed-indicator: #f59e0b;
  --cut-line: #ef4444;
  --snap-guide: #facc15;
  --grid-lines: #374151;
  --layer-separator: #4b5563;
  --timeline-zoom: #6b7280;
  --export-format: #8b5cf6;
  --quality-indicator: #10b981;
  --render-progress: #3b82f6;
  --file-browser: #2a2e35;
  --media-thumbnail: #374151;
  --import-drop: rgba(139, 92, 246, 0.2);
  --timeline-scale: #9ca3af;
  --clip-label: #ffffff;
  --transition-preview: #3b82f6;
  --effect-preview: #f43f5e;
  --audio-meter: #22c55e;
  --video-scope: #8b5cf6;
  --color-picker: #ffffff;
  --gradient-stop: #facc15;
  --bezier-handle: #3b82f6;
  --motion-path: #10b981;
  --anchor-point: #ef4444;
  --bounding-box: #ffffff;
  --transform-handle: #8b5cf6;
  --crop-overlay: rgba(0, 0, 0, 0.5);
  --mask-overlay: rgba(255, 255, 255, 0.3);
  --chroma-key: #22c55e;
  --luma-key: #facc15;
  --blend-mode: #f43f5e;
  --opacity-slider: #ffffff;
  --feather-control: #9ca3af;
  --tracking-point: #ef4444;
  --stabilization: #10b981;
  --noise-reduction: #8b5cf6;
  --sharpening: #f59e0b;
  --color-correction: #3b82f6;
  --exposure-control: #ffffff;
  --contrast-slider: #9ca3af;
  --saturation-wheel: #f43f5e;
  --hue-shift: #facc15;
  --temperature-tint: #3b82f6;
  --vignette-control: #6b7280;
  --lens-correction: #10b981;
  --chromatic-aberration: #f43f5e;
  --film-grain: #9ca3af;
  --vintage-effect: #f59e0b;
  --glitch-effect: #ef4444;
  --particle-system: #8b5cf6;
  --light-rays: #facc15;
  --bokeh-blur: #3b82f6;
  --motion-blur: #10b981;
  --radial-blur: #f43f5e;
  --zoom-blur: #9ca3af;
  --directional-blur: #6b7280;
  --gaussian-blur: #ffffff;
  --surface-blur: #374151;
  --smart-blur: #8b5cf6;
  --lens-blur: #22c55e;
  --tilt-shift: #f59e0b;
  --depth-of-field: #3b82f6;
  --focus-pull: #ef4444;
  --rack-focus: #facc15;
  --follow-focus: #10b981;
  --auto-focus: #f43f5e;
  --manual-focus: #9ca3af;
  --focus-peaking: #ffffff;
  --zebra-stripes: #000000;
  --false-color: #8b5cf6;
  --histogram-red: #ef4444;
  --histogram-green: #22c55e;
  --histogram-blue: #3b82f6;
  --histogram-luma: #ffffff;
  --waveform-y: #22c55e;
  --waveform-rgb: #8b5cf6;
  --vectorscope-skin: #f59e0b;
  --vectorscope-sky: #3b82f6;
  --vectorscope-grass: #22c55e;
  --lut-preview: #f43f5e;
  --color-space: #facc15;
  --gamma-curve: #9ca3af;
  --tone-mapping: #6b7280;
  --hdr-processing: #ffffff;
  --rec709-gamut: #3b82f6;
  --rec2020-gamut: #22c55e;
  --dci-p3-gamut: #f43f5e;
  --adobe-rgb-gamut: #8b5cf6;
  --srgb-gamut: #f59e0b;
  --prophoto-gamut: #ef4444;
  --xyz-color-space: #facc15;
  --lab-color-space: #10b981;
  --yuv-color-space: #9ca3af;
  --cmyk-preview: #6b7280;
  --pantone-matching: #ffffff;
  --color-temperature: #3b82f6;
  --white-balance: #22c55e;
  --tint-adjustment: #f43f5e;
  --exposure-compensation: #8b5cf6;
  --highlight-recovery: #f59e0b;
  --shadow-lift: #ef4444;
  --midtone-adjustment: #facc15;
  --black-point: #000000;
  --white-point: #ffffff;
  --gamma-adjustment: #9ca3af;
  --contrast-enhancement: #6b7280;
  --clarity-adjustment: #374151;
  --vibrance-control: #f43f5e;
  --saturation-boost: #22c55e;
  --hue-rotation: #8b5cf6;
  --color-replace: #3b82f6;
  --selective-color: #f59e0b;
  --channel-mixer: #ef4444;
  --color-balance: #facc15;
  --photo-filter: #10b981;
  --gradient-map: #9ca3af;
  --posterize-effect: #6b7280;
  --threshold-effect: #ffffff;
  --solarize-effect: #374151;
  --invert-colors: #f43f5e;
  --desaturate-effect: #22c55e;
  --sepia-tone: #f59e0b;
  --black-white: #9ca3af;
  --duotone-effect: #8b5cf6;
  --tritone-effect: #3b82f6;
  --quadtone-effect: #ef4444;
  --split-toning: #facc15;
  --color-grading: #10b981;
  --cinematic-look: #6b7280;
  --film-emulation: #ffffff;
  --vintage-processing: #374151;
  --modern-processing: #f43f5e;
  --artistic-filter: #22c55e;
  --stylize-effect: #8b5cf6;
  --oil-painting: #f59e0b;
  --watercolor-effect: #3b82f6;
  --pencil-sketch: #9ca3af;
  --charcoal-drawing: #ef4444;
  --ink-outline: #000000;
  --comic-book: #facc15;
  --pop-art: #10b981;
  --andy-warhol: #f43f5e;
  --roy-lichtenstein: #6b7280;
  --david-hockney: #ffffff;
  --van-gogh: #374151;
  --monet-style: #22c55e;
  --picasso-cubism: #8b5cf6;
  --dali-surreal: #f59e0b;
  --escher-impossible: #3b82f6;
  --banksy-stencil: #9ca3af;
  --basquiat-neo: #ef4444;
  --pollock-drip: #facc15;
  --rothko-color: #10b981;
  --mondrian-grid: #6b7280;
  --kandinsky-abstract: #ffffff;
  --klee-geometric: #374151;
  --matisse-fauve: #f43f5e;
  --cezanne-post: #22c55e;
  --renoir-impressionist: #8b5cf6;
  --degas-pastel: #f59e0b;
  --manet-realist: #3b82f6;
  --courbet-naturalist: #9ca3af;
  --millet-barbizon: #ef4444;
  --turner-romantic: #facc15;
  --constable-landscape: #10b981;
  --friedrich-sublime: #6b7280;
  --cole-hudson: #ffffff;
  --bierstadt-luminism: #374151;
  --church-detail: #f43f5e;
  --homer-marine: #22c55e;
  --eakins-portrait: #8b5cf6;
  --sargent-society: #f59e0b;
  --whistler-nocturne: #3b82f6;
  --cassatt-mother: #9ca3af;
  --mary-stevenson: #ef4444;
  --berthe-morisot: #facc15;
  --marie-bracquemond: #10b981;
  --eva-gonzales: #6b7280;
  --lilla-cabot: #ffffff;
  --cecilia-beaux: #374151;
  --elizabeth-nourse: #f43f5e;
  --helen-turner: #22c55e;
  --anne-goldthwaite: #8b5cf6;
  --minerva-teichert: #f59e0b;
  --georgia-okeefe: #3b82f6;
  --frida-kahlo: #9ca3af;
  --leonora-carrington: #ef4444;
  --remedios-varo: #facc15;
  --dorothea-tanning: #10b981;
  --kay-sage: #6b7280;
  --meret-oppenheim: #ffffff;
  --louise-bourgeois: #374151;
  --helen-frankenthaler: #f43f5e;
  --joan-mitchell: #22c55e;
  --lee-krasner: #8b5cf6;
  --elaine-de-kooning: #f59e0b;
  --grace-hartigan: #3b82f6;
  --jane-freilicher: #9ca3af;
  --fairfield-porter: #ef4444;
  --alex-katz: #facc15;
  --david-hockney-pool: #10b981;
  --ed-ruscha-word: #6b7280;
  --james-rosenquist: #ffffff;
  --tom-wesselmann: #374151;
  --claes-oldenburg: #f43f5e;
  --jeff-koons: #22c55e;
  --damien-hirst: #8b5cf6;
  --tracey-emin: #f59e0b;
  --banksy-street: #3b82f6;
  --shepard-fairey: #9ca3af;
  --kaws-companion: #ef4444;
  --takashi-murakami: #facc15;
  --yayoi-kusama: #10b981;
  --kerry-james: #6b7280;
  --kehinde-wiley: #ffffff;
  --amy-sherald: #374151;
  --jordan-casteel: #f43f5e;
  --titus-kaphar: #22c55e;
  --kara-walker: #8b5cf6;
  --lorna-simpson: #f59e0b;
  --carrie-mae: #3b82f6;
  --betye-saar: #9ca3af;
  --faith-ringgold: #ef4444;
  --romare-bearden: #facc15;
  --jacob-lawrence: #10b981;
  --augusta-savage: #6b7280;
  --elizabeth-catlett: #ffffff;
  --lois-mailou: #374151;
  --alma-thomas: #f43f5e;
  --horace-pippin: #22c55e;
  --palmer-hayden: #8b5cf6;
  --archibald-motley: #f59e0b;
  --aaron-douglas: #3b82f6;
  --richmond-barthe: #9ca3af;
  --sargent-johnson: #ef4444;
  --laura-wheeler: #facc15;
  --meta-vaux: #10b981;
  --may-howard: #6b7280;
  --edmonia-lewis: #ffffff;
  --henry-ossawa: #374151;
  --robert-duncanson: #f43f5e;
  --joshua-johnston: #22c55e;
  --scipio-moorhead: #8b5cf6;
  --neptune-julien: #f59e0b;
  --patrick-reason: #3b82f6;
  --grafton-brown: #9ca3af;
  --edward-bannister: #ef4444;
  --william-simpson: #facc15;
  --allan-rohan: #10b981;
  --william-edouard: #6b7280;
  --henry-boyd: #ffffff;
  --david-bustill: #374151;
  --robert-seldon: #f43f5e;
  --william-artis: #22c55e;
  --richmond-barthe-2: #8b5cf6;
  --augusta-savage-2: #f59e0b;
  --selma-burke: #3b82f6;
  --elizabeth-prophet: #9ca3af;
  --nancy-prophet: #ef4444;
  --meta-warrick: #facc15;
  --may-jackson: #10b981;
  --beulah-woodard: #6b7280;
  --geraldine-mccullough: #ffffff;
  --barbara-chase: #374151;
  --betye-saar-2: #f43f5e;
  --faith-ringgold-2: #22c55e;
  --howardena-pindell: #8b5cf6;
  --pat-ward: #f59e0b;
  --senga-nengudi: #3b82f6;
  --maren-hassinger: #9ca3af;
  --melvin-edwards: #ef4444;
  --david-hammons: #facc15;
  --kerry-james-2: #10b981;
  --glenn-ligon: #6b7280;
  --lorna-simpson-2: #ffffff;
  --carrie-mae-2: #374151;
  --kara-walker-2: #f43f5e;
  --wangechi-mutu: #22c55e;
  --kerry-james-3: #8b5cf6;
  --kehinde-wiley-2: #f59e0b;
  --amy-sherald-2: #3b82f6;
  --jordan-casteel-2: #9ca3af;
  --titus-kaphar-2: #ef4444;
  --nina-chanel: #facc15;
  --derrick-adams: #10b981;
  --kerry-james-4: #6b7280;
  --radcliffe-bailey: #ffffff;
  --mark-bradford: #374151;
  --rashid-johnson: #f43f5e;
  --theaster-gates: #22c55e;
  --nick-cave: #8b5cf6;
  --kerry-james-5: #f59e0b;
  --arthur-jafa: #3b82f6;
  --simone-leigh: #9ca3af;
  --kerry-james-6: #ef4444;
  --lauren-halsey: #facc15;
  --kerry-james-7: #10b981;
  --cameron-rowland: #6b7280;
  --kerry-james-8: #ffffff;
  --pope-l: #374151;
  --kerry-james-9: #f43f5e;
  --martine-syms: #22c55e;
  --kerry-james-10: #8b5cf6;
}

.dark {
  /* Dark mode inherits the same video editor theme */
  --background: #1f2937;
  --foreground: #ffffff;
  --card: #2a2e35;
  --card-foreground: #ffffff;
  --popover: #2a2e35;
  --popover-foreground: #ffffff;
  --primary: #8b5cf6;
  --primary-foreground: #ffffff;
  --secondary: #6b7280;
  --secondary-foreground: #ffffff;
  --muted: #475569;
  --muted-foreground: #ffffff;
  --accent: #10b981;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #4b5563;
  --input: #2a2e35;
  --ring: #8b5cf6;
  --chart-1: #facc15;
  --chart-2: #3b82f6;
  --chart-3: #22c55e;
  --chart-4: #f43f5e;
  --chart-5: #9333ea;
  --radius: 0.25rem;
  --sidebar: #2a2e35;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #1f2937;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #8b5cf6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #4b5563;
  --sidebar-ring: #8b5cf6;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }

  /* Video Editor Specific Styles */
  .video-editor-container {
    background: var(--background);
    color: var(--foreground);
    font-family: "Open Sans", sans-serif;
  }

  .timeline-container {
    background: var(--timeline-bg);
    border-top: 1px solid var(--border);
  }

  .timeline-track {
    background: var(--timeline-track);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .timeline-clip {
    background: var(--timeline-clip);
    border: 1px solid var(--clip-border);
    border-radius: var(--radius);
    color: var(--primary-foreground);
  }

  .timeline-playhead {
    background: var(--timeline-playhead);
    width: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
  }

  .tool-panel {
    background: var(--tool-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .preview-window {
    background: var(--preview-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .waveform {
    fill: var(--waveform-color);
  }

  .keyframe {
    fill: var(--keyframe-color);
  }

  .transition {
    background: var(--transition-color);
    border-radius: var(--radius);
  }

  .audio-track {
    background: var(--audio-track);
    border-radius: var(--radius);
  }

  .video-track {
    background: var(--video-track);
    border-radius: var(--radius);
  }

  .effect-badge {
    background: var(--effect-color);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    padding: 2px 6px;
    font-size: 10px;
  }

  .export-progress {
    background: var(--export-progress);
    border-radius: var(--radius);
  }

  .scrubber-handle {
    background: var(--scrubber-handle);
    border: 2px solid var(--timeline-playhead);
    border-radius: 50%;
    width: 12px;
    height: 12px;
  }

  .zoom-control {
    background: var(--zoom-control);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .layer-active {
    background: var(--layer-active);
    color: var(--primary-foreground);
  }

  .layer-inactive {
    background: var(--layer-inactive);
    color: var(--muted-foreground);
  }

  .marker {
    background: var(--marker-color);
    width: 2px;
    height: 100%;
  }

  .selection-box {
    background: var(--selection-color);
    border: 1px dashed var(--primary);
  }

  .hover-overlay {
    background: var(--hover-overlay);
  }

  .active-tool {
    background: var(--active-tool);
    color: var(--accent-foreground);
  }

  .inactive-tool {
    background: var(--inactive-tool);
    color: var(--secondary-foreground);
  }

  .panel-divider {
    background: var(--panel-divider);
    width: 1px;
    height: 100%;
  }

  .dropdown-menu {
    background: var(--dropdown-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .tooltip {
    background: var(--tooltip-bg);
    color: var(--foreground);
    border-radius: var(--radius);
    padding: 4px 8px;
    font-size: 12px;
  }

  .modal-overlay {
    background: var(--modal-overlay);
  }

  .progress-bar {
    background: var(--progress-bar);
    border-radius: var(--radius);
  }

  .success-indicator {
    color: var(--success-color);
  }

  .warning-indicator {
    color: var(--warning-color);
  }

  .info-indicator {
    color: var(--info-color);
  }

  .timeline-ruler {
    background: var(--timeline-ruler);
    height: 20px;
    border-bottom: 1px solid var(--border);
  }

  .transition-handle {
    background: var(--transition-handle);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: ew-resize;
  }

  .audio-waveform {
    stroke: var(--audio-waveform);
    fill: none;
    stroke-width: 1;
  }

  .video-thumbnail {
    border: 1px solid var(--video-thumbnail);
    border-radius: var(--radius);
  }

  .keyframe-diamond {
    fill: var(--keyframe-diamond);
    stroke: var(--foreground);
    stroke-width: 1;
  }

  .playback-controls {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .volume-slider {
    background: var(--volume-slider);
  }

  .speed-indicator {
    color: var(--speed-indicator);
    font-weight: bold;
  }

  .cut-line {
    background: var(--cut-line);
    width: 1px;
    height: 100%;
  }

  .snap-guide {
    background: var(--snap-guide);
    width: 1px;
    height: 100%;
    opacity: 0.7;
  }

  .grid-lines {
    stroke: var(--grid-lines);
    stroke-width: 0.5;
    opacity: 0.3;
  }

  .layer-separator {
    background: var(--layer-separator);
    height: 1px;
    width: 100%;
  }

  .timeline-zoom {
    background: var(--timeline-zoom);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .export-format {
    background: var(--export-format);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    padding: 4px 8px;
  }

  .quality-indicator {
    color: var(--quality-indicator);
    font-weight: bold;
  }

  .render-progress {
    background: var(--render-progress);
    border-radius: var(--radius);
  }

  .file-browser {
    background: var(--file-browser);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .media-thumbnail {
    background: var(--media-thumbnail);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .import-drop-zone {
    background: var(--import-drop);
    border: 2px dashed var(--primary);
    border-radius: var(--radius);
  }

  .timeline-scale {
    color: var(--timeline-scale);
    font-size: 10px;
  }

  .clip-label {
    color: var(--clip-label);
    font-size: 11px;
    font-weight: 500;
  }

  .transition-preview {
    background: var(--transition-preview);
    border-radius: var(--radius);
  }

  .effect-preview {
    background: var(--effect-preview);
    border-radius: var(--radius);
  }

  .audio-meter {
    background: var(--audio-meter);
    border-radius: var(--radius);
  }

  .video-scope {
    border: 1px solid var(--video-scope);
    border-radius: var(--radius);
  }

  .color-picker {
    background: var(--color-picker);
    border: 1px solid var(--border);
    border-radius: 50%;
  }

  .gradient-stop {
    background: var(--gradient-stop);
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .bezier-handle {
    fill: var(--bezier-handle);
    stroke: var(--foreground);
    stroke-width: 1;
  }

  .motion-path {
    stroke: var(--motion-path);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 5, 5;
  }

  .anchor-point {
    fill: var(--anchor-point);
    stroke: var(--foreground);
    stroke-width: 2;
  }

  .bounding-box {
    stroke: var(--bounding-box);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 3, 3;
  }

  .transform-handle {
    fill: var(--transform-handle);
    stroke: var(--foreground);
    stroke-width: 1;
  }

  .crop-overlay {
    background: var(--crop-overlay);
  }

  .mask-overlay {
    background: var(--mask-overlay);
  }

  .chroma-key-preview {
    border: 2px solid var(--chroma-key);
  }

  .luma-key-preview {
    border: 2px solid var(--luma-key);
  }

  .blend-mode-preview {
    border: 2px solid var(--blend-mode);
  }

  .opacity-slider {
    background: var(--opacity-slider);
  }

  .feather-control {
    background: var(--feather-control);
  }

  .tracking-point {
    fill: var(--tracking-point);
    stroke: var(--foreground);
    stroke-width: 2;
  }

  .stabilization-indicator {
    color: var(--stabilization);
  }

  .noise-reduction-indicator {
    color: var(--noise-reduction);
  }

  .sharpening-indicator {
    color: var(--sharpening);
  }

  .color-correction-indicator {
    color: var(--color-correction);
  }

  /* Scrollbar Styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--muted);
    border-radius: var(--radius);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }

  /* Animation Classes */
  .fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .slide-in-left {
    animation: slideInLeft 0.3s ease-out;
  }

  .slide-in-right {
    animation: slideInRight 0.3s ease-out;
  }

  .slide-in-up {
    animation: slideInUp 0.3s ease-out;
  }

  .slide-in-down {
    animation: slideInDown 0.3s ease-out;
  }

  .zoom-in {
    animation: zoomIn 0.3s ease-out;
  }

  .zoom-out {
    animation: zoomOut 0.3s ease-out;
  }

  .rotate-in {
    animation: rotateIn 0.5s ease-out;
  }

  .bounce-in {
    animation: bounceIn 0.6s ease-out;
  }

  .pulse-glow {
    animation: pulseGlow 2s infinite;
  }

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

  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideInUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideInDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes zoomIn {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes zoomOut {
    from {
      transform: scale(1.2);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes rotateIn {
    from {
      transform: rotate(-180deg) scale(0.8);
      opacity: 0;
    }
    to {
      transform: rotate(0deg) scale(1);
      opacity: 1;
    }
  }

  @keyframes bounceIn {
    0% {
      transform: scale(0.3);
      opacity: 0;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.8;
    }
    70% {
      transform: scale(0.9);
      opacity: 0.9;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes pulseGlow {
    0%,
    100% {
      box-shadow: 0 0 5px var(--primary);
    }
    50% {
      box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary);
    }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .timeline-container {
      height: 200px;
    }

    .tool-panel {
      width: 100%;
      height: auto;
    }

    .preview-window {
      height: 200px;
    }
  }

  @media (max-width: 480px) {
    .timeline-container {
      height: 150px;
    }

    .preview-window {
      height: 150px;
    }

    .clip-label {
      font-size: 9px;
    }

    .timeline-scale {
      font-size: 8px;
    }
  }
}