:root {
                --bg-1: #050617;
                --bg-panel: #07090f;
                --bg-card: #0d1117;
                --accent-a: #7af0c6;
                --accent-b: #6ea8ff;
                --glass: rgba(255, 255, 255, 0.04);
                --border: rgba(255, 255, 255, 0.07);
                --muted: #6b7f8f;
                --muted2: #9fb6c3;
                --white: #f0f4f8;
                --radius: 14px;
            }
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            html,
            body {
                height: 100%;
                background: var(--bg-1);
                color: var(--white);
                font-family: Inter, system-ui, Arial;
                overflow-x: hidden;
            }

            /* ─── EDITOR LAYOUT ─── */
            .editor-wrapper {
                display: flex;
                flex-direction: column;
                min-height: calc(100vh - 64px);
                overflow-y: auto;
            }
            .editor-layout {
                display: grid;
                grid-template-columns: 360px 1fr;
                flex: 1;
                min-height: calc(100vh - 64px);
                overflow: hidden;
            }
            .editor-left {
                background: var(--bg-panel);
                border-right: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            .editor-right {
                background:
                    radial-gradient(
                        ellipse 80% 60% at 50% 30%,
                        rgba(110, 168, 255, 0.05) 0%,
                        transparent 70%
                    ),
                    #080912;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
            }

            /* ─── TAB BAR ─── */
            .tab-bar {
                display: flex;
                border-bottom: 1px solid var(--border);
                background: #050710;
                flex-shrink: 0;
            }
            .tab-btn {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 10px 4px;
                background: transparent;
                border: none;
                border-bottom: 2px solid transparent;
                color: var(--muted);
                cursor: pointer;
                font-size: 10px;
                font-weight: 600;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                transition:
                    color 0.2s,
                    border-color 0.2s;
                font-family: Inter, system-ui;
            }
            .tab-btn:hover {
                color: var(--muted2);
            }
            .tab-btn.active {
                color: var(--accent-a);
                border-bottom-color: var(--accent-a);
            }

            /* ─── TAB CONTENT ─── */
            .tab-content {
                display: none;
                flex-direction: column;
                gap: 0;
                overflow-y: auto;
                flex: 1;
                padding: 0;
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
            }
            .tab-content::-webkit-scrollbar {
                width: 4px;
            }
            .tab-content::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
            }
            .tab-content.active {
                display: flex;
            }

            /* ─── SECTION BLOCKS ─── */
            .section-block {
                padding: 14px 16px;
                border-bottom: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .section-header {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .section-title {
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                color: var(--muted2);
            }
            .section-value {
                margin-left: auto;
                font-size: 12px;
                color: var(--accent-a);
                font-weight: 600;
                font-family: "Space Grotesk", Inter;
            }
            .section-desc {
                font-size: 12px;
                color: var(--muted);
                line-height: 1.5;
            }
            .section-badge {
                font-size: 10px;
                font-weight: 800;
                padding: 2px 7px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.07);
                color: var(--muted2);
                letter-spacing: 0.5px;
            }
            .section-badge.ai {
                background: linear-gradient(
                    90deg,
                    rgba(122, 240, 198, 0.15),
                    rgba(110, 168, 255, 0.15)
                );
                color: var(--accent-a);
                border: 1px solid rgba(122, 240, 198, 0.2);
            }

            /* ─── DROP ZONE ─── */
            .drop-zone {
                margin: 14px 16px;
                position: relative;
                border: 1.5px dashed rgba(255, 255, 255, 0.1);
                border-radius: 16px;
                background: rgba(255, 255, 255, 0.02);
                transition:
                    border-color 0.25s,
                    background 0.25s;
                overflow: hidden;
            }
            .drop-zone.dragover {
                border-color: var(--accent-a);
                background: rgba(122, 240, 198, 0.05);
            }
            .drop-zone-inner {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 28px 16px;
                text-align: center;
            }
            .drop-icon {
                width: 64px;
                height: 64px;
                border-radius: 16px;
                background: linear-gradient(
                    135deg,
                    rgba(122, 240, 198, 0.08),
                    rgba(110, 168, 255, 0.08)
                );
                border: 1px solid rgba(122, 240, 198, 0.12);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 4px;
            }
            .drop-title {
                font-size: 14px;
                font-weight: 700;
                color: var(--white);
            }
            .drop-sub {
                font-size: 11px;
                color: var(--muted);
            }
            .drop-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                margin-top: 4px;
                padding: 9px 18px;
                border-radius: 10px;
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                font-size: 13px;
                font-weight: 800;
                cursor: pointer;
                border: none;
                transition:
                    transform 0.15s,
                    box-shadow 0.15s;
                box-shadow: 0 4px 18px rgba(122, 240, 198, 0.2);
            }
            .drop-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 22px rgba(122, 240, 198, 0.3);
            }
            .drop-overlay {
                display: none;
                position: absolute;
                inset: 0;
                background: rgba(122, 240, 198, 0.12);
                border-radius: 14px;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 800;
                color: var(--accent-a);
            }
            .drop-zone.dragover .drop-overlay {
                display: flex;
            }

            /* File info card */
            .file-info-card {
                margin: 0 16px 14px;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 14px;
                background: rgba(122, 240, 198, 0.06);
                border: 1px solid rgba(122, 240, 198, 0.15);
                border-radius: 12px;
            }
            .file-info-icon {
                font-size: 22px;
            }
            .file-info-text {
                flex: 1;
                min-width: 0;
            }
            .file-info-name {
                font-size: 13px;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .file-info-size {
                font-size: 11px;
                color: var(--muted);
                margin-top: 2px;
            }
            .file-info-remove {
                background: transparent;
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: var(--muted);
                width: 26px;
                height: 26px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 11px;
                transition: all 0.2s;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .file-info-remove:hover {
                background: rgba(255, 77, 77, 0.12);
                border-color: rgba(255, 77, 77, 0.3);
                color: #ff6b6b;
            }

            /* ─── ACTION BUTTONS ─── */
            .btn-action {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                padding: 10px 16px;
                border-radius: 10px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                border: none;
                transition: all 0.2s;
                letter-spacing: 0.2px;
                font-family: Inter, system-ui;
            }
            .primary-action {
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                box-shadow: 0 4px 18px rgba(122, 240, 198, 0.18);
            }
            .primary-action:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 24px rgba(122, 240, 198, 0.28);
            }
            .primary-action:disabled {
                opacity: 0.35;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }
            .ghost-action {
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid var(--border);
                color: var(--muted2);
            }
            .ghost-action:hover {
                background: rgba(255, 255, 255, 0.08);
                color: var(--white);
            }

            /* ─── STATUS BAR ─── */
            .status-bar {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid var(--border);
                border-radius: 8px;
                font-size: 12px;
                color: var(--muted2);
            }
            .status-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--muted);
                flex-shrink: 0;
                animation: statusPulse 2.5s ease infinite;
            }
            .status-bar.active .status-dot {
                background: var(--accent-a);
                box-shadow: 0 0 6px var(--accent-a);
            }
            @keyframes statusPulse {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.4;
                }
            }
            .ai-loader {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 12px;
                background: linear-gradient(
                    90deg,
                    rgba(122, 240, 198, 0.06),
                    rgba(110, 168, 255, 0.06)
                );
                border: 1px solid rgba(122, 240, 198, 0.15);
                border-radius: 8px;
                font-size: 12px;
                color: var(--accent-a);
                overflow: hidden;
                position: relative;
            }
            .ai-loader-bar {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 0%;
                background: rgba(122, 240, 198, 0.25);
                transition: width 0.4s ease;
            }
            @keyframes aiScan {
                from {
                    left: -40%;
                }
                to {
                    left: 100%;
                }
            }
            .transcript-preview {
                font-size: 11px;
                color: var(--muted);
                line-height: 1.5;
                max-height: 60px;
                overflow: hidden;
                font-style: italic;
            }

            /* ─── CONTROLS ─── */
            .select-styled {
                width: 100%;
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 10px;
                color: var(--white);
                padding: 9px 12px;
                font-size: 13px;
                cursor: pointer;
                outline: none;
                appearance: auto;
                font-family: Inter, system-ui;
            }
            .select-styled:focus {
                border-color: rgba(122, 240, 198, 0.4);
            }
            .range-styled {
                width: 100%;
                height: 4px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 999px;
                outline: none;
                cursor: pointer;
                appearance: none;
                -webkit-appearance: none;
            }
            .range-styled::-webkit-slider-thumb {
                appearance: none;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: linear-gradient(
                    135deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(122, 240, 198, 0.3);
            }
            .align-group {
                display: flex;
                gap: 4px;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 4px;
            }
            .align-btn {
                flex: 1;
                height: 36px;
                border-radius: 7px;
                border: none;
                background: transparent;
                color: var(--muted);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition:
                    background 0.2s,
                    color 0.2s;
            }
            .align-btn:hover {
                background: rgba(255, 255, 255, 0.07);
                color: var(--white);
            }
            .align-btn.active {
                background: linear-gradient(
                    135deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
            }
            .anim-list {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
            }
            .chip {
                padding: 6px 10px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid var(--border);
                cursor: pointer;
                font-weight: 600;
                font-size: 11px;
                color: var(--muted2);
                transition: all 0.18s;
                white-space: nowrap;
                font-family: Inter, system-ui;
            }
            .chip:hover {
                background: rgba(255, 255, 255, 0.08);
                color: var(--white);
            }
            .chip.active {
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                border-color: transparent;
            }
            .editor-left-content {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
            .editor-left-footer {
                padding: 12px 16px;
                border-top: 1px solid var(--border);
                background: #050710;
                flex-shrink: 0;
            }
            .download-btn {
                width: 100%;
            }

            /* ─── RESPONSIVE MOBILE ─── */
            @media (max-width: 1366px) {
                .editor-layout {
                    grid-template-columns: 280px 1fr;
                }
            }

            @media (max-width: 768px) {
                html, body {
                    font-size: 14px;
                    overflow-x: hidden !important;
                    width: 100vw;
                }
                * {
                    box-sizing: border-box;
                }
                .editor-wrapper {
                    height: calc(100vh - 52px);
                    height: calc(100dvh - 52px);
                    overflow: hidden; /* Evita scroll doble */
                    display: flex;
                    flex-direction: column;
                    width: 100vw;
                    overflow-y: auto;
                    overflow-x: hidden;
                }
                .navbar {
                    height: 52px !important;
                    padding: 0 12px !important;
                    width: 100vw;
                }
                .navbar-brand {
                    font-size: 16px;
                }
                .editor-layout {
                    grid-template-columns: 1fr;
                    grid-template-rows: auto auto auto;
                    gap: 0;
                    width: 100vw;
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                    flex: 1;
                    height: 100%;
                    overflow: hidden;
                }
                .tab-bar {
                    background: #050710;
                    border-bottom: 1px solid var(--border);
                    display: flex;
                    height: 46px;
                    overflow-x: auto;
                    overflow-y: hidden;
                    width: 100%;
                }
                .tab-btn {
                    flex: 0 0 auto;
                    min-width: 80px;
                    padding: 4px 10px;
                    font-size: 10px;
                    gap: 2px;
                    white-space: nowrap;
                }
                .editor-left {
                    order: 2; /* Controles debajo del video */
                    order: 2;
                    flex: 1;
                    width: 100%;
                    max-height: none;
                    border-right: none;
                    border-top: 1px solid var(--border);
                    min-height: 0;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    padding: 0;
                    margin: 0;
                }
                .editor-left-content {
                    flex: 1;
                    display: grid !important;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    overflow-x: hidden;
                    background: var(--bg-panel);
                    border-right: none;
                    width: 100%;
                }
                .tab-content {
                    display: none !important;
                }
                .tab-content.active {
                    display: grid !important;
                    gap: 8px;
                    padding: 10px;
                    align-content: start;
                    grid-template-columns: 1fr;
                    width: 100%;
                }
                .editor-left-footer {
                    display: flex !important;
                    flex-direction: column;
                    gap: 8px;
                    padding: 10px;
                    border-top: 1px solid var(--border);
                    background: var(--bg-panel);
                    width: 100%;
                    margin: 0;
                    flex-shrink: 0;
                }
                .editor-right {
                    order: 1;
                    width: 100%;
                    min-height: 0;
                    height: 25vh; /* Altura reducida para priorizar las herramientas */
                    flex-shrink: 0;
                    overflow: hidden;
                }
                .preview-center {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .video-container {
                    width: 100%;
                    max-width: 100%;
                    height: auto;
                    aspect-ratio: 9/16;
                    max-height: 100%;
                    margin: auto;
                }
                .section-block {
                    padding: 8px;
                    margin: 0;
                    gap: 8px;
                    width: 100%;
                }
                .section-header {
                    gap: 4px;
                }
                .section-title {
                    font-size: 11px;
                }
                .drop-zone {
                    padding: 12px;
                    min-height: 120px;
                    width: 100%;
                }
                .drop-icon {
                    width: 24px;
                    height: 24px;
                }
                .drop-title {
                    font-size: 12px;
                }
                .drop-sub {
                    font-size: 9px;
                }
                .drop-btn {
                    padding: 6px 10px;
                    font-size: 10px;
                    width: 100%;
                }
                .file-info-card {
                    padding: 8px;
                    gap: 6px;
                    width: 100%;
                }
                .btn-action {
                    padding: 8px 10px;
                    font-size: 11px;
                    width: 100%;
                }
                .select-styled {
                    padding: 8px 10px;
                    font-size: 11px;
                    width: 100%;
                }
                .range-styled {
                    width: 100%;
                }
                .styles-grid {
                    grid-template-columns: 1fr 1fr;
                    gap: 6px;
                    width: 100%;
                }
                .chip {
                    padding: 4px 6px;
                    font-size: 9px;
                }
                .align-group {
                    gap: 6px;
                    display: flex;
                }
                .align-btn {
                    width: 32px;
                    height: 32px;
                }
                .ai-clips-carousel {
                    gap: 6px;
                    overflow-x: auto;
                }
                .clip-card {
                    width: 60px;
                    height: auto;
                    flex-shrink: 0;
                }
                .status-bar {
                    padding: 6px 8px;
                    font-size: 11px;
                }
                .download-btn {
                    width: 100%;
                }
            }

            @media (max-width: 480px) {
                html, body {
                    overflow-x: hidden !important;
                    width: 100vw;
                }
                * {
                    box-sizing: border-box;
                }
                .editor-wrapper {
                    height: calc(100vh - 48px);
                    height: calc(100dvh - 48px);
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    width: 100vw;
                    overflow-y: auto;
                }
                .navbar {
                    height: 48px !important;
                    padding: 0 10px !important;
                    width: 100vw;
                }
                .navbar-brand {
                    font-size: 14px !important;
                    gap: 4px;
                }
                .editor-layout {
                    grid-template-columns: 1fr;
                    grid-template-rows: auto auto auto;
                    width: 100vw;
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    height: 100%;
                    overflow: hidden;
                }
                .tab-bar {
                    height: 44px;
                    display: flex;
                    overflow-x: scroll;
                    overflow-y: hidden;
                    background: #050710;
                    width: 100%;
                    scrollbar-width: none;
                }
                .tab-bar::-webkit-scrollbar { display: none; }
                .editor-left {
                    order: 2;
                    flex: 1;
                    width: 100%;
                    max-height: none;
                    border-right: none;
                    border-top: 1px solid var(--border);
                    min-height: 0;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    padding: 0;
                    margin: 0;
                }
                .editor-left-content {
                    flex: 1;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    overflow-x: hidden;
                    background: var(--bg-panel);
                    display: flex !important;
                    flex-direction: column;
                    width: 100%;
                }
                .editor-left-footer {
                    display: flex !important;
                    flex-direction: column;
                    gap: 6px;
                    padding: 8px;
                    border-top: 1px solid var(--border);
                    background: var(--bg-panel);
                    width: 100%;
                    margin: 0;
                    flex-shrink: 0;
                }
                .tab-content {
                    display: none !important;
                }
                .tab-content.active {
                    display: grid !important;
                    gap: 6px;
                    padding: 8px;
                    align-content: start;
                    grid-template-columns: 1fr;
                    width: 100%;
                }
                .editor-right {
                    order: 1;
                    width: 100%;
                    min-height: 0;
                    height: 20vh; /* Altura mínima para maximizar el panel de opciones */
                    flex-shrink: 0;
                    overflow: hidden;
                }
                .preview-center {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .tab-btn {
                    min-width: 70px;
                    padding: 4px 6px;
                    font-size: 9px;
                }
                .video-container {
                    width: 100%;
                    max-width: 100%;
                    height: auto;
                    aspect-ratio: 9/16;
                    max-height: 100%;
                    margin: auto;
                }
                .section-block {
                    padding: 6px 8px;
                    gap: 6px;
                    width: 100%;
                }
                .section-header {
                    gap: 3px;
                }
                .section-title {
                    font-size: 10px;
                }
                .section-badge {
                    font-size: 8px;
                    padding: 2px 4px;
                }
                .section-desc {
                    font-size: 10px;
                    line-height: 1.3;
                }
                .drop-zone {
                    padding: 8px;
                    min-height: 100px;
                    width: 100%;
                }
                .drop-icon {
                    width: 20px;
                    height: 20px;
                }
                .drop-title {
                    font-size: 11px;
                }
                .drop-sub {
                    font-size: 8px;
                }
                .drop-btn {
                    padding: 6px 8px;
                    font-size: 9px;
                    width: 100%;
                }
                .file-info-card {
                    padding: 6px;
                    gap: 6px;
                    font-size: 10px;
                    width: 100%;
                }
                .file-info-icon {
                    font-size: 18px;
                }
                .btn-action {
                    padding: 8px 10px;
                    font-size: 10px;
                    width: 100%;
                }
                .select-styled {
                    padding: 7px 8px;
                    font-size: 10px;
                    width: 100%;
                }
                .primary-action {
                    flex: 1;
                }
                .ghost-action {
                    flex: 1;
                }
                .range-styled {
                    width: 100%;
                    height: 4px;
                }
                .styles-grid {
                    grid-template-columns: 1fr;
                    gap: 6px;
                    width: 100%;
                }
                .chip {
                    padding: 3px 6px;
                    font-size: 9px;
                }
                .align-group {
                    gap: 4px;
                    display: flex;
                }
                .align-btn {
                    width: 28px;
                    height: 28px;
                    padding: 2px;
                }
                .ai-clips-carousel {
                    gap: 4px;
                }
                .clip-card {
                    width: 50px;
                }
                .status-bar {
                    padding: 4px 6px;
                    font-size: 10px;
                }
                .status-dot {
                    width: 6px;
                    height: 6px;
                }
                .footer-info {
                    font-size: 9px;
                }
                .download-btn {
                    width: 100%;
                    padding: 10px 8px;
                }
            }

            /* ─── PREVIEW ─── */
            .preview-topbar {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 20px;
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.4),
                    transparent
                );
                z-index: 20;
            }
            .preview-label {
                display: flex;
                align-items: center;
                gap: 7px;
                font-size: 12px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.6);
                letter-spacing: 0.5px;
            }
            .preview-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--accent-a);
                box-shadow: 0 0 8px var(--accent-a);
                animation: statusPulse 2s ease infinite;
            }
            .preview-badge {
                font-size: 10px;
                font-weight: 700;
                padding: 3px 10px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.07);
                color: var(--muted2);
                letter-spacing: 0.5px;
                text-transform: uppercase;
            }
            .preview-center {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
            }
            .preview-placeholder {
                position: absolute;
                inset: 0;
                z-index: 15;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 12px;
                text-align: center;
                padding: 40px;
                background: radial-gradient(
                    ellipse 80% 60% at 50% 30%,
                    rgba(110, 168, 255, 0.03) 0%,
                    transparent 70%
                );
            }
            .placeholder-icon {
                width: 90px;
                height: 90px;
                border-radius: 22px;
                background: linear-gradient(
                    135deg,
                    rgba(122, 240, 198, 0.06),
                    rgba(110, 168, 255, 0.06)
                );
                border: 1px solid rgba(122, 240, 198, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 8px;
            }
            .placeholder-title {
                font-size: 18px;
                font-weight: 700;
                color: rgba(255, 255, 255, 0.7);
            }
            .placeholder-sub {
                font-size: 13px;
                color: var(--muted);
            }
            .placeholder-sub strong {
                color: var(--accent-a);
            }
            .video-container {
                position: relative;
                width: 320px;
                height: 568px;
                overflow: hidden;
                border-radius: 16px;
                background: #000;
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.07),
                    0 40px 80px rgba(0, 0, 0, 0.7),
                    0 0 60px rgba(122, 240, 198, 0.04);
                transform: translateZ(0);
            }
            .video-container video {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                position: relative;
                z-index: 1;
            }
            .overlay-top,
            .overlay-bottom {
                position: absolute;
                left: 0;
                right: 0;
                height: 18%;
                z-index: 3;
                pointer-events: none;
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.55),
                    transparent
                );
            }
            .overlay-top {
                top: 0;
            }
            .overlay-bottom {
                bottom: 0;
                transform: rotate(180deg);
            }
            .subtitles {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                z-index: 6;
                width: 92%;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: auto;
                flex-direction: column;
                gap: 8px;
                bottom: 36px;
                touch-action: none;
            }
            .subtitle {
                display: inline-block;
                padding: 8px 14px;
                border-radius: 12px;
                max-width: 100%;
                text-align: center;
                font-weight: 800;
                font-size: 20px;
                color: var(--white);
                background: rgba(0, 0, 0, 0.55);
                transition: all 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
                opacity: 0;
                transform: translateY(12px) scale(0.98);
                will-change: transform, opacity;
                line-height: 1.1;
                letter-spacing: 0.2px;
                cursor: grab;
                -webkit-user-select: none;
                user-select: none;
            }
            .subtitle:active {
                cursor: grabbing;
            }
            .subtitle.show {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            .subtitle.no-bg {
                background: transparent;
                padding: 0;
                border-radius: 0;
            }
            .subtitle .word {
                display: inline-block;
                padding: 0 4px;
                transition: all 220ms;
            }
            .subtitle .word.stroke {
                -webkit-text-stroke: 2px rgba(0, 0, 0, 0.6);
                text-shadow: none;
            }
            .subtitle .word.highlight-yellow {
                background: linear-gradient(90deg, #fff0a8, #fff0a8);
                color: #111;
                padding: 0 6px;
                border-radius: 4px;
            }
            .subtitle .word.emph {
                color: #7cfc9a;
                font-weight: 900;
                transform: scale(1.02);
                text-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
            }
            .subtitle .word.highlight {
                color: #60a5fa;
                font-weight: 800;
            }
            .subtitle .word.negative {
                color: #ff6b6b;
                font-weight: 800;
            }
            .subtitle .word.underline {
                border-bottom: 2px solid rgba(255, 255, 255, 0.12);
                padding-bottom: 2px;
            }
            .caret {
                display: inline-block;
                width: 2px;
                height: 1.05em;
                background: var(--white);
                margin-left: 6px;
                vertical-align: middle;
                animation: blink 1s steps(2) infinite;
            }
            @keyframes blink {
                50% {
                    opacity: 0;
                }
            }
            .controls-bar {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
                z-index: 7;
                width: 92%;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 12px;
                border-radius: 999px;
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.3)
                );
                backdrop-filter: blur(8px);
            }
            .btn {
                width: 36px;
                height: 36px;
                border-radius: 999px;
                border: 0;
                background: rgba(255, 255, 255, 0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--white);
                cursor: pointer;
                font-size: 12px;
                transition: background 0.2s;
            }
            .btn:hover {
                background: rgba(255, 255, 255, 0.14);
            }
            .btn.play {
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                font-weight: 800;
            }
            .progress {
                flex: 1;
                height: 4px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.1);
                overflow: hidden;
                position: relative;
                cursor: pointer;
            }
            .progress .bar {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 0;
                background: linear-gradient(
                    90deg,
                    var(--accent-b),
                    var(--accent-a)
                );
                transition: width 120ms linear;
            }
            .time {
                font-size: 11px;
                color: var(--muted2);
                min-width: 56px;
                text-align: right;
                font-variant-numeric: tabular-nums;
            }

            /* ─── STYLES GRID ─── */
            .styles-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                max-height: 300px;
                overflow-y: auto;
                padding: 2px 0;
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
            }
            .styles-grid::-webkit-scrollbar {
                width: 4px;
            }
            .styles-grid::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
            }
            .style-btn {
                position: relative;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid var(--border);
                padding: 0;
                border-radius: 12px;
                color: var(--white);
                cursor: pointer;
                font-weight: 700;
                overflow: hidden;
                transition:
                    border-color 0.2s,
                    transform 0.15s,
                    box-shadow 0.2s;
                min-height: 72px;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
            .style-btn:hover {
                border-color: rgba(122, 240, 198, 0.3);
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
            }
            .style-btn.active {
                border-color: var(--accent-a) !important;
                box-shadow:
                    0 0 0 2px rgba(122, 240, 198, 0.2),
                    0 6px 20px rgba(0, 0, 0, 0.4);
            }
            .style-btn .style-btn-label {
                font-size: 10px;
                font-weight: 600;
                color: var(--muted);
                letter-spacing: 0.5px;
                text-transform: uppercase;
                padding: 6px 10px 4px;
                text-align: left;
                font-family: Inter, system-ui;
                line-height: 1;
            }
            .style-btn.active .style-btn-label {
                color: var(--accent-a);
            }
            .style-btn .style-btn-preview {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 6px 10px 10px;
                min-height: 44px;
            }
            .style-btn .style-btn-preview span {
                display: inline-block;
                max-width: 100%;
                text-align: center;
                line-height: 1.15;
                pointer-events: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .style-btn.active-check::after {
                content: "✓";
                position: absolute;
                top: 5px;
                right: 8px;
                font-size: 10px;
                color: var(--accent-a);
                font-weight: 900;
            }
            .special-tpl .style-btn-label {
                color: var(--accent-b);
            }
            .special-tpl.active .style-btn-label {
                color: var(--accent-a);
            }

            /* ─── AI CLIPS ─── */
            .ai-clips-section {
                background: var(--bg-panel);
                border-top: 1px solid var(--border);
                padding: 16px 24px 20px;
                flex-shrink: 0;
            }
            .ai-clips-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 14px;
                gap: 10px;
            }
            .ai-clips-title {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                font-weight: 700;
                color: var(--white);
            }
            .ai-clips-meta {
                font-size: 12px;
                color: var(--muted);
            }
            .ai-clips-carousel {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                padding-bottom: 8px;
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
            }
            .ai-clips-carousel::-webkit-scrollbar {
                height: 4px;
            }
            .ai-clips-carousel::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
            }
            .clip-card {
                flex-shrink: 0;
                width: 100px;
                border-radius: 10px;
                overflow: hidden;
                background: var(--bg-card);
                border: 1px solid var(--border);
                cursor: pointer;
                transition: all 0.2s;
                position: relative;
            }
            .clip-card:hover {
                border-color: rgba(122, 240, 198, 0.4);
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            }
            .clip-card.selected {
                border-color: var(--accent-a);
                box-shadow: 0 0 0 2px rgba(122, 240, 198, 0.2);
            }
            .clip-thumb-placeholder {
                width: 100%;
                aspect-ratio: 9/16;
                background: linear-gradient(135deg, #0d1117, #111827);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
            }
            .clip-info {
                padding: 6px 8px;
            }
            .clip-time {
                font-size: 10px;
                font-weight: 700;
                color: var(--accent-a);
                font-variant-numeric: tabular-nums;
            }
            .clip-label {
                font-size: 9px;
                color: var(--muted);
                margin-top: 2px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .clip-badge-ai {
                position: absolute;
                top: 5px;
                right: 5px;
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                font-size: 8px;
                font-weight: 900;
                padding: 2px 5px;
                border-radius: 4px;
                letter-spacing: 0.3px;
            }

            /* ─── OVERLAY IMG ─── */
            .overlay-img-wrap {
                position: absolute;
                z-index: 8;
                cursor: move;
                user-select: none;
                touch-action: none;
            }
            .overlay-img-wrap img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                pointer-events: none;
                border-radius: 4px;
            }
            .overlay-img-wrap .resize-handle {
                position: absolute;
                width: 14px;
                height: 14px;
                background: var(--accent-a);
                border: 2px solid #042028;
                border-radius: 50%;
                z-index: 9;
            }
            .overlay-img-wrap .resize-handle.br {
                bottom: -7px;
                right: -7px;
                cursor: nwse-resize;
            }
            .overlay-img-wrap .resize-handle.bl {
                bottom: -7px;
                left: -7px;
                cursor: nesw-resize;
            }
            .overlay-img-wrap .resize-handle.tr {
                top: -7px;
                right: -7px;
                cursor: nesw-resize;
            }
            .overlay-img-wrap .resize-handle.tl {
                top: -7px;
                left: -7px;
                cursor: nwse-resize;
            }

            /* ─── NAVBAR ─── */
            .navbar {
                position: sticky;
                top: 0;
                z-index: 100;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 36px;
                height: 64px;
                background: rgba(5, 6, 23, 0.92);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border-bottom: 1px solid var(--border);
                box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
            }
            .navbar-brand {
                font-family: "Space Grotesk", Inter;
                font-weight: 700;
                font-size: 21px;
                color: var(--accent-a);
                text-decoration: none;
                letter-spacing: 1px;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .navbar-brand .brand-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: linear-gradient(
                    135deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                display: inline-block;
                box-shadow: 0 0 8px var(--accent-a);
            }
            .navbar-nav {
                list-style: none;
                display: flex;
                align-items: center;
                gap: 4px;
            }
            .nav-item a {
                color: var(--muted);
                text-decoration: none;
                font-size: 13.5px;
                font-weight: 500;
                padding: 6px 14px;
                border-radius: 999px;
                position: relative;
                transition:
                    color 0.2s,
                    background 0.2s;
                display: block;
            }
            .nav-item a:hover {
                color: var(--white);
                background: rgba(255, 255, 255, 0.06);
            }
            .nav-item a.active {
                color: var(--accent-a);
                background: rgba(122, 240, 198, 0.08);
            }
            .navbar-right {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .navbar-action-btn {
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                border: 0;
                padding: 9px 20px;
                border-radius: 999px;
                font-weight: 800;
                font-size: 13px;
                cursor: pointer;
                box-shadow: 0 4px 20px rgba(122, 240, 198, 0.22);
                letter-spacing: 0.4px;
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
                white-space: nowrap;
            }
            .navbar-action-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 28px rgba(122, 240, 198, 0.35);
            }
            .navbar-hamburger {
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid var(--border);
                border-radius: 10px;
                cursor: pointer;
                padding: 0;
            }
            .navbar-hamburger span {
                display: block;
                width: 20px;
                height: 2px;
                background: var(--white);
                border-radius: 2px;
                transition:
                    transform 0.3s,
                    opacity 0.3s;
            }
            .navbar-hamburger.open span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }
            .navbar-hamburger.open span:nth-child(2) {
                opacity: 0;
            }
            .navbar-hamburger.open span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }
            .navbar-mobile-menu {
                display: none;
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                background: rgba(5, 6, 23, 0.97);
                backdrop-filter: blur(20px);
                border-bottom: 1px solid var(--border);
                padding: 16px 24px 24px;
                z-index: 99;
                flex-direction: column;
                gap: 4px;
                animation: slideDown 0.25s ease;
            }
            .navbar-mobile-menu.open {
                display: flex;
            }
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-8px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .navbar-mobile-menu .nav-item a {
                padding: 12px 16px;
                border-radius: 10px;
                font-size: 15px;
            }
            .navbar-mobile-menu .navbar-action-btn {
                margin-top: 8px;
                text-align: center;
                width: 100%;
                padding: 12px;
            }

            /* ─── MISC ─── */
            .ghost-file-label {
                background: transparent;
                border: 1px solid var(--border);
                padding: 8px 12px;
                border-radius: 10px;
                color: var(--white);
                cursor: pointer;
                font-size: 13px;
                font-family: Inter, system-ui;
                display: flex;
                align-items: center;
                gap: 6px;
                transition: background 0.2s;
            }
            .ghost-file-label:hover {
                background: rgba(255, 255, 255, 0.06);
            }
            .small {
                font-size: 12px;
                color: var(--muted);
            }
            .row {
                display: flex;
                gap: 10px;
                align-items: center;
            }
            button.primary {
                background: linear-gradient(
                    90deg,
                    var(--accent-a),
                    var(--accent-b)
                );
                color: #042028;
                border: 0;
                padding: 10px 14px;
                border-radius: 12px;
                font-weight: 800;
                cursor: pointer;
                font-size: 13px;
                transition: all 0.2s;
            }
            button.ghost {
                background: transparent;
                border: 1px solid var(--border);
                padding: 8px 10px;
                border-radius: 10px;
                color: var(--white);
                cursor: pointer;
                font-size: 13px;
            }
            button.primary:disabled {
                opacity: 0.35;
                cursor: not-allowed;
            }
            .footer-info {
                font-size: 12px;
                color: var(--muted);
            }
            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            /* ─── SUBTITLE STYLES 1-100 ─── */
            .style-1 {
                font-family: Oswald, Inter;
                font-size: 22px;
                color: #fff;
                background: transparent;
                text-transform: uppercase;
                letter-spacing: 0.6px;
            }
            .style-2 {
                font-family: Poppins, Inter;
                font-size: 20px;
                color: #111;
                background: #fff0a8;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-3 {
                font-family: Montserrat, Inter;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                padding: 8px 12px;
                border-radius: 10px;
            }
            .style-4 {
                font-family: Rubik, Inter;
                font-size: 18px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #7c3aed);
                padding: 8px 12px;
                border-radius: 999px;
            }
            .style-5 {
                font-family:
                    Space Grotesk,
                    Inter;
                font-size: 24px;
                color: #fff;
                text-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
                font-weight: 900;
            }
            .style-6 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: #ef4444;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-7 {
                font-family: Poppins;
                font-size: 18px;
                color: #042028;
                background: #a7f3d0;
                padding: 6px 10px;
                border-radius: 999px;
            }
            .style-8 {
                font-family: Montserrat;
                font-size: 20px;
                color: #fff;
                background: rgba(255, 255, 255, 0.04);
                border-left: 4px solid #06b6d4;
                padding-left: 12px;
            }
            .style-9 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: transparent;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
            }
            .style-10 {
                font-family: Rubik;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.55);
                padding: 10px 14px;
                border-radius: 12px;
            }
            .style-11 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: #f97316;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-12 {
                font-family: Space Grotesk;
                font-size: 18px;
                color: #042028;
                background: #93c5fd;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-13 {
                font-family: Poppins;
                font-size: 22px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                border: 2px solid rgba(255, 255, 255, 0.04);
                padding: 10px 16px;
            }
            .style-14 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #60a5fa);
                padding: 8px 12px;
                border-radius: 999px;
            }
            .style-15 {
                font-family: Rubik;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.45);
                backdrop-filter: blur(6px);
                padding: 10px 14px;
            }
            .style-16 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
                transform: skewX(-2deg);
            }
            .style-17 {
                font-family: Oswald;
                font-size: 20px;
                color: #111;
                background: #fef08a;
                padding: 6px 10px;
                border-radius: 8px;
            }
            .style-18 {
                font-family: Poppins;
                font-size: 18px;
                color: #fff;
                background: rgba(255, 255, 255, 0.06);
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-19 {
                font-family: Space Grotesk;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 10px 16px;
                border-radius: 12px;
            }
            .style-20 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #7c3aed);
                padding: 6px 12px;
                border-radius: 8px;
            }
            .style-21 {
                font-family: Rubik;
                font-size: 16px;
                color: #0b1220;
                background: #efefef;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-22 {
                font-family: Inter;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                border: 1px solid rgba(255, 255, 255, 0.04);
                padding: 8px 12px;
            }
            .style-23 {
                font-family: Poppins;
                font-size: 18px;
                color: #042028;
                background: #10b981;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-24 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: linear-gradient(90deg, #ef4444, #f97316);
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-25 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: rgba(0, 0, 0, 0.5);
                padding: 6px 10px;
                border-radius: 999px;
            }
            .style-26 {
                font-family: Rubik;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 10px 18px;
                border-radius: 999px;
                letter-spacing: 0.8px;
            }
            .style-27 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: rgba(255, 255, 255, 0.04);
                padding: 8px 12px;
                border-radius: 6px;
                filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
            }
            .style-28 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: #7c3aed;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-29 {
                font-family: Poppins;
                font-size: 18px;
                color: #042028;
                background: #06b6d4;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-30 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #7c3aed);
                padding: 10px 16px;
                border-radius: 12px;
            }
            .style-31 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: #111827;
                padding: 8px 12px;
                border-radius: 6px;
                opacity: 0.95;
            }
            .style-32 {
                font-family: Rubik;
                font-size: 22px;
                color: #fff;
                background: #ef4444;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-33 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: #f97316;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-34 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 8px 12px;
                border-radius: 999px;
            }
            .style-35 {
                font-family: Poppins;
                font-size: 18px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                padding: 8px 12px;
                border-radius: 6px;
                transform: translateY(-4px);
            }
            .style-36 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: #111827;
                padding: 10px 16px;
                border-radius: 6px;
                letter-spacing: 1px;
            }
            .style-37 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #60a5fa);
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-38 {
                font-family: Rubik;
                font-size: 22px;
                color: #fff;
                background: #0ea5a4;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-39 {
                font-family: Inter;
                font-size: 18px;
                color: #042028;
                background: #7dd3fc;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-40 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: #a78bfa;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-41 {
                font-family: Poppins;
                font-size: 18px;
                color: #fff;
                background: #f472b6;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-42 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: #34d399;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-43 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: #60a5fa;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-44 {
                font-family: Rubik;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 12px 18px;
                border-radius: 12px;
                font-weight: 800;
            }
            .style-45 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: rgba(0, 0, 0, 0.55);
                padding: 8px 12px;
                border-radius: 999px;
            }
            .style-46 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: #fb7185;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-47 {
                font-family: Poppins;
                font-size: 18px;
                color: #042028;
                background: #f59e0b;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-48 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 10px 16px;
                border-radius: 6px;
            }
            .style-49 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #7c3aed);
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-50 {
                font-family: Rubik;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 12px 20px;
                border-radius: 999px;
            }
            .style-51 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: #ef4444;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-52 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-53 {
                font-family: Poppins;
                font-size: 18px;
                color: #fff;
                background: #7c3aed;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-54 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: #34d399;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-55 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: #60a5fa;
                padding: 8px 12px;
                border-radius: 999px;
            }
            .style-56 {
                font-family: Rubik;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 12px 18px;
                border-radius: 12px;
            }
            .style-57 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: #f97316;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-58 {
                font-family: Oswald;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-59 {
                font-family: Poppins;
                font-size: 18px;
                color: #fff;
                background: #ef4444;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-60 {
                font-family: Space Grotesk;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #7c3aed);
                padding: 12px 18px;
                border-radius: 999px;
            }
            .style-61 {
                font-family: Montserrat;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-62 {
                font-family: Rubik;
                font-size: 18px;
                color: #fff;
                background: #7c3aed;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-63 {
                font-family: Inter;
                font-size: 20px;
                color: #111;
                background: #fef08a;
                padding: 6px 10px;
                border-radius: 8px;
            }
            .style-64 {
                font-family: Oswald;
                font-size: 22px;
                color: #fff;
                background: rgba(0, 0, 0, 0.55);
                padding: 10px 16px;
                border-radius: 12px;
            }
            .style-65 {
                font-family: Poppins;
                font-size: 18px;
                color: #fff;
                background: #34d399;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-66 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: #a78bfa;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-67 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: #f472b6;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-68 {
                font-family: Rubik;
                font-size: 20px;
                color: #fff;
                background: #60a5fa;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-69 {
                font-family: Inter;
                font-size: 18px;
                color: #fff;
                background: #ef4444;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-70 {
                font-family: Oswald;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #60a5fa);
                padding: 12px 18px;
                border-radius: 12px;
            }
            .style-71 {
                font-family: Poppins;
                font-size: 18px;
                color: #111;
                background: #fff0a8;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-72 {
                font-family: Space Grotesk;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.5);
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-73 {
                font-family: Montserrat;
                font-size: 18px;
                color: #fff;
                background: #7dd3fc;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-74 {
                font-family: Rubik;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 8px 12px;
                border-radius: 999px;
            }
            .style-75 {
                font-family: Inter;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 12px 18px;
                border-radius: 12px;
            }
            .style-76 {
                font-family: Oswald;
                font-size: 18px;
                color: #fff;
                background: #f97316;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-77 {
                font-family: Poppins;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-78 {
                font-family: Space Grotesk;
                font-size: 18px;
                color: #fff;
                background: #ef4444;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-79 {
                font-family: Montserrat;
                font-size: 20px;
                color: #fff;
                background: #34d399;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-80 {
                font-family: Rubik;
                font-size: 18px;
                color: #fff;
                background: #7c3aed;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-81 {
                font-family: Inter;
                font-size: 22px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                padding: 12px 18px;
                border-radius: 12px;
            }
            .style-82 {
                font-family: Oswald;
                font-size: 18px;
                color: #fff;
                background: #a78bfa;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-83 {
                font-family: Poppins;
                font-size: 20px;
                color: #fff;
                background: #f472b6;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-84 {
                font-family: Space Grotesk;
                font-size: 18px;
                color: #fff;
                background: #60a5fa;
                padding: 6px 10px;
                border-radius: 6px;
            }
            .style-85 {
                font-family: Montserrat;
                font-size: 20px;
                color: #fff;
                background: #111827;
                padding: 10px 16px;
                border-radius: 8px;
            }
            .style-86 {
                font-family: Rubik;
                font-size: 18px;
                color: #fff;
                background: #fb7185;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-87 {
                font-family: Inter;
                font-size: 20px;
                color: #fff;
                background: #f59e0b;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-88 {
                font-family: Oswald;
                font-size: 18px;
                color: #fff;
                background: #06b6d4;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-89 {
                font-family: Poppins;
                font-size: 20px;
                color: #fff;
                background: #7c3aed;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-90 {
                font-family: Space Grotesk;
                font-size: 18px;
                color: #fff;
                background: #34d399;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-91 {
                font-family: Montserrat;
                font-size: 22px;
                color: #fff;
                background: #111827;
                padding: 12px 18px;
                border-radius: 12px;
            }
            .style-92 {
                font-family: Rubik;
                font-size: 18px;
                color: #fff;
                background: #ef4444;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-93 {
                font-family: Inter;
                font-size: 20px;
                color: #fff;
                background: #06b6d4;
                padding: 8px 12px;
                border-radius: 8px;
            }
            .style-94 {
                font-family: Oswald;
                font-size: 18px;
                color: #fff;
                background: #f97316;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-95 {
                font-family: Poppins;
                font-size: 20px;
                color: #fff;
                background: #a78bfa;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-96 {
                font-family: Space Grotesk;
                font-size: 18px;
                color: #fff;
                background: #60a5fa;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-97 {
                font-family: Montserrat;
                font-size: 20px;
                color: #fff;
                background: #34d399;
                padding: 10px 14px;
                border-radius: 8px;
            }
            .style-98 {
                font-family: Rubik;
                font-size: 18px;
                color: #fff;
                background: #7c3aed;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .style-99 {
                font-family: Inter;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(90deg, #06b6d4, #7c3aed);
                padding: 12px 18px;
                border-radius: 999px;
            }
            .style-100 {
                font-family: Poppins;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                padding: 10px 14px;
                border-radius: 12px;
            }

            /* ─── WORD KEYFRAMES ─── */
            @keyframes wordFloat {
                0% {
                    transform: translateY(10px);
                    opacity: 0;
                }
                60% {
                    transform: translateY(-3px);
                    opacity: 1;
                }
                100% {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
            @keyframes wordBounce {
                0% {
                    transform: scale(0) translateY(8px);
                    opacity: 0;
                }
                60% {
                    transform: scale(1.2) translateY(-4px);
                    opacity: 1;
                }
                80% {
                    transform: scale(0.92) translateY(1px);
                }
                100% {
                    transform: scale(1) translateY(0);
                    opacity: 1;
                }
            }
            @keyframes wordCinematic {
                0% {
                    transform: translateX(-20px) skewX(6deg);
                    opacity: 0;
                    filter: blur(4px);
                }
                100% {
                    transform: translateX(0) skewX(0);
                    opacity: 1;
                    filter: blur(0);
                }
            }
            @keyframes wordGlitch {
                0% {
                    transform: translateX(0);
                    opacity: 0;
                }
                20% {
                    transform: translateX(-4px);
                    opacity: 1;
                }
                40% {
                    transform: translateX(4px);
                }
                60% {
                    transform: translateX(-2px);
                }
                80% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @keyframes wordNeon {
                0% {
                    opacity: 0;
                    text-shadow: 0 0 0 transparent;
                }
                50% {
                    opacity: 1;
                    text-shadow:
                        0 0 8px currentColor,
                        0 0 20px currentColor;
                }
                100% {
                    opacity: 1;
                    text-shadow: 0 0 4px currentColor;
                }
            }
            @keyframes wordWave {
                0% {
                    transform: translateY(12px) rotate(-4deg);
                    opacity: 0;
                }
                70% {
                    transform: translateY(-2px) rotate(1deg);
                    opacity: 1;
                }
                100% {
                    transform: translateY(0) rotate(0);
                    opacity: 1;
                }
            }
            @keyframes wordBlurIn {
                0% {
                    filter: blur(10px);
                    opacity: 0;
                    transform: scale(1.08);
                }
                100% {
                    filter: blur(0);
                    opacity: 1;
                    transform: scale(1);
                }
            }
            @keyframes wordFlip {
                0% {
                    transform: rotateX(90deg) translateY(8px);
                    opacity: 0;
                }
                60% {
                    transform: rotateX(-10deg);
                    opacity: 1;
                }
                100% {
                    transform: rotateX(0);
                    opacity: 1;
                }
            }
            @keyframes wordSwing {
                0% {
                    transform: rotate(-15deg) translateY(-8px);
                    opacity: 0;
                    transform-origin: top center;
                }
                60% {
                    transform: rotate(6deg);
                    opacity: 1;
                    transform-origin: top center;
                }
                80% {
                    transform: rotate(-3deg);
                    transform-origin: top center;
                }
                100% {
                    transform: rotate(0);
                    opacity: 1;
                    transform-origin: top center;
                }
            }
            @keyframes wordSlideLeft {
                0% {
                    transform: translateX(30px);
                    opacity: 0;
                }
                100% {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @keyframes wordZoomBlur {
                0% {
                    transform: scale(1.6);
                    filter: blur(8px);
                    opacity: 0;
                }
                100% {
                    transform: scale(1);
                    filter: blur(0);
                    opacity: 1;
                }
            }

            @media (max-width: 780px) {
                .navbar {
                    padding: 0 20px;
                }
                .navbar-nav,
                .navbar-right {
                    display: none;
                }
                .navbar-hamburger {
                    display: flex;
                }
                .editor-layout {
                    grid-template-columns: 1fr;
                }
                .editor-right {
                    min-height: 520px;
                }
            }

            /* ─── FOOTER EPIC ─── */
            .footer-epic {
                background: #050710;
                border-top: 1px solid var(--border);
                margin-top: 60px;
                padding: 40px 20px;
                text-align: center;
                color: var(--muted);
                font-size: 14px;
                flex-shrink: 0;
            }
            .footer-epic strong {
                color: var(--accent-a);
                font-family: 'Space Grotesk', sans-serif;
            }
            .footer-epic .creator {
                margin-top: 8px;
                display: block;
                font-size: 11px;
                color: var(--muted2);
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            /* ─── AUTH SCREEN ─── */
            #login-screen {
                position: fixed;
                inset: 0;
                background: radial-gradient(circle at center, #0a0c25 0%, #050617 100%);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 10000;
                text-align: center;
                padding: 20px;
                overflow: hidden;
            }
            /* Elementos decorativos animados de fondo */
            #login-screen::before, #login-screen::after {
                content: '';
                position: absolute;
                width: 500px;
                height: 500px;
                border-radius: 50%;
                filter: blur(120px);
                opacity: 0.12;
                z-index: -1;
                animation: floatGlow 20s infinite alternate ease-in-out;
            }
            #login-screen::before {
                background: var(--accent-a);
                top: -150px;
                left: -150px;
            }
            #login-screen::after {
                background: var(--accent-b);
                bottom: -150px;
                right: -150px;
                animation-delay: -10s;
            }
            @keyframes floatGlow {
                0% { transform: translate(0, 0) scale(1); }
                100% { transform: translate(150px, 150px) scale(1.3); }
            }

            .login-card {
                background: rgba(13, 17, 23, 0.7);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border: 1px solid rgba(255, 255, 255, 0.08);
                padding: 48px 40px;
                border-radius: 32px;
                box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
                max-width: 400px;
                width: 100%;
                animation: cardEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            }
            @keyframes cardEntrance {
                from { opacity: 0; transform: translateY(40px) scale(0.92); }
                to { opacity: 1; transform: translateY(0) scale(1); }
            }

            /* Animación de error (sacudida) */
            @keyframes shakeError {
                0%, 100% { transform: translateX(0); }
                20%, 60% { transform: translateX(-6px); }
                40%, 80% { transform: translateX(6px); }
            }
            .shake-active { animation: shakeError 0.4s cubic-bezier(.36,.07,.19,.97) both; }

            .login-error-box {
                background: rgba(255, 77, 77, 0.1);
                border: 1px solid rgba(255, 77, 77, 0.25);
                color: #ff6b6b;
                padding: 12px;
                border-radius: 12px;
                font-size: 13px;
                margin-bottom: 20px;
                display: none;
                backdrop-filter: blur(4px);
                animation: cardEntrance 0.3s ease;
            }

            .login-logo {
                font-family: "Space Grotesk", sans-serif;
                font-size: 38px;
                font-weight: 800;
                color: var(--accent-a);
                margin-bottom: 12px;
                display: block;
                background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                filter: drop-shadow(0 0 12px rgba(122, 240, 198, 0.2));
                letter-spacing: -1px;
            }

            .login-btn {
                margin-top: 30px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                background: linear-gradient(90deg, var(--accent-a), var(--accent-b)) !important;
                color: #042028 !important;
                border: none;
                padding: 14px;
                border-radius: 14px;
                font-weight: 800;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 15px rgba(122, 240, 198, 0.2);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                font-size: 14px;
            }
            .login-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(122, 240, 198, 0.4);
                filter: brightness(1.05);
            }
            .login-btn:active { transform: scale(0.97); }

            .auth-hidden { display: none !important; }

            .auth-input {
                width: 100%;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 14px;
                color: var(--white);
                padding: 14px 18px;
                font-size: 15px;
                outline: none;
                font-family: Inter, system-ui;
                transition: all 0.2s;
            }
            .auth-input:focus {
                background: rgba(255, 255, 255, 0.05);
                border-color: var(--accent-a);
                box-shadow: 0 0 0 4px rgba(122, 240, 198, 0.1);
            }