/* === Google Fonts === */
@import url('fonts/fonts.css');

/* === DESIGN TOKENS ===
   Editor theme in one place. Values below are the editor's existing colors, so this
   block changes nothing by itself - it just makes the editor themeable. To retheme,
   edit a token here instead of hunting hex values across the stylesheet.
   An on-brand alternative (warmer than the default editor-blue) is commented
   under each accent token; uncomment to switch the accent in one move. */
:root {
    /* Accent (currently the default editor-blue) */
    --pe-accent: #4a9eff;
    --pe-accent-strong: #4a90d9;
    /* On-brand alternative - iridescent violet/gold; uncomment to use:
    --pe-accent: #b98cff;
    --pe-accent-strong: #9a6df0; */

    /* Surfaces */
    --pe-bg: #0a0a0a;
    --pe-surface: #141414;
    --pe-surface-2: #1f1f1f;
    --pe-panel: #1a1a1a;
    --pe-border: #2a2a2a;

    /* Text */
    --pe-text: #fff;
    --pe-text-mid: #aaa;
    --pe-text-dim: #888;

    /* State */
    --pe-danger: #ff5555;
    --pe-danger-soft: #ff6b6b;
}

/* CSP-safe visibility primitive used instead of inline display declarations. */
[hidden] { display: none !important; }

/* === MAIN PANEL === */
#pro-editor {
    width: 100%;
    height: 100%;
    background: #141414;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #e6e6e6;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #2a2a2a;
}

/* === HEADER === */
.pe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #1e1e1e 0%, #181818 100%);
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.pe-header h1 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pe-dirty-dot {
    width: 8px;
    height: 8px;
    background: #f90;
    border-radius: 50%;
    display: none;
}
.pe-dirty-dot.visible { display: block; }

.pe-header-btns {
    display: flex;
    gap: 6px;
}

.pe-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #2a2a2a;
    border: none;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.pe-icon-btn:hover { background: #3a3a3a; color: #fff; }
.pe-icon-btn.active { background: var(--pe-accent); color: #fff; }

.pe-close-btn {
    background: none !important;
    font-size: 18px;
}

/* === MODE TABS === */
.pe-tabs {
    display: flex;
    background: #111;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.pe-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.pe-tab:hover { color: #999; }
.pe-tab.active { color: var(--pe-accent); border-bottom-color: var(--pe-accent); }

/* === PLAYBACK === */
/* Transport: timer and buttons share one row, the scrubber spans beneath, so the
   panel spends its height on the controls below it. */
.pe-playback {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "timer buttons"
        "scrub scrub";
    align-items: center;
    gap: 8px 12px;
    padding: 9px 14px 10px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.pe-timer {
    grid-area: timer;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    font-size: 21px;
    text-align: left;
    color: var(--pe-accent);
    margin: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(74, 158, 255, 0.25);
}

.pe-scrubber {
    grid-area: scrub;
    position: relative;
    width: 100%;
    height: 18px;
    background: #0a0a0a;
    border-radius: 5px;
    cursor: pointer;
    margin: 0;
    overflow: hidden;
    border: 1px solid #2a2a2a;
}

.pe-scrubber-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, #1a4a8a 0%, var(--pe-accent) 100%);
    border-radius: 5px;
    width: 0%;
    transition: width 0.05s linear;
}

.pe-scrubber-markers {
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    bottom: 4px;
    pointer-events: none;
}

.pe-scrubber-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(100, 220, 100, 0.3);
    border-radius: 3px;
    border: 1px solid rgba(100, 220, 100, 0.5);
}

.pe-scrubber-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ff5555;
    box-shadow: 0 0 10px rgba(255, 85, 85, 0.6);
    pointer-events: none;
    z-index: 5;
}

.pe-playback-btns {
    grid-area: buttons;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

.pe-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2a2a2a;
    border: none;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.pe-play-btn:hover { background: #3a3a3a; color: #fff; }

.pe-play-btn.pe-play-main {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--pe-accent) 0%, #2a7adf 100%);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 3px 11px rgba(74, 158, 255, 0.3);
}
.pe-play-btn.pe-play-main:hover { transform: scale(1.05); }
.pe-play-btn.pe-play-main:active { transform: scale(0.95); }

.pe-text-toggle {
    font-size: 16px !important;
    position: relative;
}
.pe-text-toggle.active {
    background: #1a5a1a;
    color: #6f6;
}

.pe-scroll-slide-label {
    font-size: 10px;
    color: #888;
    margin-left: 8px;
}

.pe-prop-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pe-prop-inline label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.pe-prop-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--pe-accent);
}

.pe-input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ddd;
    padding: 4px 8px;
    font-size: 12px;
    font-family: 'SF Mono', Monaco, monospace;
}
.pe-input:focus {
    border-color: var(--pe-accent);
    outline: none;
}

.pe-ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2a2a2a;
    border: none;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pe-ctrl-btn:hover { background: #3a3a3a; color: #fff; }

.pe-speed-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #333;
}

.pe-speed-wrap label { font-size: 10px; color: #666; }
.pe-speed-wrap select {
    padding: 5px 8px;
    background: #222;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ccc;
    font-size: 11px;
}

/* === SCROLLABLE CONTENT === */
.pe-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.pe-content::-webkit-scrollbar { width: 6px; }
.pe-content::-webkit-scrollbar-track { background: #0a0a0a; }
.pe-content::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* === SECTIONS === */
.pe-section {
    padding: 14px 18px;
    border-bottom: 1px solid #1a1a1a;
}

.pe-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pe-section-title {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* === TEXT LIST === */
.pe-text-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pe-text-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: #1c1c1c;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    border-left: 3px solid transparent;
    transition: all 0.1s;
    gap: 8px;
}
.pe-text-item:hover { background: #242424; }
.pe-text-item.selected {
    border-color: var(--pe-accent);
    background: rgba(74, 158, 255, 0.08);
}
.pe-text-item.multi-selected {
    border-color: var(--pe-accent);
    border-style: dashed;
}
.pe-text-item.pe-active {
    border-left-color: #4aff6e;
    background: rgba(74, 255, 110, 0.06);
}

.pe-text-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pe-text-item-timing-row {
    display: flex;
    gap: 6px;
}

.pe-timing-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pe-timing-field label {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pe-inline-input {
    width: 100%;
    padding: 4px 6px;
    background: #111;
    border: 1px solid #333;
    border-radius: 3px;
    color: var(--pe-accent);
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    text-align: center;
}
.pe-inline-input:focus {
    outline: none;
    border-color: var(--pe-accent);
    background: #1a1a1a;
}
.pe-inline-input::-webkit-inner-spin-button,
.pe-inline-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pe-text-num {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--pe-accent) 0%, #2a7adf 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-right: 10px;
    flex-shrink: 0;
}

.pe-text-preview {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.pe-text-timing {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 9px;
    color: #555;
    background: #111;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.pe-text-actions {
    display: flex;
    gap: 3px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.1s;
}
.pe-text-item:hover .pe-text-actions { opacity: 1; }

.pe-mini-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 10px;
    border-radius: 3px;
    background: #333;
    border: none;
    color: #aaa;
    cursor: pointer;
}
.pe-mini-btn:hover { background: #444; color: #fff; }
.pe-mini-btn.danger:hover { background: #c44; }

/* Text item children - actual classes used */
.pe-text-item-preview {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #ddd;
}

.pe-text-item-timing {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    color: #666;
    background: #111;
    padding: 3px 8px;
    border-radius: 3px;
    margin-left: 10px;
    flex-shrink: 0;
}

.pe-text-item-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.15s;
}
.pe-text-item:hover .pe-text-item-actions { opacity: 1; }

.pe-item-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    border-radius: 4px;
    background: #333;
    border: none;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pe-item-btn:hover { background: #444; color: #fff; }
.pe-item-btn.pe-item-del:hover { background: #c44; }
.pe-item-btn.pe-item-move { font-size: 9px; width: 20px; height: 20px; }
.pe-item-btn.pe-item-move:disabled { opacity: 0.3; cursor: default; background: #333; color: #888; }

/* === TIMING CLICKER MODE === */
.pe-timing-toggle { font-size: 14px !important; }
.pe-timing-toggle.active {
    background: #e85d26 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(232, 93, 38, 0.5);
}
.pe-timing-status {
    display: none;
    font-size: 11px;
    color: #ccc;
    text-align: center;
    padding: 4px 8px;
    background: rgba(232, 93, 38, 0.15);
    border-radius: 4px;
    margin-top: 6px;
}
.pe-timing-label { color: #e85d26; font-weight: 600; }
.pe-timing-preview { color: #aaa; font-style: italic; }
.pe-timing-phase { color: var(--pe-accent); font-weight: 500; margin-left: 4px; }
.pe-text-item.pe-timing-target {
    border-left: 3px solid #e85d26 !important;
    background: rgba(232, 93, 38, 0.08) !important;
}

/* === PROPERTIES PANEL === */
.pe-properties {
    display: none;
}
.pe-properties.visible { display: block; }

.pe-prop-group {
    margin-bottom: 14px;
}

.pe-prop-label {
    display: block;
    font-size: 10px;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pe-input,
.pe-textarea,
.pe-select {
    width: 100%;
    padding: 9px 11px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    transition: border-color 0.12s;
}
.pe-input:focus,
.pe-textarea:focus,
.pe-select:focus {
    outline: none;
    border-color: var(--pe-accent);
}

.pe-textarea {
    min-height: 70px;
    resize: vertical;
    line-height: 1.4;
}

.pe-prop-row {
    display: flex;
    gap: 10px;
}
.pe-prop-row .pe-prop-group { flex: 1; }
.pe-prop-row .pe-prop-group-wide { flex: 2; }

.pe-prop-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pe-gradient-preview {
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg, #fff, #000);
}

.pe-timing-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 18px;
}
.pe-timing-fade {
    flex: 0 0 auto;
    height: 8px;
    background: linear-gradient(90deg, transparent, var(--pe-accent));
}
.pe-timing-fadeout { transform: scaleX(-1); }
.pe-timing-main {
    flex: 1;
    height: 8px;
    background: var(--pe-accent);
}

.pe-letter-preview {
    min-height: 24px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #1a1a1a;
    font: 13px/1.6 monospace;
    word-break: break-all;
}
.pe-letter-color-entry {
    align-items: center;
    margin-bottom: 4px;
}
.pe-letter-color-entry .pe-letter-index-group { flex: 0 0 50px; }
.pe-letter-color-entry .pe-letter-color-group { flex: 0 0 36px; }
.pe-letter-color-entry .pe-input { width: 45px; }
.pe-letter-color-entry .pe-color { width: 32px; height: 24px; }
.pe-letter-range-separator { color: #888; padding: 0 2px; }
.pe-letter-color-entry .pe-lc-remove {
    flex: 0 0 24px;
    font-size: 11px;
}
.pe-add-letter-color {
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 11px;
}

/* Slider */
.pe-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pe-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 5px;
    background: #2a2a2a;
    border-radius: 3px;
    cursor: pointer;
}

.pe-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--pe-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.pe-slider-val {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    color: #888;
    min-width: 45px;
    text-align: right;
}

/* Color picker */
.pe-color-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pe-color-input {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid #2a2a2a;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

.pe-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.pe-color-input::-webkit-color-swatch { border-radius: 3px; border: none; }

/* Alignment buttons */
.pe-align-btns {
    display: flex;
    gap: 3px;
}

.pe-align-btn {
    flex: 1;
    padding: 9px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #666;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.1s;
}
.pe-align-btn:first-child { border-radius: 5px 0 0 5px; }
.pe-align-btn:last-child { border-radius: 0 5px 5px 0; }
.pe-align-btn:hover { background: #252525; color: #aaa; }
.pe-align-btn.active { background: var(--pe-accent); border-color: var(--pe-accent); color: #fff; }

/* Action buttons */
.pe-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #222;
}

.pe-btn {
    flex: 1;
    padding: 10px 14px;
    background: #2a2a2a;
    border: none;
    border-radius: 5px;
    color: #ddd;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s;
}
.pe-btn:hover { background: #3a3a3a; }
.pe-btn:active { transform: scale(0.98); }

.pe-btn.primary { background: var(--pe-accent); color: #fff; }
.pe-btn.primary:hover { background: #3a8eef; }

.pe-btn.success { background: #4a9; color: #fff; }
.pe-btn.success:hover { background: #3a8; }

.pe-btn.danger { background: #c44; color: #fff; }
.pe-btn.danger:hover { background: #d55; }

.pe-btn.small { padding: 7px 10px; font-size: 10px; }


/* === TIMELINE VIEW === */
.pe-timeline {
    display: none;
}
.pe-timeline.visible { display: block; }

.pe-timeline-canvas {
    background: #0a0a0a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #222;
}

.pe-timeline-ruler {
    display: flex;
    height: 24px;
    background: #151515;
    border-bottom: 1px solid #2a2a2a;
}

.pe-timeline-ruler-spacer {
    width: 100px;
    flex-shrink: 0;
}

.pe-timeline-ruler-marks {
    flex: 1;
    position: relative;
}

.pe-timeline-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #2a2a2a;
}

.pe-timeline-mark span {
    position: absolute;
    top: 5px;
    left: 4px;
    font-size: 8px;
    color: #555;
    font-family: 'SF Mono', Monaco, monospace;
}

.pe-timeline-rows {
    position: relative;
}

.pe-timeline-row {
    display: flex;
    align-items: center;
    height: 36px;
    border-bottom: 1px solid #1a1a1a;
}
.pe-timeline-row:hover { background: rgba(255,255,255,0.02); }

.pe-timeline-label {
    width: 100px;
    padding: 0 10px;
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    background: #111;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.pe-timeline-label:hover { color: #ccc; }

.pe-timeline-track {
    flex: 1;
    position: relative;
    height: 100%;
    background: #080808;
}

.pe-timeline-bar {
    position: absolute;
    top: 6px;
    bottom: 6px;
    background: linear-gradient(90deg, #2a6abd 0%, var(--pe-accent) 100%);
    border-radius: 4px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    overflow: hidden;
    min-width: 24px;
    transition: box-shadow 0.1s;
}
.pe-timeline-bar:hover { box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.4); }
.pe-timeline-bar.selected { box-shadow: 0 0 0 2px #fff; }

.pe-timeline-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
}
.pe-timeline-handle:hover { background: rgba(255,255,255,0.15); }
.pe-timeline-handle.left { left: 0; border-radius: 4px 0 0 4px; }
.pe-timeline-handle.right { right: 0; border-radius: 0 4px 4px 0; }

.pe-timeline-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff5555;
    box-shadow: 0 0 8px rgba(255,85,85,0.5);
    pointer-events: none;
    z-index: 10;
}

.pe-ctrl-region {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #26262d;
}
.pe-region-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 6px 0;
}
.pe-region-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: #a9a4b4;
    font-size: 12px;
}
.pe-region-field input {
    width: 62px;
    padding: 3px 5px;
    border: 1px solid #3b4356;
    border-radius: 3px;
    background: #0b0b0b;
    color: #eee;
    font: 600 12px -apple-system, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.pe-region-help {
    margin: 6px 0;
    color: #a9a4b4;
    font-size: 12px;
    line-height: 1.45;
}
#pe-region-pick.picking {
    border-color: var(--pe-accent);
    color: var(--pe-accent);
}

/* === IMAGE SEQUENCE FILMSTRIP === */
.pe-seq-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #222;
}
.pe-seq-count {
    margin-left: auto;
    font-size: 12px;
    color: #9a9aa4;
}
.pe-seq-duration-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #222;
    background: #14141a;
}
.pe-seq-duration-label {
    color: #e2dee9;
    font: 600 13px -apple-system, system-ui, sans-serif;
}
.pe-seq-duration-all-input {
    width: 68px;
    padding: 4px 6px;
    border: 1px solid #3b4356;
    border-radius: 3px;
    background: #0b0b0b;
    color: #eee;
    font: 600 12px -apple-system, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.pe-seq-duration-all-input:focus-visible {
    outline: 2px solid var(--pe-accent);
    outline-offset: 1px;
}
.pe-seq-duration-unit {
    color: #a9a4b4;
    font-size: 13px;
}
.pe-seq-duration-note {
    flex: 1 1 100%;
    color: #a9a4b4;
    font-size: 12px;
    line-height: 1.45;
}
.pe-seq-frame-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #222;
    background: #14141a;
}
.pe-seq-frame-label {
    color: #e2dee9;
    font: 600 13px -apple-system, system-ui, sans-serif;
}
.pe-seq-frame-size {
    color: #9cc0ff;
    background: #0b0b0b;
    border: 1px solid #3b4356;
    border-radius: 3px;
    padding: 3px 8px;
    font: 600 12px -apple-system, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.pe-seq-frame-fit {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a9a4b4;
    font-size: 12px;
}
.pe-seq-frame-fit select {
    padding: 3px 5px;
    border: 1px solid #3b4356;
    border-radius: 3px;
    background: #0b0b0b;
    color: #ddd;
    font: inherit;
}
.pe-seq-frame-fit select:focus-visible {
    outline: 2px solid var(--pe-accent);
    outline-offset: 1px;
}
.pe-seq-frame-note {
    flex: 1 1 100%;
    color: #a9a4b4;
    font-size: 12px;
    line-height: 1.45;
}
.pe-seq-ingest-help {
    margin: 0;
    padding: 8px 14px;
    border-bottom: 1px solid #222;
    color: #a9a4b4;
    background: #111114;
    font-size: 12px;
    line-height: 1.45;
}
.pe-seq-filmstrip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
}
.pe-seq-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: #151515;
    border: 1px solid #222;
    border-radius: 6px;
    cursor: grab;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.pe-seq-card:hover { background: #1a1a1a; border-color: #333; }
.pe-seq-card.active { border-color: var(--pe-accent); background: #111828; }
.pe-seq-card.drag-over { border-color: #ff9; border-style: dashed; }
.pe-seq-card.dragging { opacity: 0.4; }
.pe-seq-card.intro-card { border-left: 3px solid var(--pe-accent); }
.pe-seq-thumb {
    width: 80px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #0a0a0a;
}
.pe-seq-info {
    flex: 1;
    min-width: 0;
}
.pe-seq-index {
    font-size: 11px;
    color: #8b8b95;
    font-family: 'SF Mono', Monaco, monospace;
}
.pe-seq-name {
    font-size: 13px;
    color: #e8e8ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pe-seq-meta {
    font-size: 11px;
    color: #8b8b95;
    margin-top: 2px;
}
.pe-seq-tune {
    margin-top: 6px;
    padding: 5px 9px;
    border: 1px solid #3b4356;
    border-radius: 4px;
    color: #b7dff2;
    background: #16202a;
    cursor: pointer;
    font: 600 12px -apple-system, system-ui, sans-serif;
}
.pe-seq-tune:hover { color: #e5f8ff; border-color: var(--pe-accent); }
.pe-seq-duration {
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    margin-top: 4px;
    color: #c9c4d4;
    font-size: 12px;
    font-weight: 600;
}
.pe-seq-duration input {
    width: 66px;
    padding: 2px 4px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #0b0b0b;
    color: #ddd;
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.pe-seq-transition-disclosure {
    margin-top: 6px;
    border: 1px solid #2b2b32;
    border-radius: 4px;
    background: #121216;
}
.pe-seq-transition-disclosure > summary {
    padding: 6px 8px;
    color: #b6b1c2;
    font-size: 12px;
    cursor: pointer;
    list-style-position: inside;
}
.pe-seq-transition-disclosure > summary:hover { color: #e6e2f0; }
.pe-seq-transition-disclosure > summary:focus-visible { outline: 2px solid #7edcf2; outline-offset: 2px; }
.pe-seq-transition-disclosure[open] > summary { border-bottom: 1px solid #26262d; }
.pe-seq-transition {
    min-width: 0;
    margin: 0;
    padding: 6px 8px 8px;
    border: none;
    border-radius: 0;
}
.pe-seq-transition legend {
    padding: 0 3px;
    color: #a3a3ad;
    font-size: 11px;
}
.pe-seq-transition-details {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}
.pe-seq-transition-details[hidden] { display: none; }
.pe-seq-handoff-details {
    display: grid;
    gap: 4px;
    padding-top: 5px;
    border-top: 1px solid #26262d;
}
.pe-seq-handoff-details[hidden] { display: none; }
.pe-seq-handoff-explanation {
    margin: 0 0 2px;
    color: #9d9daa;
    font-size: 11px;
    line-height: 1.4;
}
.pe-seq-transition-field {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    color: #aeaeb8;
    font-size: 12px;
}
.pe-seq-transition-field select,
.pe-seq-transition-field input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #0b0b0b;
    color: #ddd;
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.pe-seq-transition-range {
    grid-template-columns: 96px minmax(72px, 1fr) 36px;
}
.pe-seq-transition-range input[type="range"] {
    padding: 0;
    accent-color: #7edcf2;
}
.pe-seq-transition-range output {
    color: #aaa;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pe-seq-transition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.pe-seq-transition-button {
    flex: 1 1 110px;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid #35353d;
    border-radius: 3px;
    background: #17171c;
    color: #c6c6d0;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.pe-seq-transition-button:hover { color: #fff; border-color: #666675; }
.pe-seq-transition-readonly,
.pe-seq-transition-end {
    margin-top: 6px;
    color: #8e8e98;
    font-size: 11px;
    line-height: 1.35;
}
.pe-seq-actions {
    display: grid;
    grid-template-columns: repeat(2, 34px);
    gap: 5px;
    flex-shrink: 0;
}
.pe-seq-btn {
    background: none;
    border: 1px solid #3a3a42;
    color: #b0b0ba;
    border-radius: 3px;
    padding: 5px 6px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.pe-seq-btn:hover { color: #fff; border-color: #555; }
.pe-seq-btn:focus-visible,
.pe-seq-tune:focus-visible,
.pe-seq-duration input:focus-visible,
.pe-seq-transition-field input:focus-visible,
.pe-seq-transition-field select:focus-visible,
.pe-seq-transition-button:focus-visible { outline: 2px solid #7edcf2; outline-offset: 2px; }
.pe-seq-btn:disabled { cursor: not-allowed; opacity: 0.35; }
.pe-seq-btn.delete:hover { color: #ff5555; border-color: #ff5555; }
.pe-seq-btn.go:hover { color: var(--pe-accent); border-color: var(--pe-accent); }
.pe-seq-drag-handle {
    color: #333;
    font-size: 14px;
    cursor: grab;
    padding: 0 4px;
    user-select: none;
}
.pe-seq-drag-handle:hover { color: #666; }

/* === CHROMATA CONTROLS === */
.pe-chromata-header {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #222;
}
.pe-chromata-slide-label {
    font-size: 11px;
    color: var(--pe-accent);
    font-weight: 600;
    margin-right: auto;
}
.pe-chromata-toggle-wrap {
    display: flex;
    gap: 2px;
    background: #111;
    border-radius: 4px;
    padding: 1px;
    border: 1px solid #333;
}
.pe-chromata-toggle {
    font-size: 10px !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    border: none !important;
    background: transparent !important;
    color: #888 !important;
    cursor: pointer;
    transition: all 0.15s;
}
.pe-chromata-toggle.active {
    background: #2a2a2a !important;
    color: #fff !important;
}
.pe-chromata-controls {
    padding: 8px 14px;
    overflow-y: auto;
    max-height: calc(100vh - 380px);
}
.pe-perceptual-notice {
    margin: 10px 14px 4px;
    padding: 10px 12px;
    color: #b9ddec;
    background: rgba(76, 163, 201, .10);
    border: 1px solid rgba(117, 211, 255, .25);
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.45;
}
.pe-ctrl-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #aaa;
    padding: 4px 0;
    border-bottom: 1px solid #1a1a1a;
}
.pe-ctrl-group label select,
.pe-ctrl-group label input[type="range"] {
    flex: 1;
    min-width: 0;
}
.pe-ctrl-group select {
    background: #1a1a1a;
    color: #ccc;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    font-family: inherit;
}
.pe-ctrl-group select[multiple] {
    height: auto;
}
.pe-ctrl-group input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    background: #333;
    border-radius: 2px;
    outline: none;
}
.pe-ctrl-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pe-accent);
    cursor: pointer;
    border: 2px solid #111;
}
.pe-chr-val {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    color: var(--pe-accent);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.pe-ctrl-extended {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #2a2a2a;
}
.pe-chromata-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #222;
}
.pe-chromata-actions .pe-btn {
    flex: 1;
}

/* === ORIGIN SELECTOR === */
.pe-origin-section {
    border-top: 1px solid #222;
    padding: 8px 14px 4px;
}
.pe-origin-section h4 {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
}
.pe-budget-bar {
    height: 18px;
    background: #1a1a1a;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #333;
}
.pe-budget-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--pe-accent-strong), #67b26f);
    transition: width 0.2s ease;
    border-radius: 9px;
}
.pe-budget-fill.over-budget {
    background: linear-gradient(90deg, #d94a4a, #e57c4a);
}
.pe-budget-label {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #ccc;
    font-weight: 600;
    pointer-events: none;
}
.pe-origin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.pe-origin-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    transition: border-color 0.15s;
}
.pe-origin-card.active {
    border-color: var(--pe-accent-strong);
}
.pe-origin-card .pe-origin-label {
    font-size: 9px;
    color: #888;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pe-origin-card.active .pe-origin-label {
    color: #ccc;
}
.pe-origin-card input {
    width: 36px;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 2px;
    font-size: 11px;
    font-family: 'SF Mono', Monaco, monospace;
}
.pe-origin-card input:focus {
    border-color: var(--pe-accent-strong);
    outline: none;
}
.pe-origin-custom-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.pe-origin-custom-card {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 9px;
    color: #888;
}
.pe-origin-custom-card.active {
    border-color: var(--pe-accent-strong);
    color: #ccc;
}
.pe-origin-custom-card input {
    width: 32px;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 2px;
    font-size: 10px;
    font-family: 'SF Mono', Monaco, monospace;
}
.pe-origin-custom-card .pe-origin-remove {
    cursor: pointer;
    color: #666;
    font-size: 12px;
    line-height: 1;
}
.pe-origin-custom-card .pe-origin-remove:hover {
    color: #e55;
}
.pe-origin-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pe-origin-actions button {
    font-size: 9px;
    padding: 3px 8px;
    background: #222;
    border: 1px solid #444;
    color: #aaa;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
.pe-origin-actions button:hover {
    background: #333;
    color: #fff;
}
.pe-origin-actions button.pe-origin-add-custom {
    border-style: dashed;
}
.pe-origin-actions button.pe-origin-add-custom.picking {
    border-color: var(--pe-accent-strong);
    color: var(--pe-accent-strong);
}

/* === OUTPUT === */
.pe-output-section {
    border-top: 1px solid #2a2a2a;
    background: #111;
    flex-shrink: 0;
}

.pe-output-header {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    align-items: center;
}

.pe-output-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #666;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 8px;
}
.pe-output-toggle:hover { color: #aaa; }

.pe-output-content {
    display: none;
    padding: 0 14px 14px;
}
.pe-output-content.open {
    display: block;
}

.pe-output {
    width: 100%;
    height: 120px;
    padding: 9px 11px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 5px;
    color: #7c7;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 9px;
    resize: vertical;
}

.pe-output-code {
    width: 100%;
    height: 90px;
    padding: 9px 11px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 5px;
    color: #7c7;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 9px;
    resize: vertical;
    margin-bottom: 10px;
}

.pe-output-btns {
    display: flex;
    gap: 6px;
}

/* === CANVAS OVERLAYS === */

/* When editor is open, make real intro text items interactive (not hidden!) */
body.pro-editor-open #intro-overlay {
    pointer-events: auto;
}

body.pro-editor-open .intro-text-item {
    pointer-events: auto;
    cursor: move;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: border-color 0.15s ease;
}

body.pro-editor-open .intro-text-item:hover {
    border-color: rgba(74, 158, 255, 0.3);
}

body.pro-editor-open .intro-text-item.pe-selected {
    border-color: var(--pe-accent);
}

body.pro-editor-open #text-overlay {
    pointer-events: auto;
}

/* Pixel output from the shared offline renderer. Legacy overlays stay outside
   the canonical composited frame, including while editor chrome is open. */
.canonical-preview-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

body.canonical-preview-active #intro-overlay,
body.canonical-preview-active #text-overlay {
    visibility: hidden !important;
}

body.pro-editor-open .narrative-text {
    pointer-events: auto;
    cursor: move;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: border-color 0.15s ease;
}

body.pro-editor-open .narrative-text:hover {
    border-color: rgba(74, 158, 255, 0.3);
}

body.pro-editor-open .narrative-text.pe-selected {
    border-color: var(--pe-accent);
}
    background: rgba(74, 158, 255, 0.05);
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.15);
}

/* Inline editing state */
body.pro-editor-open .intro-text-item .pe-editing-inline {
    cursor: text;
    user-select: text;
    border-bottom: 1px dashed #4a9;
    background: rgba(68, 170, 153, 0.08);
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 2px;
}

/* Resize handles */
.pe-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--pe-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 100;
    pointer-events: auto;
}

.pe-resize-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.pe-resize-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.pe-resize-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.pe-resize-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.pe-resize-n { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pe-resize-s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pe-resize-e { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pe-resize-w { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* Grid overlay */
.pe-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    display: none;
    background-image: 
        linear-gradient(rgba(100,100,100,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,100,100,0.08) 1px, transparent 1px);
    background-size: 5% 5%;
}

body.pro-editor-open.show-grid .pe-grid-overlay { display: block; }

/* Coordinates display */
#pe-coords {
    position: fixed;
    bottom: 16px;
    left: 16px;
    background: rgba(0,0,0,0.9);
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    color: #888;
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
body.pro-editor-open #pe-coords { display: block; }

/* Toast notifications */
#pe-toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    z-index: 20000;
    opacity: 0;
    transition: all 0.2s;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

#pe-toast.visible { 
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Keyboard shortcuts modal */
#pe-shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
}

#pe-shortcuts-modal.visible { display: flex; }

.pe-shortcuts-box {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    min-width: 340px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.pe-shortcuts-box h3 {
    font-size: 15px;
    margin: 0;
    color: #fff;
}

.pe-shortcuts-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.pe-shortcuts-close {
    width: 30px;
    height: 30px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: #222;
    color: #ddd;
    cursor: pointer;
    font-size: 18px;
}
.pe-shortcuts-close:focus-visible { outline: 2px solid #7edcf2; outline-offset: 2px; }

.pe-shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #222;
}
.pe-shortcut-row:last-child { border-bottom: none; }

.pe-shortcut-key {
    background: #2a2a2a;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    color: #aaa;
    border: 1px solid #333;
}

/* ============================================================
   editor-timeline.js (Workstream 1C) - per-scene chromata timeline
   ============================================================ */
.pe-tl { background:#111; border:1px solid #2a2a2a; border-radius:6px; padding:8px 10px 10px; margin:8px 0; font-size:13px; color:#dcdcdc; }
.pe-tl-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.pe-tl-title { font-weight:600; letter-spacing:.04em; color:#e6e6e6; text-shadow:0 0 18px rgba(74,158,255,.25); }
.pe-tl-time { font-variant-numeric:tabular-nums; color:#8fb6ff; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:4px; padding:2px 6px; }
.pe-tl-seek { display:flex; align-items:center; gap:6px; color:#b3b8c1; font-size:12px; }
.pe-tl-seek input { width:150px; accent-color:var(--pe-accent); }
.pe-tl-seek input:focus-visible { outline:2px solid #7edcf2; outline-offset:2px; }
.pe-tl-actions { margin-left:auto; display:flex; gap:6px; }
.pe-tl-btn { background:#1c1c1c; color:#dcdcdc; border:1px solid #2f2f2f; border-radius:4px; padding:4px 10px; cursor:pointer; font-size:12px; transition:background .15s,border-color .15s; }
.pe-tl-btn:hover { background:#262626; border-color:#3a3a3a; }
.pe-tl-rec.active { background:#5a1a1a; border-color:#ff5555; color:#ffcaca; box-shadow:0 0 10px rgba(255,85,85,.4); }
.pe-tl-body { position:relative; }
.pe-tl-ruler { position:relative; height:16px; margin-bottom:2px; }
.pe-tl-tick { position:absolute; top:0; transform:translateX(-50%); color:#9298a2; text-align:center; }
.pe-tl-tick i { display:block; width:1px; height:6px; background:#3d3d3d; margin:0 auto 1px; }
.pe-tl-tick b { font-weight:400; font-size:11px; }
.pe-tl-lane { position:relative; height:30px; background:#0a0a0a; border:1px solid #222; border-radius:4px; margin-top:4px; }
.pe-tl-lane-key { background:linear-gradient(#0c0c0c,#0a0a0a); }
.pe-tl-lane-tag { position:absolute; left:4px; top:50%; transform:translateY(-50%); z-index:3; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#a2a8b3; background:rgba(10,10,10,.85); padding:2px 5px; border-radius:3px; pointer-events:none; }
.pe-tl-area { position:absolute; inset:0; }
.pe-tl-key { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; padding:0; appearance:none; background:linear-gradient(135deg,var(--pe-accent),#2a7adf); border:1px solid #9ecbff; transform:rotate(45deg); border-radius:2px; cursor:grab; box-shadow:0 0 6px rgba(74,158,255,.5); z-index:2; }
.pe-tl-key:hover { background:#7bb8ff; }
.pe-tl-key:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.pe-tl-key.selected { background:#ffd24a; border-color:#fff0b0; box-shadow:0 0 9px rgba(255,210,74,.7); }
.pe-tl-key.dragging { cursor:grabbing; opacity:.85; }
.pe-tl-bar { position:absolute; top:50%; height:14px; margin-top:-7px; padding:0; appearance:none; background:rgba(100,220,100,.22); border:1px solid rgba(100,220,100,.5); border-radius:3px; overflow:hidden; cursor:ns-resize; text-align:left; }
.pe-tl-bar:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.pe-tl-bar.dragging { opacity:.9; box-shadow:0 0 9px rgba(100,220,100,.6); z-index:5; }
.pe-tl-bar-label { display:block; padding:0 4px; line-height:14px; font-size:11px; color:#cdf0cd; white-space:nowrap; }
.pe-tl-playhead { position:absolute; top:16px; bottom:0; width:2px; margin-left:-1px; background:#ff5555; box-shadow:0 0 8px rgba(255,85,85,.7); pointer-events:none; z-index:4; }
.pe-tl-playhead::before { content:''; position:absolute; top:-4px; left:-3px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #ff5555; }
#pe-autosave-bar { position:fixed; top:62px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; z-index:10000; background:#1c1c20; border:1px solid #34343a; border-radius:8px; padding:8px 12px; box-shadow:0 8px 30px rgba(0,0,0,.5); font:500 12px -apple-system, system-ui, sans-serif; color:#ddd; }
.pe-autosave-btn { height:26px; padding:0 12px; border-radius:6px; cursor:pointer; background:#2a2a2e; border:1px solid #3a3a40; color:#ddd; font:600 12px -apple-system, system-ui, sans-serif; }
.pe-autosave-btn:hover { background:#34343a; color:#fff; }
.pe-autosave-restore { background:var(--pe-accent, #4a9eff); border-color:var(--pe-accent, #4a9eff); color:#0a0a0a; }
.pe-autosave-restore:hover { filter:brightness(1.1); }
.pe-tl-scrollmark { position:absolute; top:16px; bottom:0; width:0; border-left:1px dashed #6ad7ff; box-shadow:0 0 6px rgba(106,215,255,.3); pointer-events:none; z-index:3; }
.pe-tl-scrollmark b { position:absolute; top:1px; left:3px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#6ad7ff; background:rgba(8,16,24,.85); padding:1px 4px; border-radius:3px; white-space:nowrap; }
.pe-tl-hint { margin-top:8px; font-size:12px; line-height:1.5; color:#b9bec8; max-width:none; }

/* Phase 2 (2C): layer indicator + opacity lane */
.pe-tl-layer { font-size:12px; color:#9cc0ff; background:#0d1b30; border:1px solid #24406a; border-radius:3px; padding:2px 7px; letter-spacing:.02em; }
.pe-tl-lane-opacity { background:#0a0a0a; }
.pe-tl-lane-opacity .pe-tl-area { cursor:ns-resize; }
.pe-tl-op-line { position:absolute; left:0; right:0; bottom:100%; height:2px; background:#c9a14a; box-shadow:0 0 6px rgba(201,161,74,.5); cursor:ns-resize; }
.pe-tl-op-handle { position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-5px; background:#e7c66a; border:1px solid #fff0c0; border-radius:50%; }
.pe-tl-op-val { color:#e7c66a; font-weight:600; }
.pe-tl-op-input { position:absolute; z-index:5; left:104px; right:8px; top:50%; width:calc(100% - 112px); transform:translateY(-50%); accent-color:#e7c66a; }