now basically grab buttons for tabs and search/run/save from this code and replace them in original:

"""

<!-- CodeMirror -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/theme/dracula.min.css" rel="stylesheet">

<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #282a36;
        color: #f8f8f2;
    }

    .tab-container {
        display: flex;
        justify-content: flex-start;
        padding: 10px;
        gap: 5px;
        background-color: #21252b;
        border-bottom: 2px solid #61afef;
    }

    .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background-color: #21252b;
        border: 2px solid green;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
    }

    .tab:hover {
        background-color: rgba(0, 255, 0, 0.2);
    }

    .tab svg {
        width: 20px;
        height: 20px;
        fill: green;
    }

    .tab.active {
        background-color: rgba(0, 255, 0, 0.4);
    }

    .editor-container {
        flex: 1;
        position: relative;
    }

    .CodeMirror {
        height: calc(100% - 60px);
        font-family: 'Fira Code', monospace;
        font-size: 14px;
    }

    .buttons-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #21252b;
        padding: 10px;
    }

    .search-container {
        display: flex;
        flex: 1;
        align-items: center;
    }

    .search-container input {
        flex: 1;
        padding: 8px;
        border: 2px solid #61afef;
        border-radius: 4px;
        background-color: #1e1e1e;
        color: #f8f8f2;
        margin-right: 10px;
    }

    .search-container input:focus {
        outline: none;
        border-color: #61afef;
    }

    .action-buttons {
        display: flex;
        gap: 5px;
    }

    .icon-button {
        width: 36px;
        height: 36px;
        background-color: #21252b;
        border: 2px solid green;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
    }

    .icon-button:hover {
        background-color: rgba(0, 255, 0, 0.2);
    }

    .icon-button svg {
        width: 20px;
        height: 20px;
        fill: green;
    }
</style>

<!-- Editor -->
<div class="editor-container">
    <textarea id="editor"></textarea>
</div>

<!-- Footer Buttons -->
<div class="buttons-container">
    <div class="search-container">
        <input id="searchField" type="text" placeholder="Search or L#: Line Number" />
        <div class="action-buttons">
            <button id="searchButton" class="icon-button" title="Search">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M9.5 3A6.5 6.5 0 1 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0-2A8.5 8.5 0 0 0 1 9.5a8.5 8.5 0 0 0 14.3 6.5l4.9 4.9a1 1 0 0 0 1.4-1.5l-4.9-4.9A8.5 8.5 0 0 0 9.5 1z" />
                </svg>
            </button>
            <button id="runButton" class="icon-button" title="Run">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                </svg>
            </button>
            <button id="saveButton" class="icon-button" title="Save">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M5 5v14h14V5z" />
                </svg>
            </button>
        </div>
    </div>
</div>

<!-- CodeMirror Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.js"></script>
<script>
    /* Tabs Active Toggle */
    const tabs = document.querySelectorAll('.tab');
    tabs.forEach((tab) => {
        tab.addEventListener('click', () => {
            tabs.forEach((t) => t.classList.remove('active'));
            tab.classList.add('active');
        });
    });
</script>


""".

original proprietary copyrighted code:

"""

<!-- CodeMirror Styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/theme/dracula.min.css" rel="stylesheet">

<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #2b2c2b;
        color: #ffffff;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .tab-container {
        background-color: #21252b;
        padding: 5px;
        display: flex;
        justify-content: center;
    }

    .tab-container button {
        padding: 10px 20px;
        background-color: #44475a;
        border: 1px solid #282a36;
        color: #ffffff;
        border-radius: 4px 4px 0 0;
        cursor: pointer;
        margin: 0 5px;
    }

    .tab-container button.active {
        background-color: #61afef;
        border-bottom: 2px solid #282c34;
        color: #ffffff;
    }

    .editor-container {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .CodeMirror {
        height: 100%;
        font-size: 14px;
        background-color: #282a36;
        font-family: 'Fira Code', monospace;
    }

    .CodeMirror-gutters {
        background-color: #21252b;
        color: #636d83;
    }

    .highlight-tag {
        background-color: rgba(255, 121, 198, 0.5) !important; /* Bright Highlight */
        border-radius: 2px;
    }

    .line-number-highlight {
        background-color: #ff79c6 !important;
        color: #2b2c2b !important;
        border-radius: 3px;
    }

    .buttons-container {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #21252b;
    }

    button {
        padding: 8px 16px;
        background-color: #61afef;
        border: none;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        cursor: pointer;
    }

    button:hover {
        background-color: #528bff;
    }

    .search-container input {
        padding: 8px;
        border: 2px solid #528bff;
        border-radius: 4px;
        background-color: #1e1e1e;
        color: white;
    }

    .search-container input:focus {
        outline: none;
        border-color: #61afef;
    }

    .search-blink-error {
        animation: blink-error 0.5s linear 2;
    }

    @keyframes blink-error {
        0%, 100% {
            border-color: #ff5555;
        }

        50% {
            border-color: #ffffff;
        }
    }
</style>

HTML CSS JavaScript
<div class="editor-container">
    <textarea id="editor"></textarea>
</div>

<div class="buttons-container">
    <div class="search-container">
        <input id="searchField" type="text" placeholder="Search or L#: Line Number">
        <button id="searchButton">Search</button>
    </div>
    <div>
        <button id="runButton">Run</button>
        <button id="saveButton">Save</button>
    </div>
</div>

<!-- CodeMirror Core Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.js"></script>

<!-- Syntax Highlighting Modes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/javascript/javascript.min.js"></script>

<!-- Addons for Advanced Features -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/closetag.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/closebrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/selection/active-line.min.js"></script>

<!-- Addon for Matching Tags -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/fold/xml-fold.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/matchtags.min.js"></script>

<!-- Addon for Searching -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/search/search.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/search/searchcursor.min.js"></script>

<script>
    const files = {
        html: "<!DOCTYPE html>\n<html>\n<head>\n<title>Document</title>\n</head>\n<body>\n\n</body>\n</html>",
        css: "body { background-color: #fff; }",
        js: "console.log('Hello, World!');"
    };
    let currentLanguage = "html";

    const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
        lineNumbers: true,
        matchBrackets: true,
        autoCloseBrackets: true,
        autoCloseTags: true,
        matchTags: { bothTags: true },
        styleActiveLine: true,
        theme: "dracula",
        mode: "htmlmixed",
    });

    editor.setValue(files[currentLanguage]);

    // Handle Tab Switching
    document.querySelectorAll(".tab").forEach(tab => {
        tab.addEventListener("click", () => {
            files[currentLanguage] = editor.getValue();
            currentLanguage = tab.dataset.lang;
            editor.setOption("mode", currentLanguage === "html" ? "htmlmixed" : currentLanguage);
            editor.setValue(files[currentLanguage]);
            document.querySelectorAll(".tab").forEach(item => item.classList.remove("active"));
            tab.classList.add("active");
        });
    });

    // Highlight Matching Tags Logic
    function isInsideTagScope(line, caretCh) {
        const trimmedLine = line.trim();
        const positionInsideTags = caretCh >= line.indexOf("<") && caretCh <= line.lastIndexOf(">");
        const isSelfClosing = trimmedLine.endsWith("/>") || trimmedLine.indexOf("<") > -1;
        return positionInsideTags && isSelfClosing;
    }

    function detectTag(line, caretCh) {
        const tagRegex = /<([a-zA-Z0-9-_]+)\b[^>]*\/?>|<\/([a-zA-Z0-9-_]+)>/g;
        let match;
        while ((match = tagRegex.exec(line))) {
            const [fullMatch, tagName] = match;
            if (match.index <= caretCh && caretCh <= match.index + fullMatch.length) {
                return { tagName, isClosing: fullMatch.startsWith("</") };
            }
        }
        return null;
    }

    function clearHighlights(editor) {
        editor.getAllMarks().forEach((mark) => mark.clear());
    }

    function findMatchingTags(editor, startPos, tagName, isClosing) {
        let stack = 1;
        const direction = isClosing ? -1 : 1;
        const tagRegex = new RegExp(`<(${tagName})[^>]*>|<\/(${tagName})>`, "gi");
        const totalLines = editor.lineCount();

        for (let lineIdx = startPos.line; lineIdx >= 0 && lineIdx < totalLines; lineIdx += direction) {
            const text = editor.getLine(lineIdx);

            let match;
            while ((match = tagRegex.exec(text))) {
                const isCurrentClosing = !!match[2];

                if ((direction === 1 && lineIdx === startPos.line && match.index <= startPos.ch) ||
                    (direction === -1 && lineIdx === startPos.line && tagRegex.lastIndex >= startPos.ch)) {
                    continue;
                }

                if (isCurrentClosing && !isClosing) {
                    stack--;
                } else if (!isCurrentClosing && isClosing) {
                    stack++;
                }

                if (stack === 0) {
                    return { line: lineIdx, ch: match.index };
                }
            }
        }
        return null;
    }

    function highlightMatchingTags(editor, cursor) {
        clearHighlights(editor);

        const line = editor.getLine(cursor.line);
        if (!isInsideTagScope(line, cursor.ch)) return;

        const tag = detectTag(line, cursor.ch);
        if (!tag) return;

        // If self-closing, only highlight itself
        const isSelfClosing = line.trim().endsWith("/>");
        if (isSelfClosing) {
            editor.markText({ line: cursor.line, ch: line.indexOf("<") }, { line: cursor.line, ch: line.lastIndexOf(">") + 1 }, { className: "highlight-tag" });
            return;
        }

        const matchingPos = findMatchingTags(editor, cursor, tag.tagName, tag.isClosing);
        if (matchingPos) {
            editor.markText(
                { line: cursor.line, ch: line.indexOf("<") },
                { line: cursor.line, ch: line.lastIndexOf(">") + 1 },
                { className: "highlight-tag" }
            );

            editor.markText(
                { line: matchingPos.line, ch: editor.getLine(matchingPos.line).indexOf("<") },
                { line: matchingPos.line, ch: editor.getLine(matchingPos.line).lastIndexOf(">") + 1 },
                { className: "highlight-tag" }
            );
        }
    }

    editor.on("cursorActivity", () => {
        const cursor = editor.getCursor();
        highlightMatchingTags(editor, cursor);
    });

    // Search
    document.getElementById("searchField").addEventListener("keydown", e => {
        if (e.key === "Enter") performSearch();
    });

    document.getElementById("searchButton").addEventListener("click", performSearch);

    function performSearch() {
        const query = document.getElementById("searchField").value.trim();
        if (query.toLowerCase().startsWith("l")) {
            const line = parseInt(query.slice(1)) - 1;
            if (isNaN(line) || line < 0 || line >= editor.lineCount()) {
                blinkError();
            } else {
                editor.setCursor({ line, ch: 0 });
                editor.scrollIntoView({ line, ch: 0 });
            }
        } else {
            const cursor = editor.getSearchCursor(query, editor.getCursor());
            if (!cursor.findNext()) {
                blinkError();
            } else {
                editor.setSelection(cursor.from(), cursor.to());
                editor.scrollIntoView(cursor.from());
            }
        }
    }

    function blinkError() {
        const searchField = document.getElementById("searchField");
        searchField.classList.add("search-blink-error");
        setTimeout(() => searchField.classList.remove("search-blink-error"), 500);
    }

    // Blob Run
    document.getElementById("runButton").addEventListener("click", () => {
        files[currentLanguage] = editor.getValue();
        const blobContent = `
            ${files.html}
            <style>${files.css}</style>
            <script>${files.js}<\/script>
        `;
        const blob = new Blob([blobContent], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        window.open(url);
    });

    // Save Current File
    document.getElementById("saveButton").addEventListener("click", () => {
        const blob = new Blob([editor.getValue()], { type: "text/plain" });
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = `${currentLanguage === "html" ? "index.html" : currentLanguage === "css" ? "styles.css" : "script.js"}`;
        a.click();
    });
</script>


""".

do not mess original intended functionality. outshow only strictly full redesigned html/css code according to all original javascript.

fuk that sheet. search not working all not working because of you openai