/* ==========================================================================
   VIDEOKREA MOTION STUDIO - FAIRARENA PRO NLE THEME
   - Base design, layout chrome, and icons modeled after FairArena Video Editor
   - Deep dark slate palette (#09090b / #18181b / #27272a) with Emerald green (#22c55e) accents
   - Preserves all 65 kinetic text & photo animations, 3D carousel & WebGPU engine
   ========================================================================== */

:root {
    --bg-app: #09090b;
    --bg-panel: #18181b;
    --bg-card: #27272a;
    --bg-subtle: #202023;
    --bg-elevated: #3f3f46;
    
    --glass-blur: blur(20px) saturate(180%);
    
    --border-main: 1px solid #27272a;
    --border-subtle: 1px solid #1f1f23;
    --border-glass-edge: 1px solid rgba(255, 255, 255, 0.08);
    --border-dashed: 1px dashed rgba(255, 255, 255, 0.25);
    
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    --font-f1: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Geist Mono', monospace;
    
    --accent-red: #ef4444;
    --accent-green: #22c55e;
    --accent-green-hover: #16a34a;
    --accent-blue: #3b82f6;

    /* Selection Box */
    --text-sel-line: #22c55e;
    --text-sel-dash: rgba(34, 197, 94, 0.6);
    --text-sel-tag-bg: #22c55e;
    --text-sel-tag-fg: #000000;
    
    /* Buttons */
    --btn-bg: #27272a;
    --btn-border: #3f3f46;
    --btn-hover-bg: #3f3f46;
    --btn-hover-border: #52525b;
    --btn-active-bg: #22c55e;
    --btn-active-color: #000000;
    
    /* Inputs */
    --input-bg: #18181b;
    --input-border: #27272a;
    
    /* Canvas & Timeline */
    --canvas-bg: #0c0d10;
    --canvas-border: 1px solid #27272a;
    --timeline-bg: #141416;
    --timeline-grid: #27272a;
}

body.dark-mode {
    --bg-app: #09090b;
    --bg-panel: #18181b;
    --bg-card: #27272a;
    --bg-subtle: #202023;
    --bg-elevated: #3f3f46;
    
    --border-main: 1px solid #27272a;
    --border-subtle: 1px solid #1f1f23;
    --border-glass-edge: 1px solid rgba(255, 255, 255, 0.08);
    --border-dashed: 1px dashed rgba(255, 255, 255, 0.25);
    
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    --text-sel-line: #22c55e;
    --text-sel-dash: rgba(34, 197, 94, 0.6);
    --text-sel-tag-bg: #22c55e;
    --text-sel-tag-fg: #000000;
    
    --btn-bg: #27272a;
    --btn-border: #3f3f46;
    --btn-hover-bg: #3f3f46;
    --btn-hover-border: #52525b;
    --btn-active-bg: #22c55e;
    --btn-active-color: #000000;
    
    --input-bg: #18181b;
    --input-border: #27272a;
    
    --canvas-bg: #0c0d10;
    --canvas-border: 1px solid #27272a;
    --timeline-bg: #141416;
    --timeline-grid: #27272a;
}

body:not(.dark-mode) {
    --bg-app: #f4f4f5;
    --bg-panel: #ffffff;
    --bg-card: #f4f4f5;
    --bg-subtle: #fafafa;
    --bg-elevated: #e4e4e7;
    
    --border-main: 1px solid #e4e4e7;
    --border-subtle: 1px solid #f4f4f5;
    --border-glass-edge: 1px solid rgba(0, 0, 0, 0.08);
    --border-dashed: 1px dashed rgba(0, 0, 0, 0.25);
    
    --text-primary: #18181b;
    --text-secondary: #71717a;
    --text-muted: #a1a1aa;
    
    --text-sel-line: #16a34a;
    --text-sel-dash: rgba(22, 163, 74, 0.6);
    --text-sel-tag-bg: #16a34a;
    --text-sel-tag-fg: #ffffff;
    
    --btn-bg: #f4f4f5;
    --btn-border: #e4e4e7;
    --btn-hover-bg: #e4e4e7;
    --btn-hover-border: #d4d4d8;
    --btn-active-bg: #18181b;
    --btn-active-color: #ffffff;
    
    --input-bg: #ffffff;
    --input-border: #e4e4e7;
    
    --canvas-bg: #ffffff;
    --canvas-border: 1px solid #e4e4e7;
    --timeline-bg: #fafafa;
    --timeline-grid: #e4e4e7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100vw; height: 100vh; overflow: hidden;
    background: var(--bg-app); color: var(--text-primary);
    font-family: var(--font-f1); font-size: 11px; font-weight: 400;
    letter-spacing: 0.2px; line-height: 1.4; user-select: none;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#app-container, #workspace-area {
    display: flex; width: 100vw; height: 100vh; overflow: hidden; background: transparent;
}
#app-container { flex-direction: column; }
#workspace-area { flex: 1; min-height: 0; position: relative; }

/* ==========================================================================
   PROCEDURAL SUBTLE GRAIN OVERLAY
   ========================================================================== */
.paper-texture-overlay {
    position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fineGrainDark'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 1  0 1 0 0 1  0 0 1 0 1  0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fineGrainDark)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 200px 200px;
    mix-blend-mode: screen; opacity: 0.20; transition: opacity 0.15s ease;
}

/* ==========================================================================
   SCROLLBARS (FAIRARENA SLEEK)
   ========================================================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.45); }

/* ==========================================================================
   BUTTONS & FORM CONTROLS
   ========================================================================== */
button, .btn-primary, .btn-secondary, .btn-icon, .tool-btn, .t-btn, .panel-tab {
    background-color: var(--btn-bg); border: 1px solid var(--btn-border);
    color: var(--text-primary); font-family: var(--font-f1);
    font-weight: 500; font-size: 11px; letter-spacing: 0.2px;
    height: 26px; padding: 0 8px; border-radius: 6px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; white-space: nowrap; outline: none; box-sizing: border-box;
    transition: all 0.12s ease;
}
button:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-icon:hover:not(:disabled), .t-btn:hover:not(:disabled) {
    background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border);
}
button:disabled, .btn-icon:disabled, .btn-primary:disabled {
    opacity: 0.35; cursor: not-allowed; background-color: transparent !important;
}
button.active, .btn-primary.active, .btn-icon.active, .t-btn.active, .btn-draw-shape.active-tool {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}

button svg, .btn-primary svg, .btn-secondary svg, .btn-icon svg, .t-btn svg {
    stroke: currentColor !important; width: 13px; height: 13px;
    display: inline-block; vertical-align: middle; pointer-events: none;
}

/* Secondary Buttons */
.btn-secondary {
    background: #27272a; border: 1px solid #3f3f46; color: var(--text-primary);
    border-radius: 6px; font-size: 10.5px; height: 26px; padding: 0 8px;
}
.btn-secondary:hover {
    background: #3f3f46; border-color: #52525b;
}

/* Inputs */
input[type="text"], input[type="number"], select, textarea {
    background-color: var(--input-bg); border: 1px solid var(--input-border);
    color: var(--text-primary); font-family: var(--font-f1);
    font-size: 11px; font-weight: 400; border-radius: 6px;
    padding: 3px 8px; height: 26px; outline: none; box-sizing: border-box;
    transition: all 0.12s ease;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border-color: #22c55e;
}
select { cursor: pointer; }
input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
    background: #27272a; border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 12px; height: 12px;
    background: #22c55e; cursor: pointer; border-radius: 50%;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); border: none;
}
input[type="color"] {
    -webkit-appearance: none; appearance: none; width: 28px; height: 24px;
    border: 1px solid var(--border-main); border-radius: 6px; padding: 0;
    background: var(--input-bg); cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border-radius: 4px; border: none; }

/* ==========================================================================
   CATEGORY 1: TOP APP HEADER & TOOLBAR (FAIRARENA STYLE)
   ========================================================================== */
#top-bar {
    height: 44px; min-height: 44px; background: #18181b;
    border-bottom: 1px solid #27272a; display: flex; align-items: center;
    justify-content: space-between; padding: 0 12px; z-index: 50; gap: 8px;
    box-sizing: border-box; width: 100%; overflow: visible;
}

.logo-group {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.brand-title {
    display: flex; align-items: center; gap: 6px; text-decoration: none;
}
.brand-logo-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}
.brand-name {
    font-size: 13px; font-weight: 800; letter-spacing: 0.8px; color: #ffffff;
}
.brand-accent {
    color: #22c55e;
}
.brand-badge {
    font-size: 8px; font-weight: 700; color: #71717a; border: 1px solid #3f3f46;
    padding: 0 3px; border-radius: 3px; letter-spacing: 0.5px;
}
.project-title-chip {
    display: flex; align-items: center; gap: 5px;
    background: #27272a; border: 1px solid #3f3f46; border-radius: 6px;
    padding: 3px 8px; height: 26px; font-size: 11px; color: var(--text-primary);
    cursor: pointer; margin-left: 6px;
}
.chip-icon {
    width: 12px !important; height: 12px !important; color: #a1a1aa;
}
.history-actions {
    display: flex; align-items: center; gap: 2px; margin-left: 4px;
}

/* Center Tools */
.header-center-tools {
    display: flex; align-items: center; gap: 4px; flex-shrink: 1; min-width: 0;
}
.tool-pill {
    display: flex; align-items: center; background: #27272a;
    border: 1px solid #3f3f46; border-radius: 6px; height: 26px;
    padding: 0 6px; gap: 4px; flex-shrink: 0;
}
.pill-icon {
    width: 13px !important; height: 13px !important; color: #a1a1aa;
}
.clean-select {
    background: transparent !important; border: none !important;
    color: var(--text-primary) !important; font-size: 11px !important;
    font-weight: 500 !important; outline: none !important;
    padding: 0 14px 0 2px !important; cursor: pointer !important; height: 100% !important;
}
.tool-divider {
    width: 1px; height: 16px; background: #3f3f46; margin: 0 4px; flex-shrink: 0;
}
.btn-tool-pill {
    background: #27272a !important; border: 1px solid #3f3f46 !important;
    border-radius: 6px !important; color: var(--text-secondary) !important;
    height: 26px !important; padding: 0 6px !important; display: inline-flex !important;
    align-items: center !important; gap: 4px !important; font-size: 10.5px !important;
    font-weight: 500 !important; transition: all 0.12s ease !important; flex-shrink: 0;
}
.btn-tool-pill:hover {
    background: #3f3f46 !important; color: var(--text-primary) !important;
}
.btn-tool-pill.active {
    background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important;
    color: #22c55e !important;
}

/* Right Actions & FairArena Glowing Export */
.header-right-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto;
}
.export-dropdown-wrapper {
    position: relative; display: inline-block; flex-shrink: 0; margin-left: 4px;
}
.btn-fairarena-export {
    background-color: #22c55e; color: #ffffff; font-weight: 700;
    border-radius: 8px; height: 30px; padding: 0 14px;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); transition: all 0.15s ease;
    border: none; cursor: pointer; font-size: 12px; letter-spacing: 0.5px;
    flex-shrink: 0; white-space: nowrap;
}
.btn-fairarena-export:hover {
    background-color: #16a34a; box-shadow: 0 0 28px rgba(34, 197, 94, 0.65);
    transform: translateY(-1px);
}
.export-arrow {
    width: 12px !important; height: 12px !important; stroke-width: 2.5 !important;
}

@media (max-width: 1440px) {
    .btn-tool-pill span { display: none; }
    .btn-tool-pill { padding: 0 6px !important; }
}
@media (max-width: 1280px) {
    .header-right-actions .btn-secondary span { display: none; }
    .header-right-actions .btn-secondary { padding: 0 6px; }
}
.export-dropdown-menu {
    position: absolute; top: calc(100% + 6px); right: 0; width: 290px;
    background: #18181b; border: 1px solid #27272a; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 1000; padding: 6px;
}
.export-menu-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 6px; border-bottom: 1px solid #27272a;
}
.export-menu-header .header-title {
    font-size: 11px; font-weight: 700; color: var(--text-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.export-menu-header .header-fps {
    font-size: 10px; color: var(--text-muted); font-family: var(--font-mono);
}
.export-menu-list { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.export-menu-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; cursor: pointer; transition: all 0.15s ease;
}
.export-menu-item:hover { background: #27272a; }
.export-menu-item.recommended {
    background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25);
}
.export-menu-item.recommended:hover { background: rgba(34, 197, 94, 0.15); }
.item-icon-box {
    width: 32px; height: 32px; border-radius: 6px; background: #27272a;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary); flex-shrink: 0;
}
.export-menu-item.recommended .item-icon-box {
    background: rgba(34, 197, 94, 0.2); color: #22c55e;
}
.item-content { flex: 1; min-width: 0; }
.item-title {
    font-size: 11px; font-weight: 600; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
}
.badge-best-match {
    font-size: 8.5px; background: rgba(34, 197, 94, 0.2); color: #22c55e;
    padding: 1px 5px; border-radius: 4px; font-weight: 700;
}
.item-desc { font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }
.export-menu-divider { height: 1px; background: #27272a; margin: 4px 0; }

/* ==========================================================================
   CATEGORY 2: LEFT FAIRARENA DOCK (64px Activity Bar + Drawer Panel)
   ========================================================================== */
.fairarena-left-dock, #left-panel {
    width: 334px; min-width: 240px; max-width: 650px;
    border-right: 1px solid var(--border-main); display: flex !important;
    flex-direction: row !important; height: 100%; z-index: 20;
    background: #18181b; overflow: hidden;
}

.activity-bar {
    width: 64px; min-width: 64px; background: #141416;
    border-right: 1px solid var(--border-main); display: flex;
    flex-direction: column; align-items: center; padding: 10px 0;
    gap: 6px; z-index: 25; flex-shrink: 0; overflow-y: auto;
}

.activity-tab {
    position: relative; width: 48px; height: 48px;
    border-radius: 10px !important; background: transparent !important;
    border: none !important; color: var(--text-muted) !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important; cursor: pointer; transition: all 0.15s ease !important;
    padding: 0 !important;
}
.activity-tab:hover {
    color: var(--text-secondary) !important; background: rgba(255, 255, 255, 0.05) !important;
}
.activity-tab.active {
    color: #22c55e !important; background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
.activity-tab svg {
    width: 18px !important; height: 18px !important; stroke-width: 2 !important;
}
.activity-label {
    font-size: 9px; font-weight: 500; text-transform: capitalize;
    letter-spacing: 0; line-height: 1; pointer-events: none;
}
.activity-tab .active-indicator {
    display: none; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 3px; height: 20px;
    background: #22c55e; border-radius: 0 3px 3px 0;
}
.activity-tab.active .active-indicator { display: block; }

/* Drawer Panel */
.drawer-panel {
    flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
    background: #18181b; overflow: hidden;
}
.drawer-view {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    min-width: 0; overflow: hidden; padding: 12px 14px;
}
.drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; flex-shrink: 0;
}
.drawer-title {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.2px;
}
.drawer-subtitle {
    font-size: 11px; color: var(--text-muted); margin-top: 1px;
}
.drawer-section-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.5px; margin: 12px 0 6px;
}

/* Category Filter Chips */
.category-chips-bar {
    display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 8px; flex-shrink: 0;
}
.chip-filter {
    background: #27272a !important; border: 1px solid #3f3f46 !important;
    border-radius: 20px !important; color: var(--text-secondary) !important;
    font-size: 10px !important; height: 22px !important; padding: 0 10px !important;
    flex-shrink: 0;
}
.chip-filter:hover { color: var(--text-primary) !important; background: #3f3f46 !important; }
.chip-filter.active {
    background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important;
    color: #22c55e !important;
}

/* Search Box */
.search-box {
    position: relative; margin-bottom: 8px; flex-shrink: 0;
}
.search-box input {
    width: 100%; height: 28px; padding-left: 28px; font-size: 11px;
    background: #27272a; border: 1px solid #3f3f46; border-radius: 6px;
}
.search-icon {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none; display: flex;
}
.slot-info-banner {
    padding: 4px 8px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-main); border-radius: 6px;
    font-size: 9.5px; color: var(--text-secondary); text-transform: uppercase;
    margin-bottom: 8px; flex-shrink: 0;
}

/* Effects Grid */
.effects-grid {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto !important; overflow-x: hidden !important;
    flex: 1; min-height: 0; overscroll-behavior: contain;
}
.effect-item {
    background: #27272a; border: 1px solid #3f3f46; border-radius: 8px;
    padding: 6px 8px; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; cursor: pointer; min-height: 36px; transition: all 0.15s ease;
}
.effect-item:hover {
    background: #3f3f46; border-color: #52525b; transform: translateY(-1px);
}
.effect-item.applied-in {
    border-left: 3px solid #22c55e !important;
}
.effect-item.applied-out {
    border-right: 3px solid #22c55e !important;
}
.effect-item.applied-merged {
    border-left: 3px solid #22c55e !important; border-right: 3px solid #22c55e !important;
}
.btn-slot-round {
    width: 22px; height: 22px; border-radius: 50% !important;
    border: 1.5px solid #52525b !important; background: transparent !important;
    color: var(--text-secondary) !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important; cursor: pointer !important; flex-shrink: 0;
}
.btn-slot-round:hover {
    border-color: #22c55e !important; color: #22c55e !important; transform: scale(1.15);
}
.btn-slot-round.active {
    background: #22c55e !important; border-color: #22c55e !important;
    color: #000000 !important;
}
.effect-name-wrap {
    flex: 1; text-align: center; overflow: hidden; pointer-events: none;
}
.effect-title-preview {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--text-primary); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; display: inline-block;
}

/* Primary Drawer Button */
.btn-drawer-primary {
    background-color: #22c55e !important; color: #000000 !important;
    font-weight: 700 !important; border: none !important; border-radius: 6px !important;
    height: 32px !important; width: 100% !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    gap: 6px !important; cursor: pointer !important; transition: all 0.15s ease !important;
    font-size: 11.5px !important; flex-shrink: 0;
}
.btn-drawer-primary:hover {
    background-color: #16a34a !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.4);
}

/* Presets Grids */
.text-presets-grid, .shape-presets-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-y: auto;
}
.text-preset-card {
    background: #27272a; border: 1px solid #3f3f46; border-radius: 8px;
    padding: 12px 10px; cursor: pointer; display: flex; flex-direction: column;
    justify-content: space-between; min-height: 75px; transition: all 0.15s ease;
}
.text-preset-card:hover {
    border-color: #22c55e; background: rgba(34, 197, 94, 0.05); transform: translateY(-1px);
}
.btn-shape-preset-card {
    background: #27272a !important; border: 1px solid #3f3f46 !important;
    border-radius: 8px !important; padding: 10px !important; height: auto !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 6px !important; cursor: pointer; transition: all 0.15s ease !important;
}
.btn-shape-preset-card:hover {
    border-color: #22c55e !important; background: rgba(34, 197, 94, 0.05) !important;
    transform: translateY(-1px);
}
.shape-icon-preview {
    border: 1.5px solid var(--text-secondary); background: rgba(255, 255, 255, 0.05);
}
.phone-shape { width: 18px; height: 32px; border-radius: 3px; }
.wide-shape { width: 36px; height: 20px; border-radius: 3px; }
.square-shape { width: 26px; height: 26px; border-radius: 3px; }
.portrait-shape { width: 22px; height: 28px; border-radius: 3px; }
.circle-shape { width: 26px; height: 26px; border-radius: 50%; }
.pill-shape { width: 34px; height: 16px; border-radius: 10px; }
.shape-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.shape-dim { font-size: 9px; color: var(--text-muted); }

/* Carousel Builder Card */
.carousel-builder-card {
    background: #27272a; border: 1px solid #3f3f46; border-radius: 8px;
    padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
}
.param-row { display: flex; flex-direction: column; gap: 3px; }
.param-row label {
    font-size: 10px; text-transform: uppercase; font-weight: 600; color: var(--text-secondary);
}
.param-control { display: flex; align-items: center; gap: 8px; }

/* AI Features Cards */
.ai-feature-card {
    background: #27272a; border: 1px solid #3f3f46; border-radius: 8px;
    padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.ai-badge {
    font-size: 8.5px; font-weight: 700; color: #22c55e;
    background: rgba(34, 197, 94, 0.15); padding: 2px 6px;
    border-radius: 4px; display: inline-block; width: max-content;
}
.ai-feature-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.ai-feature-desc { font-size: 10.5px; color: var(--text-secondary); line-height: 1.4; }

/* Dropzone */
.drawer-dropzone {
    border: 2px dashed #3f3f46; border-radius: 8px; padding: 18px 12px;
    text-align: center; background: rgba(255, 255, 255, 0.02); margin-bottom: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dropzone-icon {
    width: 28px !important; height: 28px !important; color: #22c55e; margin-bottom: 4px;
}
.dropzone-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.dropzone-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Layers Stack */
.layers-toolbar {
    display: flex; gap: 4px; margin-bottom: 8px; flex-shrink: 0;
}
#layers-list {
    display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1;
}
.layer-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: #27272a; border: 1px solid #3f3f46;
    border-radius: 6px; cursor: pointer; font-size: 11px; color: var(--text-primary);
}
.layer-list-item:hover { background: #3f3f46; }
.layer-list-item.selected {
    background: rgba(34, 197, 94, 0.12); border-color: #22c55e;
}

/* ==========================================================================
   CATEGORY 3: CENTER VIEWPORT (CANVAS & HUD)
   ========================================================================== */
#center-viewport {
    flex: 1; position: relative; background: #0c0d10;
    display: flex; align-items: center;
    justify-content: center; overflow: hidden; min-width: 0;
}
.viewport-hud {
    position: absolute; top: 10px; left: 12px; z-index: 30;
    display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.hud-chip {
    background: rgba(24, 24, 27, 0.85); backdrop-filter: blur(12px);
    border: 1px solid #3f3f46; border-radius: 20px; color: var(--text-secondary);
    font-size: 10px; font-weight: 500; padding: 3px 10px; display: flex; align-items: center;
}
#viewport-stage-bounds {
    position: relative; display: flex; align-items: center; justify-content: center;
    transform-origin: center center; transform-style: preserve-3d;
}
#canvas-stage-wrapper {
    position: relative; background-color: var(--canvas-bg) !important;
    border: 1px solid #27272a !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    overflow: visible;
}
#threejs-canvas {
    position: absolute; top: 0; left: 0; width: 100% !important;
    height: 100% !important; display: block; z-index: 1; pointer-events: none;
}
.camera-frame-bounds {
    position: absolute; border: 1.5px dashed rgba(255, 255, 255, 0.35) !important;
    box-sizing: border-box; pointer-events: none !important; z-index: 10;
}
.camera-frame-bounds.selected {
    border: 1.5px solid #22c55e !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
}
.cam-bracket {
    display: block !important; position: absolute; width: 14px; height: 14px;
    border: 2px solid #22c55e; pointer-events: none;
}
.cam-bracket.cam-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.cam-bracket.cam-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.cam-bracket.cam-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.cam-bracket.cam-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.cam-header {
    position: absolute; top: -24px; left: 0; background: #18181b;
    border: 1px solid #3f3f46; color: var(--text-primary); font-size: 10px;
    font-weight: 600; text-transform: uppercase; padding: 2px 8px;
    display: flex; align-items: center; gap: 6px; pointer-events: auto;
    cursor: pointer; border-radius: 4px 4px 0 0; z-index: 20;
}

#stage-dom-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 15; pointer-events: none; overflow: visible; perspective: 1600px;
    transform-style: preserve-3d;
}

/* Interactive Shape Drawing Canvas Overlay */
.stage-draw-overlay {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 80; cursor: crosshair; pointer-events: auto;
    background: rgba(34, 197, 94, 0.03);
}
.shape-draw-preview {
    position: absolute; border: 2px dashed #22c55e;
    background: rgba(34, 197, 94, 0.15); border-radius: 4px;
    pointer-events: none; display: none; box-sizing: border-box;
}
.shape-draw-dimension {
    position: absolute; bottom: -24px; left: 50%;
    transform: translateX(-50%); background: #18181b;
    border: 1px solid #3f3f46; color: #22c55e; font-size: 10px;
    font-family: var(--font-mono); padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}

.canvas-layer-item {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    transform-origin: center center !important; pointer-events: auto; cursor: move;
    user-select: none; will-change: transform, opacity, filter; display: flex;
    align-items: center; justify-content: center; width: max-content; height: max-content;
}
.canvas-text-layer {
    white-space: pre-wrap; text-align: center; line-height: 1.15; font-weight: 800;
    color: #ffffff; padding: 6px; box-sizing: border-box; outline: none;
}
.canvas-shape-layer, .canvas-media-layer {
    display: flex; align-items: center; justify-content: center;
}
.shape-content-box {
    width: 100%; height: 100%; background-color: var(--canvas-bg);
    border: 1.5px solid var(--text-primary); box-sizing: border-box;
    transform-origin: center center; will-change: transform, opacity, filter;
}
.media-content-box {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    border: 1px solid var(--text-primary); box-sizing: border-box;
}
.media-content-box img, .media-content-box video {
    width: 100%; height: 100%; display: block; pointer-events: none;
    -webkit-user-drag: none; user-select: none;
}

/* Professional Selection Box & Knobs */
.canvas-layer-item.selected {
    outline: 1.5px solid #22c55e !important;
    outline-offset: 2px;
}
.layer-selection-tag {
    position: absolute; top: -24px; left: 0; background: #22c55e; color: #000000;
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px;
    letter-spacing: 0.3px; white-space: nowrap; pointer-events: none; z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 8 Transform Knobs */
.transform-knob {
    position: absolute; width: 9px; height: 9px; background: #ffffff;
    border: 1.5px solid #22c55e; border-radius: 2px; box-sizing: border-box;
    z-index: 90; pointer-events: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.08s ease, background-color 0.08s ease;
}
.transform-knob:hover {
    background: #22c55e; transform: scale(1.3);
}
.transform-knob.knob-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.transform-knob.knob-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.transform-knob.knob-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.transform-knob.knob-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }

.transform-knob.knob-n { top: -6px; left: calc(50% - 4.5px); cursor: ns-resize; }
.transform-knob.knob-s { bottom: -6px; left: calc(50% - 4.5px); cursor: ns-resize; }
.transform-knob.knob-w { left: -6px; top: calc(50% - 4.5px); cursor: ew-resize; }
.transform-knob.knob-e { right: -6px; top: calc(50% - 4.5px); cursor: ew-resize; }

/* Rotation Stem & Knob */
.rotation-handle-wrapper {
    position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; z-index: 95;
    pointer-events: auto;
}
.rotation-stem {
    width: 1px; height: 18px; background: #22c55e; pointer-events: none;
}
.rotation-knob {
    width: 12px; height: 12px; background: #ffffff; border: 2px solid #22c55e;
    border-radius: 50%; cursor: grab; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease, background-color 0.1s ease;
}
.rotation-knob:hover {
    background: #22c55e; transform: scale(1.3);
}
.rotation-knob:active { cursor: grabbing; }

.ae-word { display: inline-block; white-space: pre; }
.ae-char { display: inline-block; will-change: transform, opacity, filter; position: relative; }

/* Empty state */
.canvas-empty-state {
    display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; pointer-events: none; z-index: 5; flex-direction: column;
    align-items: center; justify-content: center;
}
.canvas-empty-state.visible { display: flex !important; }
.canvas-empty-state h3 {
    font-size: 14px; font-weight: 600; text-transform: uppercase;
    color: var(--text-primary); margin: 6px 0 2px;
}
.canvas-empty-state p { font-size: 11px; color: var(--text-muted); }

/* ==========================================================================
   CATEGORY 4: RIGHT INSPECTOR PANEL
   ========================================================================== */
#right-panel {
    width: 270px; min-width: 200px; max-width: 650px; border-left: 1px solid var(--border-main);
    display: flex; flex-direction: column; height: 100%; z-index: 20; background: #18181b;
}
.inspector-header {
    height: 44px; border-bottom: 1px solid var(--border-main); display: flex;
    align-items: center; justify-content: space-between; padding: 0 12px; flex-shrink: 0;
}
.inspector-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-primary);
}
#inspector-layer-sections {
    flex: 1; min-height: 0; overflow-y: auto !important; overflow-x: hidden !important;
    padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.inspector-section {
    border: 1px solid #27272a; background: #202023; border-radius: 8px; overflow: hidden;
}
.inspector-section-title {
    height: 28px; background: #27272a; border-bottom: 1px solid #27272a;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.3px; color: var(--text-primary);
}
.prop-row {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 5px 8px; font-size: 10.5px; color: var(--text-primary);
}
.prop-label {
    font-size: 10px; text-transform: uppercase; color: var(--text-secondary); min-width: 70px;
}
.prop-input-wrap {
    display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end;
}
.prop-input-wrap textarea {
    width: 100%; min-height: 46px; resize: vertical; border-radius: 6px;
}
.val-badge {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
    min-width: 32px; text-align: right;
}
.scrub-box {
    display: flex; align-items: center; background: #18181b; border: 1px solid #27272a;
    border-radius: 5px; height: 24px; padding: 0 4px; width: 65px;
}
.scrub-tag { font-size: 9px; font-weight: 700; color: #22c55e; margin-right: 3px; }
.scrub-num-input {
    width: 100%; border: none !important; background: transparent !important;
    padding: 0 !important; height: auto !important; font-size: 10.5px !important;
    color: #ffffff !important;
}

/* Alignment Bar */
.alignment-bar {
    display: flex; align-items: center; background: #18181b; border: 1px solid #27272a;
    border-radius: 6px; padding: 2px; gap: 2px; margin: 6px 8px;
}
.btn-align {
    flex: 1; height: 24px !important; background: transparent !important; border: none !important;
    border-radius: 4px !important; color: var(--text-muted) !important; display: flex !important;
    align-items: center !important; justify-content: center !important; cursor: pointer;
    padding: 0 !important; transition: all 0.12s ease !important;
}
.btn-align:hover {
    background: #27272a !important; color: var(--text-primary) !important;
}
.btn-align svg { width: 13px !important; height: 13px !important; }

/* Easing Presets */
.easing-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px;
}
.ease-btn {
    font-size: 9px !important; height: 22px !important; border-radius: 4px !important;
    background: #18181b !important; border: 1px solid #27272a !important;
    color: var(--text-secondary) !important;
}
.ease-btn:hover { background: #27272a !important; color: #ffffff !important; }
.ease-btn.active {
    background: rgba(34, 197, 94, 0.15) !important; border-color: #22c55e !important;
    color: #22c55e !important;
}

/* Slot Effect Cards */
.slot-effect-card {
    border: 1px solid #27272a; border-radius: 6px; padding: 8px; margin: 6px 8px;
    background: #18181b;
}
.slot-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.slot-badge {
    font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
}
.badge-in { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.badge-out { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.badge-merged { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.slot-fx-name { font-size: 11px; font-weight: 600; color: #ffffff; }

/* Font Picker */
.font-picker-wrap { position: relative; width: 100%; }
.font-picker-btn {
    width: 100%; justify-content: space-between; padding: 0 8px; border-radius: 6px;
}
.font-picker-dropdown {
    position: absolute; top: 100%; left: 0; width: 100%; background: #18181b;
    border: 1px solid #27272a; border-radius: 8px; z-index: 999; margin-top: 2px;
    max-height: 250px; display: flex; flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.font-picker-search-bar { padding: 6px; border-bottom: 1px solid #27272a; }
.font-picker-list { flex: 1; overflow-y: auto; }
.font-item {
    padding: 6px 10px; font-size: 12px; cursor: pointer; color: var(--text-primary);
}
.font-item:hover { background: #27272a; }
.font-item.selected { background: #22c55e; color: #000000; }

/* ==========================================================================
   CATEGORY 5: BOTTOM MULTI-TRACK TIMELINE (FAIRARENA NLE DOCK)
   ========================================================================== */
#timeline-dock {
    height: 195px; min-height: 100px; max-height: 600px;
    border-top: 1px solid var(--border-main); display: flex; flex-direction: column;
    z-index: 30; background: #18181b;
}

.timeline-transport-bar {
    height: 38px; background: #141416; border-bottom: 1px solid #27272a;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px; flex-shrink: 0;
}
.transport-controls { display: flex; align-items: center; gap: 3px; }
.t-btn {
    width: 28px; height: 28px; border-radius: 6px; background: #202023;
    border: 1px solid #27272a; color: var(--text-secondary); display: inline-flex;
    align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.t-btn:hover { background: #27272a; color: var(--text-primary); }
.t-btn.play {
    width: 32px; height: 32px; background: #22c55e; color: #000000;
    border: none; border-radius: 50%; box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}
.t-btn.play:hover { background: #16a34a; }
.t-btn-tool {
    height: 26px; padding: 0 8px; width: auto; font-size: 10.5px; font-weight: 500;
    background: #202023; border: 1px solid #27272a; gap: 4px;
}
.t-btn-tool:hover { background: #27272a; }
.t-btn-danger:hover { color: #ef4444; border-color: #ef4444; }
.t-divider { width: 1px; height: 18px; background: #27272a; margin: 0 4px; }

.t-btn.autokey-toggle {
    font-size: 10px; gap: 4px; height: 26px; padding: 0 8px; width: auto;
}
.record-dot { color: #ef4444; font-size: 11px; line-height: 1; }
.t-btn.autokey-toggle.active-recording .record-dot { animation: blink-dot 1s infinite; }
@keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Timecode Display */
.timecode-display {
    display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
    background: #09090b; border: 1px solid #27272a; border-radius: 6px;
    padding: 3px 10px; height: 26px;
}
.timecode-current {
    font-size: 12px; font-weight: 700; color: #22c55e; letter-spacing: 0.5px;
}
.timecode-divider { color: #52525b; font-size: 11px; }
.timecode-total { font-size: 11px; color: var(--text-muted); }

/* Timeline Settings */
.timeline-settings {
    display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-secondary);
}
.setting-item { display: flex; align-items: center; gap: 5px; }
.clean-num-input {
    background: #202023; border: 1px solid #27272a; border-radius: 4px;
    color: #ffffff; padding: 2px 4px; font-size: 11px; font-family: var(--font-mono);
}
.unit-tag { font-size: 10px; color: var(--text-muted); }
.zoom-slider-group { display: flex; align-items: center; gap: 4px; }

/* Timeline Body */
.timeline-body {
    display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative; background: #141416;
}
.timeline-headers-col {
    width: 256px; min-width: 200px; border-right: 1px solid #27272a;
    display: flex; flex-direction: column; overflow-y: auto; background: #18181b;
}
.timeline-headers-title {
    height: 26px; line-height: 26px; padding: 0 10px; font-size: 9px;
    font-weight: 700; text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid #27272a; background: #141416;
    display: flex; justify-content: space-between; align-items: center;
}
.track-count-badge { font-size: 8.5px; color: #52525b; font-weight: 500; }
.track-header-item {
    height: 32px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px; border-bottom: 1px solid #202023; background: transparent;
    font-size: 10.5px; color: var(--text-primary); cursor: pointer;
}
.track-header-item:hover { background: #202023; }
.track-header-item.selected {
    background: rgba(34, 197, 94, 0.1); border-left: 3px solid #22c55e;
}
.track-icons { display: flex; gap: 6px; color: var(--text-muted); }

.timeline-tracks-col {
    flex: 1; display: flex; flex-direction: column; overflow-x: auto;
    overflow-y: hidden; position: relative; background: #0c0d10;
}
#timeline-ruler-canvas {
    height: 26px; background: #141416; border-bottom: 1px solid #27272a;
    cursor: pointer; display: block;
}
.timeline-lanes {
    flex: 1; position: relative; overflow-y: auto; background: #0c0d10;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 140px 100%;
}
.layer-track-lane {
    height: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative; display: flex; align-items: center;
}
.timeline-layer-block {
    position: absolute; top: 4px; height: 24px; background: #27272a;
    border: 1px solid #3f3f46; border-radius: 4px; display: flex;
    align-items: center; cursor: grab; padding: 0 8px; color: #ffffff;
    font-size: 10px; font-weight: 500; overflow: visible;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.timeline-layer-block:active { cursor: grabbing; }
.timeline-layer-block.active {
    background: #3f3f46; border-color: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
.timeline-slice-in {
    position: absolute; top: 0; left: 0; height: 100%;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.45) 0%, rgba(34, 197, 94, 0.12) 80%, transparent 100%);
    border-left: 2px solid #22c55e;
    border-radius: 3px 0 0 3px; pointer-events: none;
}
.timeline-slice-out {
    position: absolute; top: 0; right: 0; height: 100%;
    background: linear-gradient(270deg, rgba(34, 197, 94, 0.45) 0%, rgba(34, 197, 94, 0.12) 80%, transparent 100%);
    border-right: 2px solid #22c55e;
    border-radius: 0 3px 3px 0; pointer-events: none;
}
.timeline-slice-merged {
    position: absolute; inset: 0; height: 100%;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0.08) 50%, rgba(34, 197, 94, 0.35) 100%);
    border-left: 2px solid #22c55e; border-right: 2px solid #22c55e;
    border-radius: 3px; pointer-events: none;
}
.timeline-block-label {
    position: relative; z-index: 2; margin: 0 auto; font-size: 10px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%;
    color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); pointer-events: none;
}
.track-keyframe-diamond {
    position: absolute; top: 50%; width: 9px; height: 9px; background: #22c55e;
    border: 1px solid #000000; transform: translate(-50%, -50%) rotate(45deg);
    cursor: pointer; z-index: 10; transition: transform 0.1s ease;
}
.track-keyframe-diamond:hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.3); }
.track-keyframe-diamond.active {
    background: #ffffff; border: 1.5px solid #22c55e;
}
.trim-handle {
    position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 5;
}
.trim-handle.in-point { left: 0; border-left: 2px solid #22c55e; }
.trim-handle.out-point { right: 0; border-right: 2px solid #22c55e; }

/* PLAYHEAD (FAIRARENA EMERALD GREEN) */
#playhead {
    position: absolute; top: 0; bottom: 0; width: 2px; background: #22c55e;
    pointer-events: none; z-index: 100; transform: translateX(0);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
}
#playhead::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 4px;
    background: rgba(34, 197, 94, 0.3); pointer-events: none;
}
#playhead-handle {
    position: absolute; top: 0; left: -7px; width: 16px; height: 24px;
    background: #22c55e; clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
    cursor: grab; pointer-events: auto; z-index: 101;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transition: filter 0.1s ease;
}
#playhead-handle:hover { filter: brightness(1.2); }
#playhead-handle:active { cursor: grabbing; }

/* ==========================================================================
   PANEL RESIZERS
   ========================================================================== */
.panel-resizer {
    background: transparent; z-index: 40; transition: background 0.15s ease;
}
.resizer-h {
    width: 4px; cursor: col-resize; margin: 0 -2px;
}
.resizer-h:hover, .resizer-h.active-drag {
    background: #22c55e !important;
}
.resizer-v {
    height: 4px; cursor: row-resize; margin: -2px 0;
}
.resizer-v:hover, .resizer-v.active-drag {
    background: #22c55e !important;
}

/* ==========================================================================
   MODALS (FAIRARENA CLEAN DARK)
   ========================================================================== */
.vk-modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px); z-index: 9999; display: flex;
    align-items: center; justify-content: center;
}
.vk-modal-dialog {
    background: #18181b; border: 1px solid #27272a; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); width: 620px; max-width: 90vw;
    max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.vk-modal-header {
    height: 48px; border-bottom: 1px solid #27272a; display: flex;
    align-items: center; justify-content: space-between; padding: 0 16px;
}
.vk-modal-title {
    font-size: 13px; font-weight: 700; color: #ffffff; display: flex;
    align-items: center; gap: 8px;
}
.vk-modal-body {
    padding: 16px; overflow-y: auto; flex: 1; display: flex;
    flex-direction: column; gap: 12px;
}
.vk-modal-desc {
    font-size: 11.5px; color: var(--text-secondary); line-height: 1.5;
}
.vk-section-block {
    border: 1px solid #27272a; border-radius: 8px; padding: 12px; background: #202023;
}
.vk-section-heading {
    font-size: 11.5px; font-weight: 700; color: #ffffff; margin-bottom: 4px;
}
.vk-modal-subtext {
    font-size: 10px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4;
}
.vk-summary-box {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    background: #202023; border: 1px solid #27272a; border-radius: 8px; padding: 12px;
}
.vk-stat-item { display: flex; flex-direction: column; gap: 2px; }
.vk-stat-label { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; }
.vk-stat-val { font-size: 13px; font-weight: 700; color: #ffffff; font-family: var(--font-mono); }
.vk-modal-footer {
    height: 52px; border-top: 1px solid #27272a; display: flex; align-items: center;
    justify-content: flex-end; padding: 0 16px; gap: 8px; background: #141416;
}
.btn-export-highlight {
    background: #22c55e !important; color: #000000 !important; font-weight: 700 !important;
    border: none !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.4) !important;
}
.btn-export-highlight:hover { background: #16a34a !important; }

/* ==========================================================================
   6. ALL 65 KEYFRAME ANIMATIONS (PRESERVED)
   ========================================================================== */
/* Blur & Focus */
@keyframes fx-blur-in {
    0% { filter: blur(24px); opacity: 0; transform: scale(1.1); }
    100% { filter: blur(0px); opacity: 1; transform: scale(1); }
}
@keyframes fx-blur-in-up {
    0% { filter: blur(16px); opacity: 0; transform: translateY(50px); }
    100% { filter: blur(0px); opacity: 1; transform: translateY(0); }
}
@keyframes fx-blur-in-down {
    0% { filter: blur(16px); opacity: 0; transform: translateY(-50px); }
    100% { filter: blur(0px); opacity: 1; transform: translateY(0); }
}
@keyframes fx-blur-zoom-in {
    0% { filter: blur(25px); opacity: 0; transform: scale(2.2); }
    100% { filter: blur(0px); opacity: 1; transform: scale(1); }
}
@keyframes fx-blur-zoom-out {
    0% { filter: blur(25px); opacity: 0; transform: scale(0.2); }
    100% { filter: blur(0px); opacity: 1; transform: scale(1); }
}
@keyframes fx-ghost-blur {
    0% { filter: blur(14px) contrast(200%); opacity: 0; transform: translateY(-20px) scale(1.15); }
    60% { opacity: 0.7; }
    100% { filter: blur(0); opacity: 1; transform: translateY(0) scale(1); }
}

/* Slide & Glide */
@keyframes fx-slide-in-up {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fx-slide-in-down {
    0% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fx-slide-in-left {
    0% { opacity: 0; transform: translateX(-100px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes fx-slide-in-right {
    0% { opacity: 0; transform: translateX(100px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes fx-skew-slide-left {
    0% { opacity: 0; transform: translateX(-120px) skewX(35deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0deg); }
}
@keyframes fx-skew-slide-right {
    0% { opacity: 0; transform: translateX(120px) skewX(-35deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0deg); }
}
@keyframes fx-smooth-glide {
    0% { opacity: 0; transform: translate(-30px, 30px); }
    100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes fx-diagonal-drop {
    0% { opacity: 0; transform: translate(-80px, -80px) rotate(-15deg); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}

/* Bounce & Drop */
@keyframes fx-bounce-in {
    0% { opacity: 0; transform: scale(0.1); }
    60% { opacity: 1; transform: scale(1.2); }
    80% { transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-bounce-in-down {
    0% { opacity: 0; transform: translateY(-180px); }
    60% { opacity: 1; transform: translateY(22px); }
    80% { transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fx-bounce-in-up {
    0% { opacity: 0; transform: translateY(180px); }
    60% { opacity: 1; transform: translateY(-22px); }
    80% { transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fx-elastic-drop {
    0% { opacity: 0; transform: translateY(-150px) scaleY(1.5); }
    55% { opacity: 1; transform: translateY(0) scaleY(0.7) scaleX(1.3); }
    75% { transform: translateY(-16px) scaleY(1.1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fx-rubber-band {
    0% { opacity: 0; transform: scale3d(1, 1, 1); }
    30% { opacity: 1; transform: scale3d(1.3, 0.7, 1); }
    45% { transform: scale3d(0.75, 1.25, 1); }
    60% { transform: scale3d(1.15, 0.85, 1); }
    80% { transform: scale3d(0.95, 1.05, 1); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes fx-hard-impact {
    0% { opacity: 0; transform: translateY(-260px) scale(2); }
    65% { opacity: 1; transform: translateY(0) scale(1); }
    85% { transform: translateY(-18px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fx-trampoline {
    0% { opacity: 0; transform: translateY(160px) scaleY(0.5); }
    50% { opacity: 1; transform: translateY(-40px) scaleY(1.3); }
    75% { transform: translateY(10px) scaleY(0.9); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Scale & Zoom */
@keyframes fx-zoom-in {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-zoom-in-spin {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes fx-pop-in {
    0% { opacity: 0; transform: scale(0.3); }
    70% { opacity: 1; transform: scale(1.22); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-micro-to-giant {
    0% { opacity: 0; transform: scale(0.01); }
    60% { opacity: 1; transform: scale(1.35); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-overshoot-scale {
    0% { opacity: 0; transform: scale(0.2); }
    65% { opacity: 1; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-heartbeat-pop {
    0% { opacity: 0; transform: scale(0.7); }
    25% { opacity: 1; transform: scale(1.28); }
    50% { transform: scale(0.96); }
    75% { transform: scale(1.14); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-lens-flare-scale {
    0% { opacity: 0; transform: scale(2.5); filter: brightness(3); }
    50% { opacity: 0.8; filter: brightness(1.6); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

/* Rotate & Flip */
@keyframes fx-flip-x {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    60% { opacity: 1; transform: perspective(400px) rotateX(-15deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
@keyframes fx-flip-y {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    60% { opacity: 1; transform: perspective(400px) rotateY(-15deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
@keyframes fx-spin-in {
    0% { opacity: 0; transform: rotate(-360deg) scale(0.2); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes fx-spiral-in {
    0% { opacity: 0; transform: rotate(-540deg) translate(-70px, -70px) scale(0.1); }
    100% { opacity: 1; transform: rotate(0) translate(0, 0) scale(1); }
}
@keyframes fx-corkscrew {
    0% { opacity: 0; transform: rotate(720deg) scale(0); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes fx-swing-fall {
    0% { opacity: 0; transform: rotate(70deg) translateY(-60px); transform-origin: top left; }
    60% { opacity: 1; transform: rotate(-18deg); }
    80% { transform: rotate(8deg); }
    100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes fx-roll-in-left {
    0% { opacity: 0; transform: translateX(-120%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
@keyframes fx-roll-in-right {
    0% { opacity: 0; transform: translateX(120%) rotate(120deg); }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

/* Glitch & Cyber */
@keyframes fx-digital-glitch {
    0% { opacity: 0; transform: translate(0); text-shadow: -2px 0 red, 2px 0 blue; }
    20% { opacity: 0.8; transform: translate(-5px, 2px); }
    40% { opacity: 0.5; transform: translate(5px, -2px); text-shadow: 4px 0 red, -4px 0 blue; }
    60% { opacity: 0.9; transform: translate(-2px, 0); text-shadow: -1px 0 red, 1px 0 blue; }
    80% { transform: translate(2px, 1px); }
    100% { opacity: 1; transform: translate(0); text-shadow: none; }
}
@keyframes fx-rgb-shift {
    0% { opacity: 0; text-shadow: -12px 0 #ff0055, 12px 0 #00d4ff; transform: scale(1.15); }
    50% { opacity: 0.8; text-shadow: 6px 0 #ff0055, -6px 0 #00d4ff; }
    100% { opacity: 1; text-shadow: 0 0 transparent; transform: scale(1); }
}
@keyframes fx-matrix-flicker {
    0% { opacity: 0; transform: scaleY(0); }
    20% { opacity: 0.9; transform: scaleY(1.4); }
    40% { opacity: 0.1; }
    60% { opacity: 0.9; transform: scaleY(0.9); }
    80% { opacity: 0.3; }
    100% { opacity: 1; transform: scaleY(1); }
}
@keyframes fx-sliced-shift {
    0% { opacity: 0; transform: translateX(-50px) skewX(40deg); }
    50% { opacity: 0.9; transform: translateX(15px) skewX(-20deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes fx-vhs-tracking {
    0% { opacity: 0; transform: translateY(16px) scaleX(1.3); filter: blur(4px); }
    30% { opacity: 0.6; transform: translateY(-8px) scaleX(0.9); filter: blur(2px); }
    70% { opacity: 0.9; transform: translateY(4px) scaleX(1.1); }
    100% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
}
@keyframes fx-neon-flash {
    0% { opacity: 0; filter: brightness(0); }
    20% { opacity: 1; filter: brightness(2); }
    40% { opacity: 0.2; }
    60% { opacity: 1; filter: brightness(1.5); }
    80% { opacity: 0.6; }
    100% { opacity: 1; filter: brightness(1); }
}
@keyframes fx-static-noise {
    0% { opacity: 0; transform: translate(3px, 3px); filter: contrast(300%); }
    25% { transform: translate(-3px, -3px); opacity: 0.4; }
    50% { transform: translate(2px, -2px); opacity: 0.8; }
    75% { transform: translate(-1px, 2px); }
    100% { opacity: 1; transform: translate(0); filter: contrast(100%); }
}

/* Reveal & Wipe */
@keyframes fx-curtain-reveal {
    0% { clip-path: inset(0 50% 0 50%); opacity: 0; transform: scale(0.9); }
    100% { clip-path: inset(0 0 0 0); opacity: 1; transform: scale(1); }
}
@keyframes fx-wipe-right {
    0% { clip-path: inset(0 100% 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes fx-wipe-down {
    0% { clip-path: inset(0 0 100% 0); transform: translateY(-20px); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); transform: translateY(0); opacity: 1; }
}
@keyframes fx-circle-reveal {
    0% { clip-path: circle(0% at 50% 50%); opacity: 0; }
    100% { clip-path: circle(100% at 50% 50%); opacity: 1; }
}
@keyframes fx-slit-unfold {
    0% { opacity: 0; transform: scaleY(0.001); }
    50% { opacity: 0.7; transform: scaleY(0.001) scaleX(1); }
    100% { opacity: 1; transform: scaleY(1) scaleX(1); }
}
@keyframes fx-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Wave & Wobble */
@keyframes fx-ocean-wave {
    0% { opacity: 0; transform: translateY(50px) rotate(16deg); }
    50% { opacity: 1; transform: translateY(-18px) rotate(-8deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes fx-jello-wobble {
    0% { opacity: 0; transform: scale(0.3); }
    30% { opacity: 1; transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-swing-pendulum {
    0% { opacity: 0; transform: rotate(-75deg); transform-origin: top center; }
    50% { opacity: 1; transform: rotate(40deg); }
    75% { transform: rotate(-18deg); }
    100% { opacity: 1; transform: rotate(0deg); transform-origin: top center; }
}
@keyframes fx-earthquake-shake {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.5; transform: translate(-10px, 8px); }
    40% { opacity: 0.8; transform: translate(10px, -8px); }
    60% { transform: translate(-6px, 4px); }
    80% { transform: translate(4px, -2px); }
    100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes fx-tilt-in-fwd {
    0% { opacity: 0; transform: perspective(400px) rotateY(45deg) rotateX(-20deg) translateZ(-200px); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0) rotateX(0) translateZ(0); }
}
@keyframes fx-whirl-in {
    0% { opacity: 0; transform: rotate(-720deg) scale(0); }
    100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes fx-float-land {
    0% { opacity: 0; transform: translateY(-40px); }
    60% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Typography & Expressive */
@keyframes fx-tracking-expand {
    0% { opacity: 0; letter-spacing: -0.4em; filter: blur(8px); }
    70% { opacity: 0.8; }
    100% { opacity: 1; letter-spacing: normal; filter: blur(0); }
}
@keyframes fx-tracking-contract {
    0% { opacity: 0; letter-spacing: 0.8em; filter: blur(8px); }
    100% { opacity: 1; letter-spacing: normal; filter: blur(0); }
}
@keyframes fx-stretch-y {
    0% { opacity: 0; transform: scaleY(3); }
    60% { opacity: 1; transform: scaleY(0.7); }
    100% { opacity: 1; transform: scaleY(1); }
}
@keyframes fx-stretch-x {
    0% { opacity: 0; transform: scaleX(3); }
    60% { opacity: 1; transform: scaleX(0.7); }
    100% { opacity: 1; transform: scaleX(1); }
}
@keyframes fx-bold-punch {
    0% { opacity: 0; transform: scale(2.6); filter: blur(6px); }
    60% { opacity: 1; transform: scale(0.9); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-smoke-rise {
    0% { opacity: 0; transform: translateY(60px) scale(0.7); filter: blur(16px); }
    60% { opacity: 0.8; filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes fx-shadow-pop {
    0% { opacity: 0; transform: scale(0.5); text-shadow: 0 0 25px rgba(0,0,0,0.8); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 0 transparent; }
}
@keyframes fx-elastic-snap {
    0% { opacity: 0; transform: scale(0.1); }
    70% { opacity: 1; transform: scale(1.3); }
    85% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-blur-split-h {
    0% { opacity: 0; letter-spacing: 0.9em; filter: blur(14px); }
    100% { opacity: 1; letter-spacing: normal; filter: blur(0); }
}

/* Panel Resizers */
.panel-resizer {
    background: transparent;
    z-index: 100;
    transition: background 0.1s ease;
}
.panel-resizer:hover, .panel-resizer.is-resizing {
    background: var(--text-primary);
    opacity: 0.5;
}
.resizer-h {
    width: 6px;
    cursor: col-resize;
    margin: 0 -3px;
}
.resizer-v {
    height: 6px;
    cursor: row-resize;
    margin: -3px 0;
}