body { font-family: 'Inter', sans-serif; background-color: #0a0a09; color: #f3f1ea; overflow-x: hidden; }
.glass-panel { background: rgba(19, 18, 16, 0.82); backdrop-filter: blur(24px); border: 1px solid rgba(243, 241, 234, 0.08); border-radius: 16px; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(243,241,234,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(243,241,234,0.3); }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
input[type=range] { -webkit-appearance: none; background: transparent; height: 4px; width: 100%; border-radius: 2px; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: rgba(243,241,234,0.1); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%; background: #f3f1ea; margin-top: -5px; cursor: pointer; box-shadow: 0 0 10px rgba(243,241,234,0.8); transition: transform 0.2s; }
.toggle-bg { background-color: rgba(243,241,234,0.1); transition: background-color 0.2s; }
.toggle-dot { transition: transform 0.2s; }
input:checked ~ .toggle-bg { background-color: #ff5c1a; }
input:checked ~ .toggle-bg .toggle-dot { transform: translateX(100%); background-color: #000; }
.txt-impact { font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: 0.5px; }
.txt-bebas { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.txt-oswald { font-family: 'Oswald', sans-serif; font-weight: 700; }
.txt-space { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.txt-cinzel { font-family: 'Cinzel', serif; font-weight: 800; }
.sub-hormozi { color: #fde047; font-family: 'Montserrat', sans-serif; font-weight: 900; text-shadow: 2px 2px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 0 8px 15px rgba(0,0,0,0.9); }
.sub-beast { color: #f3f1ea; font-family: 'Montserrat', sans-serif; font-weight: 900; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 8px 15px rgba(0,0,0,0.9); display: inline-block; }
.sub-basic-white { color: #f3f1ea; font-weight: 800; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.draggable-item { cursor: grab; position: absolute; user-select: none; z-index: 50; display: flex; justify-content: center; align-items: center; white-space: nowrap; transform: translate(-50%, -50%); min-width: max-content; min-height: max-content; flex-shrink: 0; pointer-events: auto; }
.draggable-item img { max-width: none !important; max-height: none !important; display: block; }
.draggable-item:active { cursor: grabbing; z-index: 100 !important; }
.editing-box { display: inline-flex; align-items: center; justify-content: center; border: 2px dashed transparent; background: transparent; padding: 5px 9px; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; position: relative; box-sizing: border-box; flex-shrink: 0; }
.editing-box .text-content { display: block; flex: 0 0 auto; line-height: 1.2; paint-order: stroke fill; stroke-linejoin: round; stroke-linecap: round; }
.draggable-item:hover .editing-box { border-color: rgba(243,241,234,0.4); }
.draggable-item.layer-selected .editing-box { border-color: #ef4444 !important; background: rgba(0,0,0,0.4); box-shadow: 0 0 0 3px rgba(255,92,26,0.12); }
.resize-handle { display: none; position: absolute; bottom: -6px; right: -6px; width: 16px; height: 16px; background: #f3f1ea; border: 2px solid #ef4444; border-radius: 50%; cursor: nwse-resize; z-index: 9999; pointer-events: auto; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.resize-handle-r { display: none; position: absolute; top: 50%; right: -6px; width: 10px; height: 20px; background: #f3f1ea; border: 2px solid #ef4444; border-radius: 3px; cursor: e-resize; z-index: 9999; pointer-events: auto; box-shadow: 0 0 5px rgba(0,0,0,0.5); transform: translateY(-50%); }
.resize-handle-b { display: none; position: absolute; bottom: -6px; left: 50%; width: 20px; height: 10px; background: #f3f1ea; border: 2px solid #ef4444; border-radius: 3px; cursor: s-resize; z-index: 9999; pointer-events: auto; box-shadow: 0 0 5px rgba(0,0,0,0.5); transform: translateX(-50%); }
.draggable-item.layer-selected .resize-handle, .draggable-item.layer-selected .resize-handle-r, .draggable-item.layer-selected .resize-handle-b { display: block; }
.resize-handle:hover, .resize-handle-r:hover, .resize-handle-b:hover { transform: scale(1.3) !important; transition: transform 0.1s; }
iframe#yt-player-node { pointer-events: none !important; width: 100% !important; height: 100% !important; border:none; margin:0; padding:0; }
.premium-btn { background: #f3f1ea; color: #000; transition: all 0.2s; box-shadow: 0 0 20px rgba(243,241,234,0.15); }
.premium-btn:hover:not(:disabled) { background: #e5e5e5; box-shadow: 0 0 30px rgba(243,241,234,0.3); transform: translateY(-1px); }
.premium-btn:disabled { background: #2b2924; color: #a1a1aa; cursor: not-allowed; box-shadow: none; transform: none; }
.timeline-track { position: relative; height: 32px; background: rgba(243,241,234,0.01); border-radius: 4px; border: 1px solid rgba(243,241,234,0.02); overflow: hidden; cursor: crosshair; }
.timeline-clip { position: absolute; top: 0; bottom: 0; border-radius: 4px; cursor: grab; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 10px; font-family: 'Inter', sans-serif; font-weight: 600; color: white; border: 1px solid rgba(243,241,234,0.2); background: rgba(255, 92, 26, 0.6); user-select: none; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 0 2px 5px rgba(243,241,234,0.1); pointer-events: auto; }

/* Filmstrip: real frames from the source, tiled across the clip the way an NLE
   shows them. A repeating background of pre-grabbed thumbnails, sized so each
   tile is roughly square at the clip's height. --fc is set per clip from the
   frame count; without it the strip is simply absent, so a clip with no frames
   yet still looks like a clip. */
.timeline-clip .clip-filmstrip {
    position: absolute; inset: 0;
    /* Tiled rather than stretched across the clip: a 30s clip is far wider
       than four 160px frames are wide, so scaling to fit would upscale
       each frame about 2x and turn the strip to mush. Repeating keeps
       every frame at its native pixel size, which is what an NLE does
       when it has few thumbnails to show. */
    background-repeat: repeat-x;
    background-size: auto 100%;
    opacity: 0.55;
    pointer-events: none;
    /* The label sits above the strip, so text stays readable over frames. */
}
.timeline-clip .clip-label {
    position: relative; z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8);
    display: flex; align-items: center; gap: 6px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.timeline-clip.has-filmstrip { background-color: rgba(26, 25, 23, 0.9); }
.timeline-clip .clip-grip {
    flex-shrink: 0; width: 11px; height: 11px; opacity: 0.85;
}
.timeline-clip:is(.selected-clip) .clip-filmstrip { opacity: 0.72; }

/* A clip being dragged dims its own strip, so the frame pattern does not
   fight the eye while it moves. */
.timeline-clip.dragging .clip-filmstrip { opacity: 0.35; }

.timeline-clip:active { cursor: grabbing; z-index: 20; opacity: 0.9; }
.selected-clip { border-color: #ff5c1a !important; box-shadow: 0 0 15px rgba(255,92,26,0.4), inset 0 2px 5px rgba(243,241,234,0.2) !important; z-index: 10; }
.track-playhead { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #ff5c1a; z-index: 40; pointer-events: none; box-shadow: 0 0 5px rgba(255,92,26,0.75); transition: none; }
.track-playhead::before { content: ''; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; background: #ff5c1a; border-radius: 2px; clip-path: polygon(0 0,100% 0,50% 100%); }
#playhead { display: none; }
.ratio-9-16 { width: 340px; height: 604px; }
.ratio-1-1 { width: 440px; height: 440px; }
.ratio-16-9 { width: 600px; height: 337px; }
.v-splitter { width: 8px; cursor: ew-resize; background: transparent; transition: background 0.2s; border-radius: 4px; margin: 0 -4px; z-index: 40; position: relative; }
.v-splitter:hover, .v-splitter.active { background: rgba(255,92,26,0.5); }
.h-splitter { height: 8px; cursor: ns-resize; background: transparent; transition: background 0.2s; border-radius: 4px; margin: -4px 0; z-index: 40; position: relative; }
.h-splitter:hover, .h-splitter.active { background: rgba(255,92,26,0.5); }
.rotate-arrow { transition: transform 0.2s ease; }
.rotate-arrow.open { transform: rotate(180deg); }

.library-checkbox {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 2px solid rgba(243, 241, 234, 0.4);
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    width: 24px;
    height: 24px;
}
.library-checkbox:checked {
    background-color: #ff5c1a;
    border-color: #ff5c1a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.vol-slider {
    -webkit-appearance: none;
    width: 60px;
    height: 4px;
    background: rgba(243,241,234,0.2);
    border-radius: 2px;
    outline: none;
}
.vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f3f1ea;
    cursor: pointer;
    transition: background 0.2s;
}
.vol-slider::-webkit-slider-thumb:hover { background: #ff5c1a; }
/* Waveform overlay: the audio view of the same background slot the filmstrip
   uses. Only one of the two is ever mounted, so they never stack. */
.timeline-clip .clip-waveform {
    position: absolute; inset: 0;
    /* Stretch the whole strip to the clip box. The image is one frame covering
       the entire clip, so 100%/100% is also the correct TIME mapping: each
       pixel of the image lands on the right moment of the edit.
       Sizing by height instead (auto 260%) was wrong and showed only the top
       edge of the 160px image, where there is no waveform, leaving the trace
       cropped to a few segments. */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left center;
    /* Lower than the filmstrip: a waveform is a shape, and at full strength it
       fights the clip label sitting on top of it. */
    opacity: 0.55;
    pointer-events: none;
}
.timeline-clip.has-waveform { background-color: rgba(14, 22, 18, 0.88); }
.timeline-clip.dragging .clip-waveform { opacity: 0.28; }
.timeline-clip:is(.selected-clip) .clip-waveform { opacity: 0.6; }

/* Feature-list marks and toast glyphs. These were emoji characters, which
   Windows renders in colour from Segoe UI Emoji; these are plain text marks in
   the UI font, so they inherit colour and weight like the rest of the label. */
.featcheck { color: #34d399; font-weight: 700; }
.featmiss  { color: rgba(243,241,234,0.25); font-weight: 700; }
.toast-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 3px;
    font-weight: 800; font-size: 10px; font-style: italic;
    background: rgba(243,241,234,0.15); color: #f3f1ea;
    vertical-align: -1px;
}
.toast.error .toast-icon { background: #ef4444; }

/* ===================================================================
   TRACK GUTTER + PERSISTENT LANES
   The markup for these lanes (Video / Audio) shipped without any CSS
   behind it, so the two-line gutter collapsed to a single 10px line
   that read as "Video No source" with the meta truncated. A track
   gutter is a column with a fixed width: every row has to line up or
   the clips stop being scannable, which is why this is width, not
   padding, and why the label is position:sticky -- at high zoom the
   timeline scrolls horizontally and a gutter that scrolls away with
   it takes the row identity with it, exactly when you need it most.
   =================================================================== */
.track-label {
    width: 92px;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    padding-right: 10px;
    position: sticky;
    left: 0;
    z-index: 30;
    background: #0f0e0c;
    /* The ruler's TIME cell is right-aligned, and without an explicit
       left here the lane gutters inherit that and the longer meta string
       ("Original track") hangs off the left edge of the column instead
       of ellipsising at its right. Text alignment must be stated, not
       inherited, when the neighbouring cell sets the opposite. */
    text-align: left;
    /* A hairline on the right edge is what makes the gutter read as a
       column rather than as loose text floating beside the clips. */
    box-shadow: 1px 0 0 rgba(243,241,234,0.06);
    overflow: hidden;
}
.tl-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243,241,234,0.82);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-meta {
    font-size: 9px;
    font-weight: 500;
    color: rgba(243,241,234,0.34);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The ruler's TIME cell is the same column, so it has to clear the
   same width or the ruler ticks start a few pixels left of the
   clips they are meant to be measuring. */
.ruler-label-cell { width: 92px; flex-shrink: 0; position: sticky; left: 0; z-index: 45; background: #0a0a09; }

/* Lane rows. Every lane is the same height: mixed-height lanes made the
   timeline read as three different tools instead of one surface, and an
   equal 32px row still leaves the filmstrip plenty of vertical room. */
.tl-lane { padding: 1px 0; }
.tl-lane .timeline-track { height: 32px; }

/* An empty lane should read as "put something here", not as a dead
   strip. A faint inset dashed edge gives the drop target a boundary
   without adding another box to an already dense panel. */
.tl-lane .timeline-track:empty {
    background: rgba(243,241,234,0.012);
    border: 1px dashed rgba(243,241,234,0.07);
    border-radius: 6px;
}
/* The video lane is the primary one, so it carries a touch of the
   accent to read as the main track -- at 4% it is a tint, not a
   coloured bar, so it does not compete with the orange play button. */
[data-lane="video"] .timeline-track:empty {
    background: rgba(255,92,26,0.035);
    border-color: rgba(255,92,26,0.14);
}

/* The audio clip gets its own treatment rather than inheriting the
   red default every .timeline-clip ships with -- red is the "video"
   signal in this UI, and an audio lane painted red reads as an
   error state. */
.timeline-clip.clip-audio {
    background: rgba(20,184,166,0.22);
    border-color: rgba(45,212,191,0.45);
}
.timeline-clip.clip-audio .clip-label { color: rgba(204,251,241,0.95); }

/* Warm design system tints per content type. Video keeps the neutral
   dark base so the filmstrip frames stay the star; audio is teal,
   subtitle amber, images plain neutral. Orange is reserved for the
   playhead and selection. */
.timeline-clip.clip-video {
    background: #1a1917;
    background-image: repeating-linear-gradient(-45deg, rgba(243,241,234,0.03) 0 2px, transparent 2px 8px);
    border-color: rgba(243,241,234,0.18);
    color: #f3f1ea;
}
.timeline-clip.clip-video.has-filmstrip { background-image: none; }
.timeline-clip.clip-subtitle {
    background: rgba(255,176,32,0.12);
    border-color: rgba(255,176,32,0.34);
    color: #ffb020;
}
.timeline-clip.clip-image {
    background: rgba(243,241,234,0.05);
    border-color: rgba(243,241,234,0.16);
    color: #f3f1ea;
}

/* ===================================================================
   TIMELINE TOOLBAR CONTROLS
   These were a dozen separate near-identical Tailwind class strings,
   which is how they had already drifted: one had gained a red hover,
   another a disabled state, and none shared a size. One class means a
   control can no longer be accidentally 26px instead of 28px.
   =================================================================== */
.tl-btn {
    position: relative;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(243,241,234,0.05);
    color: rgba(243,241,234,0.8);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    cursor: pointer;
    user-select: none;
}
.tl-btn:hover:not(:disabled) { background: rgba(243,241,234,0.14); color: #f3f1ea; }
.tl-btn:active:not(:disabled) { transform: scale(0.94); }
.tl-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* Delete is destructive, so it is the one control that says so on hover
   rather than only in its tooltip. */
.tl-btn-danger:hover:not(:disabled) { background: rgba(255,92,26,0.22); color: #fca5a5; }

/* Play is the one filled control, so it does not take .tl-btn (whose
   background is the muted translucent grey every other control uses).
   It borrows the same geometry and adds the accent treatment on top --
   defined after .tl-btn so the shared box model cannot drift from the
   rest of the bar. 28px, not 36px: the bar is pinned to 49px and a
   taller button overflows it and pushes the Properties panel above. */
.tl-btn-play {
    position: relative;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    color: #000;
    box-shadow: 0 0 12px rgba(255,92,26,0.45);
    cursor: pointer;
    user-select: none;
}
.tl-btn-play:active { transform: scale(0.94); }

/* Below ~1200px the three toolbar zones no longer fit on one line: the
   edit tools and the view controls together exceed the bar and are
   clipped by its overflow-hidden, which silently removes the zoom
   cluster rather than reflowing it. Hiding the timecode readout first
   is the right thing to drop -- the same number is legible on the
   ruler -- and it buys back the ~70px needed to keep every control
   reachable. The bar itself is not allowed to grow, because its
   height is pinned to keep the Properties panel from jumping. */
@media (max-width: 1200px) {
    #timeline-time-readout { display: none; }
}
@media (max-width: 1080px) {
    /* The volume slider is a preview preference, not an editing control,
       so it is the next thing to go before any button becomes
       unreachable. The mute behaviour it drives is untouched. */
    .vol-slider { display: none; }
}

/* Small variant for the zoom cluster. Defined as an override of
   .tl-btn rather than a parallel class, so a control can never end up
   with the size from one and the colours from the other. */
.tl-btn-sm { width: 24px; height: 24px; border-radius: 5px; font-weight: 700; font-size: 12px; }

/* Group separator. A 1px hairline with real breathing room either side
   is what lets the eye parse the bar as three groups (history, clip
   tools, clipboard) instead of one undifferentiated run of 14 squares. */
.tl-sep {
    width: 1px; height: 16px;
    background: rgba(243,241,234,0.10);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Zone label. The toolbar's groups are named the same way the marketing
   and pricing views name theirs -- a tiny uppercase tracked caption --
   so a dense run of icons reads as a coherent block rather than as
   scattered buttons. Deliberately dim: the label orients, it does not
   compete with the controls it introduces, and it is aria-hidden so it
   is never read as part of a button's name. */
.tl-zone-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243,241,234,0.28);
    padding-right: 2px;
    user-select: none;
    flex-shrink: 0;
}

/* Overflow badge: a small accent dot, not a number. It answers "is
   there anything in the clipboard?" and a count would imply more
   fidelity than a single-slot clipboard actually has. */
.tl-badge {
    position: absolute;
    top: 3px; right: 3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff5c1a;
    box-shadow: 0 0 0 2px #131210;
    pointer-events: none;
}

/* Dropdown.

   This menu cannot be positioned inside the toolbar, and the reason is
   specific rather than incidental: .view-section carries a transform
   (the view fade-in), and a transformed element becomes the containing
   block for any position:fixed descendant. So "fixed" here resolves
   against the section, not the viewport, and the menu is dragged along
   by the section's scroll offset. It also cannot simply be z-indexed
   above the ruler, because the toolbar clips its own overflow and the
   ruler row is position:sticky with z-40.

   The menu is therefore teleported to <body> on open and returned on
   close (see mountClipMenu() in index.html). From there it is a plain
   fixed box against the real viewport, immune to both the clip and the
   stacking context. Its position is written by positionClipMenu() from
   the trigger button's measured rect.

   No top/left here on purpose -- JS always sets both before the menu is
   shown, so a value here would only ever be a stale fallback. */
.tl-menu {
    position: fixed;
    min-width: 172px;
    max-width: calc(100vw - 16px);
    padding: 4px;
    background: #1a1917;
    border: 1px solid rgba(243,241,234,0.10);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.4);
    z-index: 1200;
}
.tl-menu-item {
    width: 100%;
    display: flex; align-items: center; gap: 9px;
    padding: 8px 9px;
    border-radius: 6px;
    font-size: 11px; font-weight: 600;
    color: rgba(243,241,234,0.85);
    text-align: left;
    transition: background 0.12s ease;
    cursor: pointer;
}
.tl-menu-item span { flex: 1; }
.tl-menu-item kbd {
    font-family: ui-monospace, monospace;
    font-size: 9px;
    color: rgba(243,241,234,0.32);
    background: rgba(243,241,234,0.06);
    padding: 2px 5px;
    border-radius: 4px;
}
/* Hover is suppressed while disabled so the dimmed state stays dimmed
   instead of lighting up under the cursor. */
.tl-menu-item:hover { background: rgba(243,241,234,0.08); color: #f3f1ea; }
.tl-menu-item-disabled,
.tl-menu-item-disabled:hover {
    background: transparent;
    color: rgba(243,241,234,0.25);
    cursor: not-allowed;
}