* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #111111; color: #eee; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

h3 { font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 10px; border-bottom: 1px solid #2a2a2a; padding-bottom: 5px; }
label { font-size: 0.75em; color: #aaa; display: block; margin-top: 10px; margin-bottom: 4px; font-weight: 600; }

button, select, input[type="file"], input[type="text"], input[type="number"], input[type="range"], textarea { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #333; background: #222; color: white; font-size: 0.85em; cursor: pointer; transition: all 0.2s ease; }
button:hover, select:hover { background: #333; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input[type="text"], input[type="number"], textarea { cursor: text; font-family: inherit; }
textarea { resize: vertical; min-height: 60px; }

.color-picker-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
input[type="color"] { -webkit-appearance: none; border: 1px solid #333; width: 40px; height: 34px; border-radius: 4px; background: none; cursor: pointer; padding: 2px; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }

button.primary { background: #5c35d4; border: none; font-weight: bold; }
button.primary:hover { background: #7047eb; }
button.secondary { background: #2a2a2a; border: 1px solid #3e3e3e; font-weight: 600; }
button.secondary:hover { background: #383838; }
button.action-btn { background: #dc3545; border: none; font-weight: bold; }
button.action-btn:hover { background: #bd2130; }

/* New Toggle Button Style for Auto-Keyframe */
.btn-toggle { background: #222; border: 1px solid #333; color: #aaa; transition: all 0.2s; }
.btn-toggle:hover { background: #2a2a2a; }
.btn-toggle.active { background: rgba(0, 243, 255, 0.15); border-color: #00f3ff; color: #00f3ff; box-shadow: 0 0 8px rgba(0, 243, 255, 0.4); }

.app-header { height: 44px; background: #1a1a1a; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; }
.header-actions { display: flex; gap: 10px; align-items: center; }

.main-workspace { display: flex; flex-grow: 1; height: calc(100vh - 384px); }

.sidebar-left { width: 260px; background: #181818; border-right: 1px solid #2a2a2a; padding: 15px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; flex-shrink: 0; }
.sidebar-right { width: 320px; background: #181818; border-left: 1px solid #2a2a2a; padding: 15px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; flex-shrink: 0; }

.panel-section { background: #222; padding: 12px; border-radius: 6px; border: 1px solid #2a2a2a; }

.ratio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ratio-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 5px; background: #1e1e1e; color: #888; font-size: 0.7em; }
.ratio-btn.active { background: #333; color: #fff; border-color: #5c35d4; box-shadow: 0 0 8px rgba(92, 53, 212, 0.4); }

.ratio-icon { border: 2px solid currentColor; border-radius: 2px; }
.icon-16-9 { width: 24px; height: 14px; }
.icon-9-16 { width: 14px; height: 24px; }
.icon-4-5 { width: 16px; height: 20px; }
.icon-1-1 { width: 20px; height: 20px; }

.media-dropzone { border: 2px dashed #444; border-radius: 6px; background: #1e1e1e; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 15px; text-align: center; cursor: pointer; transition: all 0.2s ease; margin-bottom: 6px; }
.media-dropzone:hover, .media-dropzone.drag-active { background: #2a2a2a; border-color: #5c35d4; }
.media-dropzone .dz-title { font-weight: bold; color: #ccc; margin-bottom: 5px; font-size: 0.9em; }
.media-dropzone .dz-sub { font-size: 0.75em; color: #888; }

.canvas-container { flex-grow: 1; background: #111; display: flex; flex-direction: column; padding: 15px; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
.canvas-wrapper { flex-grow: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; position: relative; }

canvas#video-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #000; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); cursor: default; }

.player-controls { display: flex; align-items: center; gap: 8px; background: #1a1a1a; padding: 6px 12px; border-radius: 6px; border: 1px solid #2a2a2a; flex-wrap: wrap; justify-content: center; }
.player-controls button { width: auto; min-width: 40px; padding: 6px 14px; font-weight: bold; }

.player-controls button.btn-play { background: #007bff; border: none; }
.player-controls button.btn-play:hover { background: #0056b3; }
.player-controls button.btn-pause { background: #dc3545; border: none; }
.player-controls button.btn-pause:hover { background: #bd2130; }

.control-divider { width: 1px; height: 24px; background: #333; margin: 0 5px; flex-shrink: 0; }
.player-controls button.btn-tool { background: #222; border: 1px solid #333; font-weight: 600; color: #ccc; }
.player-controls button.btn-tool:hover { background: #333; color: #fff; }
.player-controls button.btn-align { background: #222; border: 1px solid #333; padding: 6px 10px; font-size: 1.1em; line-height: 1; color: #ccc; }
.player-controls button.btn-align:hover { background: #333; color: #fff; border-color: #5c35d4; }

.timeline-area { height: 340px; background: #1a1a1a; border-top: 1px solid #2a2a2a; display: flex; flex-direction: column; }

/* The timeline has one shared left column: the toolbar's time readout, every track
   header (and the group keyframe label that mirrors it) and the playhead overlay all
   start at the same x, which is what puts the scrub thumb, the playhead line and a
   clip's start edge on the same pixel. The readout is sized by its own text — mm:ss:mmm
   widens as a project runs longer — so syncTimelineColumn() in editor.js measures the
   real offset on load, on resize and whenever that text changes. These two values are
   only the first-paint fallback for that measurement. */
:root { --lane-offset: 244px; --lane-header-width: 222px; --lane-right-inset: 11px; --lane-axis-inset: 1px;
        --scrub-thumb-half: 7px; --lane-slider-margin-right: 11px; }

.timeline-toolbar { height: 40px; background: #222; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; padding: 0 10px; gap: 10px; }
/* Millisecond readout doubles as the jump-to-time field, so it is sized to the
   mm:ss:mmm it has to show and stays tabular so digits don't shuffle while playing. */
.time-readout { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-size: 0.85em; flex-shrink: 0; position: relative; }
.time-input { width: 92px; padding: 4px 6px; border-radius: 4px; border: 1px solid #333; background: #1a1a1a; color: #eee; font-family: inherit; font-size: 1em; font-variant-numeric: tabular-nums; text-align: center; }
.time-input:hover { border-color: #444; }
.time-input:focus { outline: none; border-color: #5c35d4; background: #111; color: #fff; }
.time-sep { color: #555; }
.time-display { color: #aaa; text-align: center; }
/* A refused time explains itself under the field it was typed into. Absolute so a reason
   appearing never changes the toolbar's height (and with it the lanes below), and above the
   lanes because it is there to be read, not scrolled. `:empty` keeps it out of the way. */
.time-input.unreadable { border-color: #a84444; color: #ffc9c9; }
.time-message { position: absolute; top: calc(100% + 7px); left: 0; z-index: 400; width: max-content; max-width: 26rem; padding: 5px 9px; border-radius: 5px; border: 1px solid #7a3b3b; background: #2a1b1b; color: #ffbdbd; font-size: 0.8rem; line-height: 1.3; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55); pointer-events: none; }
.time-message:empty { display: none; }

/* The slider bar itself; its HTML step is millisecond-precise to match the readout. A
   range input keeps its thumb inside its own box, so the thumb's centre only travels
   [box + halfThumb, box - halfThumb]. Overhanging the box by exactly that much on both
   ends makes the thumb's travel equal the lanes' time axis — the column where a clip at
   time t starts — which is what lets the dot, the playhead line and a clip edge share a
   pixel. The right inset also tracks the tracks' scrollbar (see syncTimelineColumn). */
input[type="range"]#timeline { flex-grow: 1; width: auto; cursor: pointer; height: 6px; -webkit-appearance: none; background: #333; border-radius: 3px; outline: none; border: none; margin: 0; margin-left: calc(-1 * var(--scrub-thumb-half)); margin-right: var(--lane-slider-margin-right); }
input[type="range"]#timeline::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--scrub-thumb-half) * 2); height: calc(var(--scrub-thumb-half) * 2); border-radius: 50%; background: #5c35d4; cursor: pointer; position: relative; z-index: 30; }

.timeline-tracks { flex-grow: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; position: relative; cursor: pointer; }

.playhead-track { position: absolute; top: 10px; bottom: 10px; left: var(--lane-offset); right: var(--lane-right-inset); pointer-events: none; z-index: 20; }
.playhead-line { position: absolute; top: -10px; bottom: 0; width: 2px; background: #5c35d4; box-shadow: 0 0 4px rgba(92, 53, 212, 0.8); left: 0%; display: none; z-index: 21; }

.track-lane { height: 60px; background: #222; border-radius: 4px; display: flex; align-items: center; border: 1px solid #2a2a2a; pointer-events: auto; flex-shrink: 0; transition: border-color 0.15s ease; }
.track-lane.drag-over { border: 2px dashed #5c35d4; background: #282828; }
.track-lane.dragging { opacity: 0.4; }

/* Persistent track groups: the band wraps its member lanes while keeping their
   geometry identical to ungrouped lanes (the negative margin cancels the border
   and padding) so the playhead overlay stays aligned inside groups. */
.track-group-band { display: flex; flex-direction: column; gap: 8px; border-left: 2px solid rgba(125, 92, 255, 0.45); padding-left: 7px; margin-left: -9px; flex-shrink: 0; }
.group-header { height: 28px; padding: 0 10px; background: #241a44; border: 1px solid #4b3a86; border-radius: 4px; color: #cfc4ff; font-size: 0.75em; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-shrink: 0; pointer-events: auto; }
.group-header:hover { background: #2c2053; }
.group-header.selected { background: #33246b; border-color: #7d5cff; color: #fff; }
.group-collapse-btn { width: 12px; text-align: center; flex-shrink: 0; }
.group-title { font-weight: 700; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-count { color: #9d91d6; font-size: 0.92em; white-space: nowrap; margin-left: auto; }
.group-btn { width: auto; padding: 3px 8px; font-size: 0.92em; margin: 0; }
/* Group keyframe strip: a slim lane of diamonds under the band header. The label
   column mirrors .track-header (same measured width + 10px gap) so the diamonds share
   content column as clip lanes and stay aligned with the ruler and playhead. */
.group-kf-strip { display: flex; align-items: center; height: 16px; flex-shrink: 0; pointer-events: auto; }
.group-kf-label { width: calc(var(--lane-header-width) + var(--lane-axis-inset)); margin-right: 10px; flex-shrink: 0; text-align: center; font-size: 0.62em; font-weight: 700; letter-spacing: 0.4px; color: #00f3ff; background: #1b2b33; border: 1px solid rgba(0, 243, 255, 0.35); border-radius: 4px; padding: 1px 0; user-select: none; }
.group-kf-label.empty { color: #5f7a80; background: #1a1f22; border-color: #2f383c; }
.group-kf-track { flex-grow: 1; height: 100%; position: relative; background: rgba(0, 243, 255, 0.05); border-radius: 3px; margin-right: var(--lane-axis-inset); }
/* Same cyan diamond as clip keyframes so the "keyframe here" language stays unified;
   the tinted strip row is what marks these as belonging to the group. */
.group-keyframe-diamond { border-color: rgba(0, 243, 255, 0.35); }
.group-kf-chip { color: #00f3ff; border: 1px solid rgba(0, 243, 255, 0.45); border-radius: 3px; padding: 0 4px; font-size: 0.92em; font-weight: 700; white-space: nowrap; }
.group-kf-chip.empty { color: #6b6390; border-color: #3d3559; }

.track-group-lanes { display: flex; flex-direction: column; gap: 8px; }
.track-group-select { width: 13px; height: 13px; flex-shrink: 0; margin-right: 5px; accent-color: #7d5cff; cursor: pointer; }
/* A group nested inside another gets its band indented inside the parent's, so the
   timeline shows the structure the compositor renders. */
.track-group-band.nested { border-left-color: rgba(125, 92, 255, 0.75); }
/* Drop target: dropping a track here puts it in the group, dropping a group nests it inside. */
.track-group-band.drag-over { border-left-color: #7d5cff; background: rgba(125, 92, 255, 0.14); border-radius: 4px; }
.group-header.dragging { opacity: 0.45; }
.group-move-btn { padding: 3px 6px; line-height: 1; font-size: 0.85em; }

.track-header { position: relative; width: var(--lane-header-width); height: 100%; background: #181818; border-right: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; font-size: 0.75em; color: #888; flex-shrink: 0; border-radius: 4px 0 0 4px; margin-right: 10px; pointer-events: auto; cursor: grab; text-align: center; padding: 4px; user-select: none; }
.track-header:active { cursor: grabbing; }
.track-header.selected { background: #333; color: #fff; border: 1px solid #5c35d4; }
.track-name { flex-grow: 1; text-align: center; cursor: text; }
/* Inline rename: the label becomes a field that covers the whole header — the name is
   longer than the space left beside the group tick and the delete ×. Dragging is suspended
   while it is mounted, so the header cannot be picked up mid-edit. */
.track-name-input { position: absolute; inset: 2px; font: inherit; color: #fff; background: #111; border: 1px solid #5c35d4; border-radius: 3px; padding: 1px 4px; text-align: center; outline: none; cursor: text; }
/* Track keyframe diamonds sit directly in the lane, so they need to be clickable even
   though .track-content is transparent to the mouse. */
.track-content { flex-grow: 1; height: 100%; position: relative; pointer-events: none; }

.clip-block { 
    position: absolute; top: 6px; bottom: 6px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); pointer-events: auto; cursor: grab; user-select: none;
    display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-size: 0.7em; color: rgba(255,255,255,0.8); overflow: hidden; white-space: nowrap;
}
.clip-block:active { cursor: grabbing; }
.clip-block.selected { outline: 2px solid #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); }

.clip-handle { width: 8px; height: 100%; cursor: ew-resize; background: rgba(255, 255, 255, 0.2); border-radius: 2px; flex-shrink: 0; }
.clip-handle:hover { background: rgba(255, 255, 255, 0.6); }

.clip-media { background: rgba(92, 53, 212, 0.4); border: 1px solid #5c35d4; }
.clip-audio { background: rgba(230, 126, 34, 0.4); border: 1px solid #e67e22; }
.clip-text { background: rgba(0, 123, 255, 0.4); border: 1px solid #007bff; }
.clip-shape { background: rgba(46, 204, 113, 0.4); border: 1px solid #2ecc71; }

/* Keyframe Diamonds for the Timeline */
.keyframe-diamond { 
    position: absolute; width: 10px; height: 10px; background: #00f3ff; border: 1px solid #111; 
    transform: translateY(-50%) rotate(45deg); top: 50%; cursor: ew-resize; z-index: 10; 
    border-radius: 1px; box-shadow: 0 0 4px rgba(0,243,255,0.8); transition: transform 0.1s ease, background 0.1s ease; 
}
.keyframe-diamond:hover { background: #fff; transform: translateY(-50%) rotate(45deg) scale(1.3); }

.shortcut-list { font-size: 0.72em; color: #aaa; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.shortcut-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a2a2a; padding-bottom: 3px; }
.shortcut-key { background: #333; color: #fff; padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 0.9em; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); z-index: 1000; align-items: center; justify-content: center; }
.modal-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; width: 600px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.8); }
.modal-header { padding: 15px 20px; background: #222; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; }
.template-card { background: #222; border: 1px solid #333; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: all 0.2s ease; }
.template-card:hover { border-color: #5c35d4; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(92, 53, 212, 0.3); }
.template-thumb { width: 100%; height: 120px; background: #111; border-radius: 4px; object-fit: cover; }
.template-title { font-weight: bold; font-size: 0.9em; color: #fff; }
.template-desc { font-size: 0.75em; color: #aaa; }