/* ============================================================
   FastCut Pro — Professional Dark Theme v2.0
   Layout: Player + Segments (top) | Timeline (bottom)
   ============================================================ */

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   SEO Welcome Hero - Hidden visually but readable by Google
   Uses sr-only technique: in HTML for SEO, invisible to users
   ============================================================ */
.welcome-hero {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.welcome-hero h1,
.welcome-hero h2 {
    /* Inherited sr-only styles */
}

/* Hide hero when video is loaded */
.video-loaded .welcome-hero {
    display: none;
}

/* ============================================================
   SEO Footer (Desktop only - hidden on mobile)
   ============================================================ */
.seo-footer {
    background: var(--bg-deepest);
    border-top: 1px solid var(--border-subtle);
    padding: 6px 20px;
    text-align: center;
    width: 100%;
}

.seo-footer p {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
}

.seo-footer strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.seo-footer a {
    color: inherit;
    text-decoration: none;
}

.seo-footer a:hover {
    text-decoration: underline;
}

.seo-footer .developer-credit {
    opacity: 0.8;
}

/* Footer hidden on mobile (unified with main mobile breakpoint) */
@media (max-width: 1024px) {
    .seo-footer {
        display: none !important;
    }

    .welcome-hero h1 {
        font-size: 20px;
    }

    .hero-subtitle {
        font-size: 12px;
    }
}

/* --- 1. Design Tokens — Professional Dark Theme --- */
:root {
    /* Backgrounds */
    --bg-deepest:       #12121a;
    --bg-base:          #1a1a2e;
    --bg-surface:       #1e2a3a;
    --bg-elevated:      #252a3a;
    --bg-hover:         #2e3548;
    --bg-track-odd:     #1c2233;
    --bg-track-even:    #1a1f2e;

    /* Accent — Cyan (Premiere-style) */
    --accent:           #4fc3f7;
    --accent-hover:     #81d4fa;
    --accent-dim:       #1565c0;
    --accent-glow:      rgba(79, 195, 247, 0.3);

    /* Text */
    --text-primary:     #e0e0e0;
    --text-secondary:   #9e9e9e;
    --text-muted:       #616161;
    --text-on-accent:   #0d1117;

    /* Borders */
    --border-subtle:    #2a2a3e;
    --border-medium:    #3a3a4e;
    --border-strong:    #4a4a5e;

    /* Video clips */
    --clip-bg-start:    #1a3a5c;
    --clip-bg-end:      #1e4a6e;
    --clip-border:      #2196f3;
    --clip-text:        #e8e8e8;
    --clip-selected-glow: rgba(79, 195, 247, 0.4);

    /* Playhead — Cyan */
    --playhead-color:   #4fc3f7;

    /* Shadows */
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:        0 2px 8px rgba(0,0,0,0.5);
    --shadow-lg:        0 4px 16px rgba(0,0,0,0.6);

    --transition-fast:  0.15s ease;
    --transition-std:   0.2s ease;

    --font-main:        'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:        'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
}

/* --- 2. Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.matrix-dark {
    background-color: var(--bg-deepest);
    color: var(--text-primary);
    font-family: var(--font-main);
    margin: 0;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3. Editor Shell --- */
#editor-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- 3b. Top Toolbar (prominent media import) --- */
.top-toolbar {
    height: 42px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-medium);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
}

.top-toolbar-logo {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    user-select: none;
}

/* --- 4. Main Area (Video + Segments) --- */
.main-area {
    height: calc(100% - 42px - 6px - 280px);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    min-height: 100px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-medium);
}

/* --- 4b. Vertical Resizer (between Player and Timeline) --- */
.resizer-vertical {
    height: 6px;
    flex-shrink: 0;
    background: var(--border-subtle);
    cursor: row-resize;
    position: relative;
    z-index: 100;
    transition: background var(--transition-fast);
}
.resizer-vertical:hover,
.resizer-vertical.dragging {
    background: var(--accent);
}
.resizer-vertical::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 1px;
    transition: background var(--transition-fast);
}
.resizer-vertical:hover::after,
.resizer-vertical.dragging::after {
    background: var(--text-on-accent);
}

/* --- 4c. Horizontal Resizer (between Preview and Segments) --- */
.resizer-horizontal {
    width: 6px;
    flex-shrink: 0;
    background: var(--border-subtle);
    cursor: col-resize;
    position: relative;
    z-index: 100;
    transition: background var(--transition-fast);
}
.resizer-horizontal:hover,
.resizer-horizontal.dragging {
    background: var(--accent);
}
.resizer-horizontal::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    background: var(--text-muted);
    border-radius: 1px;
    transition: background var(--transition-fast);
}
.resizer-horizontal:hover::after,
.resizer-horizontal.dragging::after {
    background: var(--text-on-accent);
}

/* --- 5. Preview Section --- */
.preview-section {
    flex: 1;
    background: #000;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    position: relative; /* needed for welcome-hero absolute positioning */
}

.video-window {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
}

video {
    max-width: 95%;
    max-height: 95%;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    background: #000;
}

/* --- 6. Drop Zone --- */
#drop-zone {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    background: rgba(18, 18, 26, 0.92);
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    z-index: 10;
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
    transition: border-color var(--transition-std), background var(--transition-std);
}

#drop-zone:hover,
#drop-zone.drag-active {
    border-color: var(--accent);
    background: rgba(18, 18, 26, 0.96);
    color: var(--text-primary);
}

#drop-zone.drag-active {
    background: rgba(79, 195, 247, 0.08);
    border-color: var(--accent);
    border-width: 3px;
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    pointer-events: none;
}

/* --- Animated icon (scissors + film reel) --- */
.drop-anim-icon {
    position: relative;
    width: 64px;
    height: 64px;
}
.drop-anim-icon svg {
    position: absolute;
    top: 0; left: 0;
    width: 64px;
    height: 64px;
    color: var(--accent);
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(79, 195, 247, 0.3));
}
.drop-scissors {
    animation: dropIconSwap 6s ease-in-out infinite;
}
.drop-film {
    animation: dropIconSwap 6s ease-in-out infinite 3s;
}
@keyframes dropIconSwap {
    0%   { opacity: 0; transform: scale(0.7) rotate(-10deg); }
    8%   { opacity: 0.7; transform: scale(1) rotate(0deg); }
    42%  { opacity: 0.7; transform: scale(1) rotate(0deg); }
    50%  { opacity: 0; transform: scale(0.7) rotate(10deg); }
    100% { opacity: 0; }
}

/* --- Floating pulse behind icon --- */
.drop-anim-icon::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80px; height: 80px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,195,247,0.12) 0%, transparent 70%);
    animation: dropPulse 3s ease-in-out infinite;
}
@keyframes dropPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
    50%      { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

.drop-text {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* --- Feature carousel (CSS only) --- */
.drop-features {
    position: relative;
    height: 22px;
    overflow: hidden;
    min-width: 300px;
    text-align: center;
}
.drop-feature {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--accent);
    opacity: 0;
    transform: translateY(10px);
    animation: featureRotate 15s ease-in-out infinite;
}
.drop-feature:nth-child(1) { animation-delay: 0s; }
.drop-feature:nth-child(2) { animation-delay: 3s; }
.drop-feature:nth-child(3) { animation-delay: 6s; }
.drop-feature:nth-child(4) { animation-delay: 9s; }
.drop-feature:nth-child(5) { animation-delay: 12s; }

@keyframes featureRotate {
    0%        { opacity: 0;   transform: translateY(10px); }
    2%        { opacity: 1;   transform: translateY(0); }
    18%       { opacity: 1;   transform: translateY(0); }
    20%       { opacity: 0;   transform: translateY(-10px); }
    100%      { opacity: 0;   transform: translateY(-10px); }
}

/* Hover: highlight features */
#drop-zone:hover .drop-anim-icon svg {
    filter: drop-shadow(0 0 18px rgba(79, 195, 247, 0.5));
}
#drop-zone:hover .drop-text {
    color: var(--text-primary);
}
#drop-zone:hover .drop-feature {
    color: #fff;
}

/* --- 6b. Fullscreen Overlay Button --- */
.fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: rgba(18, 18, 26, 0.75);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-std), background var(--transition-fast),
                border-color var(--transition-fast), color var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.video-window:hover .fullscreen-btn {
    opacity: 1;
    pointer-events: auto;
}
.fullscreen-btn:hover {
    background: rgba(18, 18, 26, 0.92);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.fullscreen-btn:active {
    transform: scale(0.93);
}

/* --- 6c. Fullscreen Mode Overrides --- */
.video-window:fullscreen,
.video-window:-webkit-full-screen {
    background: #000;
    width: 100vw;
    height: 100vh;
}
.video-window:fullscreen #main-video,
.video-window:-webkit-full-screen #main-video {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    object-fit: contain;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.video-window:fullscreen .fullscreen-btn,
.video-window:-webkit-full-screen .fullscreen-btn {
    z-index: 2147483647;
    bottom: 24px;
    right: 24px;
}

/* --- 7. Transport Controls --- */
.transport-controls {
    height: 50px;
    flex-shrink: 0;
    width: 100%;
    background: var(--bg-base);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-top: 1px solid var(--border-subtle);
}

/* Toggle timeline button - hidden on desktop */
#btn-toggle-timeline {
    display: none;
}

.transport-spacer {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- 8. Buttons (global + specific) --- */
button {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    padding: 6px 14px;
    cursor: pointer;
    font-weight: 500;
    font-family: var(--font-main);
    font-size: 12px;
    border-radius: 5px;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.4;
    white-space: nowrap;
    height: 32px;
    box-sizing: border-box;
    vertical-align: middle;
}

button:hover {
    background: var(--bg-hover);
    border-color: var(--accent-dim);
}

button:active {
    transform: scale(0.97);
}

#btn-play {
    padding: 6px 22px;
    border-radius: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.5px;
    background: var(--bg-surface);
    border-color: var(--border-strong);
}

#btn-play:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: #fff;
}

/* Botao Adicionar Midia — Primary Action (Cyan Accent) */
#btn-add-media {
    background: linear-gradient(135deg, var(--accent-dim), #1a5276);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-std);
}
#btn-add-media:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--text-on-accent);
    border-color: var(--accent-hover);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: translateY(-1px);
}
#btn-add-media:active {
    transform: translateY(0);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* --- Export Button + Dropdown --- */
#export-wrapper {
    position: relative;
    display: inline-flex;
}

#btn-export {
    background: linear-gradient(135deg, #e65100, #ff6d00);
    color: var(--text-primary);
    border: 1px solid #ff9800;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 6px 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-std);
}

#btn-export:hover {
    background: linear-gradient(135deg, #ff6d00, #ff9800);
    color: var(--text-on-accent);
    box-shadow: 0 0 14px rgba(255, 152, 0, 0.5);
}

#export-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
    z-index: 9000;
    padding: 14px;
    animation: exportSlide 0.15s ease-out;
}

#export-dropdown.open {
    display: block;
}

#export-dropdown::-webkit-scrollbar {
    width: 6px;
}
#export-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
#export-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}
#export-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

@keyframes exportSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.export-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: center;
}

.export-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.export-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    background: var(--bg-surface);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 70px;
    box-sizing: border-box;
}

.export-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.export-option.selected {
    background: rgba(255, 152, 0, 0.15);
    border-color: #ff9800;
    box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.3);
}

.export-option .format-icon {
    font-size: 18px;
    line-height: 1;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.export-option .format-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}

.export-option .format-desc {
    font-size: 8px;
    color: var(--text-muted);
}

.export-option[data-audio-only="true"] .format-icon {
    color: #9c27b0;
}

.export-option[data-audio-only="true"].selected {
    background: rgba(156, 39, 176, 0.15);
    border-color: #9c27b0;
}

.export-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 0;
}

.export-go {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #e65100, #ff6d00);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.export-go:hover {
    background: linear-gradient(135deg, #ff6d00, #ff9800);
    box-shadow: 0 0 12px rgba(255, 152, 0, 0.4);
}

/* --- Share Button + Dropdown --- */
#share-wrapper {
    position: relative;
    display: inline-flex;
}
#btn-share {
    background: linear-gradient(135deg, var(--accent-dim), #1a5276);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    font-size: 12px;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-std);
}
#btn-share:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--text-on-accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
#btn-share.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--text-on-accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
/* --- Detect Dropdown (Scene Detection) --- */
#detect-wrapper {
    position: relative;
    display: inline-flex;
}

#btn-detect {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    color: var(--text-primary);
    border: 1px solid #4caf50;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-std);
}

#btn-detect:hover {
    background: linear-gradient(135deg, #43a047, #66bb6a);
    color: var(--text-on-accent);
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

#detect-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    z-index: 9000;
    padding: 6px;
    animation: detectSlide 0.15s ease-out;
}

#detect-dropdown.open {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@keyframes detectSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#detect-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
    white-space: nowrap;
}

#detect-dropdown button:hover {
    background: var(--bg-hover);
}

#btn-detect-silence:hover { background: rgba(158, 158, 158, 0.2); }
#btn-detect-black:hover { background: rgba(66, 66, 66, 0.3); }
#btn-detect-all:hover { background: rgba(76, 175, 80, 0.2); }

/* --- Detect Controls (Sensitivity Sliders) --- */
.detect-controls {
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}
.detect-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.detect-slider-row:last-child { margin-bottom: 0; }
.detect-slider-row label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 58px;
    white-space: nowrap;
}
.detect-slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-surface);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.detect-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 4px var(--accent-glow);
}
.detect-slider-row input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
}
.detect-slider-row span {
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
    min-width: 30px;
    text-align: right;
    font-family: var(--font-mono);
}

.detect-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}
.detect-destructive {
    color: #ef5350 !important;
    font-weight: 600;
}
.detect-destructive:hover {
    background: rgba(239, 83, 80, 0.15) !important;
}

/* --- Botão Indicador (Delete) — Apagado/Aceso --- */
#btn-delete {
    opacity: 0.35;
    pointer-events: none;
    color: var(--text-muted);
    border-color: var(--border-subtle);
    transition: opacity var(--transition-std), color var(--transition-std),
                border-color var(--transition-std), background var(--transition-std),
                box-shadow var(--transition-std);
}
#btn-delete.active {
    opacity: 1;
    pointer-events: auto;
    color: #e57373;
    border-color: #e57373;
}
#btn-delete.active:hover {
    background: rgba(229, 115, 115, 0.15);
    box-shadow: 0 0 8px rgba(229, 115, 115, 0.3);
}

#btn-split {
    opacity: 0.35;
    pointer-events: none;
    color: var(--text-muted);
    border-color: var(--border-subtle);
    transition: opacity var(--transition-std), color var(--transition-std),
                border-color var(--transition-std), background var(--transition-std),
                box-shadow var(--transition-std);
}
#btn-split.active {
    opacity: 1;
    pointer-events: auto;
    color: #ff9800;
    border-color: #ff9800;
}
#btn-split.active:hover {
    background: rgba(255, 152, 0, 0.15);
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

/* Audio management buttons — mesmo estilo visual do btn-export */
#btn-add-audio {
    background: linear-gradient(135deg, var(--accent-dim), #1a5276);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-std);
}

#btn-add-audio:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--text-on-accent);
    border-color: var(--accent-hover);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: translateY(-1px);
}

#btn-add-audio:active {
    transform: translateY(0);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Frame navigation buttons */
.frame-nav-group {
    display: flex;
    gap: 2px;
}

.frame-btn {
    width: 32px;
    height: 28px;
    padding: 0;
    font-size: 11px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-dim);
    color: var(--text-primary);
}

/* --- 9. Volume Control --- */
.vol-control {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 14px;
}

#vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

#vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    margin-top: -4px;
}

#vol-slider::-moz-range-track {
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    border: none;
}

#vol-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
}

/* --- 10. Timecode Display --- */
.time-marker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    background: var(--bg-deepest);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    letter-spacing: 1px;
    min-width: 100px;
    text-align: center;
    font-weight: 500;
}

/* --- 11. Status Message --- */
.status-msg {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

/* --- 12. Segments Panel --- */
#segments-panel {
    width: 260px;
    min-width: 100px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-medium);
    display: flex;
    flex-direction: column;
}

.segments-header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin: 0;
}

.zoom-hint {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-subtle);
}

.segments-list {
    flex: 1;
    overflow-y: auto;
    padding: 2px 0;
}

.segments-list::-webkit-scrollbar { width: 6px; }
.segments-list::-webkit-scrollbar-track { background: var(--bg-deepest); }
.segments-list::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }

.segments-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.segment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
}

.segment-item:hover {
    background: var(--bg-hover);
}

.segment-item.active {
    background: var(--bg-elevated);
    border-left-color: var(--accent);
}

.segment-color {
    width: 6px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
}

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

.segment-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.segment-meta {
    font-size: 8px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
    margin-bottom: 1px;
    opacity: 0.85;
}

.segment-times {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.segment-dash {
    color: var(--text-muted);
    font-size: 9px;
}

.segment-duration {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
}

.segment-delete {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.segment-item:hover .segment-delete {
    opacity: 1;
}

.segment-delete:hover {
    background: rgba(229, 115, 115, 0.2);
    border-color: #e57373;
    color: #e57373;
}

.segments-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
}

/* --- 12b. Shortcuts Sidebar (left, aligned with track labels 100px) --- */
#shortcuts-panel {
    flex-shrink: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-medium);
    display: flex;
    flex-direction: column;
    width: 100px;
}
#btn-shortcuts {
    width: 100%;
    background: none;
    color: var(--text-secondary);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 11px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: all var(--transition-fast);
    letter-spacing: 0.5px;
}
#btn-shortcuts:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
#btn-shortcuts.active {
    color: var(--accent);
}
#shortcuts-dropdown {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
#shortcuts-dropdown.open {
    display: flex;
}
#shortcuts-dropdown::-webkit-scrollbar { width: 4px; }
#shortcuts-dropdown::-webkit-scrollbar-track { background: var(--bg-deepest); }
#shortcuts-dropdown::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; }

.shortcuts-list {
    flex: 1;
    padding: 6px 0;
}
.shortcut-group {
    padding: 4px 12px 8px;
}
.shortcut-group-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    padding: 4px 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.shortcut-row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--border-medium);
    flex-shrink: 0;
}
.shortcut-row kbd.wide {
    min-width: 60px;
    font-size: 8px;
}
.shortcut-row span {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shortcut-row:hover kbd {
    border-color: var(--accent-dim);
    color: var(--accent);
}
.shortcut-row:hover span {
    color: var(--text-primary);
}
.shortcuts-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}
.shortcuts-version {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.6;
}

/* --- 13. Timeline Container --- */
#timeline-container {
    flex: 1;
    min-height: 100px;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}

/* Custom scrollbar (WebKit) */
#timeline-container::-webkit-scrollbar { height: 8px; width: 6px; }
#timeline-container::-webkit-scrollbar-track { background: var(--bg-deepest); }
#timeline-container::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }
#timeline-container::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Firefox */
#timeline-container {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) var(--bg-deepest);
}

/* --- 14. Timeline Header & Ruler --- */
#timeline-header {
    height: 30px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-medium);
    position: sticky;
    top: 0;
    z-index: 250;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: none; /* permite arrastar playhead no mobile */
}

#timeline-header::after { content: none; }

/* 100px column header aligned with track headers */
#timeline-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-medium);
    z-index: 2;
}

/* Ruler container (ticks generated by JS) */
#ruler {
    position: absolute;
    top: 0;
    left: 100px;
    right: 0;
    height: 100%;
    overflow: hidden;
    background: none;
}

/* JS-generated ruler ticks */
.ruler-tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 8px;
    background: var(--border-strong);
}

.ruler-tick-major {
    height: 16px;
    background: var(--text-muted);
}

.ruler-label {
    position: absolute;
    top: 3px;
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* --- 14b. Timeline Markers --- */
.timeline-marker {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.timeline-marker:hover {
    transform: scale(1.1);
    z-index: 15;
}

.marker-flag {
    position: absolute;
    top: 2px;
    left: -6px;
    width: 12px;
    height: 12px;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: transform 0.15s ease;
}

.timeline-marker:hover .marker-flag {
    transform: scale(1.2);
}

.marker-label {
    position: absolute;
    top: 15px;
    left: -20px;
    width: 40px;
    font-size: 8px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.timeline-marker:hover .marker-label {
    opacity: 1;
}

.marker-line {
    position: absolute;
    top: 100%;
    left: -1px;
    width: 2px;
    height: 300px; /* Extends down into tracks */
    opacity: 0.5;
    pointer-events: none;
}

.timeline-marker:hover .marker-line {
    opacity: 0.8;
}

/* --- 15. Tracks Area --- */
#tracks-area {
    position: relative;
    padding-top: 4px;
    min-height: fit-content;
}

/* --- 16. Track Rows --- */
.track {
    height: 50px; /* Base height for audio tracks */
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    margin-bottom: 2px;
}

/* Video tracks are taller to show thumbnails + waveform */
.track:not(.track-audio) {
    height: 80px;
}

/* Audio track clips fill the track */
.track-audio .video-clip {
    height: 42px;
    top: 4px;
}

#track-1 { background: var(--bg-track-odd); }
#track-2 { background: var(--bg-track-even); }
#track-3 { background: var(--bg-track-odd); }
#track-audio-1 { background: #1e1528; }

/* Audio track header accent */
.track-audio::before {
    border-left-color: #9c27b0 !important;
}

/* --- Tracks Divider (Video ↕ Audio separator — compact 2px line) --- */
.tracks-divider {
    height: 2px;
    flex-shrink: 0;
    background: var(--border-medium);
    border: none;
    position: relative;
    overflow: hidden;
}

.tracks-divider .divider-label {
    display: none;
}

/* --- 17. Track Header Column (100px ::before) --- */
.track::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-medium);
    border-left: 3px solid var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    z-index: 50;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* --- 18. Playhead (Needle + Triangle) --- */
#playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--playhead-color);
    z-index: 200;
    pointer-events: auto;
    cursor: col-resize;
    left: 100px;
    box-shadow: 0 0 10px rgba(79, 195, 247, 0.4);
    touch-action: none; /* permite arrastar no mobile */
}

#playhead::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid var(--playhead-color);
    filter: drop-shadow(0 0 4px rgba(79, 195, 247, 0.6));
}

/* Hit area invisível — 14px de largura centrada na linha de 2px */
#playhead::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    width: 14px;
    cursor: col-resize;
}

/* --- 19. Video Clips --- */
.video-clip {
    position: absolute;
    height: 70px;
    top: 5px;
    background:
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.07) 1px,
            rgba(255, 255, 255, 0.03) 2px,
            transparent 2px,
            transparent 4px
        ),
        linear-gradient(135deg, var(--clip-bg-start), var(--clip-bg-end));
    border: 1px solid var(--clip-border);
    cursor: grab;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8px;
    padding-right: 24px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.video-clip:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-dim);
}

.video-clip span {
    color: var(--clip-text);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 2;
    line-height: 1.3;
}
.video-clip .clip-name {
    position: absolute;
    left: 26px;
    top: 5px;
    font-size: 10px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.7);
    max-width: calc(100% - 34px);
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 10;
}
.video-clip .clip-meta {
    position: absolute;
    bottom: 2px;
    left: 8px;
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.video-clip.selected {
    border: 2px solid var(--accent);
    box-shadow: 0 0 14px var(--clip-selected-glow);
    z-index: 100;
}

/* Trim handles — barrinhas visuais nas bordas do clip selecionado */
.video-clip.selected .trim-handle-left,
.video-clip.selected .trim-handle-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.7;
    z-index: 10;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
.video-clip.selected .trim-handle-left  { left: 3px; }
.video-clip.selected .trim-handle-right { right: 3px; }
.video-clip:hover .trim-handle-left,
.video-clip:hover .trim-handle-right { opacity: 1; }

/* Split preview — linha tracejada laranja no clip onde o playhead corta */
.split-preview {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        #ff9800 0px,
        #ff9800 4px,
        transparent 4px,
        transparent 8px
    );
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s;
}
.split-preview.active {
    opacity: 1;
}

/* --- 20. Audio Clips (visual override — purple) --- */
.video-clip[data-clip-type="audio"] {
    background:
        repeating-linear-gradient(
            to right,
            rgba(156, 39, 176, 0.12) 0px,
            rgba(156, 39, 176, 0.22) 1px,
            rgba(156, 39, 176, 0.12) 2px,
            transparent 2px,
            transparent 4px
        ),
        linear-gradient(135deg, #7b1fa2, #9c27b0);
    border-color: #ba68c8;
}

.video-clip[data-clip-type="audio"]:hover {
    border-color: #ce93d8;
}

.video-clip[data-clip-type="audio"].selected {
    border-color: #ce93d8;
    box-shadow: 0 0 14px rgba(156, 39, 176, 0.5);
}

/* --- 21. Segment Panel — Audio distinction --- */
.segment-item[data-segment-type="audio"] .segment-color {
    background: #9c27b0 !important;
}

.segment-item[data-segment-type="audio"] .segment-label::before {
    content: '\266B  ';
    font-size: 10px;
}

/* --- 22. Add Track Buttons (collapsed — kept in DOM for insertBefore) --- */
.add-track-row {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
}

.btn-add-track {
    font-size: 10px;
    padding: 2px 14px;
    opacity: 0.4;
    background: var(--bg-surface);
    border: 1px dashed var(--border-medium);
    color: var(--text-muted);
    border-radius: 3px;
    cursor: pointer;
    transition: opacity var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    letter-spacing: 0.5px;
}

.btn-add-track:hover {
    opacity: 1;
    border-color: var(--accent-dim);
    color: var(--text-secondary);
    border-style: solid;
}

.btn-add-track-audio {
    border-color: rgba(156, 39, 176, 0.3);
}

.btn-add-track-audio:hover {
    border-color: #9c27b0;
    color: #ce93d8;
}

/* --- 22b. Floating Add-Track Buttons (sidebar-positioned) --- */
.add-track-btn-floating {
    position: absolute;
    left: 0;
    width: 100px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-medium);
    border-left: 3px solid transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-std);
    pointer-events: none;
}

#tracks-area:hover .add-track-btn-floating {
    opacity: 1;
    pointer-events: auto;
}

.add-track-btn-floating .add-track-icon {
    width: 60px;
    height: 16px;
    border-radius: 3px;
    border: 1px dashed var(--border-medium);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-main);
    line-height: 1;
    padding: 0;
}

.add-track-btn-floating .add-track-icon:hover {
    border-style: solid;
    background: var(--bg-hover);
}

/* Video add-track variant (cyan accent) */
.add-track-btn-floating.video-add {
    border-left-color: var(--accent-dim);
}

.add-track-btn-floating.video-add .add-track-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Audio add-track variant (purple accent) */
.add-track-btn-floating.audio-add {
    border-left-color: #9c27b0;
}

.add-track-btn-floating.audio-add .add-track-icon:hover {
    border-color: #9c27b0;
    color: #ce93d8;
    box-shadow: 0 0 6px rgba(156, 39, 176, 0.3);
}

/* --- 23. Per-Clip Context Menu (⋮ + dropdown) --- */
.clip-menu-btn {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.clip-menu-btn:hover {
    background: rgba(0,0,0,0.9);
    border-color: var(--accent-dim);
}

/* Dropdown do clip — fixed para nao ser cortado pelo overflow:hidden do clip */
.clip-context-menu {
    position: fixed;
    min-width: 130px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    z-index: 9999;
    padding: 4px 0;
    display: none;
}
.clip-context-menu.visible { display: block; }

.clip-menu-item {
    padding: 7px 12px;
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.1s;
}
.clip-menu-item:hover { background: var(--bg-hover); }
.clip-menu-item.danger:hover {
    background: rgba(244,67,54,0.15);
    color: #f44336;
}

/* Visual de clip mutado */
.video-clip.clip-muted {
    opacity: 0.35;
    border-style: dashed !important;
}

/* Segment panel muted state */
.segment-item.muted {
    opacity: 0.45;
}

.segment-item.muted .segment-label {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* --- 25. Waveform Canvas (inside audio clips) --- */
.waveform-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* --- 25b. Thumbnail Strip (Video Filmstrip) --- */
/* Thumbnails occupy top portion of video clips */
.thumbnail-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Upper portion for thumbnails */
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.thumbnail-frame {
    position: absolute;
    top: 0;
    height: 50px; /* Match thumbnail strip height */
    opacity: 0.95;
    pointer-events: none;
    filter: brightness(0.7) contrast(1.05);
}

/* Waveform occupies bottom portion of video clips */
.video-clip:not([data-clip-type="audio"]) .waveform-canvas {
    top: auto;
    bottom: 0;
    height: 20px; /* Lower portion for waveform */
    opacity: 0.9;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Text more readable over thumbnails */
.video-clip:not([data-clip-type="audio"]) .clip-name {
    text-shadow:
        0 1px 4px rgba(0,0,0,0.95),
        0 0 8px rgba(0,0,0,0.7);
}

.video-clip:not([data-clip-type="audio"]) .clip-meta {
    background: rgba(0,0,0,0.65);
    bottom: 22px; /* Above waveform area */
    padding: 1px 4px;
    border-radius: 2px;
}

/* span z-index now handled by .video-clip span (all clip types) */

/* --- 26. Ghost Clips (Auto-Save restore) --- */
.video-clip.ghost-clip {
    opacity: 0.35;
    border-style: dashed !important;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 4px,
            transparent 4px,
            transparent 8px
        ),
        var(--bg-elevated) !important;
    pointer-events: none;
    cursor: default;
}

.video-clip.ghost-clip .clip-menu-btn {
    pointer-events: auto;
    opacity: 0.7;
}

.video-clip.ghost-clip span {
    font-style: italic;
    color: var(--text-muted);
}

.video-clip.ghost-clip[data-clip-type="audio"] {
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(156, 39, 176, 0.05) 0px,
            rgba(156, 39, 176, 0.05) 4px,
            transparent 4px,
            transparent 8px
        ),
        #1e1528 !important;
    border-color: rgba(156, 39, 176, 0.4) !important;
}

/* --- 27. Selection & Utility --- */
::selection {
    background: var(--accent-dim);
    color: var(--text-primary);
}

/* --- 28. Snap-to-Edge Indicator --- */
.snap-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffeb3b;
    z-index: 300;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    box-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

.snap-indicator.visible {
    opacity: 1;
}

/* --- 29. Loop Region Overlay --- */
.loop-region {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(79, 195, 247, 0.08);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    z-index: 150;
    pointer-events: none;
}
.loop-label {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* --- 30. Custom Tooltips — Dark Elegant Theme --- */
.fc-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(135deg, #0d1117, #161b22);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 8px rgba(79,195,247,0.1);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 1.4;
    max-width: 280px;
}
.fc-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.fc-tooltip .fc-tt-title {
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
}
.fc-tooltip .fc-tt-shortcut {
    display: inline-block;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-subtle);
    margin-left: 8px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* --- 31. Ruler Time Tooltip (mouse-follow) --- */
.ruler-time-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(135deg, #0d1117, #161b22);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--accent-dim);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 10px rgba(79,195,247,0.15);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
    letter-spacing: 1px;
}
.ruler-time-tooltip.visible {
    opacity: 1;
}

/* --- 32. Snapshot Button (camera icon, export-style) --- */
#btn-snapshot {
    background: linear-gradient(135deg, var(--accent-dim), #1a5276);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-std);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    box-sizing: border-box;
}
#btn-snapshot svg {
    display: block;
}
#btn-snapshot:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--text-on-accent);
    border-color: var(--accent-hover);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* --- 33. Snapshot Flash Effect --- */
.snapshot-flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    z-index: 100;
    animation: flashFade 0.3s ease-out forwards;
}

@keyframes flashFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* --- 34. Language Selector --- */
#lang-selector {
    display: flex;
    gap: 2px;
    margin-left: auto;
    margin-right: 8px;
}
.lang-btn {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: 0.5px;
}
.lang-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-dim);
}
.lang-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================
   PHASE 4: Keyframes, Batch Export, Chapters, Metadata
   ============================================================ */

/* --- Keyframe Ticks on Timeline Clips --- */
.keyframe-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 235, 59, 0.5);
    pointer-events: none;
    z-index: 2;
}
.keyframe-tick::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 6px;
    height: 4px;
    background: #ffeb3b;
    border-radius: 0 0 2px 2px;
}

/* --- Batch Frame Export Dropdown --- */
#batch-wrapper { position: relative; display: inline-flex; }
#btn-batch {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: var(--text-primary);
    border: 1px solid #42a5f5;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
#btn-batch:hover {
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
    color: var(--text-on-accent);
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.4);
}
#batch-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px;
    z-index: 9000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: exportSlide 0.15s ease-out;
}
#batch-dropdown.open { display: block; }
.batch-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.batch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.batch-row label {
    font-size: 11px;
    color: var(--text-secondary);
}
.batch-row select {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
}
.batch-go {
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
.batch-go:hover {
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

/* --- Metadata Editor Dropdown --- */
#meta-wrapper { position: relative; display: inline-flex; }
#btn-metadata {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    color: var(--text-primary);
    border: 1px solid #ab47bc;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
#btn-metadata:hover {
    background: linear-gradient(135deg, #8e24aa, #ab47bc);
    color: var(--text-on-accent);
    box-shadow: 0 0 12px rgba(171, 71, 188, 0.4);
}
#meta-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px;
    z-index: 9000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: exportSlide 0.15s ease-out;
}
#meta-dropdown.open { display: block; }
.meta-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.meta-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.meta-row label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-row input[type="text"],
.meta-row input[type="date"] {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
}
.meta-row input:focus {
    border-color: #ab47bc;
    outline: none;
    box-shadow: 0 0 6px rgba(171, 71, 188, 0.3);
}
.meta-checkbox {
    flex-direction: row !important;
    align-items: center;
}
.meta-checkbox label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.meta-checkbox input[type="checkbox"] {
    accent-color: #ab47bc;
}
.meta-save {
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
.meta-save:hover {
    background: linear-gradient(135deg, #8e24aa, #ab47bc);
    box-shadow: 0 0 15px rgba(171, 71, 188, 0.3);
}

/* ============================================================
   MOBILE RESPONSIVE LAYOUT (≤768px)
   Desktop layout is unchanged — these rules only apply on mobile
   ============================================================ */

@media (max-width: 1024px) {
    /* --- 1. Esconder elementos desnecessários --- */
    #shortcuts-panel,
    #resizer-left,
    #resizer-h,
    #segments-panel {
        display: none !important;
    }

    /* --- 2. Top toolbar compacto --- */
    .top-toolbar {
        height: 40px;
        padding: 0 8px;
        gap: 8px;
        flex-shrink: 0;
    }

    .top-toolbar-logo {
        font-size: 11px;
        letter-spacing: 1px;
    }

    #btn-add-media {
        font-size: 0;
        padding: 6px 10px;
        min-width: auto;
    }
    #btn-add-media::before {
        content: "➕ ADD";
        font-size: 11px;
        font-weight: 600;
    }

    .lang-btn {
        padding: 4px 6px;
        font-size: 10px;
    }

    /* --- 3. Shell principal ocupa tela inteira --- */
    #editor-shell {
        height: 100vh;
        height: 100dvh; /* dynamic viewport height para mobile */
        display: flex;
        flex-direction: column;
        padding-bottom: 100px; /* espaço para rodapé fixo */
    }

    /* --- 4. Main area flexível (permite resize via drag) --- */
    .main-area {
        flex: 0 0 auto;
        flex-direction: column;
        height: 50%; /* altura inicial 50% */
        min-height: 100px;
        max-height: calc(100% - 80px); /* deixa espaço para timeline */
    }

    .preview-section {
        flex: 1;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }

    .video-window {
        flex: 1;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #main-video {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

    /* --- 5. Transport controls como rodapé fixo com 2 linhas --- */
    .transport-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        min-height: 90px;
        padding: 10px 8px;
        padding-bottom: max(10px, env(safe-area-inset-bottom)); /* iPhone notch */
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        background: var(--bg-base);
        border-top: 1px solid var(--border-medium);
        z-index: 1000;
    }

    /* Esconder botões menos úteis no mobile */
    #btn-snapshot,
    #batch-wrapper,
    #meta-wrapper,
    #share-wrapper,
    .transport-spacer,
    .frame-nav-group {
        display: none !important;
    }

    /* Mostrar mais botões úteis */
    #btn-add-audio,
    #detect-wrapper,
    .vol-control {
        display: flex !important;
    }

    .vol-control {
        width: 80px;
    }

    #vol-slider {
        width: 50px;
    }

    /* Botões maiores para touch */
    #btn-play {
        padding: 10px 16px;
        font-size: 11px;
        order: 1;
    }

    .time-marker {
        font-size: 10px;
        padding: 4px 6px;
        order: 2;
    }

    #btn-delete {
        padding: 8px 10px;
        font-size: 10px;
        order: 3;
    }

    #btn-split {
        padding: 8px 10px;
        font-size: 10px;
        order: 4;
    }

    #detect-wrapper {
        order: 5;
    }

    #btn-detect {
        padding: 8px 10px;
        font-size: 10px;
    }

    #btn-add-audio {
        padding: 8px 10px;
        font-size: 10px;
        order: 6;
    }

    #export-wrapper {
        order: 10;
    }

    #btn-export {
        padding: 8px 14px;
        font-size: 11px;
    }

    /* --- 6. Resizer vertical touch (arrasta para ajustar proporção) --- */
    #resizer-v {
        height: 24px;
        min-height: 24px;
        cursor: row-resize;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--border-medium) 35%,
            var(--accent) 50%,
            var(--border-medium) 65%,
            transparent 100%
        );
        flex-shrink: 0;
        touch-action: none;
        position: relative;
        z-index: 500;
        pointer-events: auto !important;
    }

    /* Indicador visual de arraste */
    #resizer-v::after {
        content: '═══';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: var(--accent);
        font-size: 10px;
        letter-spacing: 1px;
        pointer-events: none;
        opacity: 0.8;
    }

    #resizer-v:active,
    #resizer-v.dragging {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--accent) 35%,
            var(--accent-bright) 50%,
            var(--accent) 65%,
            transparent 100%
        );
    }

    #resizer-v:active::after,
    #resizer-v.dragging::after {
        opacity: 1;
        color: var(--accent-bright);
    }

    /* --- 7. Timeline compacta --- */
    #timeline-container {
        flex: 1 1 auto;
        min-height: 60px;
        max-height: none;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative;
    }

    #timeline-header {
        height: 24px;
        min-height: 24px;
        touch-action: none;
        position: relative;
        z-index: 300;
        pointer-events: auto !important;
    }

    #ruler {
        font-size: 9px;
        touch-action: none;
        pointer-events: auto !important;
    }

    /* Playhead mais largo e tocável */
    #playhead {
        width: 4px;
        z-index: 400;
        pointer-events: auto !important;
        touch-action: none;
    }

    /* Área de toque maior ao redor do playhead */
    #playhead::after {
        content: '';
        position: absolute;
        top: 0;
        left: -20px;
        right: -20px;
        bottom: 0;
        background: transparent;
        pointer-events: auto;
    }

    /* Triângulo do playhead maior */
    #playhead::before {
        border-left: 10px solid transparent !important;
        border-right: 10px solid transparent !important;
        border-top: 12px solid var(--playhead-color) !important;
        left: -9px !important;
    }

    #tracks-area {
        height: calc(100% - 16px);
        overflow-y: hidden;
    }

    /* Track height: see section 15 below (40px for touch) */

    /* Audio track height: see section 15 below (36px for touch) */

    /* Esconder elementos extras da timeline */
    .add-track-row,
    .add-track-btn-floating,
    .tracks-divider,
    #track-2,
    #track-audio-1 {
        display: none !important;
    }

    /* --- 7. Dropdowns ajustados para mobile --- */
    #export-dropdown {
        bottom: 100%;
        top: auto;
        right: 0;
        left: auto;
        max-height: 50vh;
        overflow-y: auto;
    }

    #detect-dropdown {
        bottom: 100%;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .export-options {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- 8. Drop zone ajustado --- */
    #drop-zone {
        padding: 15px;
    }

    .drop-text {
        font-size: 13px;
    }

    .drop-features {
        font-size: 10px;
    }

    .drop-anim-icon svg {
        width: 35px;
        height: 35px;
    }

    /* --- 9. Clips na timeline menores --- */
    .clip {
        font-size: 8px;
        min-width: 25px;
        height: 100% !important;
    }

    .clip-label {
        padding: 1px 3px;
    }

    /* --- 10. Fullscreen button visível --- */
    .fullscreen-btn {
        display: flex !important;
        bottom: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    /* --- 11. Botão Toggle Timeline (mobile only) --- */
    #btn-toggle-timeline {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        background: var(--accent-dim);
        border: 2px solid var(--accent);
        border-radius: 50%;
        color: var(--accent);
        font-size: 14px;
        cursor: pointer;
        order: -1;
        transition: transform 0.3s ease, background 0.2s;
        flex-shrink: 0;
    }

    #btn-toggle-timeline:active {
        background: var(--accent);
        color: var(--bg-base);
    }

    /* Quando expandido - rotaciona seta para cima */
    #btn-toggle-timeline.expanded {
        transform: rotate(180deg);
    }

    /* Quando timeline expandida - esconde TODOS os elementos do rodapé exceto o botão toggle */
    .transport-controls.timeline-expanded #btn-play,
    .transport-controls.timeline-expanded #btn-delete,
    .transport-controls.timeline-expanded #btn-split,
    .transport-controls.timeline-expanded #btn-add-audio,
    .transport-controls.timeline-expanded #detect-wrapper,
    .transport-controls.timeline-expanded #export-wrapper,
    .transport-controls.timeline-expanded .time-marker,
    .transport-controls.timeline-expanded .vol-control,
    .transport-controls.timeline-expanded .frame-nav-group {
        display: none !important;
    }

    /* Rodapé mais fino quando timeline expandida */
    .transport-controls.timeline-expanded {
        min-height: 50px;
        padding: 6px 12px;
        justify-content: center;
    }

    /* Botão toggle sempre visível */
    .transport-controls.timeline-expanded #btn-toggle-timeline {
        display: flex !important;
    }

    /* --- 12. Timeline expandida --- */
    #timeline-container.expanded {
        height: 45vh !important;
        max-height: 45vh !important;
        min-height: 180px !important;
        overflow-y: auto;
    }

    #timeline-container.expanded #timeline-header {
        height: 22px;
        min-height: 22px;
    }

    #timeline-container.expanded #ruler {
        font-size: 9px;
    }

    #timeline-container.expanded #tracks-area {
        height: auto;
        min-height: calc(45vh - 22px);
        overflow-y: visible;
    }

    #timeline-container.expanded .track {
        height: 55px !important;
        min-height: 55px !important;
        max-height: 55px !important;
    }

    #timeline-container.expanded .track-audio {
        height: 45px !important;
        min-height: 45px !important;
    }

    /* Mostra tracks extras quando expandido */
    #timeline-container.expanded #track-2,
    #timeline-container.expanded #track-audio-1 {
        display: block !important;
    }

    #timeline-container.expanded .tracks-divider {
        display: flex !important;
    }

    #timeline-container.expanded .clip {
        font-size: 10px;
    }

    #timeline-container.expanded .clip-label {
        padding: 2px 5px;
    }

    /* --- 13. Overscroll prevention (no elastic bounce on iOS) --- */
    html, body {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }

    /* --- 14. Clip menu button bigger for touch --- */
    .clip-menu-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
        left: 2px !important;
        top: 2px !important;
        border-radius: 5px !important;
    }

    /* --- 15. Tracks taller for touch (collapsed state) --- */
    .track {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .track-audio {
        height: 36px !important;
        min-height: 36px !important;
    }

    /* --- 16. Tooltips disabled on mobile (no hover) --- */
    .fc-tooltip,
    .ruler-time-tooltip {
        display: none !important;
    }

    /* --- 17. Clip context menu touch-friendly --- */
    .clip-context-menu {
        min-width: 160px;
    }

    .clip-menu-item {
        padding: 12px 16px !important;
        font-size: 13px !important;
        gap: 10px !important;
    }

    /* --- 18. Marker touch area bigger --- */
    .ruler-marker {
        min-width: 20px !important;
    }

    .ruler-marker::before {
        width: 36px !important;
        height: 36px !important;
        margin-left: -18px !important;
    }
}

/* ============================================================
   MOBILE LANDSCAPE — optimize layout when phone is sideways
   Only applies to mobile screens (max-height: 500px in landscape)
   ============================================================ */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Main area takes more width, less height */
    .main-area {
        height: 55% !important;
        min-height: 80px;
    }

    /* Transport controls thinner in landscape */
    .transport-controls {
        min-height: 50px !important;
        padding: 4px 8px !important;
        padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
        gap: 4px !important;
    }

    /* Smaller padding for shell */
    #editor-shell {
        padding-bottom: 55px !important;
    }

    /* Buttons more compact */
    #btn-play {
        padding: 6px 12px !important;
        font-size: 10px !important;
    }

    #btn-delete,
    #btn-split,
    #btn-detect,
    #btn-add-audio {
        padding: 6px 8px !important;
        font-size: 9px !important;
    }

    #btn-export {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    /* Timeline gets a bit more space */
    #timeline-container {
        min-height: 50px;
    }

    /* Resizer thinner in landscape (saves space) */
    #resizer-v {
        height: 16px !important;
        min-height: 16px !important;
    }

    /* Toolbar even more compact */
    .top-toolbar {
        height: 34px !important;
        padding: 0 6px !important;
    }
}

/* ============================================================
   MOBILE PORTRAIT — optimize for tall narrow screens
   ============================================================ */
@media (max-width: 1024px) and (orientation: portrait) {
    /* Give video more vertical space */
    .main-area {
        height: 45% !important;
    }

    /* Expanded timeline shorter to keep controls visible */
    #timeline-container.expanded {
        height: 35vh !important;
        max-height: 35vh !important;
    }
}

/* ============================================================
   BLOG — FastCut Pro Blog Styles
   Uses same CSS variables from dark theme
   ============================================================ */

/* Blog container base */
#blog-container {
    background: var(--bg-deepest);
    min-height: 100vh;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Blog Index */
.blog-index {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.blog-header {
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
}

.blog-back-home {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    transition: color 0.2s;
}

.blog-back-home:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.blog-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 8px;
    letter-spacing: -0.5px;
}

.blog-header p {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.blog-card {
    background: var(--bg-card, var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    text-decoration: none;
    color: inherit;
}

.blog-card-date {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.blog-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.blog-card-read {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 4px;
}

/* Blog Article */
.blog-article {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.blog-article-header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.blog-breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.blog-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    text-decoration: underline;
}

.blog-article-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.blog-article-header time {
    font-size: 13px;
    color: var(--text-muted);
}

/* Blog Article Body */
.blog-article-body {
    line-height: 1.75;
    font-size: 16px;
    color: var(--text-secondary);
}

.blog-article-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 40px 0 16px;
    letter-spacing: -0.2px;
}

.blog-article-body h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 32px 0 12px;
}

.blog-section {
    margin-bottom: 32px;
}

.blog-article-body p {
    margin: 0 0 16px;
}

.blog-article-body ul,
.blog-article-body ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.blog-article-body li {
    margin-bottom: 10px;
}

.blog-article-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.blog-article-body code {
    background: var(--bg-panel, rgba(255,255,255,0.06));
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--accent);
}

/* Blog CTA */
.blog-cta {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    margin: 48px 0;
}

.blog-cta h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.blog-cta p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 24px;
}

.blog-cta-btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.blog-cta-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

/* Blog Related */
.blog-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-subtle);
}

.blog-related h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
}

.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.blog-related-grid .blog-card {
    padding: 20px 18px;
}

.blog-related-grid .blog-card h2 {
    font-size: 15px;
}

/* Blog Mobile */
@media (max-width: 768px) {
    .blog-index {
        padding: 24px 16px 60px;
    }

    .blog-header h1 {
        font-size: 26px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog-card {
        padding: 20px 18px;
    }

    .blog-article {
        padding: 24px 16px 60px;
    }

    .blog-article-header h1 {
        font-size: 24px;
    }

    .blog-article-body {
        font-size: 15px;
    }

    .blog-article-body h2 {
        font-size: 20px;
    }

    .blog-cta {
        padding: 28px 20px;
    }

    .blog-cta h3 {
        font-size: 20px;
    }

    .blog-related-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   30. Re-encode Modal
   ============================================================ */
.reencode-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: reencFadeIn 0.2s ease-out;
}

@keyframes reencFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reencode-box {
    background: var(--bg-panel, #1a1a2e);
    border: 1px solid #2a2a3e;
    border-radius: 14px;
    padding: 28px 28px 22px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    animation: reencSlideUp 0.2s ease-out;
}

@keyframes reencSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reencode-box h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.reencode-explain {
    font-size: 13px;
    color: #9e9e9e;
    line-height: 1.5;
    margin-bottom: 14px;
}

.reencode-clip-list {
    background: #12121a;
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    max-height: 180px;
    overflow-y: auto;
}

.reencode-clip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    color: #c0c0c0;
    border-bottom: 1px solid #1e2a3a;
}

.reencode-clip-row:last-child {
    border-bottom: none;
}

.reencode-clip-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.reencode-clip-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e0e0e0;
    font-weight: 500;
}

.reencode-clip-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: #757575;
    font-family: monospace;
}

.reencode-clip-meta .mismatch {
    color: #ff9800;
    font-weight: 600;
}

.reencode-output {
    background: #1e2a3a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #4fc3f7;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reencode-output .label {
    color: #9e9e9e;
}

.reencode-warning {
    font-size: 12px;
    color: #ff9800;
    margin-bottom: 8px;
}

.reencode-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: #757575;
    line-height: 1.4;
    margin-bottom: 18px;
    padding: 8px 10px;
    background: rgba(79, 195, 247, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(79, 195, 247, 0.12);
}

.reencode-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.reencode-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.reencode-btn-cancel {
    background: transparent;
    color: #9e9e9e;
    border: 1px solid #2a2a3e;
}

.reencode-btn-cancel:hover {
    background: #1e2a3a;
    color: #e0e0e0;
}

.reencode-btn-lossless {
    background: #1e2a3a;
    color: #c0c0c0;
}

.reencode-btn-lossless:hover {
    background: #2a3a4e;
    color: #fff;
}

.reencode-btn-go {
    background: #4fc3f7;
    color: #0d1117;
    font-weight: 600;
}

.reencode-btn-go:hover {
    background: #81d4fa;
}

@media (max-width: 520px) {
    .reencode-box {
        padding: 20px 16px 16px;
    }

    .reencode-actions {
        flex-direction: column;
    }

    .reencode-btn {
        width: 100%;
        text-align: center;
    }

    .reencode-clip-name {
        max-width: 120px;
    }
}