:root {
      --bg-primary: #0a0a0f;
      --bg-secondary: #16161d;
      --bg-tertiary: #1e1e28;
      --border-color: #2a2a35;
      --text-primary: #e8e8f0;
      --text-secondary: #a0a0b0;
      --text-muted: #707080;
      --aetherwave-pink: #ff2ea6;
      --aetherwave-cyan: #06b6d4;
      --aetherwave-gold: #f59e0b;
      --success: #10b981;
      --error: #ef4444;
      --warning: #f59e0b;
    }

    /* Beta Notice Banner */
    .beta-notice-banner {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 46, 166, 0.15) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      padding: 8px 16px;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .beta-notice-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      max-width: 1200px;
      margin: 0 auto;
      font-size: 13px;
    }

    .beta-badge {
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.5px;
    }

    .beta-message {
      color: var(--text-secondary);
    }

    .beta-date {
      color: var(--aetherwave-cyan);
      font-weight: 500;
    }

    .beta-dismiss {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 18px;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
      transition: color 0.2s;
    }

    .beta-dismiss:hover {
      color: var(--text-primary);
    }

    @media (max-width: 768px) {
      .beta-notice-content {
        flex-wrap: wrap;
        text-align: center;
      }

      .beta-date {
        width: 100%;
        margin-top: 4px;
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      overflow: hidden;
      height: 100vh;
    }

    /* Main Layout */
    .studio-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    /* Header */
    .studio-header {
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      padding: .75rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .back-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-secondary);
      text-decoration: none;
      transition: all 0.2s;
    }

    .back-btn:hover {
      border-color: var(--aetherwave-cyan);
      color: var(--text-primary);
    }

    .project-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      cursor: text;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid transparent;
      transition: all 0.2s ease;
      outline: none;
      min-width: 100px;
      max-width: 400px;
    }

    .project-title:hover {
      border-color: var(--border-color);
      background: rgba(255, 255, 255, 0.05);
    }

    .project-title:focus {
      border-color: var(--aetherwave-cyan);
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10);
    }

    .project-title-hint {
      font-size: 0.7rem;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.2s;
      margin-left: 8px;
    }

    .project-title:hover+.project-title-hint,
    .project-title:focus+.project-title-hint {
      opacity: 1;
    }

    .project-thumbnail {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .project-thumbnail:hover {
      border-color: var(--aetherwave-cyan);
      transform: scale(1.05);
    }

    .project-thumbnail-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 2px dashed var(--border-color);
      background: var(--bg-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      overflow: hidden;
      flex-shrink: 0;
    }

    .project-thumbnail-btn:hover {
      border-color: var(--aetherwave-cyan);
      background: rgba(255, 255, 255, 0.05);
    }

    .project-thumbnail-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .project-thumbnail-btn i {
      font-size: 1rem;
      color: var(--text-muted);
    }

    .project-thumbnail-btn:hover i {
      color: var(--aetherwave-cyan);
    }

    .header-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .auto-save-status {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      transition: color 0.3s ease, opacity 0.3s ease;
      user-select: none;
    }

    .auto-save-status i {
      font-size: 0.9rem;
    }

    /* Output-settings readout in the header. Deliberately quiet - it is
       reference, not a control - but always present, because not knowing the
       project's frame rate silently costs a whole render. */
    .project-settings-readout {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-left: 0.9rem;
      padding: 0.2rem 0.55rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 5px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.45);
      cursor: pointer;
      user-select: none;
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }

    .project-settings-readout:hover {
      color: rgba(255, 255, 255, 0.8);
      border-color: rgba(6, 182, 212, 0.5);
      background: rgba(6, 182, 212, 0.08);
    }

    .project-settings-readout i {
      font-size: 0.85rem;
      opacity: 0.7;
    }

    .project-settings-readout .psr-sep {
      opacity: 0.35;
    }

    /* Flagged when the render rate does not match the footage - the case that
       duplicates frames and breaks a frame-perfect loop. */
    .project-settings-readout.fps-mismatch {
      border-color: rgba(245, 158, 11, 0.55);
      color: rgba(245, 158, 11, 0.95);
    }

    @media (max-width: 1100px) {
      .project-settings-readout { display: none; }
    }

    .auto-save-status.saved {
      color: rgba(255, 255, 255, 0.35);
    }

    .auto-save-status.saving {
      color: var(--aetherwave-cyan);
    }

    .auto-save-status.unsaved {
      color: rgba(255, 255, 255, 0.5);
    }

    .auto-save-status.error {
      color: var(--error, #ef4444);
    }

    .auto-save-status .spinning {
      animation: spin 1s linear infinite;
    }

    .btn-icon {
      padding: 0.5rem;
      min-width: auto;
      width: auto;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      transition: color 0.2s;
    }

    .btn-icon:hover {
      color: var(--text-primary);
    }

    .btn-projects {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.75rem;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 6px;
      color: var(--aetherwave-cyan);
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-projects:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 46, 166, 0.3);
      color: white;
    }

    .btn-projects i {
      font-size: 1rem;
    }

    /* Canvas Aspect Ratio Selector */
    .canvas-ratio-selector {
      position: relative;
    }

    .canvas-ratio-btn {
      display: flex !important;
      align-items: center;
      gap: 5px;
      padding: 4px 8px !important;
      font-size: 0.78rem !important;
      cursor: pointer;
    }

    .canvas-ratio-btn .ratio-label {
      font-size: 0.75rem;
      font-weight: 500;
    }

    .canvas-ratio-btn .ri-arrow-down-s-line {
      font-size: 0.85rem;
      opacity: 0.6;
    }

    /* Ratio shape icons */
    .ratio-icon {
      display: inline-block;
      border: 1.5px solid currentColor;
      border-radius: 2px;
    }

    .ratio-icon-16-9 {
      width: 16px;
      height: 9px;
    }

    .ratio-icon-9-16 {
      width: 9px;
      height: 16px;
    }

    .ratio-icon-1-1 {
      width: 13px;
      height: 13px;
    }

    .ratio-icon-4-5 {
      width: 11px;
      height: 14px;
    }

    .ratio-icon-3-4 {
      width: 12px;
      height: 16px;
    }

    /* Dropdown popup - opens upward from transport bar */
    .canvas-ratio-dropdown {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 6px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      z-index: 200;
      min-width: 160px;
      padding: 4px;
    }

    .canvas-ratio-dropdown.open {
      display: flex;
      flex-direction: column;
    }

    .canvas-ratio-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.82rem;
      cursor: pointer;
      border-radius: 6px;
      text-align: left;
      white-space: nowrap;
    }

    .canvas-ratio-option:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
    }

    .canvas-ratio-option.active {
      color: var(--aetherwave-cyan);
      background: rgba(255, 255, 255, 0.05);
    }

    .canvas-ratio-option small {
      color: var(--text-muted);
      font-size: 0.72rem;
      margin-left: 2px;
    }

    .canvas-ratio-option.active small {
      color: rgba(255, 46, 166, 0.4);
    }


    .btn {
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

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

    .btn-secondary:hover {
      border-color: var(--text-primary);
      color: var(--text-primary);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--aetherwave-pink), var(--aetherwave-cyan));
      color: white;
      box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 46, 166, 0.25);
    }

    .btn-success {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    }

    .btn-success:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

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

    /* Main Content Area */
    .studio-content {
      flex: 1;
      display: grid;
      /* Panels fill space up to 20px from the 800px centered preview */
      /* calc(50vw - 420px) = half viewport minus half of (800px preview + 40px gaps) */
      grid-template-columns: minmax(200px, calc(50vw - 420px)) 1fr minmax(200px, calc(50vw - 420px));
      grid-template-rows: 1fr auto;
      gap: 0;
      overflow: hidden;
      position: relative;
    }

    /* Media Library Sidebar */
    .media-library {
      grid-column: 1;
      grid-row: 1;
      /* Default: only preview row */
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: background 0.2s ease, border-color 0.2s ease;
      z-index: 60;
      /* Above fixed preview-player (50) */
    }

    /* Delete drop zone visual - when dragging clip over media library */
    .media-library.delete-drop-zone {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.5);
      box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.2);
    }

    .media-library.delete-drop-zone .library-header h3::after {
      content: ' — Drop to Delete';
      color: #ef4444;
      font-weight: 500;
    }

    /* Drag-over visual - when dragging files from file explorer */
    .media-library.drag-over {
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.5);
      box-shadow: inset 0 0 30px rgba(6, 182, 212, 0.2);
    }

    .media-library.drag-over .library-header h3::after {
      content: ' — Drop to Upload';
      color: #06b6d4;
      font-weight: 500;
    }

    .library-header {
      padding: 1rem;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .library-header h3 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      border: none;
      border-radius: 6px;
      color: white;
      cursor: pointer;
      transition: all 0.2s;
    }

    .upload-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(255, 46, 166, 0.25);
    }

    .upload-btn i {
      font-size: 1rem;
    }

    /* Library header actions container */
    .library-header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* Media Library Extend Button */
    .media-extend-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background: linear-gradient(180deg, rgba(40, 40, 50, 0.9) 0%, rgba(25, 25, 35, 0.95) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      color: rgba(180, 180, 190, 0.8);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .media-extend-btn:hover {
      background: linear-gradient(180deg, rgba(50, 50, 60, 0.95) 0%, rgba(35, 35, 45, 0.98) 100%);
      color: var(--aetherwave-cyan);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .media-extend-btn.active {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
      color: var(--aetherwave-cyan);
      border-color: rgba(255, 46, 166, 0.25);
    }

    .media-extend-btn.active i {
      transform: rotate(180deg);
    }

    .media-extend-btn i {
      font-size: 1rem;
      transition: transform 0.3s ease;
    }

    .library-items {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0.5rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: min-content;
      gap: 0.5rem;
      align-content: start;
    }

    /* Custom scrollbar for media library */
    .library-items::-webkit-scrollbar {
      width: 8px;
    }

    .library-items::-webkit-scrollbar-track {
      background: var(--bg-primary);
      border-radius: 4px;
    }

    .library-items::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 4px;
    }

    .library-items::-webkit-scrollbar-thumb:hover {
      background: var(--aetherwave-cyan);
    }

    .library-item {
      position: relative;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem;
      cursor: grab;
      transition: all 0.2s;
      min-width: 0;
    }

    .library-item:hover {
      border-color: var(--aetherwave-cyan);
      transform: scale(1.02);
    }

    .library-item.selected {
      border-color: var(--aetherwave-cyan);
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
    }

    .library-item:active {
      cursor: grabbing;
    }

    .item-thumb {
      width: 100%;
      aspect-ratio: 1 / 1;
      background: var(--bg-primary);
      border-radius: 4px;
      margin-bottom: 0.35rem;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .item-thumb img,
    .item-thumb video {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }

    .item-thumb i {
      font-size: 2rem;
      color: var(--aetherwave-cyan);
    }

    /* Color-coded badges for library items */
    .item-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 22px;
      height: 22px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .item-badge i,
    .item-badge svg {
      width: 14px;
      height: 14px;
      color: white !important;
      stroke: white;
      stroke-width: 2;
    }

    .badge-video {
      background: linear-gradient(135deg, var(--aetherwave-cyan), #0891b2);
    }

    .badge-audio {
      background: linear-gradient(135deg, var(--aetherwave-cyan), #7c3aed);
    }

    .badge-image {
      background: linear-gradient(135deg, var(--aetherwave-pink), #d91a8d);
    }

    .item-thumb {
      position: relative;
    }

    /* Audio waveform placeholder - purple background with pink waveform */
    .audio-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--aetherwave-cyan), rgba(255, 46, 166, 0.4));
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 0 15%;
    }

    .audio-placeholder .wave-bar {
      width: 4px;
      background: var(--aetherwave-pink);
      border-radius: 2px;
      animation: wave 1.2s ease-in-out infinite;
    }

    .audio-placeholder .wave-bar:nth-child(1) {
      height: 30%;
      animation-delay: 0s;
    }

    .audio-placeholder .wave-bar:nth-child(2) {
      height: 60%;
      animation-delay: 0.1s;
    }

    .audio-placeholder .wave-bar:nth-child(3) {
      height: 80%;
      animation-delay: 0.2s;
    }

    .audio-placeholder .wave-bar:nth-child(4) {
      height: 50%;
      animation-delay: 0.3s;
    }

    .audio-placeholder .wave-bar:nth-child(5) {
      height: 70%;
      animation-delay: 0.4s;
    }

    .audio-placeholder .wave-bar:nth-child(6) {
      height: 40%;
      animation-delay: 0.5s;
    }

    .audio-placeholder .wave-bar:nth-child(7) {
      height: 55%;
      animation-delay: 0.6s;
    }

    @keyframes wave {

      0%,
      100% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(0.6);
      }
    }

    /* Static version for timeline clips */
    .audio-placeholder.static .wave-bar {
      animation: none;
    }

    .item-title {
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    .item-type {
      font-size: 0.75rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    /* Preview Area */
    .preview-area {
      grid-column: 2;
      grid-row: 1;
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .preview-area {
      /* Placeholder that reserves vertical space. Kept small so the grid always
         gives the timeline (grid row 2, auto height) its full height — a large
         min-height here forces the grid to overflow on shorter viewports and
         clip the bottom audio lane. The real preview is the position:fixed
         .preview-player sized via --preview-reserve, not this placeholder. */
      padding-top: 1rem;
      min-height: 140px;
    }

    .preview-player {
      /* Fixed center - doesn't move with panel changes */
      position: fixed;
      top: 76px;
      /* Below header with small gap */
      left: 50%;
      transform: translateX(-50%);
      --canvas-aspect-ratio: 16/9;
      aspect-ratio: var(--canvas-aspect-ratio);
      /* Height-first sizing: fill available vertical space, then derive width
         from aspect-ratio and cap it. This ensures the canvas is always exactly
         the declared aspect ratio (previously, explicit width + max-height could
         produce a box wider than 16:9 on shorter viewports).
         The reserved space below the preview is the live timeline height,
         measured into --preview-reserve by syncPreviewReserve() so the canvas
         never overhangs the transport controls / ruler when the timeline grows
         (e.g. the second audio lane). 310px is the pre-measurement fallback. */
      height: calc(100vh - 76px - var(--preview-reserve, 310px));
      max-width: min(800px, 50vw);
      background: #1a1a1a;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
      z-index: 50;
      /* Prevent native browser drag/selection on preview (causes blue overlay / stuck state) */
      user-select: none;
      -webkit-user-select: none;
    }

    .preview-player video,
    .preview-player img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: transparent;
    }

    /* Overlay elements need transparent background to show layer beneath */
    .preview-player #previewVideo2,
    .preview-player #previewImage2 {
      background: transparent !important;
    }

    /* Media transform border - shows media bounds for scale reference */
    .media-border {
      position: absolute;
      border: 2px solid rgba(255, 255, 255, 0.8);
      pointer-events: none;
      z-index: 55;
      box-sizing: border-box;
      transition: border-color 0.2s ease;
    }

    .media-border.zoom-to-fill {
      border-color: rgba(0, 255, 0, 0.9);
      box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
    }

    .media-border .scale-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      background: white;
      border: 2px solid #333;
      pointer-events: all;
      z-index: 56;
      box-sizing: border-box;
      margin: 0;
    }

    /* Larger invisible hit area for easier clicking (30px total) */
    .media-border .scale-handle::after {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
    }

    .media-border .scale-handle:hover {
      background: var(--aetherwave-cyan);
      box-shadow: 0 0 6px rgba(6, 182, 212, 0.5);
    }

    .media-border .scale-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
    .media-border .scale-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
    .media-border .scale-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
    .media-border .scale-handle.se { bottom: -7px; right: -7px; cursor: nwse-resize; }

    .media-border .scale-handle.dragging {
      background: var(--aetherwave-cyan);
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
    }

    .preview-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
    }

    .preview-placeholder i {
      font-size: 4rem;
      margin-bottom: 1rem;
      opacity: 0.3;
    }

    /* Playing state indicator */
    .playback-btn.playing {
      background: var(--aetherwave-pink);
      box-shadow: 0 0 12px rgba(255, 46, 166, 0.5);
    }

    /* Settings Panel (Right Sidebar) - Only in row 1 next to preview */
    .settings-panel {
      grid-column: 3;
      grid-row: 1;
      background: var(--bg-secondary);
      border-left: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 60;
      /* Above fixed preview-player (50) */
    }

    /* ========================================
       MERCEDES-BENZ INSPIRED SETTINGS HEADER
       Clean, elegant, three-section symmetry
       ======================================== */
    .settings-header {
      padding: 0;
      border-bottom: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      background: linear-gradient(180deg, rgba(30, 30, 35, 0.95) 0%, rgba(20, 20, 25, 0.98) 100%);
    }

    /* Top row: Type badge | Properties/Library switcher | Mixer */
    .settings-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 0.75rem;
      gap: 0.5rem;
    }

    /* Chrome/silver accent line under header */
    .settings-header::after {
      content: '';
      display: block;
      height: 1px;
      background: linear-gradient(90deg,
          transparent 0%,
          rgba(192, 192, 200, 0.15) 10%,
          rgba(220, 220, 230, 0.4) 50%,
          rgba(192, 192, 200, 0.15) 90%,
          transparent 100%);
    }

    .settings-header .gear-icon {
      display: none;
      /* Hide gear icon - using type badge instead */
    }

    /* Left section: Type badge */
    .settings-header-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }

    .settings-header-info {
      display: none;
      /* Hide the old clip name section - we show type badge only */
    }

    .settings-header-top {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .settings-clip-name {
      display: none;
      /* Hide clip name in header */
    }

    /* Elegant type badge - Mercedes chrome style */
    .settings-type-badge {
      font-size: 0.65rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 4px 10px;
      border-radius: 3px;
      flex-shrink: 0;
      width: 52px;
      /* Fixed width so Video/Image/Audio don't shift layout */
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: linear-gradient(180deg, rgba(60, 60, 70, 0.9) 0%, rgba(40, 40, 50, 0.95) 100%);
      color: rgba(220, 220, 230, 0.95);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .settings-type-badge.audio {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(99, 102, 241, 0.2) 100%);
      border-color: rgba(255, 46, 166, 0.25);
      color: rgba(200, 180, 255, 0.95);
    }

    .settings-type-badge.video {
      background: linear-gradient(180deg, rgba(34, 211, 238, 0.2) 0%, rgba(8, 145, 178, 0.15) 100%);
      border-color: rgba(34, 211, 238, 0.35);
      color: rgba(180, 240, 255, 0.95);
    }

    .settings-type-badge.image {
      background: linear-gradient(180deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.15) 100%);
      border-color: rgba(236, 72, 153, 0.35);
      color: rgba(255, 200, 220, 0.95);
    }

    .settings-header-meta {
      display: none;
      /* Hide meta info - cleaner look */
    }

    .settings-header h3 {
      display: none;
      /* Hide "Properties" text when no clip selected */
    }

    /* ========================================
       CENTER: Panel Mode Switcher (Properties/Library)
       Elegant segmented control
       ======================================== */
    .panel-mode-switcher {
      display: flex;
      gap: 0;
      background: linear-gradient(180deg, rgba(25, 25, 30, 0.95) 0%, rgba(15, 15, 20, 0.98) 100%);
      padding: 3px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .panel-mode-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 10px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: rgba(160, 160, 170, 0.8);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .panel-mode-btn i {
      font-size: 1.1rem;
    }

    .panel-mode-btn:hover {
      color: rgba(220, 220, 230, 0.95);
      background: rgba(255, 255, 255, 0.05);
    }

    .panel-mode-btn.active {
      background: linear-gradient(180deg, rgba(70, 70, 80, 0.9) 0%, rgba(50, 50, 60, 0.95) 100%);
      color: rgba(240, 240, 250, 1);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Subtle accent color on active - elegant not flashy */
    .panel-mode-btn.active::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 46, 166, 0.35), transparent);
      border-radius: 1px;
    }

    .panel-mode-btn {
      position: relative;
    }

    /* Divider between media tabs and library */
    .panel-mode-divider {
      width: 1px;
      height: 20px;
      background: rgba(255, 255, 255, 0.15);
      margin: 0 4px;
    }

    /* Active states for different media types */
    .panel-mode-btn[data-mode="image"].active {
      background: linear-gradient(180deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.1) 100%);
      color: var(--aetherwave-pink);
      border-color: rgba(236, 72, 153, 0.3);
    }

    .panel-mode-btn[data-mode="image"].active::before {
      background: linear-gradient(90deg, transparent, var(--aetherwave-pink), transparent);
    }

    .panel-mode-btn[data-mode="video"].active {
      background: linear-gradient(180deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
      color: var(--aetherwave-cyan);
      border-color: rgba(6, 182, 212, 0.3);
    }

    .panel-mode-btn[data-mode="video"].active::before {
      background: linear-gradient(90deg, transparent, var(--aetherwave-cyan), transparent);
    }

    .panel-mode-btn[data-mode="audio"].active {
      background: linear-gradient(180deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
      color: #a855f7;
      border-color: rgba(168, 85, 247, 0.3);
    }

    .panel-mode-btn[data-mode="audio"].active::before {
      background: linear-gradient(90deg, transparent, #a855f7, transparent);
    }

    .panel-mode-btn[data-mode="library"].active {
      background: linear-gradient(180deg, rgba(100, 100, 120, 0.3) 0%, rgba(80, 80, 100, 0.2) 100%);
      color: rgba(240, 240, 250, 1);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .panel-mode-btn[data-mode="library"].active::before {
      background: linear-gradient(90deg, transparent, rgba(255, 46, 166, 0.35), transparent);
    }

    /* "All" filter button - neutral/white styling */
    .panel-mode-btn[data-mode="all"].active {
      background: linear-gradient(180deg, rgba(100, 100, 120, 0.3) 0%, rgba(80, 80, 100, 0.2) 100%);
      color: rgba(240, 240, 250, 1);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .panel-mode-btn[data-mode="all"].active::before {
      background: linear-gradient(90deg, transparent, rgba(200, 200, 210, 0.6), transparent);
    }

    .settings-content {
      flex: 1;
      overflow-y: auto;
      padding: .50rem;
    }

    .settings-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      color: var(--text-muted);
    }

    .settings-empty i {
      font-size: 3rem;
      margin-bottom: 1rem;
      opacity: 0.3;
    }

    .settings-empty p {
      font-size: 0.9rem;
    }

    /* ========================================
       RIGHT: Mixer Mode Toggle - Mercedes style
       ======================================== */
    .mixer-mode-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 6px 10px;
      background: linear-gradient(180deg, rgba(25, 25, 30, 0.95) 0%, rgba(15, 15, 20, 0.98) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      color: rgba(160, 160, 170, 0.8);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .mixer-mode-toggle:hover {
      color: rgba(220, 220, 230, 0.95);
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .mixer-mode-toggle.active {
      background: linear-gradient(180deg, rgba(70, 70, 80, 0.9) 0%, rgba(50, 50, 60, 0.95) 100%);
      color: rgba(240, 240, 250, 1);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .mixer-mode-toggle i {
      font-size: 0.9rem;
    }

    /* Mixer Mode - Full Height Settings Panel */
    .studio-content.mixer-mode .settings-panel {
      grid-row: 1 / 3;
    }

    .studio-content.mixer-mode .timeline-area {
      grid-column: 2;
    }

    /* Mixer Mode - Better EQ Layout */
    .studio-content.mixer-mode .eq-faders {
      padding: 1rem 0.5rem;
    }

    /* Panel Extend Button */
    .panel-extend-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background: linear-gradient(180deg, rgba(40, 40, 50, 0.9) 0%, rgba(25, 25, 35, 0.95) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      color: rgba(180, 180, 190, 0.8);
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .panel-extend-btn:hover {
      background: linear-gradient(180deg, rgba(50, 50, 60, 0.95) 0%, rgba(35, 35, 45, 0.98) 100%);
      color: var(--aetherwave-cyan);
      border-color: rgba(6, 182, 212, 0.3);
    }

    .panel-extend-btn.active {
      background: linear-gradient(180deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
      color: var(--aetherwave-cyan);
      border-color: rgba(6, 182, 212, 0.4);
    }

    .panel-extend-btn.active i {
      transform: rotate(180deg);
    }

    .panel-extend-btn i {
      font-size: 1.1rem;
      transition: transform 0.3s ease;
    }

    /* Panel extend controls container */
    .panel-extend-controls {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* ============================================
       MEDIA LIBRARY WIDTH STATES (Left Panel)
       narrow (200px) → normal (dynamic) → wide (dynamic+80px)
       ============================================ */
    .studio-content.media-narrow {
      grid-template-columns: 200px 1fr calc(50vw - 420px);
    }

    .studio-content.media-narrow .library-items {
      grid-template-columns: 1fr;
      /* Single column in narrow mode */
    }

    .studio-content.media-wide {
      /* Both panels expand 80px beyond normal */
      grid-template-columns: minmax(280px, calc(50vw - 340px)) 1fr minmax(280px, calc(50vw - 340px));
    }

    .studio-content.media-wide .library-items {
      grid-template-columns: repeat(3, 1fr);
      /* 3 columns in wide mode */
    }

    /* ============================================
       SETTINGS PANEL WIDTH STATES (Right Panel)
       narrow (200px) → normal (dynamic) → wide (dynamic+80px)
       ============================================ */
    .studio-content.panel-narrow {
      grid-template-columns: calc(50vw - 420px) 1fr 200px;
    }

    .studio-content.panel-wide {
      grid-template-columns: calc(50vw - 420px) 1fr minmax(280px, calc(50vw - 340px));
    }

    /* Combined states - both panels can be resized independently */
    .studio-content.media-narrow.panel-narrow {
      grid-template-columns: 200px 1fr 200px;
    }

    .studio-content.media-narrow.panel-wide {
      grid-template-columns: 200px 1fr minmax(280px, calc(50vw - 340px));
    }

    .studio-content.media-wide.panel-narrow {
      grid-template-columns: minmax(280px, calc(50vw - 340px)) 1fr 200px;
    }

    .studio-content.media-wide.panel-wide {
      /* Both panels at max width */
      grid-template-columns: minmax(280px, calc(50vw - 340px)) 1fr minmax(280px, calc(50vw - 340px));
    }

    /* Panel Collapsed Mode - Settings panel retracted */
    .studio-content.panel-collapsed {
      grid-template-columns: calc(50vw - 420px) 1fr 0px;
    }

    .studio-content.panel-collapsed .settings-panel {
      display: none;
    }

    /* Panel Expanded Mode - Wider settings panel */
    .studio-content.panel-expanded {
      grid-template-columns: calc(50vw - 420px) 1fr minmax(280px, calc(50vw - 340px));
    }

    .studio-content.panel-expanded .settings-panel {
      width: calc(50vw - 340px);
      max-width: 600px;
    }

    /* Wider library grid in expanded mode */
    .studio-content.panel-expanded .library-panel .transitions-grid,
    .studio-content.panel-expanded .library-panel .effects-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    /* Panel Toggle Button - sits at right edge */
    .panel-toggle-btn {
      position: absolute;
      right: max(200px, calc(50vw - 420px));
      /* Match default panel width */
      top: 50%;
      transform: translateY(-50%) translateY(-150px);
      /* Offset to be in preview area */
      width: 24px;
      height: 64px;
      background: linear-gradient(180deg, rgba(30, 30, 35, 0.95) 0%, rgba(20, 20, 25, 0.98) 100%);
      border: 1px solid var(--border-color);
      border-right: none;
      border-radius: 8px 0 0 8px;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 100;
    }

    .panel-toggle-btn:hover {
      background: rgba(255, 255, 255, 0.10);
      color: var(--aetherwave-cyan);
      border-color: var(--aetherwave-cyan);
    }

    .panel-toggle-btn i {
      font-size: 1rem;
      transition: transform 0.3s;
    }

    /* When panel is collapsed, move button to edge and flip chevron */
    .studio-content.panel-collapsed .panel-toggle-btn {
      right: 0;
    }

    .studio-content.panel-collapsed .panel-toggle-btn i {
      transform: rotate(180deg);
    }

    /* When panel is expanded, move button to expanded edge */
    .studio-content.panel-expanded .panel-toggle-btn {
      right: max(280px, calc(50vw - 340px));
      /* Match expanded panel width */
    }

    /* Visual indicator for panel state */
    .panel-toggle-btn::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-muted);
      opacity: 0.5;
    }

    .studio-content.panel-expanded .panel-toggle-btn::after {
      background: var(--aetherwave-cyan);
      opacity: 1;
      box-shadow: 0 0 4px var(--aetherwave-cyan);
    }

    /* ============================================
       LEFT PANEL (Media Library) COLLAPSE STATES
       ============================================ */

    /* Media Library Panel Toggle Button - sits at left edge of preview */
    .media-panel-toggle-btn {
      position: absolute;
      left: max(200px, calc(50vw - 420px));
      /* Match default panel width */
      top: 50%;
      transform: translateY(-50%) translateY(-150px);
      width: 24px;
      height: 64px;
      background: linear-gradient(180deg, rgba(30, 30, 35, 0.95) 0%, rgba(20, 20, 25, 0.98) 100%);
      border: 1px solid var(--border-color);
      border-left: none;
      border-radius: 0 8px 8px 0;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 100;
    }

    .media-panel-toggle-btn:hover {
      background: rgba(255, 255, 255, 0.10);
      color: var(--aetherwave-cyan);
      border-color: var(--aetherwave-cyan);
    }

    .media-panel-toggle-btn i {
      font-size: 1rem;
      transition: transform 0.3s;
    }

    /* Visual indicator dot */
    .media-panel-toggle-btn::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-muted);
      opacity: 0.5;
    }

    /* Media Library Collapsed State */
    .studio-content.media-collapsed {
      grid-template-columns: 0px 1fr calc(50vw - 420px);
    }

    .studio-content.media-collapsed .media-library {
      display: none;
    }

    .studio-content.media-collapsed .media-panel-toggle-btn {
      left: 0;
    }

    .studio-content.media-collapsed .media-panel-toggle-btn i {
      transform: rotate(180deg);
    }

    /* Combine both panels collapsed */
    .studio-content.media-collapsed.panel-collapsed {
      grid-template-columns: 0px 1fr 0px;
    }

    /* Media collapsed + settings expanded */
    .studio-content.media-collapsed.panel-expanded {
      grid-template-columns: 0px 1fr minmax(280px, calc(50vw - 340px));
    }

    /* Media Library Expanded State (wider) */
    .studio-content.media-expanded {
      grid-template-columns: minmax(280px, calc(50vw - 340px)) 1fr calc(50vw - 420px);
    }

    .studio-content.media-expanded .library-items {
      grid-template-columns: repeat(3, 1fr);
      /* 3 columns in expanded mode */
    }

    .studio-content.media-expanded .media-panel-toggle-btn {
      left: max(280px, calc(50vw - 340px));
      /* Match expanded panel width */
    }

    .studio-content.media-expanded .media-panel-toggle-btn::after {
      background: var(--aetherwave-cyan);
      opacity: 1;
      box-shadow: 0 0 4px var(--aetherwave-cyan);
    }

    /* Media expanded + settings collapsed */
    .studio-content.media-expanded.panel-collapsed {
      grid-template-columns: minmax(280px, calc(50vw - 340px)) 1fr 0px;
    }

    /* Media expanded + settings expanded */
    .studio-content.media-expanded.panel-expanded {
      grid-template-columns: minmax(280px, calc(50vw - 340px)) 1fr minmax(280px, calc(50vw - 340px));
    }

    /* ============================================
       MEDIA LIBRARY VERTICAL EXPAND (spans both rows)
       ============================================ */
    .studio-content.media-vertical-expanded .media-library {
      grid-row: 1 / 3;
    }

    /* ============================================
       SETTINGS PANEL VERTICAL EXPAND (spans both rows)
       ============================================ */
    .studio-content.panel-vertical-expanded .settings-panel {
      grid-row: 1 / 3;
    }

    /* Timeline column adjustments based on vertical expand states */
    /* Neither panel expanded - timeline takes full width */
    .studio-content:not(.media-vertical-expanded):not(.panel-vertical-expanded) .timeline-area {
      grid-column: 1 / 4;
    }

    /* Only media expanded - timeline starts at column 2 */
    .studio-content.media-vertical-expanded:not(.panel-vertical-expanded) .timeline-area {
      grid-column: 2 / 4;
    }

    /* Only settings panel expanded - timeline ends at column 3 */
    .studio-content:not(.media-vertical-expanded).panel-vertical-expanded .timeline-area {
      grid-column: 1 / 3;
    }

    /* Both panels expanded - timeline stays in middle */
    .studio-content.media-vertical-expanded.panel-vertical-expanded .timeline-area {
      grid-column: 2 / 3;
    }

    .studio-content.mixer-mode .eq-slider-track {
      height: 100px;
    }

    .studio-content.mixer-mode .eq-slider {
      height: 100px;
    }

    /* FX Sections Row - default stacked layout */
    .fx-sections-row {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .fx-sections-row .fx-section {
      margin-top: 0.5rem;
    }

    .fx-sections-row .fx-section:first-child {
      margin-top: 0;
    }

    /* Mixer Mode - Keep stacked (knobs need width) */
    .studio-content.mixer-mode .fx-sections-row {
      flex-direction: column;
      gap: 0;
      margin-top: 0.5rem;
    }

    .studio-content.mixer-mode .fx-sections-row .fx-section {
      margin-top: 0.5rem;
    }

    .studio-content.mixer-mode .fx-sections-row .fx-section:first-child {
      margin-top: 0;
    }

    /* Clip Properties Section */
    .clip-properties {
      display: none;
    }

    .clip-properties.active {
      display: block;
    }

    .clip-info {
      background: var(--bg-tertiary);
      border-radius: 8px;
      padding: 0.75rem;
      margin-bottom: 1rem;
    }

    .clip-info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.25rem 0;
      font-size: 0.85rem;
    }

    .clip-info-label {
      color: var(--text-muted);
    }

    .clip-info-value {
      color: var(--text-primary);
      font-weight: 500;
    }

    /* Streamlined Audio Controls (CapCut-style) */
    .audio-control-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border-color);
    }

    .audio-control-row:last-of-type {
      border-bottom: none;
      margin-bottom: 1rem;
    }

    /* New layout: slider full width, buttons below */
    .audio-control-section {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border-color);
    }

    .audio-control-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem 0 1rem 0;
    }

    .audio-control-buttons .fade-btn,
    .audio-control-buttons .keyframe-btn {
      flex: 1;
      justify-content: center;
    }

    .control-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      min-width: 42px;
      flex-shrink: 0;
    }

    .control-slider-group {
      flex: 1;
      min-width: 0;
    }

    .control-slider {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: var(--bg-tertiary);
      border-radius: 2px;
      outline: none;
      cursor: ew-resize;
    }

    /* Line handle for horizontal sliders - WebKit */
    .control-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 6px;
      height: 16px;
      background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
      border-radius: 1px;
      cursor: ew-resize;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: box-shadow 0.15s;
    }

    .control-slider::-webkit-slider-thumb:hover {
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    /* Line handle for horizontal sliders - Firefox */
    .control-slider::-moz-range-thumb {
      width: 6px;
      height: 16px;
      background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
      border-radius: 1px;
      cursor: ew-resize;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .control-value-group {
      display: flex;
      align-items: center;
      gap: 1px;
      background: var(--bg-tertiary);
      border-radius: 3px;
      padding: 1px;
      flex-shrink: 0;
    }

    .value-adjust-btn {
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.15s;
      padding: 0;
    }

    .value-adjust-btn:hover {
      background: var(--bg-primary);
      color: var(--aetherwave-cyan);
    }

    .value-adjust-btn i {
      font-size: 0.55rem;
    }

    .control-value {
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--aetherwave-cyan);
      min-width: 32px;
      text-align: center;
      font-family: 'Courier New', monospace;
    }

    /* Volume value is double-clickable to reset */
    #volumeValue {
      cursor: pointer;
      border-radius: 3px;
      padding: 1px 4px;
      transition: background 0.15s;
    }

    #volumeValue:hover {
      background: rgba(6, 182, 212, 0.15);
    }

    #volumeValue:active {
      background: rgba(6, 182, 212, 0.3);
    }

    .keyframe-btn {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.15s;
      flex-shrink: 0;
    }

    .keyframe-btn:hover {
      border-color: var(--aetherwave-pink);
      color: var(--aetherwave-pink);
      background: rgba(255, 46, 166, 0.1);
    }

    .keyframe-btn.active {
      background: linear-gradient(135deg, var(--aetherwave-pink), var(--aetherwave-cyan));
      border-color: transparent;
      color: white;
    }

    .keyframe-btn i {
      font-size: 0.75rem;
    }

    .fade-btn {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.5rem;
      background: transparent;
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.15s;
      flex-shrink: 0;
      font-size: 0.75rem;
    }

    .fade-btn:hover {
      border-color: var(--aetherwave-cyan);
      color: var(--aetherwave-cyan);
      background: rgba(6, 182, 212, 0.1);
    }

    .fade-btn i {
      font-size: 0.9rem;
    }

    .fade-btn-label {
      display: none;
    }

    @media (min-width: 1200px) {
      .fade-btn-label {
        display: inline;
      }
    }

    /* Volume Automation Section */
    .volume-automation-section {
      display: none;
      /* Hidden - using simplified keyframe system */
      background: var(--bg-tertiary);
      border-radius: 8px;
      padding: 0.75rem;
      margin-top: 0.75rem;
      border: 1px solid var(--border-color);
    }

    /* Edit on Timeline Toggle */
    .edit-timeline-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      margin-bottom: 0.75rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      border: 1px solid var(--border-color);
    }

    .edit-timeline-toggle:has(input:checked) {
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.4);
    }

    .opacity-automation-section .edit-timeline-toggle:has(input:checked) {
      background: rgba(236, 72, 153, 0.15);
      border-color: rgba(236, 72, 153, 0.4);
    }

    .toggle-switch {
      position: relative;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(100, 100, 100, 0.5);
      transition: 0.3s;
      border-radius: 20px;
    }

    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.3s;
      border-radius: 50%;
    }

    .toggle-switch input:checked+.toggle-slider {
      background-color: #06b6d4;
    }

    .opacity-automation-section .toggle-switch input:checked+.toggle-slider {
      background-color: #ec4899;
    }

    .toggle-switch input:checked+.toggle-slider:before {
      transform: translateX(16px);
    }

    .toggle-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .toggle-hint {
      font-size: 0.6rem;
      color: var(--text-muted);
      font-style: italic;
    }

    .automation-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    .automation-title {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .automation-title i {
      color: var(--aetherwave-pink);
    }

    .automation-controls {
      display: flex;
      gap: 0.25rem;
    }

    .automation-btn {
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 0.6rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .automation-btn:hover {
      border-color: var(--aetherwave-cyan);
      color: var(--text-primary);
    }

    .automation-btn.active {
      background: rgba(255, 255, 255, 0.10);
      border-color: var(--aetherwave-cyan);
      color: var(--aetherwave-cyan);
    }

    /* Volume Curve Canvas */
    .volume-curve-container {
      position: relative;
      height: 100px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
      border-radius: 6px;
      border: 1px solid var(--border-color);
      overflow: hidden;
      margin-bottom: 0.5rem;
    }

    .volume-curve-scroll {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .volume-curve-scroll::-webkit-scrollbar {
      height: 6px;
    }

    .volume-curve-scroll::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
    }

    .volume-curve-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 46, 166, 0.3);
      border-radius: 3px;
    }

    .volume-curve-canvas {
      height: 100%;
      cursor: crosshair;
      /* Width set dynamically based on zoom */
    }

    .volume-curve-grid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 100% 25%;
    }

    .volume-curve-labels {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      font-size: 0.55rem;
      color: var(--text-muted);
    }

    .volume-curve-labels .label-100 {
      position: absolute;
      top: 2px;
      left: 4px;
    }

    .volume-curve-labels .label-50 {
      position: absolute;
      top: 50%;
      left: 4px;
      transform: translateY(-50%);
      color: var(--aetherwave-cyan);
      opacity: 0.7;
    }

    .volume-curve-labels .label-0 {
      position: absolute;
      bottom: 2px;
      left: 4px;
    }

    /* Zoom controls for volume curve */
    .volume-curve-zoom {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      font-size: 0.7rem;
      color: var(--text-muted);
    }

    .volume-curve-zoom input[type="range"] {
      flex: 1;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .volume-curve-zoom input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: var(--aetherwave-cyan);
      border-radius: 50%;
      cursor: pointer;
    }

    .volume-curve-zoom .zoom-label {
      min-width: 40px;
      text-align: right;
    }

    /* Keyframe Presets */
    .keyframe-presets {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }

    .preset-btn {
      flex: 1;
      min-width: 60px;
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.65rem;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .preset-btn i {
      font-size: 0.9rem;
      color: var(--aetherwave-cyan);
    }

    .preset-btn:hover {
      border-color: var(--aetherwave-cyan);
      background: rgba(6, 182, 212, 0.1);
      color: var(--text-primary);
    }

    .preset-btn.active {
      border-color: var(--aetherwave-cyan);
      background: rgba(6, 182, 212, 0.2);
    }

    /* Selected Keyframe Editor */
    .selected-keyframe-editor {
      margin-bottom: 0.5rem;
    }

    .keyframe-edit-row {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 6px 8px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 46, 166, 0.3);
      border-radius: 6px;
      font-size: 0.7rem;
    }

    .keyframe-edit-row .kf-diamond {
      width: 10px;
      height: 10px;
      background: var(--aetherwave-pink);
      transform: rotate(45deg);
      flex-shrink: 0;
      box-shadow: 0 0 6px var(--aetherwave-pink);
    }

    .keyframe-edit-row label {
      color: var(--text-muted);
      font-size: 0.65rem;
    }

    .keyframe-edit-row .kf-input {
      width: 50px;
      padding: 3px 5px;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--aetherwave-cyan);
      font-family: 'SF Mono', Monaco, 'Consolas', monospace;
      font-size: 0.7rem;
      text-align: right;
    }

    .keyframe-edit-row .kf-input:focus {
      outline: none;
      border-color: var(--aetherwave-cyan);
    }

    .keyframe-edit-row .kf-unit {
      color: var(--text-muted);
      font-size: 0.6rem;
    }

    .keyframe-edit-row .kf-delete-btn {
      margin-left: auto;
      padding: 4px 6px;
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.15s;
    }

    .keyframe-edit-row .kf-delete-btn:hover {
      color: var(--error);
      background: rgba(239, 68, 68, 0.2);
      border-color: var(--error);
    }

    .keyframe-empty {
      text-align: center;
      color: var(--text-muted);
      font-size: 0.65rem;
      padding: 0.75rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      border: 1px dashed var(--border-color);
    }

    /* Interpolation Select */
    .interpolation-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.65rem;
    }

    .interpolation-row label {
      color: var(--text-muted);
    }

    .interpolation-select {
      flex: 1;
      padding: 4px 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      font-size: 0.65rem;
      cursor: pointer;
    }

    .interpolation-select:focus {
      outline: none;
      border-color: var(--aetherwave-cyan);
    }

    /* Opacity Automation Section (for video/image clips) */
    .opacity-automation-section {
      display: none;
      /* Hidden - using simplified keyframe system */
      background: var(--bg-tertiary);
      border-radius: 8px;
      padding: 0.75rem;
      margin-top: 0.75rem;
      border: 1px solid var(--border-color);
    }

    .opacity-automation-section .automation-title i {
      color: var(--aetherwave-pink);
    }

    /* Opacity Curve Canvas - pink/magenta theme */
    .opacity-curve-container {
      position: relative;
      height: 100px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
      border-radius: 6px;
      border: 1px solid var(--border-color);
      overflow: hidden;
      margin-bottom: 0.5rem;
    }

    .opacity-curve-scroll {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .opacity-curve-scroll::-webkit-scrollbar {
      height: 6px;
    }

    .opacity-curve-scroll::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
    }

    .opacity-curve-scroll::-webkit-scrollbar-thumb {
      background: rgba(236, 72, 153, 0.5);
      border-radius: 3px;
    }

    .opacity-curve-canvas {
      height: 100%;
      cursor: crosshair;
    }

    .opacity-curve-grid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 100% 25%;
    }

    .opacity-curve-labels {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      font-size: 0.55rem;
      color: var(--text-muted);
    }

    .opacity-curve-labels .label-100 {
      position: absolute;
      top: 2px;
      left: 4px;
    }

    .opacity-curve-labels .label-50 {
      position: absolute;
      top: 50%;
      left: 4px;
      transform: translateY(-50%);
      color: var(--aetherwave-pink);
      opacity: 0.7;
    }

    .opacity-curve-labels .label-0 {
      position: absolute;
      bottom: 2px;
      left: 4px;
    }

    /* Zoom controls for opacity curve */
    .opacity-curve-zoom {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      font-size: 0.7rem;
      color: var(--text-muted);
    }

    .opacity-curve-zoom input[type="range"] {
      flex: 1;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .opacity-curve-zoom input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: var(--aetherwave-pink);
      border-radius: 50%;
      cursor: pointer;
    }

    .opacity-curve-zoom .zoom-label {
      min-width: 40px;
      text-align: right;
    }

    /* Opacity Keyframe Presets - pink theme */
    .opacity-keyframe-presets {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }

    .opacity-keyframe-presets .preset-btn i {
      color: var(--aetherwave-pink);
    }

    .opacity-keyframe-presets .preset-btn:hover {
      border-color: var(--aetherwave-pink);
      background: rgba(236, 72, 153, 0.1);
    }

    .opacity-keyframe-presets .preset-btn.active {
      border-color: var(--aetherwave-pink);
      background: rgba(236, 72, 153, 0.2);
    }

    /* Opacity Keyframe List */
    .opacity-keyframe-list {
      max-height: 120px;
      overflow-y: auto;
      margin-bottom: 0.5rem;
    }

    .opacity-keyframe-list .keyframe-item .kf-diamond {
      background: var(--aetherwave-pink);
    }

    .opacity-keyframe-list .keyframe-item .kf-time {
      color: var(--aetherwave-pink);
    }

    .property-section {
      margin-bottom: 1rem;
    }

    .property-section-title {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .property-section-title i {
      font-size: 0.8rem;
      color: var(--aetherwave-cyan);
    }

    /* Legacy volume control - kept for compatibility */
    .volume-control {
      background: var(--bg-tertiary);
      border-radius: 8px;
      padding: 1rem;
      display: none;
    }

    .volume-slider-container {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .volume-icon {
      width: 24px;
      color: var(--text-secondary);
      font-size: 1.1rem;
    }

    .volume-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      background: var(--bg-primary);
      border-radius: 3px;
      outline: none;
    }

    .volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(255, 46, 166, 0.25);
      transition: transform 0.2s;
    }

    .volume-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }

    .volume-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      border-radius: 50%;
      cursor: pointer;
      border: none;
      box-shadow: 0 2px 6px rgba(255, 46, 166, 0.25);
    }

    .volume-value {
      min-width: 40px;
      text-align: right;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* Premium EQ Section - High-End Receiver Style */
    .eq-section {
      background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(30, 30, 40, 0.8) 100%);
      border-radius: 8px;
      padding: 0.5rem;
      border: 1px solid var(--border-color);
    }

    .eq-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0rem;
      padding-bottom: 0rem;
      border-bottom: 1px solid var(--border-color);
    }

    .eq-title {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .eq-reset-btn {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.15s;
    }

    .eq-reset-btn:hover {
      color: var(--aetherwave-cyan);
      background: rgba(6, 182, 212, 0.1);
    }

    .eq-reset-btn i {
      font-size: 0.8rem;
    }

    /* Vertical EQ Faders - Receiver Style */
    .eq-faders {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      gap: 0.5rem;
      padding: 0.5rem 0.25rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      margin-top: 0.25rem;
    }

    /* Individual Fader Channel */
    .eq-fader {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      flex: 1;
      max-width: 36px;
    }

    .eq-db-value {
      font-size: 0.6rem;
      font-weight: 600;
      font-family: 'Courier New', monospace;
      color: var(--text-muted);
      transition: color 0.15s;
      min-width: 24px;
      text-align: center;
      padding: 2px 4px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
    }

    .eq-db-value.positive {
      color: var(--aetherwave-cyan);
    }

    .eq-db-value.negative {
      color: var(--aetherwave-pink);
    }

    /* Vertical Slider Track - Minimalist Line */
    .eq-slider-track {
      position: relative;
      width: 4px;
      height: 70px;
      background: var(--bg-tertiary);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Hidden native input for vertical */
    .eq-slider {
      -webkit-appearance: none;
      appearance: none;
      writing-mode: vertical-lr;
      direction: rtl;
      width: 20px;
      height: 70px;
      background: transparent;
      outline: none;
      cursor: ns-resize;
      position: absolute;
      margin: 0;
      padding: 0;
    }

    /* Hide default track - WebKit */
    .eq-slider::-webkit-slider-runnable-track {
      width: 4px;
      height: 70px;
      background: transparent;
      border: none;
      border-radius: 2px;
    }

    /* Line handle - WebKit (matching control-slider style) */
    .eq-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 6px;
      background: linear-gradient(90deg, #fff 0%, #e0e0e0 100%);
      border-radius: 1px;
      cursor: ns-resize;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: box-shadow 0.15s;
      margin-left: -6px;
    }

    .eq-slider::-webkit-slider-thumb:hover {
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    /* Hide default track - Firefox */
    .eq-slider::-moz-range-track {
      width: 4px;
      height: 70px;
      background: transparent;
      border: none;
      border-radius: 2px;
    }

    /* Line handle - Firefox (matching control-slider style) */
    .eq-slider::-moz-range-thumb {
      width: 16px;
      height: 6px;
      background: linear-gradient(90deg, #fff 0%, #e0e0e0 100%);
      border-radius: 1px;
      cursor: ns-resize;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    /* Band Label */
    .eq-band-label {
      font-size: 0.6rem;
      font-weight: 500;
      color: var(--text-secondary);
      text-align: center;
      line-height: 1.2;
    }

    .eq-freq {
      display: block;
      font-size: 0.5rem;
      color: var(--text-muted);
      font-family: 'Courier New', monospace;
      margin-top: 1px;
    }

    /* Filter value display */
    .filter-value {
      min-width: 32px;
      text-align: right;
      font-family: 'Courier New', monospace;
      font-size: 0.7rem;
      color: var(--text-muted);
    }

    .filter-value.positive {
      color: var(--aetherwave-cyan);
    }

    .filter-value.negative {
      color: var(--aetherwave-pink);
    }

    /* Audio Effects Sections (Compressor, Reverb) */
    .fx-section {
      background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(30, 30, 40, 0.8) 100%);
      border-radius: 8px;
      padding: 0.75rem;
      border: 1px solid var(--border-color);
      margin-top: 0.5rem;
    }

    .fx-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border-color);
    }

    .fx-title {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .fx-title i {
      font-size: 0.85rem;
      color: var(--aetherwave-cyan);
    }

    .fx-bypass-btn {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      padding: 3px 8px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 0.6rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .fx-bypass-btn:hover {
      border-color: var(--aetherwave-cyan);
      color: var(--aetherwave-cyan);
    }

    .fx-bypass-btn.active {
      background: rgba(6, 182, 212, 0.2);
      border-color: var(--aetherwave-cyan);
      color: var(--aetherwave-cyan);
    }

    .fx-bypass-btn i {
      font-size: 0.7rem;
    }

    /* Knob-style Controls */
    .fx-knobs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      justify-items: center;
    }

    .fx-knob-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
    }

    .fx-knob {
      position: relative;
      width: 44px;
      height: 44px;
      cursor: grab;
    }

    .fx-knob:active {
      cursor: grabbing;
    }

    .fx-knob-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(145deg, #1a1a24 0%, #2a2a38 100%);
      border: 2px solid var(--border-color);
      box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .fx-knob-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 14px;
      background: linear-gradient(180deg, var(--aetherwave-cyan) 0%, var(--aetherwave-cyan) 100%);
      border-radius: 1px;
      transform-origin: bottom center;
      transform: translateX(-50%) translateY(-100%);
      box-shadow: 0 0 6px var(--aetherwave-cyan);
      transition: box-shadow 0.15s;
    }

    .fx-knob:hover .fx-knob-indicator {
      box-shadow: 0 0 10px var(--aetherwave-cyan), 0 0 20px rgba(6, 182, 212, 0.3);
    }

    .fx-knob-track {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .fx-knob-track::before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.15);
      clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
      transform: rotate(-135deg);
    }

    .fx-knob-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #3a3a48, #1a1a24);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .fx-knob-label {
      font-size: 0.6rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-align: center;
      white-space: nowrap;
      transition: text-shadow 0.3s ease, color 0.3s ease;
    }

    .fx-knob-label.active {
      color: var(--aetherwave-cyan);
      text-shadow: 0 0 8px var(--aetherwave-cyan), 0 0 16px var(--aetherwave-cyan);
    }

    .fx-knob-value {
      font-size: 0.65rem;
      color: var(--aetherwave-cyan);
      font-weight: 600;
      font-family: 'SF Mono', Monaco, 'Consolas', monospace;
      min-width: 36px;
      text-align: center;
      transition: text-shadow 0.3s ease;
    }

    .fx-knob-value.active {
      text-shadow: 0 0 8px var(--aetherwave-cyan), 0 0 16px var(--aetherwave-cyan);
    }

    /* Hidden input for knob */
    .fx-knob input[type="range"] {
      display: none;
    }

    /* Reverb Type Select - compact for knob row */
    .fx-knob-select {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(145deg, #1a1a24 0%, #2a2a38 100%);
      border: 2px solid var(--border-color);
      color: var(--text-primary);
      font-size: 0.55rem;
      text-align: center;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      padding: 0;
      box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
      transition: all 0.15s;
    }

    .fx-knob-select:hover {
      border-color: var(--aetherwave-cyan);
      box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(255, 255, 255, 0.15);
    }

    .fx-knob-select:focus {
      outline: none;
      border-color: var(--aetherwave-cyan);
    }

    /* Legacy slider styles kept for compatibility */
    .fx-controls {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .fx-control-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .fx-control-label {
      font-size: 0.65rem;
      color: var(--text-muted);
      min-width: 55px;
      flex-shrink: 0;
    }

    .fx-slider-group {
      flex: 1;
      min-width: 0;
    }

    .fx-slider {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: var(--bg-tertiary);
      border-radius: 2px;
      outline: none;
      cursor: ew-resize;
    }

    .fx-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 6px;
      height: 16px;
      background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
      border-radius: 1px;
      cursor: ew-resize;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: box-shadow 0.15s;
    }

    .fx-slider::-webkit-slider-thumb:hover {
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    .fx-slider::-moz-range-thumb {
      width: 6px;
      height: 16px;
      background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
      border-radius: 1px;
      cursor: ew-resize;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .fx-value {
      min-width: 38px;
      text-align: right;
      font-family: 'Courier New', monospace;
      font-size: 0.65rem;
      color: var(--text-muted);
      background: rgba(0, 0, 0, 0.3);
      padding: 2px 4px;
      border-radius: 3px;
    }

    /* Reverb preset selector */
    .fx-preset-select {
      flex: 1;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      font-size: 0.65rem;
      padding: 4px 8px;
      cursor: pointer;
      outline: none;
    }

    .fx-preset-select:focus {
      border-color: var(--aetherwave-cyan);
    }

    .fx-preset-select option {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    /* ========================================
       EFFECTS RACK - 19" Rack Mount System
       Virtual audio rack with drag-drop slots
       ======================================== */

    .effects-rack {
      background: linear-gradient(180deg, #12121a 0%, #0a0a10 100%);
      border: 2px solid #2a2a35;
      border-radius: 8px;
      margin-top: 0.75rem;
      box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4);
      overflow: hidden;
    }

    .rack-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.6rem 0.75rem;
      background: linear-gradient(180deg, #1e1e28 0%, #16161d 100%);
      border-bottom: 1px solid #3a3a48;
    }

    .rack-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .rack-title-icon {
      font-size: 1rem;
      color: var(--aetherwave-cyan);
    }

    .rack-controls {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .rack-preset-select {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 0.65rem;
      padding: 4px 8px;
      cursor: pointer;
      outline: none;
      max-width: 100px;
    }

    .rack-preset-select:hover,
    .rack-preset-select:focus {
      border-color: var(--aetherwave-cyan);
      color: var(--text-primary);
    }

    .rack-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .rack-btn:hover {
      background: rgba(255, 255, 255, 0.10);
      border-color: var(--aetherwave-cyan);
      color: var(--aetherwave-cyan);
    }

    /* Rack Slots Container */
    .rack-slots {
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-height: 60px;
      position: relative;
    }

    .rack-slots-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      color: var(--text-muted);
      font-size: 0.7rem;
      text-align: center;
      gap: 0.5rem;
    }

    .rack-slots-empty i {
      font-size: 1.5rem;
      color: var(--aetherwave-cyan);
      opacity: 0.5;
    }

    .rack-slots-empty span {
      opacity: 0.7;
    }

    /* Individual Rack Slot - 19" Unit Style */
    .rack-slot {
      background: linear-gradient(180deg, #252532 0%, #1a1a24 100%);
      border: 1px solid #3a3a48;
      border-radius: 6px;
      position: relative;
      transition: all 0.15s ease;
      cursor: default;
    }

    .rack-slot::before,
    .rack-slot::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      background: radial-gradient(circle at 30% 30%, #4a4a58, #2a2a35);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #3a3a48;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .rack-slot::before {
      left: 6px;
    }

    .rack-slot::after {
      right: 6px;
    }

    .rack-slot.dragging {
      opacity: 0.5;
      transform: scale(0.98);
      border: 2px dashed var(--aetherwave-cyan);
    }

    .rack-slot.drag-over {
      border-color: var(--aetherwave-cyan);
      background: linear-gradient(180deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
    }

    .rack-slot.disabled {
      opacity: 0.5;
    }

    .rack-slot.disabled .slot-content {
      filter: grayscale(0.5);
    }

    /* Slot Header */
    .slot-header {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.5rem;
      padding-left: 18px;
      padding-right: 18px;
      border-bottom: 1px solid transparent;
    }

    .rack-slot.expanded .slot-header {
      border-bottom-color: #3a3a48;
    }

    .slot-drag-handle {
      cursor: grab;
      color: var(--text-muted);
      font-size: 0.85rem;
      opacity: 0.5;
      transition: opacity 0.15s;
    }

    .slot-drag-handle:hover {
      opacity: 1;
      color: var(--text-primary);
    }

    .slot-drag-handle:active {
      cursor: grabbing;
    }

    .slot-power-btn {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid var(--border-color);
      border-radius: 50%;
      color: var(--text-muted);
      font-size: 0.6rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .slot-power-btn.active {
      background: rgba(34, 197, 94, 0.2);
      border-color: #22c55e;
      color: #22c55e;
      box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
    }

    .slot-power-btn:hover:not(.active) {
      border-color: var(--text-muted);
      color: var(--text-primary);
    }

    .slot-icon {
      font-size: 0.9rem;
      min-width: 20px;
      text-align: center;
    }

    .slot-name {
      flex: 1;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .slot-preset-badge {
      font-size: 0.55rem;
      padding: 2px 5px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 46, 166, 0.25);
      border-radius: 3px;
      color: var(--aetherwave-cyan);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .slot-expand-btn {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 0.7rem;
      cursor: pointer;
      transition: all 0.15s;
      border-radius: 3px;
    }

    .slot-expand-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
    }

    .rack-slot.expanded .slot-expand-btn {
      transform: rotate(180deg);
    }

    .slot-remove-btn {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 0.65rem;
      cursor: pointer;
      transition: all 0.15s;
      border-radius: 3px;
      opacity: 0;
    }

    .rack-slot:hover .slot-remove-btn {
      opacity: 1;
    }

    .slot-remove-btn:hover {
      background: rgba(239, 68, 68, 0.2);
      color: var(--error);
    }

    /* Slot Parameters Panel */
    .slot-params {
      display: none;
      padding: 0.6rem;
      padding-left: 18px;
      padding-right: 18px;
      background: rgba(0, 0, 0, 0.2);
    }

    .rack-slot.expanded .slot-params {
      display: block;
    }

    .slot-params-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
      gap: 0.5rem;
    }

    .slot-param {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
    }

    .slot-param-knob {
      position: relative;
      width: 36px;
      height: 36px;
      cursor: grab;
    }

    .slot-param-knob:active {
      cursor: grabbing;
    }

    .slot-param-knob-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(145deg, #1a1a24 0%, #2a2a38 100%);
      border: 2px solid var(--border-color);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .slot-param-knob-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 10px;
      background: linear-gradient(180deg, var(--aetherwave-cyan) 0%, var(--aetherwave-cyan) 100%);
      border-radius: 1px;
      transform-origin: bottom center;
      transform: translateX(-50%) translateY(-100%);
      box-shadow: 0 0 4px var(--aetherwave-cyan);
    }

    .slot-param-knob input[type="range"] {
      display: none;
    }

    .slot-param-label {
      font-size: 0.55rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      text-align: center;
    }

    .slot-param-value {
      font-size: 0.6rem;
      color: var(--aetherwave-cyan);
      font-weight: 600;
      font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    }

    /* Slot Preset Selector */
    .slot-preset-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    }

    .slot-preset-label {
      font-size: 0.6rem;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .slot-preset-select {
      flex: 1;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      font-size: 0.65rem;
      padding: 3px 6px;
      cursor: pointer;
      outline: none;
    }

    .slot-preset-select:hover,
    .slot-preset-select:focus {
      border-color: var(--aetherwave-cyan);
    }

    /* Add Effect Button */
    .rack-add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin: 0.5rem;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.3);
      border: 1px dashed var(--border-color);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 0.7rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .rack-add-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--aetherwave-cyan);
      border-style: solid;
      color: var(--aetherwave-cyan);
    }

    .rack-add-btn i {
      font-size: 0.85rem;
    }

    /* Signal Flow Indicator */
    .rack-signal-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.3);
      border-top: 1px solid #2a2a35;
      font-size: 0.6rem;
      color: var(--text-muted);
    }

    .signal-flow-item {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .signal-flow-item.active {
      color: var(--aetherwave-cyan);
    }

    .signal-flow-arrow {
      color: var(--text-muted);
      opacity: 0.5;
    }

    /* Effect Browser Modal */
    .effect-browser-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      z-index: 10000;
      display: none;
      justify-content: center;
      align-items: center;
      padding: 2rem;
    }

    .effect-browser-modal.active {
      display: flex;
    }

    .effect-browser-content {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      width: 100%;
      max-width: 600px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .effect-browser-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border-bottom: 1px solid var(--border-color);
    }

    .effect-browser-search {
      flex: 1;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.6rem 1rem;
      color: var(--text-primary);
      font-size: 0.85rem;
      outline: none;
    }

    .effect-browser-search:focus {
      border-color: var(--aetherwave-cyan);
    }

    .effect-browser-search::placeholder {
      color: var(--text-muted);
    }

    .effect-browser-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .effect-browser-close:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: var(--error);
      color: var(--error);
    }

    .effect-browser-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      background: rgba(0, 0, 0, 0.2);
    }

    .effect-category-btn {
      padding: 0.4rem 0.75rem;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      color: var(--text-muted);
      font-size: 0.7rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .effect-category-btn:hover {
      background: rgba(255, 255, 255, 0.10);
      border-color: var(--aetherwave-cyan);
      color: var(--text-primary);
    }

    .effect-category-btn.active {
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      border-color: transparent;
      color: white;
    }

    .effect-browser-list {
      flex: 1;
      overflow-y: auto;
      padding: 0.75rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
      align-content: start;
    }

    .effect-browser-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.6rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .effect-browser-item:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--aetherwave-cyan);
      transform: translateY(-1px);
    }

    .effect-browser-item.pro-only {
      position: relative;
    }

    .effect-browser-item.pro-only::after {
      content: 'PRO';
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 0.5rem;
      padding: 1px 4px;
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      border-radius: 3px;
      color: white;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .effect-item-icon {
      font-size: 1.25rem;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 6px;
    }

    .effect-item-info {
      flex: 1;
      min-width: 0;
    }

    .effect-item-name {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .effect-item-desc {
      font-size: 0.6rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .effect-item-category {
      font-size: 0.55rem;
      padding: 2px 5px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    /* Pro Effects Lock Overlay */
    .effect-browser-item.pro-only.locked {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .effect-browser-item.pro-only.locked:hover {
      transform: none;
      border-color: var(--border-color);
      background: var(--bg-tertiary);
    }

    .effect-browser-footer {
      padding: 0.75rem 1rem;
      border-top: 1px solid var(--border-color);
      background: rgba(0, 0, 0, 0.2);
    }

    .effect-guide-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.6rem 1rem;
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(236, 72, 153, 0.1));
      border: 1px solid rgba(6, 182, 212, 0.3);
      border-radius: 8px;
      color: var(--aetherwave-cyan);
      font-size: 0.75rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .effect-guide-link:hover {
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(236, 72, 153, 0.15));
      border-color: var(--aetherwave-cyan);
      transform: translateY(-1px);
    }

    .effect-guide-link i {
      font-size: 0.9rem;
    }

    .effect-guide-link i:last-child {
      font-size: 0.7rem;
      opacity: 0.7;
    }

    /* Library Panel (Tabbed) */
    .library-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0.5rem;
      gap: 0.5rem;
    }

    .library-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 0.85rem;
      font-weight: 500;
      flex-shrink: 0;
    }

    .library-header i {
      color: var(--aetherwave-cyan);
    }

    .library-tab-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex: 1;
      overflow-y: auto;
    }

    .transition-direction-toggle {
      display: flex;
      gap: 0.25rem;
      background: rgba(0, 0, 0, 0.3);
      padding: 3px;
      border-radius: 6px;
    }

    .direction-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 0.4rem 0.5rem;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .direction-btn i {
      font-size: 0.9rem;
    }

    .direction-btn:hover {
      color: var(--text-primary);
    }

    .direction-btn.active {
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      color: white;
      box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
    }

    .transition-duration-control {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
    }

    .duration-label {
      font-size: 0.7rem;
      color: var(--text-muted);
      min-width: 50px;
    }

    .transition-duration-slider {
      flex: 1;
      height: 4px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    .transition-duration-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: var(--aetherwave-cyan);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
    }

    .duration-value {
      font-size: 0.75rem;
      color: var(--aetherwave-cyan);
      font-family: 'Courier New', monospace;
      min-width: 36px;
      text-align: right;
    }

    /* Transitions Grid */
    .transitions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      flex: 1;
      overflow-y: auto;
      padding: 0.25rem;
    }

    .transition-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 4px;
      background: rgba(30, 30, 40, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
      aspect-ratio: 1;
    }

    .transition-card:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 46, 166, 0.25);
      color: var(--text-primary);
      transform: scale(1.02);
    }

    .transition-card.active {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 46, 166, 0.25));
      border-color: var(--aetherwave-cyan);
      color: white;
      box-shadow: 0 0 12px rgba(255, 46, 166, 0.25);
    }

    .transition-preview {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .transition-preview i {
      font-size: 1.2rem;
      color: var(--text-muted);
      transition: color 0.2s;
    }

    .transition-card:hover .transition-preview i,
    .transition-card.active .transition-preview i {
      color: var(--aetherwave-cyan);
    }

    .transition-name {
      font-size: 0.6rem;
      text-align: center;
      line-height: 1.1;
      white-space: nowrap;
    }

    /* Transition Preview Animations */
    .fade-preview .preview-gradient {
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, var(--aetherwave-cyan), transparent);
      animation: fadePreview 2s infinite;
    }

    @keyframes fadePreview {

      0%,
      100% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }
    }

    .crossfade-preview {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .crossfade-preview .preview-box {
      position: absolute;
      width: 60%;
      height: 60%;
      border-radius: 2px;
    }

    .crossfade-preview .preview-box.a {
      background: var(--aetherwave-cyan);
      animation: crossfadeA 2s infinite;
    }

    .crossfade-preview .preview-box.b {
      background: var(--aetherwave-pink);
      animation: crossfadeB 2s infinite;
    }

    @keyframes crossfadeA {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    @keyframes crossfadeB {

      0%,
      100% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }
    }

    .wipe-preview {
      background: rgba(255, 255, 255, 0.15);
    }

    .wipe-preview .wipe-bar {
      position: absolute;
      background: var(--aetherwave-cyan);
    }

    .wipe-right .wipe-bar {
      width: 3px;
      height: 100%;
      left: 0;
      animation: wipeRight 1.5s infinite;
    }

    .wipe-left .wipe-bar {
      width: 3px;
      height: 100%;
      right: 0;
      animation: wipeLeft 1.5s infinite;
    }

    .wipe-up .wipe-bar {
      width: 100%;
      height: 3px;
      bottom: 0;
      animation: wipeUp 1.5s infinite;
    }

    .wipe-down .wipe-bar {
      width: 100%;
      height: 3px;
      top: 0;
      animation: wipeDown 1.5s infinite;
    }

    @keyframes wipeRight {
      0% {
        left: 0;
      }

      100% {
        left: 100%;
      }
    }

    @keyframes wipeLeft {
      0% {
        right: 0;
      }

      100% {
        right: 100%;
      }
    }

    @keyframes wipeUp {
      0% {
        bottom: 0;
      }

      100% {
        bottom: 100%;
      }
    }

    @keyframes wipeDown {
      0% {
        top: 0;
      }

      100% {
        top: 100%;
      }
    }

    .spin-preview i {
      animation: spinPreview 2s linear infinite;
    }

    @keyframes spinPreview {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .flip-preview i {
      animation: flipPreview 2s ease-in-out infinite;
    }

    @keyframes flipPreview {

      0%,
      100% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(180deg);
      }
    }

    .zoom-preview i {
      animation: zoomPreview 1.5s ease-in-out infinite;
    }

    @keyframes zoomPreview {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(0.5);
      }
    }

    .blur-preview {
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      animation: blurPreview 2s ease-in-out infinite;
    }

    @keyframes blurPreview {

      0%,
      100% {
        filter: blur(0);
      }

      50% {
        filter: blur(4px);
      }
    }

    .transition-drag-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 0.65rem;
      text-align: center;
    }

    .transition-drag-hint i {
      color: var(--aetherwave-cyan);
      font-size: 1rem;
    }

    /* Transition card dragging */
    .transition-card.dragging {
      opacity: 0.5;
      transform: scale(0.95);
    }

    .transition-card[draggable="true"] {
      cursor: grab;
    }

    .transition-card[draggable="true"]:active {
      cursor: grabbing;
    }

    /* Junction transition markers */
    .junction-marker {
      position: absolute;
      width: 24px;
      height: 100%;
      top: 0;
      transform: translateX(-50%);
      z-index: 150;
      /* Above selected clips (z-index: 100) */
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: none;
      /* Let clicks pass through to clips/resize handles */
    }

    .junction-marker .junction-icon {
      pointer-events: auto;
      /* Only the icon itself captures clicks */
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 46, 166, 0.6), rgba(236, 72, 153, 0.9));
      border: 3px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 2px 12px rgba(255, 46, 166, 0.35), 0 0 20px rgba(236, 72, 153, 0.4);
    }

    .junction-marker .junction-icon i {
      font-size: 14px;
      color: white;
    }

    .junction-marker:hover .junction-icon {
      transform: scale(1.2);
      border-color: var(--aetherwave-cyan);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
    }

    .junction-marker:hover .junction-icon i {
      color: var(--aetherwave-cyan);
    }

    .junction-marker.has-transition .junction-icon {
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      border-color: var(--aetherwave-pink);
    }

    .junction-marker.has-transition .junction-icon i {
      color: white;
    }

    .junction-marker.drag-over .junction-icon {
      transform: scale(1.4);
      border-color: var(--aetherwave-cyan);
      background: var(--aetherwave-cyan);
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.8);
    }

    .junction-marker.drag-over .junction-icon i {
      color: white;
    }

    /* Junction tooltip on hover */
    .junction-marker .junction-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(20, 20, 30, 0.95);
      border: 1px solid var(--aetherwave-cyan);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 0.7rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      pointer-events: none;
      z-index: 100;
    }

    .junction-marker:hover .junction-tooltip {
      opacity: 1;
      visibility: visible;
    }

    .junction-tooltip .transition-type {
      color: var(--aetherwave-cyan);
      font-weight: 600;
    }

    .junction-tooltip .transition-duration {
      color: var(--text-muted);
      font-size: 0.65rem;
    }

    /* Transition overlay on clips when junction has transition */
    .timeline-clip .transition-indicator {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 30px;
      pointer-events: none;
      z-index: 10;
    }

    .timeline-clip .transition-indicator.left {
      left: 0;
      background: linear-gradient(90deg, rgba(255, 46, 166, 0.25), transparent);
      border-left: 2px solid var(--aetherwave-cyan);
    }

    .timeline-clip .transition-indicator.right {
      right: 0;
      background: linear-gradient(-90deg, rgba(255, 46, 166, 0.4), transparent);
      border-right: 2px solid var(--aetherwave-pink);
    }

    /* Clip selected state on timeline */
    .timeline-clip.selected {
      outline: 2px solid var(--aetherwave-pink);
      outline-offset: 1px;
      box-shadow: 0 0 12px rgba(255, 46, 166, 0.4);
    }

    /* Timeline Area - grid positioning handled by vertical expand rules in lines 1125-1142 */
    .timeline-area {
      grid-row: 2;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .timeline-controls {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      /* Prevent controls from shrinking */
      position: relative;
      min-height: 44px;
    }

    /* Transport controls - fixed position centered on screen */
    .timeline-controls .transport-controls {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
    }

    /* No spacer needed - play button positioned absolutely */
    .play-btn-spacer {
      display: none;
    }

    /* Transport controls - centered in timeline controls bar */
    .transport-controls {
      display: flex;
      align-items: center;
      gap: 3px;
      background: var(--bg-tertiary);
      border-radius: 6px;
      padding: 6px 10px;
      border: 1px solid var(--border-color);
    }

    .transport-btn {
      width: 32px;
      height: 33px;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      border-radius: 4px;
      font-size: 1rem;
    }

    .transport-btn:hover:not(:disabled) {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.08);
    }

    .transport-btn:disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }

    .transport-btn.active {
      color: var(--aetherwave-cyan);
    }

    /* Primary transport buttons (stop/play) - cyan accent */
    .transport-btn.primary {
      color: var(--aetherwave-cyan);
    }

    .transport-btn.primary:hover {
      color: #fff;
      background: var(--aetherwave-cyan);
    }

    .transport-btn.primary.playing {
      background: rgba(34, 211, 238, 0.15);
    }

    .transport-btn.active,
    #snapshotBtn.active {
      background: var(--aetherwave-cyan) !important;
      color: var(--bg-primary) !important;
    }

    /* Scrubbing state for FFW/REW buttons */
    .transport-btn.scrubbing {
      background: rgba(236, 72, 153, 0.3);
      color: #ec4899;
    }

    /* Follow playhead toggle */
    .follow-playhead-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.15s;
    }

    .follow-playhead-toggle:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .follow-playhead-toggle.active {
      color: var(--aetherwave-cyan);
      background: rgba(6, 182, 212, 0.15);
    }

    .follow-playhead-toggle input {
      display: none;
    }

    .follow-playhead-toggle .icon {
      font-size: 14px;
    }

    /* Separator between button groups */
    .transport-separator {
      width: 1px;
      height: 22px;
      background: var(--border-color);
      margin: 0 4px;
    }

    .timecode {
      font-family: 'Courier New', monospace;
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-left: 6px;
      min-width: 55px;
    }

    .zoom-controls {
      position: absolute;
      right: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .zoom-btn {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .zoom-btn:hover {
      border-color: var(--aetherwave-cyan);
      color: var(--text-primary);
    }

    .timeline-tracks {
      flex: 1;
      display: flex;
      position: relative;
      overflow: hidden;
    }

    .track-labels-column {
      position: sticky;
      left: 0;
      z-index: 20;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .track-labels-spacer {
      width: 110px;
      /* Match track-label width */
      height: 24px;
      /* Match ruler height */
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
    }

    .tracks-scroll-container {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      /* Required for playhead positioning */
    }

    .timeline-ruler {
      height: 24px;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 10;
      font-size: 0.75rem;
      color: var(--text-muted);
      min-width: 100%;
      position: relative;
    }

    .timeline-marker {
      position: absolute;
      height: 100%;
      display: flex;
      align-items: flex-end;
      padding-bottom: 2px;
      color: var(--text-muted);
      font-size: 0.7rem;
      font-family: 'Courier New', monospace;
      white-space: nowrap;
    }

    .timeline-marker.major {
      font-weight: 600;
      color: var(--text-secondary);
    }

    /* User-placed timeline markers */
    .timeline-user-marker {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 150;
      cursor: pointer;
    }

    .timeline-user-marker .marker-flag {
      position: absolute;
      top: 0;
      left: -1px;
      font-size: 9px;
      font-weight: 600;
      color: #000;
      padding: 1px 4px;
      border-radius: 0 3px 3px 0;
      white-space: nowrap;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 14px;
      min-width: 6px;
      min-height: 14px;
    }

    .timeline-user-marker .marker-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 3000px;
      opacity: 0.5;
      pointer-events: none;
    }

    .timeline-user-marker:hover .marker-line {
      opacity: 0.9;
    }

    .timeline-user-marker:hover .marker-flag {
      filter: brightness(1.2);
    }

    .marker-rename-input {
      background: var(--bg-primary);
      border: 1px solid var(--aetherwave-cyan);
      color: var(--text-primary);
      font-size: 9px;
      padding: 0 2px;
      width: 70px;
      outline: none;
      border-radius: 2px;
    }

    .playhead {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--aetherwave-cyan);
      z-index: 200;
      pointer-events: none;
    }

    .playhead::before {
      content: '';
      position: absolute;
      top: -6px;
      left: -6px;
      width: 14px;
      height: 14px;
      background: var(--aetherwave-cyan);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
      cursor: grab;
      pointer-events: all;
    }

    .playhead::before:active {
      cursor: grabbing;
    }

    .timeline-tick {
      position: absolute;
      bottom: 0;
      width: 1px;
      background: var(--border-color);
    }

    .timeline-tick.minor {
      height: 6px;
      background: rgba(160, 160, 176, 0.2);
    }

    .timeline-tick.medium {
      height: 10px;
      background: rgba(160, 160, 176, 0.3);
    }

    .timeline-tick.major {
      height: 16px;
      background: rgba(160, 160, 176, 0.5);
    }

    .track {
      height: 60px;
      box-sizing: border-box;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      position: relative;
      display: flex;
      align-items: center;
    }

    /* Last track (audio) - no border, ensure visible above viewport bottom */
    #audioTrack {
      border-bottom: none;
      margin-bottom: 10px;
    }

    /* Locked track state */
    .track.locked {
      background: rgba(255, 255, 255, 0.02);
    }

    .track.locked .timeline-clip {
      pointer-events: none;
      opacity: 0.7;
      cursor: not-allowed;
    }

    .track.locked::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(45deg,
          transparent,
          transparent 10px,
          rgba(255, 255, 255, 0.02) 10px,
          rgba(255, 255, 255, 0.02) 20px);
      pointer-events: none;
      z-index: 5;
    }

    /* Hidden track state */
    .track.hidden-track .timeline-clip {
      opacity: 0.2;
    }

    .track-label {
      width: 110px;
      height: 60px;
      box-sizing: border-box;
      background: var(--bg-secondary);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      padding: 0 6px;
      border-bottom: 1px solid var(--border-color);
    }

    /* Audio track label - no bottom border, matches audio track */
    .track-label.audio-label {
      border-bottom: none;
    }

    .track-type-icon {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    .track-controls {
      display: grid;
      /* 3 columns so tracks with up to 6 controls (lock/visibility/mute/
         magnetic/push) fit in 2 rows without overflowing the 60px label. */
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      flex-shrink: 0;
    }

    /* Audio labels also host a VU meter, so keep their 4 controls in 2 columns
       to leave room for it (video/overlay have 5 controls -> 3-col default). */
    .track-label.audio-label .track-controls {
      grid-template-columns: repeat(2, 1fr);
    }

    .track-control-btn {
      width: 20px;
      height: 20px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      padding: 0;
      border-radius: 3px;
      transition: all 0.15s ease;
    }

    .track-control-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: var(--text-primary);
    }

    .track-controls-divider {
      width: 1px;
      height: 12px;
      background: var(--border-color);
      margin: 0 2px;
    }

    /* Per-lane live VU meter (Audio 1 / Audio 2) */
    .lane-vu {
      width: 7px;
      height: 40px;
      flex-shrink: 0;
      align-self: center;
      margin-left: auto;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .lane-vu-fill {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        #22c55e 0%, #22c55e 55%, #f59e0b 80%, #ef4444 100%);
      clip-path: inset(100% 0 0 0);
      transition: clip-path 0.05s linear;
    }

    .track-control-btn.active {
      color: var(--aetherwave-pink);
    }

    .track-control-btn.magnetic-toggle.active {
      color: var(--aetherwave-cyan);
      text-shadow: 0 0 6px rgba(6, 182, 212, 0.5);
    }

    /* Overlay track (Image) - Pink */
    .track-label.video-overlay-label {
      border-left: 3px solid var(--aetherwave-pink);
    }

    .track-label.video-overlay-label .track-type-icon {
      background: rgba(255, 46, 166, 0.2);
      color: var(--aetherwave-pink);
    }

    /* Main Video track - Cyan */
    .track-label.video-label {
      border-left: 3px solid var(--aetherwave-cyan);
    }

    .track-label.video-label .track-type-icon {
      background: rgba(6, 182, 212, 0.2);
      color: var(--aetherwave-cyan);
    }

    .track.overlay-track {
      background: rgba(255, 46, 166, 0.05);
      border-bottom: 1px dashed rgba(255, 46, 166, 0.3);
    }

    .track.overlay-track .empty-track.overlay-hint {
      color: var(--aetherwave-pink);
      opacity: 0.6;
    }

    /* Text overlay track - Gold/Amber - shorter height */
    .track.text-track {
      height: 40px;
      background: rgba(245, 158, 11, 0.05);
      border-bottom: 1px dashed rgba(245, 158, 11, 0.3);
    }

    .track.text-track .track-content {
      min-height: 40px;
    }

    .track.text-track .empty-track {
      color: var(--aetherwave-gold);
      opacity: 0.6;
      font-size: 0.75rem;
    }

    .track-label.text-label {
      height: 40px;
      border-left: 3px solid var(--aetherwave-gold);
    }

    .track-label.text-label .track-type-icon {
      background: rgba(245, 158, 11, 0.2);
      color: var(--aetherwave-gold);
    }

    /* Text clip styling (Gold/Amber) */
    .timeline-clip.text-clip {
      height: 30px;
      top: 5px;
      background: linear-gradient(180deg, rgba(245, 158, 11, 0.6) 0%, rgba(245, 158, 11, 0.4) 100%);
      border: 2px solid rgba(245, 158, 11, 0.7);
      padding: 0 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .timeline-clip.text-clip:hover {
      border-color: var(--aetherwave-gold);
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
      z-index: 10;
    }

    .timeline-clip.text-clip .clip-thumbnail {
      display: none !important;
    }

    .timeline-clip.text-clip .clip-info {
      flex: 1;
      overflow: hidden;
    }

    .timeline-clip.text-clip .clip-title {
      font-size: 0.7rem !important;
      line-height: 1.2 !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .timeline-clip.text-clip .clip-duration {
      display: none !important;
    }

    /* Hide number input spinners for text position inputs */
    #textPosXInput::-webkit-inner-spin-button,
    #textPosXInput::-webkit-outer-spin-button,
    #textPosYInput::-webkit-inner-spin-button,
    #textPosYInput::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .text-pos-adj-btn:hover {
      background: var(--bg-hover) !important;
      color: var(--text-primary) !important;
    }

    .timeline-clip.text-clip .clip-type-badge {
      width: 16px;
      height: 16px;
      top: 2px;
      right: 2px;
    }

    .timeline-clip.text-clip .clip-resize-handle {
      height: 100%;
    }

    /* Audio track - Purple */
    .track-label.audio-label {
      border-left: 3px solid var(--aetherwave-cyan);
    }

    .track-label.audio-label .track-type-icon {
      background: rgba(255, 255, 255, 0.10);
      color: var(--aetherwave-cyan);
    }

    .track-content {
      flex: 1;
      position: relative;
      height: 100%;
      min-height: 60px;
    }

    .timeline-clip {
      position: absolute;
      top: 5px;
      /* Center 50px clip in 60px track - prevents visual jump during cross-track drag */
      height: 50px;
      border-radius: 6px;
      cursor: grab;
      display: flex;
      align-items: center;
      padding: 0.5rem;
      /* Only transition non-positional properties for smooth selection highlight */
      transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
      overflow: hidden;
      user-select: none;
      /* Improve touch/click responsiveness */
      touch-action: none;
    }

    /* ── Layered stacking (video-overlay + text tracks) ──
       Multiple layers share ONE row; higher layers nudge down a few px and
       draw on top. Defined here, BEFORE .dragging / .keyframe-editing /
       selection rules, so those still win the z-index when active. */
    .timeline-clip.stack-lane-1 { top: 4px; z-index: 21; }
    .timeline-clip.stack-lane-2 { top: 8px; z-index: 22; }
    .timeline-clip.stack-lane-3 { top: 12px; z-index: 23; }

    .lane-badge {
      position: absolute;
      bottom: 2px;
      left: 3px;
      z-index: 17;
      font-size: 0.55rem;
      font-family: 'JetBrains Mono', monospace;
      line-height: 1;
      padding: 1px 3px;
      border-radius: 3px;
      background: rgba(10, 10, 15, 0.85);
      color: var(--aetherwave-cyan);
      border: 1px solid rgba(6, 182, 212, 0.5);
      pointer-events: none;
    }

    .timeline-clip:active {
      cursor: grabbing;
    }

    /* Video clip styling (Cyan) - matches gallery badges */
    .timeline-clip.video-clip {
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.8), rgba(6, 182, 212, 0.6));
      border: 2px solid rgba(6, 182, 212, 0.6);
    }

    .timeline-clip.video-clip:hover {
      border-color: var(--aetherwave-cyan);
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
      z-index: 10;
    }

    /* Image clip styling (Pink) - matches gallery badges */
    .timeline-clip.image-clip {
      background: linear-gradient(135deg, rgba(255, 46, 166, 0.8), rgba(255, 46, 166, 0.6));
      border: 2px solid rgba(255, 46, 166, 0.6);
    }

    .timeline-clip.image-clip:hover {
      border-color: var(--aetherwave-pink);
      box-shadow: 0 4px 12px rgba(255, 46, 166, 0.4);
      z-index: 10;
    }

    /* Overlay clip styling - adds visual indicator without overriding media type color */
    .timeline-clip.overlay-clip {
      /* Keep media type colors, add dashed top border to indicate overlay */
      border-top: 3px dashed rgba(255, 255, 255, 0.6);
      opacity: 0.95;
    }

    .timeline-clip.overlay-clip::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%);
      pointer-events: none;
      border-radius: 4px;
    }

    /* Audio clip styling (Purple) - matches gallery badges */
    .timeline-clip.audio-clip {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 46, 166, 0.3) 100%);
      border: 2px solid rgba(255, 46, 166, 0.35);
    }

    .timeline-clip.audio-clip:hover {
      border-color: var(--aetherwave-cyan);
      box-shadow: 0 4px 12px rgba(255, 46, 166, 0.25);
      z-index: 10;
    }

    /* Minimal audio clip layout - tiny corner label, curve visible */
    .timeline-clip.audio-clip .clip-thumbnail {
      position: absolute !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block !important;
      overflow: hidden;
      z-index: 1;
    }

    .timeline-clip.audio-clip .clip-thumbnail > img,
    .timeline-clip.audio-clip .clip-thumbnail .audio-placeholder-img {
      opacity: 0.15;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .timeline-clip.audio-clip .waveform-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .timeline-clip.audio-clip .clip-info {
      position: absolute !important;
      top: 3px !important;
      left: 3px !important;
      right: auto !important;
      bottom: auto !important;
      max-width: 60% !important;
      flex: none !important;
      background: rgba(0, 0, 0, 0.7) !important;
      padding: 1px 5px !important;
      border-radius: 3px !important;
      backdrop-filter: blur(4px);
      z-index: 4;
      overflow: hidden !important;
    }

    .timeline-clip.audio-clip .clip-title {
      font-size: 0.6rem !important;
      font-weight: 500;
      line-height: 1.1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      max-width: 100px;
    }

    .timeline-clip.audio-clip .clip-duration {
      display: none !important;
    }

    .timeline-clip.audio-clip .clip-type-badge {
      z-index: 5;
    }

    /* Volume Keyframe Curve Overlay on Audio Clips */
    /* By default, overlay passes clicks through to allow clip selection/dragging */
    .clip-keyframe-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      /* ⚠️ This overlay is a stacking context: its children's z-index only
         competes INSIDE it. It must sit ABOVE .clip-resize-handle (15) or a
         keyframe diamond near a clip edge is unreachable — the resize strip
         eats the mousedown no matter what z-index the handle itself has.
         The overlay stays pointer-events:none, so only the 14px handles
         actually intercept clicks; the rest of the resize strip still works. */
      z-index: 16;
      cursor: pointer;
    }

    /* Only enable keyframe overlay when in edit mode (toggle checked) */
    /* This allows creating new keyframes by double-clicking */
    .timeline-clip.keyframe-editing .clip-keyframe-overlay {
      pointer-events: auto;
      cursor: crosshair;
      z-index: 16;
    }

    .timeline-clip.keyframe-editing .clip-keyframe-overlay:hover {
      background: rgba(6, 182, 212, 0.08);
    }

    /* Visual indicator that clip is in keyframe edit mode */
    /* CRITICAL: z-index must be high to ensure keyframe handles are clickable above other clips */
    .timeline-clip.keyframe-editing {
      outline: 2px solid rgba(6, 182, 212, 0.6);
      outline-offset: -2px;
      z-index: 150 !important;
      /* Above selected clips (100) to ensure keyframe handles are accessible */
    }

    .clip-keyframe-canvas {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* Keyframe handles container - above canvas, interactive */
    .clip-keyframe-handles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      /* Container passes through */
      z-index: 5;
    }

    /* Individual keyframe handle - interactive */
    .keyframe-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      margin-left: -7px;
      margin-top: -7px;
      pointer-events: auto;
      cursor: grab;
      z-index: 10;
    }

    .keyframe-handle:active {
      cursor: grabbing;
    }

    /* Diamond shape using rotation.
       GOLD = volume (audio), matching the brand's audio color. Per-property
       color code: gold = volume, pink = opacity, cyan square = scale,
       white = position. */
    .keyframe-handle-diamond {
      width: 10px;
      height: 10px;
      margin: 2px;
      background: #f59e0b;
      border: 1.5px solid white;
      transform: rotate(45deg);
      transition: all 0.15s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .keyframe-handle:hover .keyframe-handle-diamond {
      transform: rotate(45deg) scale(1.2);
      box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
    }

    .keyframe-handle.selected .keyframe-handle-diamond {
      background: white;
      border-color: #f59e0b;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
      transform: rotate(45deg) scale(1.3);
    }

    /* Keyframe being dragged */
    .keyframe-handle.dragging {
      z-index: 100;
    }

    .keyframe-handle.dragging .keyframe-handle-diamond {
      transform: rotate(45deg) scale(1.3);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
      border-color: var(--aetherwave-cyan);
    }

    /* Ghost element showing original position during drag */
    .keyframe-ghost {
      position: absolute;
      width: 14px;
      height: 14px;
      margin-left: -7px;
      margin-top: -7px;
      pointer-events: none;
      z-index: 5;
      opacity: 0.4;
    }

    .keyframe-ghost-diamond {
      width: 10px;
      height: 10px;
      margin: 2px;
      background: transparent;
      border: 1.5px dashed #06b6d4;
      transform: rotate(45deg);
    }

    /* Connection line from ghost to current position */
    .keyframe-drag-line {
      position: absolute;
      pointer-events: none;
      z-index: 4;
      stroke: rgba(6, 182, 212, 0.5);
      stroke-width: 1;
      stroke-dasharray: 4 2;
    }

    /* Opacity keyframe handles container */
    .clip-opacity-handles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 5;
    }

    /* Opacity keyframe handle - PINK, matching the pink opacity curve.
       (Was cyan, which collided with the scale color and read backwards
       against the pink curve it sits on.) */
    .opacity-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      margin-left: -7px;
      margin-top: -7px;
      pointer-events: auto;
      cursor: grab;
      z-index: 10;
    }

    .opacity-handle:active {
      cursor: grabbing;
    }

    .opacity-handle-diamond {
      width: 10px;
      height: 10px;
      margin: 2px;
      background: #ec4899;
      border: 1.5px solid white;
      transform: rotate(45deg);
      transition: all 0.15s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .opacity-handle:hover .opacity-handle-diamond {
      transform: rotate(45deg) scale(1.2);
      box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
    }

    .opacity-handle.selected .opacity-handle-diamond {
      background: white;
      border-color: #ec4899;
      box-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
      transform: rotate(45deg) scale(1.3);
    }

    /* Opacity handle being dragged */
    .opacity-handle.dragging {
      z-index: 100;
    }

    .opacity-handle.dragging .opacity-handle-diamond {
      transform: rotate(45deg) scale(1.3);
      box-shadow: 0 0 12px rgba(236, 72, 153, 0.8);
      border-color: #ec4899;
    }

    /* Scale keyframe handles container */
    .clip-scale-handles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 6;
    }

    /* Scale keyframe handle - bright cyan colored */
    .scale-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      margin-left: -7px;
      margin-top: -7px;
      pointer-events: auto;
      cursor: grab;
      z-index: 11;
    }

    .scale-handle:active {
      cursor: grabbing;
    }

    /* Scale keyframe handles are SQUARES (distinct from volume/opacity diamonds).
       CYAN = scale, per the property color code. */
    .scale-handle-square {
      width: 10px;
      height: 10px;
      margin: 2px;
      background: #06b6d4;
      border: 1.5px solid white;
      border-radius: 2px;
      transition: all 0.15s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .scale-handle:hover .scale-handle-square {
      transform: scale(1.2);
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
    }

    .scale-handle.selected .scale-handle-square {
      background: white;
      border-color: #06b6d4;
      box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
      transform: scale(1.3);
    }

    /* Scale handle being dragged */
    .scale-handle.dragging {
      z-index: 100;
    }

    .scale-handle.dragging .scale-handle-square {
      transform: scale(1.3);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
      border-color: #06b6d4;
    }

    /* Audio clips without keyframes - show volume baseline at 50% (unity gain).
       Gold = volume, matching the keyframe color code. */
    .timeline-clip.audio-clip:not(.has-keyframes)::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 4px;
      right: 4px;
      height: 2px;
      background: rgba(245, 158, 11, 0.5);
      transform: translateY(-50%);
      border-radius: 1px;
    }

    /* Instant keyframe value tooltip (native title tooltips are slow and
       absent on some handles). One shared fixed-position element, driven by
       delegated hover + live-updated during drags. */
    .kf-tooltip {
      position: fixed;
      z-index: 10001;
      pointer-events: none;
      background: rgba(10, 10, 15, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 0.72rem;
      font-family: 'JetBrains Mono', monospace;
      color: #fff;
      white-space: nowrap;
      display: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .kf-tooltip .kf-tooltip-prop {
      font-weight: 600;
      margin-right: 6px;
    }

    .kf-tooltip .kf-tooltip-time {
      opacity: 0.6;
      margin-left: 6px;
    }

    /* Opacity Keyframe Curve Overlay on Video/Image Clips */
    /* By default, overlay passes clicks through to allow clip selection/dragging */
    .clip-opacity-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      /* Above .clip-resize-handle (15) — see .clip-keyframe-overlay note.
         Without this, opacity/scale diamonds at clip edges can't be grabbed. */
      z-index: 16;
      cursor: pointer;
    }

    /* Only enable opacity overlay when in edit mode (toggle checked) */
    /* This allows creating new keyframes by double-clicking */
    .timeline-clip.opacity-editing .clip-opacity-overlay {
      pointer-events: auto;
      cursor: crosshair;
      z-index: 16;
    }

    .timeline-clip.opacity-editing .clip-opacity-overlay:hover {
      background: rgba(236, 72, 153, 0.08);
    }

    /* Visual indicator that clip is in opacity edit mode */
    /* CRITICAL: z-index must be high to ensure opacity handles are clickable above other clips */
    .timeline-clip.opacity-editing {
      outline: 2px solid rgba(236, 72, 153, 0.6);
      outline-offset: -2px;
      z-index: 150 !important;
      /* Above selected clips (100) to ensure opacity handles are accessible */
    }

    .clip-opacity-canvas {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* Video/Image clips without opacity keyframes - show baseline at 50% height (100% opacity) */
    .timeline-clip.video-clip:not(.has-opacity-keyframes)::after,
    .timeline-clip.image-clip:not(.has-opacity-keyframes)::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 4px;
      right: 4px;
      height: 2px;
      background: rgba(236, 72, 153, 0.5);
      transform: translateY(-50%);
      border-radius: 1px;
      pointer-events: none;
    }

    /* All clips now move directly during drag (no ghost clone), so keep the
       real element clearly visible and grab-precise — same as text clips. */
    .timeline-clip.dragging {
      opacity: 0.85;
      cursor: grabbing;
      transition: none !important;
      /* Disable transition during drag for instant feedback */
      z-index: 1000;
      /* Keep dragged clips on top */
    }

    .timeline-clip.text-clip.dragging {
      opacity: 0.85;
    }

    /* Rule #2: red highlight while a drag would overlap a neighbor (block mode) */
    .timeline-clip.overlap-warning {
      box-shadow: 0 0 0 2px #ef4444, 0 0 12px rgba(239, 68, 68, 0.7) !important;
      outline: 1px solid #ef4444;
    }

    /* Rule #3: push-mode per-track toggle (active = gold, distinct from the
       pink magnetic toggle) */
    .track-control-btn.push-toggle.active {
      color: var(--aetherwave-gold);
    }

    /* Position keyframe diamonds on text clips.
       WHITE = position, part of the per-property color code:
       gold = volume, pink = opacity, cyan square = scale, white = position. */
    .text-pos-kf-diamond {
      position: absolute;
      top: 50%;
      width: 10px;
      height: 10px;
      margin-left: -5px;
      margin-top: -5px;
      background: #fff;
      border: 1px solid rgba(10, 10, 15, 0.8);
      transform: rotate(45deg);
      /* Above .clip-resize-handle (15) so edge keyframes stay grabbable */
      z-index: 16;
      pointer-events: all;
      cursor: grab;
    }

    .text-pos-kf-diamond:hover {
      background: var(--aetherwave-gold);
      border-color: #fff;
      box-shadow: 0 0 6px var(--aetherwave-gold);
    }

    .text-pos-kf-diamond.dragging {
      cursor: grabbing;
      background: #fff;
      border-color: var(--aetherwave-gold);
      box-shadow: 0 0 8px var(--aetherwave-gold);
    }

    /* Snap indicator line - shows where clip will snap during drag */
    .snap-indicator-line {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--aetherwave-cyan);
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
      z-index: 100;
      pointer-events: none;
    }

    /* Gold variant shown when the PLAYHEAD snaps to a clip edge / marker.
       Sits above the cyan playhead (z 200) so the snap read stays visible
       even while the two lines overlap exactly at the snap point. */
    .snap-indicator-line.playhead-snap {
      background: var(--aetherwave-gold);
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.75);
      z-index: 201;
    }

    .timeline-clip.resizing {
      cursor: ew-resize;
      transition: none !important;
      z-index: 1000;
    }

    .clip-thumbnail {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 0.5rem;
      flex-shrink: 0;
    }

    .clip-thumbnail img,
    .clip-thumbnail video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .clip-thumbnail i {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
    }

    /* Audio waveform in clip thumbnail */
    .clip-thumbnail .audio-placeholder {
      border-radius: 4px;
      gap: 2px;
      padding: 0 10%;
    }

    .clip-thumbnail .audio-placeholder .wave-bar {
      width: 3px;
    }

    .clip-info {
      flex: 1;
      overflow: hidden;
    }

    .clip-title {
      font-size: 0.85rem;
      font-weight: 500;
      color: white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .clip-duration {
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.7);
      font-family: 'Courier New', monospace;
    }

    /* Type badge in top right corner */
    .clip-type-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      z-index: 5;
    }

    /* Muted clip: a speaker with a red slash, left of the type badge. */
    .clip-muted-badge {
      position: absolute;
      top: 4px;
      right: 28px;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 10, 15, 0.85);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      z-index: 5;
      pointer-events: none;
      overflow: hidden;
    }

    .clip-muted-badge i {
      color: #fff;
      font-size: 13px;
      line-height: 1;
    }

    .clip-muted-badge::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 2px;
      background: #ef4444;
      transform: rotate(-45deg);
      box-shadow: 0 0 0 1px rgba(10, 10, 15, 0.85);
    }

    /* Normalized clip: "N", next to the type (and muted) badge. */
    .clip-norm-badge {
      position: absolute;
      top: 4px;
      height: 20px;
      min-width: 20px;
      padding: 0 4px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 10, 15, 0.85);
      color: #06b6d4;
      border: 1px solid rgba(6, 182, 212, 0.6);
      font: 700 11px 'JetBrains Mono', monospace;
      z-index: 5;
      pointer-events: none;
    }

    /* Manual link in the app bar - mirrors sf-header.css .sf-manual. */
    .ps-manual-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      margin-right: 4px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text-muted, #a1a1aa);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .ps-manual-link i { font-size: 13px; }
    .ps-manual-link:hover,
    .ps-manual-link:focus-visible {
      color: #06b6d4;
      border-color: rgba(6, 182, 212, 0.5);
      background: rgba(6, 182, 212, 0.08);
      outline: none;
    }

    .clip-type-badge i {
      width: 12px;
      height: 12px;
      color: white;
      stroke: white;
      stroke-width: 2;
    }

    .clip-resize-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 8px;
      cursor: ew-resize;
      transition: background 0.2s;
      z-index: 15;
      /* Above keyframe overlay (10) so resize always works */
    }

    .clip-resize-handle.left {
      left: 0;
      border-radius: 6px 0 0 6px;
    }

    .clip-resize-handle.right {
      right: 0;
      border-radius: 0 6px 6px 0;
    }

    /* Video clip resize handles (Cyan) */
    .video-clip .clip-resize-handle {
      background: rgba(6, 182, 212, 0.3);
    }

    .video-clip .clip-resize-handle:hover {
      background: var(--aetherwave-cyan);
    }

    /* Image clip resize handles (Pink) */
    .image-clip .clip-resize-handle {
      background: rgba(255, 46, 166, 0.3);
    }

    .image-clip .clip-resize-handle:hover {
      background: var(--aetherwave-pink);
    }

    /* Audio clip resize handles (Purple) */
    .audio-clip .clip-resize-handle {
      background: rgba(255, 255, 255, 0.15);
    }

    .audio-clip .clip-resize-handle:hover {
      background: var(--aetherwave-cyan);
    }

    /* Selected clip state - must override hover states and be on top of overlapping clips */
    .timeline-clip.selected,
    .timeline-clip.selected:hover,
    .timeline-clip.video-clip.selected,
    .timeline-clip.video-clip.selected:hover,
    .timeline-clip.image-clip.selected,
    .timeline-clip.image-clip.selected:hover,
    .timeline-clip.audio-clip.selected,
    .timeline-clip.audio-clip.selected:hover {
      border-color: var(--aetherwave-cyan) !important;
      box-shadow: 0 0 0 2px var(--aetherwave-cyan), 0 4px 16px rgba(6, 182, 212, 0.4) !important;
      z-index: 100 !important;
      /* High z-index ensures selected clip is always on top when overlapping */
    }

    .timeline-clip.selected .clip-resize-handle {
      background: rgba(6, 182, 212, 0.4);
    }

    .timeline-clip.selected .clip-resize-handle:hover {
      background: var(--aetherwave-cyan);
    }

    /* Context Menu */
    .context-menu {
      position: fixed;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem 0;
      min-width: 160px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: none;
    }

    .context-menu.active {
      display: block;
    }

    .context-menu-item {
      padding: 0.625rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      color: var(--text-primary);
      font-size: 0.9rem;
      transition: background 0.15s;
    }

    .context-menu-item:hover {
      background: var(--bg-tertiary);
    }

    .context-menu-item.danger {
      color: var(--error);
    }

    .context-menu-item.danger:hover {
      background: rgba(239, 68, 68, 0.1);
    }

    .context-menu-item i {
      font-size: 1rem;
      width: 1rem;
    }

    .context-menu-divider {
      height: 1px;
      background: var(--border-color);
      margin: 0.5rem 0;
    }

    .empty-track {
      width: 100%;
      height: 100%;
      border: 2px dashed var(--border-color);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 0.85rem;
      transition: all 0.2s;
    }

    .track-content.drag-over .empty-track {
      border-color: var(--aetherwave-cyan);
      background: rgba(255, 255, 255, 0.05);
      color: var(--aetherwave-cyan);
    }

    .track-content.drag-over {
      background: rgba(255, 255, 255, 0.025);
    }

    /* Cross-track drag highlight */
    .track.drag-target {
      background: rgba(6, 182, 212, 0.15);
      box-shadow: inset 0 0 0 2px var(--aetherwave-cyan);
    }

    .track.drag-target .track-content {
      background: rgba(6, 182, 212, 0.1);
    }

    /* Render Progress Modal */
    .render-modal {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 15, 0.9);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .render-modal.active {
      display: flex;
    }

    .render-modal-content {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .render-modal-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .render-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--aetherwave-pink), var(--aetherwave-cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .render-icon i {
      font-size: 24px;
      color: white;
    }

    .render-modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .render-modal-subtitle {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    .progress-container {
      margin: 1.5rem 0;
    }

    .progress-bar-wrapper {
      height: 12px;
      background: var(--bg-tertiary);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 0.75rem;
    }

    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      border-radius: 6px;
      transition: width 0.3s ease;
      width: 0%;
    }

    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .render-status {
      padding: 1rem;
      background: var(--bg-tertiary);
      border-radius: 8px;
      border-left: 3px solid var(--aetherwave-cyan);
      margin-bottom: 1.5rem;
    }

    .render-status.success {
      border-left-color: var(--success);
    }

    .render-status.error {
      border-left-color: var(--error);
    }

    .render-status-text {
      font-size: 0.9rem;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }

    .render-status-detail {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .render-actions {
      display: flex;
      gap: 1rem;
      justify-content: flex-end;
    }

    .render-actions .btn {
      padding: 0.625rem 1.25rem;
    }

    /* Export Presets Grid */
    .export-presets-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .export-preset-card {
      background: var(--bg-tertiary);
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 12px 10px;
      cursor: pointer;
      text-align: center;
      transition: all 0.15s ease;
    }

    .export-preset-card:hover {
      border-color: var(--border-color);
      background: var(--bg-secondary);
    }

    .export-preset-card.selected {
      border-color: var(--aetherwave-cyan);
      background: rgba(255, 255, 255, 0.05);
    }

    .export-preset-icon {
      font-size: 1.5rem;
      margin-bottom: 4px;
    }

    .export-preset-name {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .export-preset-specs {
      font-size: 0.65rem;
      color: var(--text-muted);
      line-height: 1.3;
    }

    .export-custom-settings {
      margin-top: 12px;
      padding: 12px;
      background: var(--bg-tertiary);
      border-radius: 8px;
    }

    /* Project Selection Modal */
    .project-select-modal {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 15, 0.9);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .project-select-modal.active {
      display: flex;
    }

    .project-select-content {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }

    .project-select-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .project-select-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .project-select-icon i {
      font-size: 1.5rem;
      color: white;
    }

    .project-select-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .project-select-subtitle {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    .project-list {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 1.5rem;
      max-height: 400px;
      min-height: 0;
    }

    .project-list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: all 0.2s;
    }

    .project-list-item:hover {
      border-color: var(--aetherwave-cyan);
      background: rgba(255, 255, 255, 0.05);
    }

    .project-list-item-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .project-list-item-icon i {
      font-size: 1.5rem;
      color: white;
    }

    .project-list-item-info {
      flex: 1;
      min-width: 0;
    }

    .project-list-item-title {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .project-list-item-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .project-list-item-arrow {
      font-size: 1.5rem;
      color: var(--text-muted);
    }

    .project-list-empty {
      text-align: center;
      padding: 2rem;
      color: var(--text-muted);
    }

    .project-list-empty i {
      font-size: 2.5rem;
      display: block;
      margin-bottom: 0.5rem;
      opacity: 0.5;
    }

    .project-select-actions {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
    }

    /* ========================================
       Gallery Import Modal
       ======================================== */

    .gallery-import-modal {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 15, 0.9);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .gallery-import-modal.active {
      display: flex;
    }

    .gallery-import-content {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 700px;
      width: 92%;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .gallery-import-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .gallery-import-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: white;
      flex-shrink: 0;
    }

    .gallery-import-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .gallery-import-subtitle {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .gallery-import-close {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.3rem;
      cursor: pointer;
      padding: 0.3rem;
      border-radius: 6px;
      transition: all 0.2s;
    }

    .gallery-import-close:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.1);
    }

    .gallery-import-filters {
      display: flex;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }

    .gallery-filter-btn {
      padding: 0.4rem 0.8rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .gallery-filter-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
    }

    .gallery-filter-btn.active {
      background: rgba(255, 255, 255, 0.10);
      border-color: var(--aetherwave-cyan);
      color: var(--aetherwave-cyan);
    }

    .gallery-import-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      overflow-y: auto;
      max-height: 50vh;
      padding: 0.25rem;
    }

    .gallery-import-item {
      position: relative;
      width: calc(33.333% - 0.4rem);
      border: 2px solid transparent;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      background: var(--bg-tertiary);
    }

    .gallery-import-item:hover {
      border-color: rgba(255, 46, 166, 0.25);
      transform: scale(1.02);
    }

    .gallery-import-item.selected {
      border-color: var(--aetherwave-cyan);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    }

    .gallery-import-item.selected .gallery-import-check {
      opacity: 1;
    }

    .gallery-import-item.in-project {
      opacity: 0.5;
    }

    .gallery-import-item.in-project .gallery-import-in-project {
      display: flex;
    }

    .gallery-import-thumb {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: var(--bg-primary);
    }

    .gallery-import-thumb img,
    .gallery-import-thumb video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .gallery-import-badge {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 22px;
      height: 22px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      color: white;
    }

    .gallery-import-badge.badge-video {
      background: rgba(6, 182, 212, 0.8);
    }

    .gallery-import-badge.badge-audio {
      background: rgba(255, 46, 166, 0.5);
    }

    .gallery-import-badge.badge-image {
      background: rgba(236, 72, 153, 0.8);
    }

    .gallery-import-check {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--aetherwave-cyan);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: white;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .gallery-import-in-project {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      color: var(--aetherwave-cyan);
      font-size: 0.65rem;
      padding: 0.2rem 0.4rem;
      display: none;
      align-items: center;
      gap: 0.2rem;
      justify-content: center;
    }

    .gallery-import-audio-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(236, 72, 153, 0.2));
      font-size: 1.5rem;
      color: var(--aetherwave-cyan);
    }

    .gallery-import-item-title {
      padding: 0.3rem 0.4rem;
      font-size: 0.7rem;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .gallery-import-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }

    .gallery-import-count {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .gallery-import-btns {
      display: flex;
      gap: 0.5rem;
    }

    .gallery-import-loading,
    .gallery-import-empty {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem;
      color: var(--text-muted);
      gap: 0.5rem;
      font-size: 0.9rem;
    }

    .gallery-import-loading .spinning {
      animation: spin 1s linear infinite;
      font-size: 1.5rem;
    }

    @media (max-width: 600px) {
      .gallery-import-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .gallery-import-content {
        padding: 1rem;
        max-height: 90vh;
      }
    }

    /* Loading State */
    .loading {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 15, 0.9);
      backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid var(--border-color);
      border-top-color: var(--aetherwave-cyan);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 1rem;
    }

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

    .loading-text {
      color: var(--text-secondary);
      font-size: 0.95rem;
    }

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

    ::-webkit-scrollbar-track {
      background: var(--bg-primary);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 4px;
    }

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

    /* ============================================
       MOBILE RESPONSIVE STYLES
       ============================================ */

    /* Tablet breakpoint (1024px and below) */
    @media (max-width: 1024px) {
      .studio-content {
        grid-template-columns: 200px 1fr 240px;
      }

      .studio-content.media-wide {
        grid-template-columns: 300px 1fr 240px;
      }

      .studio-content.panel-wide {
        grid-template-columns: 200px 1fr 340px;
      }

      .header-right .btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
      }


      .project-title {
        font-size: 1.1rem;
        max-width: 250px;
      }
    }

    /* Mobile landscape / small tablet (768px and below) */
    @media (max-width: 768px) {

      /* Force both sidebars hidden on mobile by default */
      .studio-content {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto !important;
      }

      /* Hide sidebars by default on mobile */
      .media-library {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 1000;
        grid-row: 1 / 3;
      }

      .media-library.mobile-visible {
        display: flex;
      }

      .settings-panel {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        z-index: 1000;
        grid-row: 1 / 3;
      }

      .settings-panel.mobile-visible {
        display: flex;
      }

      /* Mobile panel close button */
      .mobile-panel-close {
        display: flex !important;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 32px;
        height: 32px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 50%;
        color: var(--text-secondary);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s;
      }

      .mobile-panel-close:hover {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.5);
        color: var(--error);
      }

      /* Media library mobile close on left */
      .media-library .mobile-panel-close {
        left: auto;
        right: 0.5rem;
      }

      /* Slide-in animation for panels */
      .media-library.mobile-visible {
        animation: slideInLeft 0.25s ease-out;
      }

      .settings-panel.mobile-visible {
        animation: slideInRight 0.25s ease-out;
      }

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

      /* Mobile panel header adjustment */
      .media-library .library-header,
      .settings-panel .settings-header {
        padding-right: 48px;
      }

      /* Mobile overlay backdrop */
      .mobile-panel-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
      }

      .mobile-panel-backdrop.visible {
        display: block;
      }

      /* Hide desktop panel toggle buttons */
      .panel-toggle-btn,
      .media-panel-toggle-btn {
        display: none;
      }

      /* Preview area takes full width */
      .preview-area {
        grid-column: 1;
        grid-row: 1;
      }

      .preview-player {
        max-width: 100%;
        border-radius: 8px;
        margin: 0.5rem;
      }

      /* Timeline takes full width */
      .timeline-area {
        grid-column: 1 !important;
        grid-row: 2;
      }

      /* Header adjustments - single row, no wrapping */
      .studio-header {
        padding: 0.5rem 0.75rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
      }

      .header-left {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
      }

      .header-center {
        position: static;
        transform: none;
        flex-shrink: 0;
      }

      .header-right {
        flex-shrink: 0;
        gap: 0.25rem;
      }

      /* Hide back button text, icon only */
      .back-btn {
        padding: 0.4rem;
        font-size: 0;
        gap: 0;
        flex-shrink: 0;
      }

      .back-btn i {
        font-size: 1.1rem;
      }

      .project-title {
        font-size: 0.9rem;
        max-width: 200px;
        padding: 2px 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .project-title-hint {
        display: none;
      }

      /* Hide text labels on header buttons - icon only */
      .header-right .btn {
        padding: 0.4rem;
        font-size: 0;
        gap: 0;
      }

      .header-right .btn i {
        font-size: 1.1rem;
      }


      /* Hide help, FX guide, and render text on mobile */
      #helpBtn,
      #effectsGuideBtn {
        display: none;
      }

      /* Timeline controls - more compact */
      .timeline-controls {
        padding: 0.5rem;
        min-height: 40px;
      }

      .transport-controls {
        padding: 4px 8px;
        gap: 2px;
        /* Maintain fixed centering on mobile */
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
      }

      .transport-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
      }

      .timecode {
        font-size: 0.75rem;
        min-width: 45px;
        margin-left: 4px;
      }

      .zoom-controls {
        right: 0.5rem;
        gap: 0.25rem;
      }

      .zoom-btn {
        width: 24px;
        height: 24px;
      }

      /* Timeline tracks - smaller height on mobile */
      .timeline-tracks {
        min-height: 180px;
      }

      .track-labels-spacer {
        width: 70px;
      }

      .track-label {
        width: 70px;
        padding: 0 0.35rem;
        font-size: 0.65rem;
      }

      .track-label.text-label {
        height: 40px;
      }

      .track-label i {
        font-size: 0.8rem;
      }

      /* Mobile navigation buttons for panels */
      .mobile-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        padding: 0.5rem;
        gap: 0.5rem;
        z-index: 100;
        justify-content: space-around;
      }

      .mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 0.5rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-secondary);
        font-size: 0.65rem;
        cursor: pointer;
        transition: all 0.2s;
      }

      .mobile-nav-btn i {
        font-size: 1.2rem;
      }

      .mobile-nav-btn:hover,
      .mobile-nav-btn.active {
        background: rgba(255, 255, 255, 0.10);
        border-color: var(--aetherwave-cyan);
        color: var(--aetherwave-cyan);
      }

      /* Adjust studio container for bottom nav */
      .studio-container {
        padding-bottom: 70px;
      }

      /* Beta banner more compact */
      .beta-notice-content {
        font-size: 11px;
        padding: 4px 8px;
      }

      .beta-badge {
        font-size: 9px;
        padding: 1px 6px;
      }

      .beta-date {
        display: none;
      }
    }

    /* Mobile portrait (480px and below) */
    @media (max-width: 480px) {
      .studio-header {
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
      }

      .header-left {
        gap: 0.35rem;
      }

      .back-btn {
        padding: 0.3rem;
      }

      .project-title {
        font-size: 0.8rem;
        max-width: 160px;
      }


      .header-right .btn {
        padding: 0.35rem;
      }

      /* Hide Master and Render buttons on very small screens */
      #masterBtn,
      #renderBtn {
        display: none;
      }

      /* Timeline even more compact */
      .timeline-controls {
        padding: 0.35rem;
        flex-wrap: wrap;
        gap: 0.35rem;
      }

      .transport-controls {
        order: 1;
        /* On very small screens, use static position to allow wrapping */
        position: static;
        transform: none;
        margin: 0 auto;
      }

      .zoom-controls {
        position: static;
        order: 2;
      }

      .transport-btn {
        width: 26px;
        height: 26px;
      }

      .timecode {
        font-size: 0.7rem;
        min-width: 40px;
      }

      .track-labels-spacer {
        width: 60px;
      }

      .track-label {
        width: 60px;
        font-size: 0.6rem;
      }

      /* Preview area smaller */
      .preview-player {
        margin: 0.25rem;
        border-radius: 6px;
      }

      /* Mobile sidepanels full width */
      .media-library.mobile-visible,
      .settings-panel.mobile-visible {
        width: 100%;
        max-width: 100%;
      }

      /* Mobile nav adjustments */
      .mobile-nav {
        padding: 0.4rem;
        gap: 0.4rem;
      }

      .mobile-nav-btn {
        padding: 0.4rem;
        font-size: 0.6rem;
      }

      .mobile-nav-btn i {
        font-size: 1.1rem;
      }

      .studio-container {
        padding-bottom: 65px;
      }
    }

    /* Desktop: Hide mobile nav */
    @media (min-width: 769px) {
      .mobile-nav {
        display: none !important;
      }

      .mobile-panel-backdrop {
        display: none !important;
      }

      .mobile-panel-close {
        display: none !important;
      }
    }

    /* Touch-friendly adjustments */
    @media (pointer: coarse) {
      .library-item {
        min-height: 80px;
      }

      .transport-btn {
        min-width: 36px;
        min-height: 36px;
      }

      .timeline-clip {
        min-height: 50px;
      }

      .transition-card {
        min-height: 70px;
      }

      /* Larger touch targets for sliders */
      .control-slider::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
      }

      .control-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
      }
    }

          @keyframes promoPulse {

            0%,
            100% {
              box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }

            50% {
              box-shadow: 0 0 15px 3px rgba(16, 185, 129, 0.25);
            }
          }

/* ============================================================
   AI-Editor panel ('ai' right-panel mode; driven by project-ai.js)
   ============================================================ */
.ai-editor-panel { display: none; }
.ai-editor-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 10px;
  gap: 8px;
}
.ai-editor-panel .ai-transcript {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 4px;
}
.ai-editor-panel .ai-msg {
  max-width: 92%; padding: 8px 10px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere;
}
.ai-editor-panel .ai-msg-user { align-self: flex-end; background: rgba(6,182,212,0.16); border: 1px solid rgba(6,182,212,0.3); color: var(--text-primary, #e4e4e7); }
.ai-editor-panel .ai-msg-assistant { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color, #2a2a35); color: var(--text-primary, #e4e4e7); }
.ai-editor-panel .ai-msg-action { align-self: stretch; max-width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border-color, #2a2a35); }
.ai-editor-panel .ai-action-title { font-weight: 600; font-size: 12px; color: var(--text-primary, #e4e4e7); margin-bottom: 4px; }
.ai-editor-panel .ai-action-status { font-size: 12px; color: var(--text-muted, #707080); display: flex; align-items: center; gap: 6px; }
.ai-editor-panel .ai-action-done .ai-action-status { color: #10b981; }
.ai-editor-panel .ai-msg.ai-pending { opacity: 0.6; font-style: italic; }
.ai-editor-panel .ai-msg.ai-error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
/* ONE row, scrolled horizontally, rather than wrapping to three.

   In the standard editing layout - timeline pulled up, right panel short -
   the chips were taking three rows and crushing the transcript to about two
   lines, which makes the chat effectively unusable. The chips are shortcuts;
   the conversation is the feature, so the chips give up the space.

   Scrolled, not hidden: every chip stays reachable, and a thin scrollbar plus
   a fade on the right edge signals there is more to the right rather than
   leaving it to be discovered by accident. */
.ai-editor-panel .ai-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
  /* Nudges a partly-visible chip fully into view when tabbed to. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ai-editor-panel .ai-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* Thin, low-contrast scrollbar: present enough to signal scrollability,
   quiet enough not to compete with the chips in a 6px-tall strip. */
.ai-editor-panel .ai-chips::-webkit-scrollbar { height: 4px; }
.ai-editor-panel .ai-chips::-webkit-scrollbar-track { background: transparent; }
.ai-editor-panel .ai-chips::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
}
.ai-editor-panel .ai-chips:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.26);
}

/* Fade the right edge so a cut-off chip reads as 'more this way' rather than
   as a rendering glitch. Sits above the strip and ignores pointer events so
   it can never block a chip click. */
.ai-editor-panel .ai-chips-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}
.ai-editor-panel .ai-chips-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 3px;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(20, 20, 28, 0), rgba(20, 20, 28, 0.9));
}
.ai-editor-panel .ai-chip {
  padding: 5px 10px; font-size: 11px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-color, #2a2a35);
  color: var(--text-muted, #707080); cursor: pointer;
}

/* The single scrolling row exists ONLY because the short panel has no vertical
   room - it trades discoverability for height. Once the panel is expanded
   vertically that trade is no longer worth making, so the chips wrap and every
   one of them is visible at a glance. The right-edge fade goes too: it means
   "more this way", which is a lie when nothing is hidden. */
#studioContent.panel-vertical-expanded .ai-editor-panel .ai-chips {
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: visible;
  row-gap: 6px;
}
#studioContent.panel-vertical-expanded .ai-editor-panel .ai-chips-wrap::after {
  display: none;
}
.ai-editor-panel .ai-chip:hover { color: var(--text-primary, #e4e4e7); border-color: var(--aetherwave-cyan, #06b6d4); }
/* Input sits above the chips and is a textarea so a longer instruction is
   actually editable. align-items:flex-end keeps the send button on the last
   line as the field grows. */
.ai-editor-panel .ai-input-row { display: flex; gap: 6px; flex: 0 0 auto; align-items: flex-end; }
.ai-editor-panel .ai-input {
  flex: 1; min-width: 0; padding: 8px 10px;
  background: var(--bg-tertiary, #1e1e28); border: 1px solid var(--border-color, #2a2a35);
  border-radius: 8px; color: var(--text-primary, #e4e4e7); font-size: 12.5px; font-family: inherit;
  line-height: 1.45;
  /* One line at rest, grows to two, then scrolls. 12.5px x 1.45 = ~18px per
     line, plus 16px vertical padding and 2px border. resize:none because the
     panel is a fixed-width column. */
  min-height: 36px;
  max-height: 54px;
  overflow-y: auto;
  resize: none;
}
.ai-editor-panel .ai-input:focus { outline: none; border-color: var(--aetherwave-cyan, #06b6d4); }
.ai-editor-panel .ai-send {
  flex: 0 0 auto; width: 38px; height: 36px; background: linear-gradient(135deg, #ff2ea6, #06b6d4);
  border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 15px;
}
.ai-editor-panel .ai-send:disabled { opacity: 0.5; cursor: default; }
/* Name-your-editor card (subscribers). Rendered into the transcript as an
   action card, matching the Music DAW's AI-Engineer naming chip. */
.ai-editor-panel .vai-mini-card .ai-action-title { display: flex; justify-content: space-between; align-items: center; }
.ai-editor-panel .vai-mini-close {
  background: none; border: none; color: var(--text-muted, #707080);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ai-editor-panel .vai-mini-close:hover { color: var(--text-primary, #e4e4e7); }
.ai-editor-panel .vai-mini-lead { font-size: 12px; color: var(--text-muted, #707080); margin-bottom: 6px; }
.ai-editor-panel .vai-mini-row { display: flex; gap: 6px; }
.ai-editor-panel .vai-mini-row input {
  flex: 1; min-width: 0; padding: 6px 8px; font-size: 12px; font-family: inherit;
  background: var(--bg-tertiary, #1e1e28); border: 1px solid var(--border-color, #2a2a35);
  border-radius: 6px; color: var(--text-primary, #e4e4e7);
}
.ai-editor-panel .vai-mini-row input:focus { outline: none; border-color: var(--aetherwave-cyan, #06b6d4); }
.ai-editor-panel .vai-mini-save {
  flex: 0 0 auto; padding: 6px 12px; font-size: 12px; border-radius: 6px; cursor: pointer;
  border: none; color: #fff; background: linear-gradient(135deg, #ff2ea6, #06b6d4);
}
.ai-editor-panel .vai-mini-hint { font-size: 11px; opacity: 0.75; margin-top: 6px; color: var(--text-muted, #707080); }

.ai-editor-panel .spinning { display: inline-block; animation: vai-spin 1s linear infinite; }
@keyframes vai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* In AI mode the chat owns the whole settings-content region (no outer
   scroll/padding - the transcript scrolls internally, input pins bottom). */
.settings-content:has(.ai-editor-panel.active) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ai-editor-panel.active { height: 100%; box-sizing: border-box; }

/* Media library list view. Same items, laid out as rows: a small square thumb
   with the title beside it, so long titles are readable and more items fit on
   screen than the tile grid allows. */
.library-items.list-view { display: flex; flex-direction: column; gap: 4px; }
.library-items.list-view .library-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: auto; aspect-ratio: auto; padding: 4px 6px;
}
.library-items.list-view .item-thumb {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; position: relative;
}
.library-items.list-view .item-thumb img,
.library-items.list-view .item-thumb video { width: 100%; height: 100%; object-fit: cover; }
.library-items.list-view .item-title {
  flex: 1 1 auto; min-width: 0; text-align: left; padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none; position: static;
}
.library-items.list-view .gallery-card-actions { position: static !important; flex: 0 0 auto; }
.library-items.list-view .item-badge { transform: scale(0.8); transform-origin: top left; }

/* Active state for the A-Z sort toggle, matching the other header buttons. */
.media-header .upload-btn.active {
  color: var(--aetherwave-cyan, #06b6d4);
  border-color: var(--aetherwave-cyan, #06b6d4);
}

/* ============================================================
   AI Edit (Grok) modal - opened from the media library item menu
   and the timeline clip context menu.
   ============================================================ */
.ai-edit-modal {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ai-edit-card {
  width: 100%; max-width: 420px;
  background: var(--bg-secondary, #14141c);
  border: 1px solid var(--border-color, #2a2a35);
  border-radius: 12px; padding: 1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.ai-edit-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary, #e4e4e7); margin-bottom: 0.25rem;
}
.ai-edit-sub {
  font-size: 0.75rem; color: var(--text-muted, #707080); margin-bottom: 0.75rem;
}
/* Marker options menu + note affordance. */
.marker-menu {
  position: fixed; z-index: 10000; min-width: 168px;
  background: var(--bg-secondary, #14141c);
  border: 1px solid var(--border-color, #2a2a35);
  border-radius: 8px; padding: 0.3rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.marker-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-radius: 5px; cursor: pointer;
  font-size: 0.8rem; color: var(--text-primary, #e4e4e7);
}
.marker-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
/* Drag affordance. grab/grabbing on the flag itself; while dragging the whole
   marker lifts above its neighbours so it stays readable crossing another. */
.timeline-user-marker .marker-flag { cursor: grab; }
.timeline-user-marker.dragging { z-index: 60; }
.timeline-user-marker.dragging .marker-flag {
  cursor: grabbing; filter: brightness(1.15);
}
.marker-menu-label {
  padding: 0.35rem 0.6rem 0.2rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #707080);
}
.marker-swatches {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px; padding: 0.1rem 0.6rem 0.45rem;
}
.marker-swatch {
  width: 100%; aspect-ratio: 1; min-height: 20px;
  border: 2px solid transparent; border-radius: 4px;
  cursor: pointer; padding: 0;
}
.marker-swatch:hover { border-color: rgba(255, 255, 255, 0.45); }
/* Ring rather than a tick: a tick in any fixed colour vanishes against half
   the palette. */
.marker-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6) inset;
}
.marker-menu-item.danger { color: #f87171; }
.marker-menu-item.danger:hover { background: rgba(248, 113, 113, 0.12); }
.marker-menu-sep {
  height: 1px; margin: 0.25rem 0.3rem;
  background: var(--border-color, #2a2a35);
}
/* A note is invisible on the ruler, so the flag carries a dot to say there is
   something to read. Sized to survive a flag with no label at all. */
.marker-note-dot {
  display: inline-block; width: 5px; height: 5px; margin-left: 4px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.65); vertical-align: middle;
}
.marker-flag.has-note { padding-right: 4px; }
.marker-note-input { resize: vertical; min-height: 88px; }

/* ---- Loop / render range on the ruler ----------------------------------
   Sits BELOW the markers (z-index 150) so a marker inside the range is still
   clickable and draggable. Cyan, matching the DAW's loop region, so the two
   editors read the same way. */
.range-region {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 120;
  cursor: grab;
  background: rgba(6, 182, 212, 0.14);
  border-left: 2px solid rgba(6, 182, 212, 0.55);
  border-right: 2px solid rgba(6, 182, 212, 0.55);
  box-sizing: border-box;
}
/* Idle = a range exists. Active = the transport loop is armed on it, so it
   gets full-strength colour. Same visible/active distinction as the DAW. */
.range-region.active {
  background: rgba(6, 182, 212, 0.24);
  border-left-color: var(--aetherwave-cyan, #06b6d4);
  border-right-color: var(--aetherwave-cyan, #06b6d4);
}
.range-region.dragging { cursor: grabbing; }
.range-region:hover { background: rgba(6, 182, 212, 0.2); }

/* The ruler is only 24px tall, so the range would be invisible next to the
   clips it selects. This carries the tint down through the tracks - same
   trick as .marker-line's 3000px drop. */
.range-region-shade {
  position: absolute;
  top: 100%;
  left: -2px;
  right: -2px;
  height: 3000px;
  background: rgba(6, 182, 212, 0.055);
  border-left: 1px solid rgba(6, 182, 212, 0.25);
  border-right: 1px solid rgba(6, 182, 212, 0.25);
  pointer-events: none;
}
.range-region.active .range-region-shade {
  background: rgba(6, 182, 212, 0.1);
}

.range-region-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--aetherwave-cyan, #06b6d4);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Straddle the edge so the grab zone exists on both sides of a thin range. */
.range-handle {
  position: absolute;
  top: 0;
  width: 9px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}
.range-handle.left { left: -5px; }
.range-handle.right { right: -5px; }
.range-handle:hover { background: rgba(6, 182, 212, 0.45); }

/* Loop armed AND scoped to a range - distinct from looping the whole
   timeline, which is what plain .active has always meant on this button. */
.transport-btn.ranged {
  box-shadow: inset 0 -2px 0 var(--aetherwave-cyan, #06b6d4);
}

/* Range-render confirmation. Sits above the export settings modal so it can
   never open behind it. */
.range-confirm-backdrop {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.range-confirm {
  width: min(440px, calc(100vw - 2rem));
  background: var(--bg-secondary, #14141c);
  border: 1px solid var(--border-color, #2a2a35);
  border-radius: 12px; padding: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.range-confirm-title {
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary, #e4e4e7); margin-bottom: 0.35rem;
}
.range-confirm-sub {
  font-size: 0.8rem; color: var(--text-muted, #707080);
  font-family: 'JetBrains Mono', monospace; margin-bottom: 1rem;
}
/* Amber, not muted grey: this states what the render will sweep up BEYOND what
   the user selected, and it has to survive being skimmed. */
.range-confirm-note {
  font-size: 0.78rem; line-height: 1.45;
  color: #f6c177;
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 6px; padding: 0.55rem 0.65rem; margin-bottom: 1rem;
}

/* Stacked, not side by side: "Render the range" and "Render whole timeline"
   read too alike in a row, and picking the wrong one costs a full render. */
.range-confirm-actions {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.range-confirm-actions .btn { width: 100%; justify-content: center; }
/* Deliberately not a .btn - cancel should not compete with the two real
   choices above it. */
.range-confirm-cancel {
  width: 100%; padding: 0.5rem; margin-top: 0.15rem;
  background: transparent; border: none;
  color: var(--text-muted, #707080);
  font-size: 0.8rem; cursor: pointer; border-radius: 6px;
}
.range-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #e4e4e7);
}

.media-rename-input {
  width: 100%; padding: 0.55rem 0.65rem; margin-bottom: 0.85rem;
  background: var(--bg-primary, #0a0a0f);
  border: 1px solid var(--border-color, #2a2a35); border-radius: 6px;
  color: var(--text-primary, #e4e4e7); font-size: 0.85rem;
}
.media-rename-input:focus { outline: none; border-color: var(--accent-cyan, #06b6d4); }

/* Engine picker. Sits directly under the cost line because changing it changes
   that number - the two belong together, and the resolution note underneath is
   the reason a user would reach for the expensive one. */
.ai-edit-engine-row {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0.5rem 0.6rem; margin-bottom: 0.75rem;
}
.ai-edit-engine-row label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #707080);
}
.ai-edit-engine {
  width: 100%; padding: 0.4rem 0.5rem;
  background: var(--bg-primary, #0a0a0f);
  border: 1px solid var(--border-color, #2a2a35); border-radius: 6px;
  color: var(--text-primary, #e4e4e7); font-size: 0.8rem;
}
.ai-edit-engine:focus { outline: none; border-color: var(--accent-cyan, #06b6d4); }
.ai-edit-engine-note {
  grid-column: 2; font-size: 0.7rem; line-height: 1.4;
  color: var(--text-muted, #707080);
}
/* Amber rather than red: overrunning the model's input cap is a heads-up,
   not an error - the edit still runs on the first 8.7s. */
.ai-edit-warn {
  font-size: 0.75rem; line-height: 1.45;
  color: #fbbf24; background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px; padding: 0.5rem 0.6rem; margin-bottom: 0.75rem;
}
/* Preset chips: ONE horizontally scrolling row, matching the AI chat chips.
   Wrapping them would push the prompt box and the credit cost below the fold
   on a short modal, and the cost is the thing that must stay visible. */
.ai-edit-presets-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #707080); margin-bottom: 0.4rem;
}
.ai-edit-presets {
  display: flex; gap: 0.35rem; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 0.5rem; margin-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #2a2a35) transparent;
}
.ai-edit-presets::-webkit-scrollbar { height: 5px; }
.ai-edit-presets::-webkit-scrollbar-track { background: transparent; }
.ai-edit-presets::-webkit-scrollbar-thumb {
  background: var(--border-color, #2a2a35); border-radius: 3px;
}
.ai-edit-preset {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  padding: 0.3rem 0.6rem; font-size: 0.75rem; font-family: inherit;
  background: var(--bg-tertiary, #1e1e28);
  border: 1px solid var(--border-color, #2a2a35);
  border-radius: 999px; color: var(--text-secondary, #a1a1aa);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ai-edit-preset:hover {
  color: var(--text-primary, #e4e4e7);
  border-color: var(--aetherwave-cyan, #06b6d4);
}
.ai-edit-preset.selected {
  color: #0a0a0f; font-weight: 600;
  background: var(--aetherwave-cyan, #06b6d4);
  border-color: var(--aetherwave-cyan, #06b6d4);
}

.ai-edit-prompt {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 0.6rem 0.7rem; font-family: inherit; font-size: 0.85rem; line-height: 1.45;
  background: var(--bg-tertiary, #1e1e28);
  border: 1px solid var(--border-color, #2a2a35);
  border-radius: 8px; color: var(--text-primary, #e4e4e7);
}
.ai-edit-prompt:focus { outline: none; border-color: var(--aetherwave-cyan, #06b6d4); }
.ai-edit-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem;
}
.ai-edit-actions button {
  padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: 8px; cursor: pointer;
}
.ai-edit-cancel {
  background: transparent; color: var(--text-muted, #707080);
  border: 1px solid var(--border-color, #2a2a35);
}
.ai-edit-cancel:hover { color: var(--text-primary, #e4e4e7); }
.ai-edit-go {
  background: linear-gradient(135deg, #ff2ea6, #06b6d4);
  border: none; color: #fff; font-weight: 600;
}

/* ============================================================
   MEDIA LIBRARY HEADER - fit at every panel width

   The header holds ten controls: the expand toggle, five filter tabs and
   four actions. Measured, that needs ~425px of row, but the panel is 200px
   narrow / ~280px normal / ~300px wide - so it overflowed in EVERY state and
   only looked right when the panel was fully extended.

   Wrap rather than hide. Every control stays reachable; the header simply
   takes a second row when there is not enough width for one. Row one is the
   expand toggle plus the filter tabs (~245px), row two is the actions.
   ============================================================ */
.media-header .settings-header-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  row-gap: 3px;
  padding: 5px 8px;
  column-gap: 6px;
}

/* Explicit ordering so row one is [extender][filter tabs] with the extender
   hard against the panel edge, and the action strip is forced onto its own
   full-width line below rather than being centred with them. */
.media-header .panel-extend-controls:first-child { order: 0; flex: 0 0 auto; }
.media-header .panel-mode-switcher { order: 1; flex: 0 1 auto; }
/* Utilities sit on the TOP row when there is room, pushed right so they group
   with the CTA at the panel's inner edge. They wrap to a second line only when
   the panel is genuinely too narrow, rather than always claiming a row and
   leaving a large gap on wide panels. */
.media-header .panel-extend-controls:last-child {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
}

/* Tighter than the settings panel's copy of this control: five tabs have to
   fit where that panel only has to fit four. */
.media-header .panel-mode-btn {
  padding: 7px 8px;
}

/* Last-resort escape at the 200px narrow state, where even the tab strip
   alone is wider than the panel. Scrolls rather than clipping, so no filter
   becomes unreachable. Scrollbar hidden - it would eat vertical space in a
   32px-tall control. */
.media-header .panel-mode-switcher {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.media-header .panel-mode-switcher::-webkit-scrollbar {
  display: none;
}
.media-header .panel-mode-btn {
  flex: 0 0 auto;
}

/* ============================================================
   MEDIA-TYPE COLOUR CODING (both panels)

   The platform already tinted these buttons, but only in .active state, so
   at rest every tab was grey and you had to read tooltips to tell them
   apart. Colour now lives on the icon AT REST, which is the point: identify
   a filter at a glance.

   Keyed on data-mode rather than data-filter because BOTH switchers use it
   - the media library filters and the settings panel mode tabs - so one
   rule set covers both and they cannot drift apart.

   Platform media colours: Image = pink #ec4899, Video = cyan #06b6d4,
   Audio/music = gold #f59e0b. The existing .active treatment is left alone.

   'all', 'presets', 'library', 'ai' and 'text' stay neutral on purpose:
   they are not media types, and colouring them would imply they are.
   ============================================================ */
.panel-mode-btn[data-mode='video'] i { color: #06b6d4; opacity: 0.8; }
.panel-mode-btn[data-mode='image'] i { color: #ec4899; opacity: 0.8; }
.panel-mode-btn[data-mode='audio'] i { color: #f59e0b; opacity: 0.8; }

.panel-mode-btn[data-mode='video']:hover i,
.panel-mode-btn[data-mode='image']:hover i,
.panel-mode-btn[data-mode='audio']:hover i,
.panel-mode-btn[data-mode='video'].active i,
.panel-mode-btn[data-mode='image'].active i,
.panel-mode-btn[data-mode='audio'].active i { opacity: 1; }

/* List rows carry the same tint on the thumb, so a filtered view reads as
   one colour family rather than the colour stopping at the toolbar. */
.library-items.list-view .library-item[data-media-type*='video'] .item-thumb { box-shadow: inset 0 0 0 2px rgba(6, 182, 212, 0.5); }
.library-items.list-view .library-item[data-media-type*='image'] .item-thumb { box-shadow: inset 0 0 0 2px rgba(236, 72, 153, 0.5); }
.library-items.list-view .library-item[data-media-type*='audio'] .item-thumb { box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.5); }

/* ============================================================
   MEDIA HEADER - slim action row

   Mirrors the right panel: filter tabs across the top with the extender
   pushed hard to the panel edge, and the actions demoted to a thin strip
   underneath.

   The actions borrowed .upload-btn, which is a 32px pink/cyan gradient
   block. Four of those on their own row cost ~40px of height and shouted
   louder than the filters they sit under - in a 280px panel that is height
   taken straight out of the media list. They are utilities, not calls to
   action: small grey icons, no fill, colour only on hover.
   ============================================================ */

/* Extender flush to the panel edge rather than floating inset. */
.media-header .panel-extend-controls:first-child { margin-left: -4px; }

/* The action strip: quiet, short, and never wider than it needs to be. */
.media-header .panel-extend-controls:last-child { gap: 2px; }
.media-header .upload-btn {
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(160, 160, 170, 0.85);
  transition: color 0.15s ease, background 0.15s ease;
}
.media-header .upload-btn i { font-size: 0.85rem; }
.media-header .upload-btn:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary, #e4e4e7);
}
/* Sort is a toggle, so it needs an on-state the others do not. */
.media-header .upload-btn.active {
  color: var(--aetherwave-cyan, #06b6d4);
  background: rgba(6, 182, 212, 0.12);
  border: none;
}

/* Extender matches the strip rather than the filter tabs. */
.media-header .panel-extend-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.media-header .panel-extend-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Sized so the extender and SIX filter tabs share one line even at the 200px
   narrow state: 24px extender + 6 x ~24px tabs fits the ~183px of usable row.
   Icon-only, so the padding is all that can give. */
/* Sized for legibility at the widths actually used, not for the 200px floor.
   The tabs had been squeezed to 23px to survive 200px; that bought a state
   nobody works in and cost readability everywhere else. Below the wrap
   threshold the header simply takes a second row, which is the right trade. */
.media-header .panel-mode-btn { padding: 7px 8px; }
.media-header .panel-mode-btn i { font-size: 0.9rem; }
.media-header .panel-mode-switcher { padding: 2px; gap: 1px; }
/* The dividers between tab groups cost width the tabs need. */
.media-header .panel-mode-switcher .panel-mode-divider { display: none; }
/* Let the strip shrink rather than shoving the extender onto its own line. */
.media-header .panel-mode-switcher { min-width: 0; }

/* Upload CTA: top row, last position, pushed to the panel's inner edge so it
   mirrors where the settings panel puts its media-type label. Keeps the
   gradient - it is the one action here, as opposed to the grey utilities. */
.media-header .media-cta-controls {
  order: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.media-header .upload-btn.upload-cta {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
  color: #fff;
}
.media-header .upload-btn.upload-cta:hover {
  background: linear-gradient(135deg, var(--aetherwave-cyan), var(--aetherwave-pink));
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 46, 166, 0.35);
}


/* ============================================================
   TILE DENSITY TOGGLE

   Adds one column to whatever the current panel width gives, rather than
   setting an absolute count - so it means the same thing at every width:
     narrow  1 -> 2
     normal  2 -> 3   (first position)
     wide    3 -> 4   (fully extended)

   Tile view only. List view is a single column by definition, so the
   control hides itself there instead of sitting inert.
   ============================================================ */
.library-items.dense { grid-template-columns: repeat(3, 1fr); }
.studio-content.media-narrow .library-items.dense { grid-template-columns: repeat(2, 1fr); }
.studio-content.media-wide .library-items.dense { grid-template-columns: repeat(4, 1fr); }

/* Denser grid means smaller tiles, so the title needs to stop wrapping to
   three lines and pushing the rows apart. */
.library-items.dense .item-title {
  font-size: 0.62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cyan when on, grey when off - matching the sort toggle beside it. */
.media-header #mediaDensityBtn.active {
  color: var(--aetherwave-cyan, #06b6d4);
  background: rgba(6, 182, 212, 0.12);
}

/* No columns to add in list view. */
.media-header #mediaDensityBtn.is-hidden { display: none; }

/* Toggle on-states, last in the file deliberately.

   Both the sort and density toggles were rendering grey when active even
   though their rules sat after the base .media-header .upload-btn rule and
   carried higher specificity. Injecting the identical declaration at the end
   of the cascade made it apply, so ordering was the deciding factor. Rather
   than leave a rule that reads correct and behaves wrong, the on-state lives
   here at the end where nothing can follow it. */
.media-header #mediaSortBtn.active,
.media-header #mediaDensityBtn.active {
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.12);
}

/* ============================================================
   TRACK HEAD COLOUR CODING

   Matches the platform media colours already used on the filter tabs and
   library badges, so a lane reads the same as the media that belongs on it:

     Overlay (image)  pink   #ec4899
     Video            cyan   #06b6d4
     Audio 1 (music)  gold   #f59e0b
     Audio 2 (voice)  pale gold #fcd34d  - same family, lighter
     Text             silver #e8e8f0  - deliberately NOT a media colour

   Two audio lanes share a hue because they are the same kind of content.
   Lighter reads as secondary, which matches voice sitting under music, and
   keeps them apart at a glance without inventing a fourth media colour.

   Text is neutral on purpose. It is an annotation layer, not a media type -
   colouring it like one would imply a fourth category. Brown or yellow were
   considered: brown fails contrast on the near-black timeline and reads as
   disabled, and yellow is close enough to gold that at a 16px icon it would
   be mistaken for the audio lanes it was meant to be distinguished from.
   ============================================================ */

/* Audio 1 - music - full gold */
.track-label.audio-label { border-left: 3px solid #f59e0b; }
.track-label.audio-label .track-type-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
#audioTrack {
  background: rgba(245, 158, 11, 0.04);
  border-bottom: 1px dashed rgba(245, 158, 11, 0.25);
}

/* Audio 2 - voice - same family, lighter so the two lanes never blur */
.track-label.audio-label.audio2-label { border-left: 3px solid #fcd34d; }
.track-label.audio-label.audio2-label .track-type-icon {
  background: rgba(252, 211, 77, 0.18);
  color: #fcd34d;
}
#audioTrack2 {
  background: rgba(252, 211, 77, 0.035);
  border-bottom: 1px dashed rgba(252, 211, 77, 0.22);
}

/* Text - silver, not gold. Freeing gold is what lets the audio lanes own it. */
.track-label.text-label { border-left: 3px solid rgba(232, 232, 240, 0.7); }
.track-label.text-label .track-type-icon {
  background: rgba(232, 232, 240, 0.14);
  color: #e8e8f0;
}
.track.text-track {
  background: rgba(232, 232, 240, 0.03);
  border-bottom: 1px dashed rgba(232, 232, 240, 0.2);
}
.track.text-track .empty-track { color: rgba(232, 232, 240, 0.75); }

/* Overlay uses the library's image pink rather than the brand pink, so the
   lane matches the badge on the clips that sit in it. */
.track-label.video-overlay-label { border-left: 3px solid #ec4899; }
.track-label.video-overlay-label .track-type-icon {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}

/* Text CLIPS follow the text lane, not gold.

   The head was changed to silver but the clips were left gold, which put the
   audio colour inside the text lane - moving the collision rather than fixing
   it. The body stays dark and translucent so the clip's own white label keeps
   its contrast; the silver carries on the border and edges, matching the head.
   Deliberately restrained: a solid light body would dominate a timeline whose
   other clips are dark. */
.timeline-clip.text-clip {
  background: linear-gradient(180deg, rgba(232, 232, 240, 0.22) 0%, rgba(232, 232, 240, 0.12) 100%);
  border: 2px solid rgba(232, 232, 240, 0.55);
}
.timeline-clip.text-clip:hover {
  border-color: rgba(232, 232, 240, 0.9);
  box-shadow: 0 2px 8px rgba(232, 232, 240, 0.25);
}
.timeline-clip.text-clip .clip-type-badge {
  background: rgba(232, 232, 240, 0.85);
  color: #0a0a0f;
}
.timeline-clip.text-clip .clip-resize-handle { background: rgba(232, 232, 240, 0.7); }

/* Text lane: sepia rather than plain silver.

   Silver read as the absence of a colour rather than a choice. Sepia keeps
   the contrast that made silver work on the near-black timeline while giving
   the lane an identity of its own.

   #e8d5b7 specifically: it is pale and DESATURATED, where gold #f59e0b is
   bright and saturated. That difference in saturation is what keeps them
   apart at a 16px icon - a warm tone at gold's saturation would read as gold
   and undo the whole reason text gave up that colour. */
.track-label.text-label { border-left: 3px solid rgba(232, 213, 183, 0.8); }
.track-label.text-label .track-type-icon {
  background: rgba(232, 213, 183, 0.16);
  color: #e8d5b7;
}
.track.text-track {
  background: rgba(232, 213, 183, 0.04);
  border-bottom: 1px dashed rgba(232, 213, 183, 0.22);
}
.track.text-track .empty-track { color: rgba(232, 213, 183, 0.75); }

.timeline-clip.text-clip {
  background: linear-gradient(180deg, rgba(232, 213, 183, 0.24) 0%, rgba(232, 213, 183, 0.13) 100%);
  border: 2px solid rgba(232, 213, 183, 0.6);
}
.timeline-clip.text-clip:hover {
  border-color: rgba(232, 213, 183, 0.95);
  box-shadow: 0 2px 8px rgba(232, 213, 183, 0.28);
}
.timeline-clip.text-clip .clip-type-badge {
  background: rgba(232, 213, 183, 0.9);
  color: #0a0a0f;
}
.timeline-clip.text-clip .clip-resize-handle { background: rgba(232, 213, 183, 0.75); }

/* ============================================================
   HEADER ACTION ICONS

   Measured before: 63x41px hit areas holding a 15px glyph, no background,
   no border, all the same dim grey, beside a saturated Render CTA. The icons
   floated in dead space and nothing read as a button.

   Now square and sized to their content, on a subtle surface, and split into
   a tool that acts on the project (mastering) and reference that opens a
   document (help, guide). Reference is dimmer - the less common intent, and
   it should not compete with the tool or with Render.
   ============================================================ */
.header-tools { display: flex; align-items: center; gap: 4px; margin-right: 10px; }

.header-right .btn.btn-icon.header-tool {
  width: 34px; height: 34px; min-width: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(212, 212, 224, 0.95);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.header-right .btn.btn-icon.header-tool i { font-size: 17px; line-height: 1; }
.header-right .btn.btn-icon.header-tool:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #06b6d4;
  color: #fff;
}

.header-right .btn.btn-icon.header-tool-ref {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(160, 160, 176, 0.9);
}
.header-right .btn.btn-icon.header-tool-ref:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #e8e8f0;
}

.header-tools-divider {
  width: 1px; height: 20px; margin: 0 4px;
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   HEADER CTA (Master Audio)

   Was a 63x41px hit area holding a 15px glyph with no background, no border
   and no label, beside a saturated Render button - unreadable as an action.
   Mastering is a real one-click operation on the project, so it gets a label
   and a surface.

   Outlined in cyan rather than filled: Render is the primary action and
   should stay the only filled control in the bar. Two gradients side by side
   would leave neither reading as primary.
   ============================================================ */
.header-right .btn.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  margin-right: 10px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #67e8f9;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.header-right .btn.header-cta i { font-size: 17px; line-height: 1; }
.header-right .btn.header-cta:hover {
  background: rgba(6, 182, 212, 0.18);
  border-color: #06b6d4;
  color: #a5f3fc;
}

/* The label is the point of a CTA, but it is the first thing to give up when
   the bar runs out of room - the icon still identifies it. */
@media (max-width: 1100px) {
  .header-right .btn.header-cta span { display: none; }
  .header-right .btn.header-cta { padding: 0 10px; }
}

/* ============================================================
   EFFECT INFO BADGE

   A burned-in 'i' on each rack slot explaining what the effect does TO
   THE SOUND. The definitions already carried a `description`, but those
   are written for someone who already knows audio - 'Flip signal
   polarity (phase invert)' is no help to the person who needs to ask.
   Each effect now also carries a plain-language `sound` line and the
   badge surfaces it.

   Etched, not added: recessed with an inset shadow and a hairline top
   highlight so it reads as stamped into the panel rather than as a
   fourth control competing with power, expand and remove.
   ============================================================ */
.slot-info-btn {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 0;
  border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(190, 190, 205, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.slot-info-btn:hover {
  color: #67e8f9;
  border-color: rgba(6, 182, 212, 0.55);
  background: rgba(6, 182, 212, 0.12);
}

/* Confirmation buttons for a wide-blast-radius assistant action. Inline in
   the transcript, not a window.confirm, which blocks the page and reads as a
   browser error rather than a question from the assistant. */
.vai-confirm-row{display:flex;gap:8px;margin-top:10px}
.vai-confirm-row .ai-chip{flex:0 0 auto;padding:6px 14px}
.vai-confirm-row [data-yes]{background:var(--aetherwave-pink,#ff2ea6);border-color:var(--aetherwave-pink,#ff2ea6);color:#0a0a0f;font-weight:700}