/* Mobile editing workspace, using the platform's light and dark tokens. */
.editor-open > .container { display: none; }
.editor-page {
    width: min(100%, 720px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    color: var(--ink);
    background: var(--canvas);
}
.editor-page.hidden, .editor-page .hidden { display: none; }
.editor-page.editor-ready { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.editor-page button, .editor-page input, .editor-page select { font: inherit; }
.editor-header { display: flex; align-items: center; gap: 12px; padding: 4px 0 17px; border-bottom: 1px solid var(--line); }
.editor-back {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    font-size: 22px !important;
}
.editor-heading { min-width: 0; flex: 1; }
.editor-eyebrow { display: block; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: 1.2px; }
.editor-heading h1 { margin: 2px 0 0; color: var(--ink); font-size: 22px; font-weight: 650; line-height: 1.1; letter-spacing: -.6px; }
.editor-local-badge {
    flex-shrink: 0;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    background: var(--paper);
    font-size: 10px;
    font-weight: 650;
}
.editor-local-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.editor-intro { margin: 15px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.editor-card {
    margin: 0 0 13px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 3px 14px #00000008;
}
.editor-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.editor-section-heading > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.editor-section-heading h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 680; letter-spacing: -.2px; }
.editor-step {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 4px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    font: 650 10px ui-monospace, monospace;
}
.editor-detect-card .editor-step { width: auto; border-radius: 5px; color: var(--accent); }
.editor-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--selected);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.editor-upload span { font-size: 18px; line-height: 1; }
.editor-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.editor-upload:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.editor-clip-list { display: flex; gap: 8px; overflow-x: auto; padding: 1px 1px 5px; scrollbar-width: thin; }
.editor-clip {
    display: flex;
    flex: 0 0 min(210px, 78vw);
    align-items: center;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}
.editor-clip.active { background: var(--selected); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.editor-clip button { border: 0; background: transparent; color: var(--ink); }
.editor-clip button:first-child { min-width: 0; flex: 1; padding: 10px; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis; font-size: 12px; font-weight: 650; }
.editor-clip .editor-icon-button { flex: 0 0 42px; height: 42px; color: var(--muted); font-size: 21px; }
.editor-clip-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.editor-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 24px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--paper);
    text-align: center;
}
.editor-empty-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--selected); color: var(--accent); font-size: 20px; }
.editor-empty h2 { color: var(--ink); font-size: 18px; font-weight: 650; }
.editor-empty p { max-width: 270px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.editor-page:not(.has-clips) .editor-empty::after {
    content: 'Use “Add clips” above to begin';
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}
.editor-page:not(.has-clips) .editor-clips-card { display: block; }
.editor-page:not(.has-clips) .editor-clips-card .editor-section-heading { margin-bottom: 0; }
.editor-page:not(.has-clips) .editor-clips-card .editor-clip-note { display: none; }
.editor-clip-info { color: var(--muted); font: 11px ui-monospace, monospace; white-space: nowrap; }
.editor-video-stage { position: relative; overflow: hidden; border-radius: 9px; background: #0b1710; }
.editor-video-stage video { display: block; width: 100%; max-height: min(44dvh, 450px); min-height: 220px; object-fit: contain; }
.editor-overlay {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    gap: 2px;
    min-width: 130px;
    max-width: calc(100% - 24px);
    padding: 8px 15px;
    border-radius: 7px;
    background: rgba(7, 20, 12, .88);
    color: #fff;
    text-align: center;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.editor-overlay.hidden { display: none; }
.editor-overlay span { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; overflow-wrap: anywhere; }
.editor-overlay strong { font: 750 23px/1.15 ui-monospace, monospace; }
.editor-play { flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 7px; background: var(--accent); color: var(--action-ink); font-size: 16px !important; }
.editor-timeline-marks {
    position: relative;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--line) calc(10% - 1px), var(--line) 10%), var(--soft);
}
.editor-timeline-marks::after {
    content: '';
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: var(--playhead, 0%);
    width: 2px;
    background: var(--ink);
    pointer-events: none;
}
.editor-lane-heading { display: flex; justify-content: space-between; gap: 10px; margin: 17px 0 7px; color: var(--muted); font-size: 10px; }
.editor-lane-heading span:first-child { color: var(--ink); font-weight: 750; letter-spacing: 1px; }
.editor-segment {
    position: absolute;
    top: 8px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    min-width: 22px;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--selected);
    color: var(--ink);
    cursor: pointer;
}
.editor-segment.selected { z-index: 4; outline: 2px solid var(--accent); outline-offset: -2px; }
.editor-segment.reps { border-color: #4b7ad1; background: #4b7ad133; }
.editor-segment-label { min-width: 0; padding: 0 2px; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.editor-segment-handle { display: block; flex: 0 0 13px; align-self: stretch; background: var(--accent); cursor: ew-resize; touch-action: none; }
.editor-segment.reps .editor-segment-handle { background: #4b7ad1; }
.editor-segment-handle::after { content: ''; display: block; height: 14px; margin: 12px 5px; border-left: 2px solid var(--action-ink); opacity: .8; }
.editor-time-label { color: var(--muted); font: 10px ui-monospace,monospace; white-space: nowrap; }
.editor-detect-card { background: var(--selected); border-color: var(--line); }
.editor-detect-card p { margin: -3px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.editor-detect-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    border-radius: 7px;
    background: var(--paper);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}
.editor-detect-button span { font-size: 18px; }
.editor-detect-panel { display: grid; gap: 7px; margin-top: 11px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.editor-detect-panel.running { color: var(--ink); }
.editor-detect-panel.error { color: var(--danger); }
.editor-detect-panel.success { color: var(--accent); }
.editor-detect-panel progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); }
.editor-detect-panel progress.hidden { display: none; }
.editor-text-button { min-height: 36px; padding: 5px; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; }
.editor-field { display: grid; gap: 6px; margin: 0 0 13px; }
.editor-field label { color: var(--ink); font-size: 12px; font-weight: 650; }
.editor-field label span { color: var(--muted); font-weight: 400; }
.editor-field input, .editor-field select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
}
.editor-field input:focus, .editor-field select:focus { border-color: var(--accent); outline: 2px solid var(--selected); }
.editor-field small { color: var(--muted); font-size: 11px; }
.editor-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.editor-primary, .editor-export {
    width: 100%;
    min-height: 48px;
    padding: 11px 15px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: var(--action-ink);
    font-size: 13px;
    font-weight: 700;
}
.editor-page button:disabled { opacity: .5; cursor: not-allowed; }
.editor-annotations { margin: 20px 0 18px; }
.editor-annotations-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.editor-annotations-heading > div { display: flex; align-items: center; gap: 9px; }
.editor-annotations-heading h2 { margin: 0; font-size: 15px; font-weight: 700; }
.editor-add-button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--accent); font-size: 12px; font-weight: 750; }
.editor-hold-list { display: grid; gap: 7px; }
.editor-hold {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 3px 8px;
    align-items: center;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
}
.editor-hold.reps { border-left-color: #4b7ad1; }
.editor-hold.selected { border-color: var(--accent); background: var(--selected); }
.editor-hold strong { grid-column: 1; font-size: 13px; }
.editor-hold-detail { grid-column: 1; color: var(--muted); font: 11px ui-monospace, monospace; }
.editor-review-badge { grid-column: 2; grid-row: 1 / 3; padding: 4px 7px; border-radius: 99px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 750; }
.editor-review-badge.pending { background: var(--selected); color: var(--accent); }
.editor-hold-chevron { grid-column: 3; grid-row: 1 / 3; color: var(--muted); font-size: 22px; }
.editor-muted { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.editor-footer {
    margin: 16px 0 0;
    padding: 12px 0 max(13px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--canvas);
}
.editor-page.editor-ready .editor-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 16px -16px calc(-120px - env(safe-area-inset-bottom));
    padding: 9px 16px max(13px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px #0000000a;
}
.editor-status { min-height: 0; margin: 0 0 6px; color: var(--accent); font-size: 11px; text-align: center; line-height: 1.35; }
.editor-status:empty { display: none; }
.editor-status.error { color: var(--danger); }
.editor-export { font-size: 14px; }
.editor-export span { margin-right: 7px; font-size: 18px; }
.editor-footnote { margin: 6px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
@media (min-width: 720px) {
    .editor-page { padding: 28px 24px; }
    .editor-page.editor-ready { padding-bottom: 140px; }
    .editor-page.editor-ready .editor-footer { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 360px) {
    .editor-local-badge { display: none; }
    .editor-time-label { font-size: 9px; }
    .editor-clip-info { font-size: 9px; }
}

.editor-edit-sheet { position: fixed; z-index: 30; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.editor-edit-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: #0009; }
.editor-edit-panel { position: relative; width: min(100%, 720px); max-height: min(78dvh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 18px max(20px, env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 20px 20px 0 0; background: var(--paper); box-shadow: 0 -12px 40px #0004; }
.editor-sheet-handle { width: 42px; height: 5px; margin: 0 auto 13px; border-radius: 99px; background: var(--line); }
.editor-edit-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-edit-heading h2 { margin: 0; font-size: 19px; }
.editor-sheet-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 24px !important; }
.editor-edit-hint { margin: 2px 0 15px; color: var(--muted); font-size: 11px; }
.editor-kind-picker { display: grid; gap: 6px; margin: 0 0 13px; }
.editor-kind-picker label { color: var(--ink); font-size: 12px; font-weight: 650; }
.editor-kind-picker select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); color: var(--ink); }
.editor-sheet-actions { position: sticky; bottom: 0; display: flex; gap: 9px; align-items: center; margin-top: 4px; padding: 10px 0 2px; border-top: 1px solid var(--line); background: var(--paper); }
.editor-sheet-actions .editor-primary { flex: 1; }
.editor-delete-button { flex: 0 0 auto; min-height: 48px; padding: 10px 13px; border: 1px solid var(--danger); border-radius: 8px; background: transparent; color: var(--danger); font-size: 12px; font-weight: 700; }
@media (min-width: 720px) {.editor-edit-sheet { align-items: center; } .editor-edit-panel { width: min(480px, calc(100% - 32px)); border-radius: 18px; } }
@media (max-width: 520px) { .editor-lane-heading span:last-child { max-width: 54%; text-align: right; } }

/* Keep the video itself prominent while annotation controls stay compact. */
.editor-preview-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.editor-video-stage { border-radius: 13px; background: #080a0c; }
.editor-video-stage video { max-height: min(52dvh, 560px); }
.editor-detect-card { padding: 12px; border-radius: 10px; }
.editor-detect-card .editor-section-heading { margin-bottom: 8px; }
.editor-detect-card p { margin: 0 0 10px; }

/* Editor tools sit beside the timeline, with the video as the main surface. */
.editor-clips-card { padding: 12px 13px; margin-bottom: 12px; }
.editor-clips-card .editor-section-heading { margin-bottom: 9px; }
.editor-clip-list:empty { display: none; }
.editor-annotations { margin-top: 17px; }

/* Keep export below the editing surface so it never covers timeline segments. */
.editor-page.editor-ready { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.editor-page.editor-ready .editor-footer { position: static; margin: 16px 0 0; padding: 12px 0 max(13px, env(safe-area-inset-bottom)); box-shadow: none; }

/* Synchronized anatomical side view, kept separate from the source video. */
.editor-preview-heading-actions { display: flex; align-items: center; gap: 9px; }
.editor-side-pose-toggle { min-height: 34px; padding: 6px 9px; border: 1px solid var(--accent); border-radius: 7px; background: var(--paper); color: var(--accent); font-size: 11px !important; font-weight: 700 !important; white-space: nowrap; }
.editor-side-pose-toggle[aria-pressed="true"] { background: var(--accent); color: var(--action-ink); }
.editor-side-pose-panel { margin-top: 12px; overflow: hidden; border: 1px solid #26363b; border-radius: 11px; background: #03080b; color: #e9f2f5; }
.editor-side-pose-panel > canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 17; background: #03080b; }
.editor-side-pose-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 11px 10px; color: #b4c3c9; font-size: 10px; line-height: 1.4; }
.editor-side-pose-toolbar span { min-width: 0; }
.editor-side-pose-toolbar button { flex: 0 0 auto; min-height: 34px; padding: 6px 9px; border: 1px solid #496470; border-radius: 6px; background: #15252c; color: #e7f2f5; font-size: 10px !important; }
.editor-side-pose-alignment { border-top: 1px solid #26363b; padding: 9px 11px 11px; color: #b4c3c9; font-size: 11px; }
.editor-side-pose-alignment summary { cursor: pointer; font-weight: 700; }
.editor-side-pose-alignment label { display: flex; justify-content: space-between; margin: 12px 0 5px; }
.editor-side-pose-alignment input { width: 100%; accent-color: #44d6ef; }
.editor-side-pose-alignment p { margin: 6px 0 0; line-height: 1.4; }
@media (max-width: 370px) { .editor-preview-heading-actions { gap: 5px; } .editor-side-pose-toggle { padding: 5px 6px; font-size: 10px !important; } }

.editor-hand-pose-panel { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.editor-hand-pose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.editor-hand-pose-grid > div { min-width: 0; display: grid; gap: 5px; }
.editor-hand-pose-grid canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: #0c1711; }
.editor-hand-pose-grid span, .editor-hand-pose-panel p { color: var(--muted); font-size: 11px; }
.editor-hand-pose-panel p { margin: 8px 0 0; }

/* A single preview/output frame for every clip in the assembled video. */
.editor-video-stage { aspect-ratio: var(--editor-output-ratio, 9 / 16); display: grid; place-items: center; }
.editor-video-stage video {
    width: 100%; height: 100%; min-height: 0; max-height: none;
    object-fit: cover; object-position: 50% 50%;
}
.editor-assembly-timeline { display: flex; min-height: 46px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.editor-assembly-part { position: relative; min-width: 24px; padding: 5px 3px; border: 0; border-right: 1px solid var(--line); background: var(--soft); color: var(--ink); font-size: 10px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-assembly-part.active { background: var(--selected); color: var(--accent); font-weight: 750; }
.editor-assembly-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); pointer-events: none; }
.editor-assembly-tools p { margin: -5px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.editor-assembly-tools .editor-field { margin-bottom: 10px; }
.editor-clip-edit-actions { display: flex; gap: 8px; margin: 4px 0 11px; }
.editor-clip-edit-actions button, .editor-reorder-button { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: 11px !important; }
.editor-crop-controls input { accent-color: var(--accent); min-height: 34px; padding: 0; }
.editor-aspect-fieldset { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.editor-aspect-fieldset legend { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.editor-aspect-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.editor-aspect-presets button {
    display: grid; place-items: center; gap: 2px; min-width: 0; min-height: 52px;
    padding: 7px 4px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); color: var(--ink); cursor: pointer;
}
.editor-aspect-presets button strong { font-size: 13px; }
.editor-aspect-presets button span { max-width: 100%; color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-aspect-presets button[aria-checked="true"] { border-color: var(--accent); background: var(--selected); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.editor-aspect-presets button[aria-checked="true"] span { color: inherit; }
.editor-crop-zoom label { display: flex; justify-content: space-between; gap: 12px; }
.editor-crop-zoom output { color: var(--accent); font-variant-numeric: tabular-nums; }
.editor-crop-zoom input { width: 100%; min-height: 34px; padding: 0; accent-color: var(--accent); }
.editor-crop-reset { min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); }
.editor-clip .editor-reorder-button { flex: 0 0 30px; padding: 0; font-size: 16px !important; }
.editor-rating-toggle { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; }
.editor-rating-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.editor-rating-overlay { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 7px 10px; border-radius: 7px; background: #07110dd9; color: #fff; font-size: 12px; font-weight: 750; pointer-events: none; }
.editor-rating-list { display: grid; gap: 9px; margin-top: 12px; }
.editor-rating-card { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.editor-rating-card h3 { margin: 0 0 7px; font-size: 12px; }
.editor-rating-card p { margin: 5px 0; color: var(--muted); font-size: 11px; }
.editor-rating-units { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 9px; }
.editor-rating-units span { padding: 4px 6px; border-radius: 5px; background: var(--soft); color: var(--ink); font-size: 10px; }
.editor-rating-list > h2 { margin: 8px 0 0; color: var(--ink); font-size: 14px; }

/* Immersive editor with the video as the main surface. */
.editor-open { background: #090b10; }
.editor-page {
    --canvas: #090b10;
    --paper: #171b22;
    --soft: #222833;
    --ink: #f4f6f8;
    --muted: #a1aab7;
    --line: #343c49;
    --accent: #73e3b6;
    --selected: #163b31;
    --action-ink: #071710;
    --danger: #ff7780;
    width: min(100%, 760px);
    min-height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: #090b10;
    color: var(--ink);
}
.editor-page.editor-ready { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.editor-header {
    position: sticky;
    top: 0;
    z-index: 20;
    gap: 10px;
    margin: -12px -16px 0;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid #ffffff18;
    background: #10141be8;
    backdrop-filter: blur(18px);
}
.editor-back { width: 38px; height: 38px; flex-basis: 38px; border-color: #ffffff25; border-radius: 50%; background: #ffffff10; color: #fff; font-size: 21px !important; }
.editor-heading { text-align: left; }
.editor-eyebrow { color: #8cddba; font-size: 9px; letter-spacing: 1.5px; }
.editor-heading h1 { font-size: 17px; font-weight: 760; letter-spacing: -.3px; }
.editor-header-add {
    display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
    border: 1px solid #ffffff3d; border-radius: 50%; color: #f4f6f8; font-size: 22px;
    line-height: 1; cursor: pointer;
}
.editor-header-export {
    min-width: 72px; min-height: 36px; padding: 6px 12px;
    border: 0; border-radius: 99px; background: var(--accent); color: var(--action-ink);
    font-size: 12px !important; font-weight: 800 !important;
}
.editor-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.editor-empty {
    min-height: min(66dvh, 540px); align-content: center;
    margin-top: 20px; border: 1px dashed #475361; border-radius: 18px;
    background: radial-gradient(circle at 50% 35%, #1c3a32 0, #151a21 38%, #0f1218 78%);
}
.editor-empty-icon { width: 70px; height: 70px; background: #294e40; color: var(--accent); font-size: 28px; }
.editor-empty h2 { color: var(--ink); font-size: 22px; }
.editor-empty p { color: var(--muted); font-size: 13px; }
.editor-empty-add {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    margin-top: 12px; padding: 9px 20px; border-radius: 99px;
    background: var(--accent); color: var(--action-ink); font-size: 13px; font-weight: 800;
    cursor: pointer;
}
.editor-page:not(.has-clips) .editor-empty::after { display: none; }
.editor-preview-card {
    display: grid; justify-items: center; gap: 10px;
    margin: 8px 0 0; padding: 0; background: transparent;
}
.editor-preview-meta {
    display: flex; justify-content: space-between; gap: 12px;
    width: 100%; color: var(--muted); font-size: 10px;
}
.editor-preview-meta span:last-child { color: #6d7887; }
.editor-clip-info { color: #dce5e8; font-size: 10px; }
.editor-video-stage {
    width: 100%; height: auto; max-width: 100%;
    overflow: hidden; border: 1px solid #4c5866; border-radius: 16px;
    background: #05080c; box-shadow: 0 16px 38px #0009;
}
.editor-video-stage video { width: 100%; height: 100%; max-height: none; min-height: 0; border-radius: inherit; }
.editor-play { width: 38px; height: 38px; flex-basis: 38px; border-radius: 50%; background: #f4f6f8; color: #10141b; font-size: 15px !important; }
.editor-time-label { color: #d0d7de; font-size: 10px; }
.editor-lane-heading { width: 100%; margin: 4px 0 -3px; color: #9ba6b2; }
.editor-lane-heading span:first-child { color: #cdd6de; font-size: 9px; }
.editor-assembly-timeline {
    position: relative; width: 100%; min-height: 54px; border: 1px solid #47515f; border-radius: 10px;
    background: #1a2028;
}
.editor-assembly-part {
    min-height: 54px; border-right-color: #ffffff55;
    background: repeating-linear-gradient(90deg,#293c3b 0,#293c3b 20px,#304543 20px,#304543 23px);
    color: #fff; text-shadow: 0 1px 4px #000; font-size: 10px !important; font-weight: 730;
}
.editor-assembly-part:nth-child(2n) { background: repeating-linear-gradient(90deg,#344454 0,#344454 20px,#3b5062 20px,#3b5062 23px); }
.editor-assembly-part.active { box-shadow: inset 0 0 0 2px var(--accent); background-color: #225c47; color: #fff; }
.editor-assembly-part.has-thumbnail { background-size: auto, auto 100%; background-position: center; background-repeat: repeat-x; }
.editor-clip-thumbnail { width: 46px; height: 52px; flex: 0 0 46px; object-fit: cover; border-radius: 6px 0 0 6px; background: #304543; }
.editor-assembly-playhead { z-index: 3; width: 2px; background: #fff; box-shadow: 0 0 7px #000; }
.editor-timeline-marks { width: 100%; background: #1a2028; border-color: #47515f; }
.editor-segment { background: #1f5947; color: #fff; }
.editor-segment.reps { background: #284973; color: #fff; }
.editor-page[data-editor-mode="edit"] .editor-skill-lane-heading,
.editor-page[data-editor-mode="edit"] #editorTimelineMarks { display: none; }
.editor-mode-tabs {
    position: sticky; top: calc(62px + env(safe-area-inset-top)); z-index: 12;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    margin: 12px -16px 0; padding: 8px 16px;
    border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12;
    background: #10141bf0; backdrop-filter: blur(14px);
}
.editor-mode-tabs button {
    min-height: 42px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #a5b0bb; font-size: 12px !important; font-weight: 780 !important;
}
.editor-mode-tabs button span { margin-right: 6px; font-size: 16px; }
.editor-mode-tabs button[aria-pressed="true"] { border-color: #4c856d; background: #1f3f34; color: #d7ffec; }
.editor-tool-panel { min-width: 0; padding: 12px 0 0; }
.editor-clips-card, .editor-assembly-tools {
    padding: 0; margin: 0 0 16px; border: 0; box-shadow: none; background: transparent;
}
.editor-clips-card .editor-section-heading, .editor-assembly-tools .editor-section-heading { margin: 0 0 9px; }
.editor-section-heading h2 { color: var(--ink); font-size: 13px; }
.editor-upload {
    min-height: 34px; padding: 5px 10px; border-color: #4b8c6d;
    border-radius: 99px; background: #1c4333; color: #c2f9d9; font-size: 11px;
}
.editor-clip-list { padding: 0 0 5px; gap: 9px; }
.editor-clip {
    flex-basis: min(250px, 84vw); min-height: 62px; overflow: hidden;
    border-color: #3c4855; border-radius: 10px; background: #202832;
}
.editor-clip.active { border-color: var(--accent); background: #1a3a31; }
.editor-clip button:first-child { color: #f4f6f8; }
.editor-clip .editor-reorder-button { color: #d3e1df; }
.editor-clip .editor-icon-button { color: #acb6c1; }
.editor-assembly-tools {
    padding: 14px; border: 1px solid #343e49; border-radius: 13px;
    background: #161c23;
}
.editor-assembly-tools p { color: #aab4be; }
.editor-field label { color: #e5eaee; }
.editor-field label span { color: #9ba8b2; }
.editor-field input, .editor-field select, .editor-kind-picker select {
    border-color: #475260; background: #202832; color: #f3f6f8;
}
.editor-clip-edit-actions button { border-color: #4a5864; background: #26313b; color: #f1f4f6; }
.editor-crop-controls input { background: transparent; }
.editor-detect-panel { color: #b0bdc6; }
.editor-rating-toggle { color: #d9e4e9; }
.editor-annotations { margin: 0 0 12px; }
.editor-annotations h2, .editor-rating-list > h2 { color: #f1f5f7; }
.editor-hold, .editor-rating-card {
    border-color: #394550; background: #171e26; color: #f5f7f8;
}
.editor-hold.selected { background: #1f3d33; }
.editor-hold-detail, .editor-rating-card p { color: #aab6c0; }
.editor-review-badge { background: #2c3540; color: #dce4e9; }
.editor-review-badge.pending { background: #234a3c; color: #c3f3d9; }
.editor-rating-units span { background: #2b3641; color: #e4edf0; }
.editor-muted { color: #aab7c0; border-color: #3c4752; }
.editor-pose-details {
    margin: 0 0 15px; padding: 11px 13px; border: 1px solid #37434e;
    border-radius: 10px; background: #171d25;
}
.editor-pose-details summary { color: #cdd8df; font-size: 12px; font-weight: 750; cursor: pointer; }
.editor-inspect-actions { display: flex; gap: 8px; margin: 12px 0; }
.editor-side-pose-toggle { border-color: #497d69; background: #1b382f; color: #cbf4dd; }
.editor-side-pose-toggle[aria-pressed="true"] { background: var(--accent); color: var(--action-ink); }
.editor-hand-pose-panel { background: #17212a; }
.editor-edit-panel { background: #161c24; color: #f4f6f8; }
.editor-edit-hint { color: #aeb9c2; }
.editor-sheet-close { background: #2a3540; color: #fff; }
.editor-sheet-actions { background: #161c24; }
.editor-footer, .editor-page.editor-ready .editor-footer {
    position: static; margin: 10px 0 0; padding: 0 0 10px;
    border-top: 0; background: transparent; box-shadow: none;
}
.editor-status { color: var(--accent); }
.editor-footnote { color: #7f8b96; }
@media (min-width: 720px) {
    .editor-page { padding-left: 24px; padding-right: 24px; }
    .editor-header { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
    .editor-mode-tabs { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}

.editor-side-pose-panel .editor-hand-pose-panel { margin: 0; border: 0; border-top: 1px solid #26363b; border-radius: 0; background: #101b21; }
.editor-side-pose-panel .editor-hand-pose-panel span, .editor-side-pose-panel .editor-hand-pose-panel p { color: #b4c3c9; }

/* Preview-led controls: video tools open beside the playback timeline, while
   AI annotation remains the one separate detail card. */
.editor-preview-card { gap: 9px; }
.editor-stage-tools {
    position: absolute;
    z-index: 7;
    right: 7px;
    bottom: 7px;
    left: 7px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid #ffffff30;
    border-radius: 12px;
    background: #101820c9;
    box-shadow: 0 5px 18px #0008;
    backdrop-filter: blur(12px);
}
.editor-stage-tools button {
    display: grid;
    place-items: center;
    gap: 1px;
    min-width: 0;
    min-height: 46px;
    padding: 2px 1px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #f2f6f8;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.editor-stage-tools button span { font-size: 18px; line-height: 1; font-weight: 400; }
.editor-stage-tools button[aria-pressed="true"] { background: #8cedc4; color: #062215; }
.editor-stage-tools button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.editor-rating-overlay { bottom: 72px; }
.editor-page[data-video-tool="crop"] #editorPreview { cursor: grab; touch-action: none; }
.editor-page[data-video-tool="crop"] #editorPreview:active { cursor: grabbing; }
.editor-video-tools {
    width: 100%;
    margin: 2px 0 4px;
    padding: 12px 1px 4px;
    border-top: 1px solid #3a4651;
    color: var(--ink);
}
.editor-video-tools-heading, .editor-video-clip-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.editor-video-tools-heading { margin-bottom: 7px; }
.editor-video-tools-heading strong { font-size: 14px; }
.editor-video-tools-heading button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #293440;
    color: #f5f7f8;
    font-size: 20px !important;
}
.editor-video-tool-panel { width: 100%; }
.editor-video-tool-panel p { margin: 0 0 10px; color: #a9b7c0; font-size: 11px; }
.editor-video-tool-panel .editor-field { margin-bottom: 9px; }
.editor-video-tool-panel .editor-clip-edit-actions { margin: 0; }
.editor-video-tool-panel .editor-clip-edit-actions button { flex: 1; }
.editor-video-clip-heading { margin: 0 0 9px; color: #acb8c1; font-size: 11px; }
.editor-video-tool-panel .editor-clip-list { width: 100%; }
@media (max-width: 350px) {
    .editor-stage-tools { right: 5px; bottom: 5px; left: 5px; gap: 2px; }
    .editor-stage-tools button { font-size: 9px !important; }
    .editor-video-tool-panel .editor-clip-edit-actions button { font-size: 10px !important; }
}
.editor-preview-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.editor-video-tools, .editor-video-tool-panel, .editor-video-tool-panel .editor-clip-list { min-width: 0; max-width: 100%; }

/* Keep the source-sized phone preview clear until editing tools are requested. */
.editor-stage-dock {
    position: absolute;
    z-index: 7;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}
.editor-stage-dock > * { pointer-events: auto; }
.editor-tools-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid #ffffff55;
    border-radius: 99px;
    background: #0e161edb;
    color: #f6fbfd;
    box-shadow: 0 3px 14px #0008;
    backdrop-filter: blur(12px);
    font-size: 11px !important;
    font-weight: 750 !important;
    cursor: pointer;
}
.editor-tools-toggle span:last-child { font-size: 20px; line-height: 12px; }
.editor-tools-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.editor-stage-dock .editor-stage-tools {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
}
.editor-page[data-tools-visible="false"] .editor-rating-overlay { bottom: 12px; }

/* A source-length filmstrip gives trim handles a stable scale. */
.editor-trim-heading {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 7px;
    color: #c0ccd2;
    font-size: 10px;
    font-weight: 700;
}
.editor-trim-track {
    position: relative;
    width: calc(100% - 32px);
    height: 58px;
    margin: 0 16px 13px;
    border: 1px solid #516071;
    border-radius: 7px;
    background: repeating-linear-gradient(90deg,#304543 0,#304543 22px,#3b5653 22px,#3b5653 24px);
    background-size: auto, auto 100%;
    background-repeat: no-repeat, repeat-x;
}
.editor-trim-dim, .editor-trim-selected { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.editor-trim-dim { z-index: 1; background: #070e15b8; }
.editor-trim-dim.start { left: 0; width: var(--trim-start, 0%); }
.editor-trim-dim.end { right: 0; width: calc(100% - var(--trim-end, 100%)); }
.editor-trim-selected {
    z-index: 2;
    left: var(--trim-start, 0%);
    width: calc(var(--trim-end, 100%) - var(--trim-start, 0%));
    border-top: 2px solid #83edc0;
    border-bottom: 2px solid #83edc0;
}
.editor-trim-handle {
    position: absolute;
    z-index: 3;
    top: -2px;
    width: 32px;
    height: 62px;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
}
.editor-trim-handle.start { left: var(--trim-start, 0%); }
.editor-trim-handle.end { left: var(--trim-end, 100%); }
.editor-trim-handle::before {
    content: '';
    display: block;
    width: 12px;
    height: 58px;
    margin: 2px auto;
    border-radius: 5px;
    background: #83edc0;
    box-shadow: 0 1px 8px #0009;
}
.editor-trim-handle:focus-visible { outline: 2px solid #fff; outline-offset: -1px; }
.editor-tools-toggle, .editor-stage-tools button { touch-action: manipulation; }
.editor-trim-precision { border-top: 1px solid #3b4853; padding-top: 3px; }
.editor-trim-precision summary {
    min-height: 37px;
    padding: 10px 0 6px;
    color: #bceecf;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}
.editor-trim-precision[open] summary { margin-bottom: 8px; }

/* Segment editing stays reachable on a phone without reducing the preview frame. */
.editor-stage-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor-lane-actions, .editor-video-clip-heading > div { display: flex; align-items: center; gap: 7px; }
.editor-lane-actions button, .editor-video-clip-heading button {
    min-height: 32px; padding: 5px 10px; border: 1px solid #63766e;
    border-radius: 8px; background: #1d3932; color: #d9fff0; font-size: 11px !important;
}
.editor-lane-actions button:disabled, .editor-video-clip-heading button:disabled { opacity: .45; }
.editor-speed-summary { color: #cfeedd !important; font-variant-numeric: tabular-nums; }
.editor-video-tool-panel .editor-clip-list { display: grid; gap: 8px; overflow: visible; }
.editor-video-tool-panel .editor-clip { width: 100%; min-width: 0; flex-basis: auto; overflow: hidden; }
.editor-video-tool-panel .editor-clip-select {
    min-width: 0; flex: 1; padding: 9px 7px; overflow: hidden; white-space: nowrap;
    text-align: left; text-overflow: ellipsis; font-size: 11px !important; font-weight: 650;
}
.editor-video-tool-panel .editor-clip .editor-reorder-button {
    flex: 0 0 40px; min-height: 44px; border: 0; border-radius: 0;
}
.editor-video-tool-panel .editor-clip .editor-icon-button { flex: 0 0 40px; }
@media (max-width: 380px) {
    .editor-video-clip-heading { align-items: flex-start; flex-direction: column; }
    .editor-clip-thumbnail { width: 36px; flex-basis: 36px; }
}

.editor-video-tool-panel .editor-clip-select { display: grid; align-content: center; gap: 2px; }
.editor-clip-name, .editor-clip-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-clip-meta { color: #a9c3bb; font-size: 10px; font-weight: 500; }

/* Touch-first editing controls and overlays share the original-size preview. */
.editor-stage-dock .editor-stage-tools {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.editor-stage-dock .editor-stage-tools::-webkit-scrollbar { display: none; }
.editor-stage-tools button { flex: 0 0 68px; min-width: 68px; }
.editor-overlay {
    z-index: 5;
    top: 19%;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    user-select: none;
    font-family: var(--editor-timer-font, system-ui, sans-serif);
}
.editor-overlay:active, .editor-text-overlay:active { cursor: grabbing; }
.editor-overlay.selected, .editor-text-overlay.selected {
    outline: 2px solid #a3f6ce;
    outline-offset: 3px;
}
.editor-overlay strong { font-family: var(--editor-timer-font, system-ui, sans-serif); }
.editor-text-layer { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.editor-text-overlay {
    position: absolute;
    width: max-content;
    max-width: 84%;
    transform: translate(-50%, -50%);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.22;
    text-align: center;
    text-shadow: 0 2px 4px #000, 0 0 2px #000;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    cursor: grab;
}
.editor-video-stage #editorRatingOverlay { z-index: 4; }
.editor-frame-step {
    flex: 0 0 29px;
    width: 29px;
    height: 34px;
    padding: 0;
    border: 1px solid #56636f;
    border-radius: 6px;
    background: #202a33;
    color: #fff;
    font-size: 21px !important;
}
.editor-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: 4px 0 6px;
    color: #aebac4;
    font-size: 10px;
}
.editor-zoom-controls > span { margin-right: auto; }
.editor-zoom-controls button {
    width: 31px;
    height: 29px;
    border: 1px solid #556472;
    border-radius: 7px;
    background: #23303b;
    color: #fff;
    font-size: 17px !important;
}
.editor-zoom-controls output { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.editor-timeline-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    border: 1px solid #47515f;
    border-radius: 10px;
    background: #141c25;
    scrollbar-color: #577b70 #1b2630;
}
.editor-timeline-content { position: relative; min-width: 100%; }
.editor-timeline-ruler { position: relative; height: 23px; overflow: hidden; border-bottom: 1px solid #52616d; }
.editor-ruler-tick { position: absolute; bottom: 2px; padding-left: 3px; border-left: 1px solid #9cabb5; color: #bdc9d0; font: 10px ui-monospace, monospace; white-space: nowrap; }
.editor-timeline-viewport .editor-assembly-timeline { width: 100%; border: 0; border-radius: 0; }
.editor-timeline-viewport .editor-assembly-part { flex-shrink: 0; min-width: 0; }
.editor-overlay-timeline { position: relative; height: 24px; border-top: 1px solid #47515f; }
.editor-overlay-timeline.hidden { display: none; }
.editor-text-segment, .editor-audio-segment {
    position: absolute;
    top: 3px;
    bottom: 3px;
    overflow: hidden;
    padding: 1px 5px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 10px !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.editor-text-segment { background: #75508f; }
.editor-audio-segment { background: #397e79; }
.editor-tool-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    margin: 0 0 10px;
    padding: 7px 12px;
    border: 1px solid #8ddfb9;
    border-radius: 8px;
    background: #215943;
    color: #f7fff9;
    font-size: 12px !important;
    font-weight: 750;
    cursor: pointer;
}
.editor-text-list { display: grid; gap: 6px; margin: 0 0 10px; }
.editor-text-row {
    min-height: 39px;
    overflow: hidden;
    padding: 7px 10px;
    border: 1px solid #52606e;
    border-radius: 8px;
    background: #1d2933;
    color: #e7f3f1;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px !important;
}
.editor-text-row.selected { border-color: #9af0c7; background: #254a3b; }
.editor-text-editor { display: grid; gap: 7px; }
.editor-text-editor textarea {
    width: 100%;
    min-height: 64px;
    padding: 9px;
    border: 1px solid #52606e;
    border-radius: 7px;
    background: #202832;
    color: #fff;
    font: 12px system-ui, sans-serif;
    resize: vertical;
}
.editor-text-editor input[type="color"] { width: 100%; height: 42px; padding: 3px; }
.editor-text-editor input[type="range"], #editorFilterStrength,
#editorAudioVolume, #editorOverlayScale { width: 100%; accent-color: #91eaba; }
.editor-audio-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 390px) {
    .editor-frame-step { flex-basis: 25px; width: 25px; }
    .editor-time-label { font-size: 9px; }
}

/* AI review lives on the video frame. The upper part of the clip remains visible
   while the annotation surface scrolls independently above the edit rail. */
.editor-ai-workspace {
    position: absolute; z-index: 6; inset: clamp(125px, 33%, 210px) 0 0;
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    padding: 21px 13px 0; color: #f4faf8;
    background: linear-gradient(180deg, #0710191a 0%, #071019df 9%, #071019f7 30%, #071019fa 100%);
    backdrop-filter: blur(10px);
}
.editor-ai-workspace-header { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; min-height: 40px; }
.editor-ai-title { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; }
.editor-ai-symbol { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #9aefc72b; color: #a6f0c9; font-size: 18px; }
.editor-ai-eyebrow { display: block; color: #a6efc9; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
.editor-ai-title h2 { margin: 1px 0 0; color: #fff; font-size: 17px; line-height: 1.1; }
.editor-ai-count { flex: 0 0 auto; color: #d9e8df; font-size: 10px; font-weight: 750; white-space: nowrap; }
.editor-ai-close { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 1px solid #ffffff48; border-radius: 50%; background: #18232bc9; color: #fff; font-size: 21px !important; line-height: 1; }
.editor-ai-actions { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 10px; }
.editor-ai-actions button { min-height: 39px; padding: 7px 12px; border-radius: 9px; font-size: 11px !important; font-weight: 800 !important; }
.editor-ai-actions .editor-detect-button { border: 0; background: #a4efc8; color: #0c271d; }
.editor-ai-actions .editor-add-button { border: 1px solid #84caa1a1; background: #1c4233dc; color: #f1fff6; }
.editor-ai-workspace > .editor-detect-panel { flex: 0 0 auto; max-height: 55px; overflow: auto; margin: 7px 1px 0; color: #c1d4ce; font-size: 10px; }
.editor-ai-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1px 1px 112px; scrollbar-color: #5e8c78 transparent; }
.editor-ai-scroll .editor-lane-heading { margin: 13px 0 6px; }
.editor-ai-scroll .editor-lane-heading span:last-child { font-size: 9px; }
.editor-ai-scroll .editor-timeline-marks { height: 44px; background-color: #1d2b30; }
.editor-ai-scroll .editor-segment { top: 5px; bottom: 5px; }
.editor-ai-scroll .editor-annotations { margin: 14px 0 12px; }
.editor-ai-scroll .editor-annotations-heading { margin-bottom: 7px; }
.editor-ai-scroll .editor-annotations-heading h2 { color: #e9f4ee; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.editor-ai-scroll .editor-hold-list { gap: 5px; }
.editor-ai-scroll .editor-hold { min-height: 45px; padding: 7px 9px; border-color: #ffffff2e; border-left-color: #a4efc8; background: #ffffff14; }
.editor-ai-scroll .editor-hold.reps { border-left-color: #9ac4ff; }
.editor-ai-scroll .editor-rating-list { margin-top: 8px; }
.editor-ai-scroll .editor-rating-card { background: #ffffff12; }
.editor-ai-scroll .editor-rating-toggle { margin: 12px 0; font-size: 11px; }
.editor-ai-tool-hint { margin: 9px 0 13px; color: #a9c4b8; font-size: 10px; line-height: 1.4; }
.editor-ai-scroll .editor-pose-details { margin: 0 0 10px; background: #ffffff12; }
.editor-page[data-video-tool="ai"] #editorOverlay { z-index: 9; }
.editor-page[data-video-tool="ai"] .editor-stage-dock { z-index: 8; }
@media (max-width: 390px) {
    .editor-ai-workspace { padding-right: 10px; padding-left: 10px; }
    .editor-ai-actions button { padding-right: 8px; padding-left: 8px; }
}

/* A wide clip has little vertical preview space: its controls scroll over the
   frame, with the in-frame close button returning to the video. */
.editor-page[data-video-tool="ai"] .editor-video-stage[data-preview-shape="wide"] .editor-stage-dock { display: none; }
.editor-video-stage[data-preview-shape="wide"] .editor-ai-workspace {
    inset: 0; display: block; overflow-y: auto; padding: 8px 11px 12px;
    background: #071019ec;
}
.editor-video-stage[data-preview-shape="wide"] .editor-ai-workspace > .editor-detect-panel { max-height: none; }
.editor-video-stage[data-preview-shape="wide"] .editor-ai-scroll { overflow: visible; padding-bottom: 12px; }
.editor-video-stage[data-preview-shape="wide"] .editor-ai-workspace.hidden { display: none; }
.editor-page[data-video-tool="ai"] .editor-video-stage[data-preview-shape="wide"] #editorOverlay { z-index: 5; }

/* One combined timeline handles playback, seeking, and detailed edits. */
.editor-video-timeline-heading { display: flex; align-items: center; margin: 10px 0 5px; }
.editor-video-timeline-heading #editorTimeLabel { color: #d8e5e0; font: 10px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.editor-zoom-controls { min-width: 0; margin: 0 0 8px; }
.editor-playback-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.editor-zoom-controls .editor-play {
    flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0;
    border-radius: 50%; background: #a4efc8; color: #0d261b; font-size: 15px !important;
}
.editor-zoom-controls .editor-frame-step {
    flex: 0 0 29px; width: 29px; height: 32px; padding: 0;
    border: 1px solid #56636f; border-radius: 7px; background: #202a33;
    color: #fff; font-size: 20px !important;
}
.editor-zoom-hint { overflow: hidden; color: #acbdba; white-space: nowrap; text-overflow: ellipsis; }
.editor-stage-tools button.running { color: #adf5ca; }
.editor-assembly-timeline .editor-assembly-playhead {
    z-index: 6; top: 0; bottom: 0; width: 22px; height: 100%; padding: 0;
    border: 0; background: transparent; box-shadow: none; transform: translateX(-50%);
    pointer-events: auto; touch-action: none; cursor: ew-resize;
}
.editor-assembly-timeline .editor-assembly-playhead::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 10px;
    width: 2px; background: #fff; box-shadow: 0 0 6px #000;
}
.editor-assembly-timeline .editor-assembly-playhead::after {
    content: ''; position: absolute; top: 0; left: 5px; width: 12px; height: 10px;
    border-radius: 0 0 5px 5px; background: #fff; box-shadow: 0 2px 5px #0008;
}
.editor-assembly-timeline .editor-assembly-playhead:focus-visible { outline: 2px solid #a4efc8; outline-offset: -2px; }
@media (max-width: 380px) { .editor-zoom-hint { display: none; } }

.editor-export-result { margin: 12px 0; }
.editor-export-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.editor-export-actions button, #editorCancelExport, #editorCompatibilityExport { min-height: 44px; padding: 10px 16px; border-radius: 12px; }
.editor-export-result p { font-size: 13px; line-height: 1.5; opacity: .8; }
.editor-export-actions [hidden] { display: none; }

.editor-stage-tools, .editor-stage-tools button { touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.editor-stage-tools #editorToolDelete { color: #ffb6b6; }
.editor-transition-overlay { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; }
.editor-stage-dock { z-index: 8; }
.editor-ai-workspace { z-index: 7; }
.editor-export-result { padding: 14px; border: 1px solid #56756a; border-radius: 14px; background: #14241d; }
.editor-export-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 12px; color: #ecfff5; }
.editor-export-heading span { font-size: 12px; color: #b8d1c5; }
.editor-export-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #536c61; border-radius: 12px; color: #e5fff1; background: #203a2d; text-decoration: none; box-sizing: border-box; }
.editor-export-actions a:focus-visible { outline: 2px solid #a4efc8; outline-offset: 3px; }
.editor-export-retention { margin-bottom: 0; }

/* AI Skills controls the pose view; the canvas is below the editing surface. */
.editor-pose-viewer { margin-top: 18px; }
.editor-pose-viewer h2 { margin: 0 0 8px; font-size: 1.1rem; }
.editor-pose-viewer .editor-side-pose-panel { max-width: 640px; margin: 12px auto 0; }

.editor-rep-completions { display: grid; gap: .5rem; max-height: 14rem; overflow-y: auto; }

.editor-rep-completion { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.editor-rep-completion select { width: 65%; min-height: 2.75rem; }

.editor-humanoid-overlay { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }

.editor-humanoid-overlay.hidden { display:none; }

@media (hover: hover) and (pointer: fine) {
    .editor-stage-tools, .editor-stage-tools button { cursor: grab; }
    .editor-stage-tools.is-dragging, .editor-stage-tools.is-dragging button { cursor: grabbing; }
}

#editorMaskPreview { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.editor-mask-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.editor-mask-actions button { min-height:44px; padding:9px 14px; }
#editorToolMaskPanel label { display:flex; align-items:center; gap:10px; min-height:44px; }
#editorMaskProgress { width:100%; margin-top:12px; }
.editor-mask-note, #editorMaskStatus { font-size:.85rem; line-height:1.45; opacity:.85; }

/* Skills share the full video's ruler, zoom and clip timing. */
.editor-main-skills { position: relative; width: 100%; height: 52px; border: 0; border-top: 1px solid #465461; border-radius: 0; overflow: visible; }
.editor-main-skills::after { display: none; }
.editor-main-skills .editor-segment { top: 6px; bottom: 6px; min-width: 0; padding: 0; display: block; border-radius: 6px; touch-action: none; }
.editor-main-skills .editor-segment-label { position: absolute; inset: 0; width: 100%; padding: 0 17px; background: transparent; color: #fff; border: 0; cursor: grab; pointer-events: auto; text-align: left; touch-action: none; }
.editor-main-skills .editor-segment-handle { position: absolute; top: 0; bottom: 0; width: 14px; border: 0; padding: 0; border-radius: 3px; opacity: .55; }
.editor-main-skills .editor-segment-handle.start { left: 0; }
.editor-main-skills .editor-segment-handle.end { right: 0; }
.editor-main-skills .selected .editor-segment-handle { opacity: 1; }
.editor-main-skills .editor-segment-handle::after { margin: 12px 6px; }
.editor-skill-selection { display: flex; gap: 6px; align-items: center; padding: 10px 0; }
.editor-skill-selection > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.editor-skill-selection strong { color: #f1f7fa; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-skill-selection output, .editor-timeline-hint { color: #aebdc9; font-size: 11px; }
.editor-skill-selection button, .editor-effect-actions button { min-height: 40px; padding: 8px 10px; border: 1px solid #536370; background: #23323b; color: #fff; border-radius: 9px; font-size: 12px; }
.editor-timeline-hint { margin: 5px 0 10px; line-height: 1.5; }
.editor-effect-presets { display: flex; gap: 9px; overflow-x: auto; padding: 7px 2px 12px; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: thin; }
.editor-effect-card { flex: 0 0 76px; min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 10px; background: #202d38; color: #dfebf1; font-size: 10px; display: grid; gap: 7px; cursor: pointer; touch-action: pan-x; }
.editor-effect-card[aria-pressed="true"] { border-color: #abf38d; color: #c4ffad; background: #294333; }
.editor-effect-swatch { display: block; height: 67px; border-radius: 6px; background: linear-gradient(145deg, #7eacb5, #e6c69b 40%, #6d825c 41%, #273c36); background-size: cover; background-position: center; pointer-events: none; }
#editorTransitionPresets .editor-effect-swatch { background: linear-gradient(115deg, #9cc3ce 50%, #c8976f 50%); position: relative; overflow: hidden; }
#editorTransitionPresets .editor-effect-swatch::after { content: ''; position: absolute; inset: 0; background: #10171e; animation: editor-fade-demo 2.4s ease-in-out infinite; }
#editorTransitionPresets [data-style="none"]::after { display: none; }
#editorTransitionPresets [data-style="white"]::after { background: #fff; }
#editorTransitionPresets [data-style="left"]::after { animation-name: editor-wipe-demo; }
#editorTransitionPresets [data-style="right"]::after { animation-name: editor-wipe-demo; animation-direction: reverse; }
#editorTransitionPresets [data-style="circle"]::after { animation-name: editor-circle-demo; }
#editorTransitionPresets [data-style="shutter"]::after { animation-name: editor-shutter-demo; }
.editor-effect-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.editor-effect-actions button[aria-pressed="true"] { border-color: #abf38d; color: #c4ffad; }
.editor-filter-adjustments { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 16px; }
.editor-effect-presets.is-dragging, .editor-effect-presets.is-dragging * { cursor: grabbing; user-select: none; }
.editor-effect-card:disabled { opacity: .45; }
@keyframes editor-fade-demo { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes editor-wipe-demo { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes editor-circle-demo { 0%,100% { clip-path: circle(0 at 50% 50%); } 50% { clip-path: circle(75% at 50% 50%); } }
@keyframes editor-shutter-demo { 0%,100% { clip-path: inset(50% 0); } 50% { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { #editorTransitionPresets .editor-effect-swatch::after { animation: none; opacity: .45; } }
.editor-skill-options { margin: 7px 0 14px; color: #d5e1e8; font-size: 12px; }
.editor-skill-options summary { padding: 10px 0; cursor: pointer; }
.editor-main-skills::after { display: block; background: #fff; opacity: .8; }
.editor-page button, .editor-page select { touch-action: manipulation; }
.editor-page .editor-effect-card, .editor-page .editor-stage-tools button { touch-action: pan-x; }
.editor-page .editor-segment button, .editor-page .editor-assembly-playhead { touch-action: none; }