:root {
            --bg-app: #090909;
            --bg-panel: #161616;
            --border: #333;
            --primary: #5c7cfa;
            --primary-hover: #4263eb;
            --danger: #ff6b6b;
            --success: #51cf66;
            --warning: #ff922b;
            --special: #fcc419; 
            --toolbar-bg: #161616;
            
            --ui-text: #e0e0e0; 
            --ui-muted: #888;
            
            --table-text-color: #e0e0e0;
            --cell-border: rgba(255, 255, 255, 0.15);
            --header-bg: #2C2E33; /* Slightly lighter for contrast */
            --header-text: #fff;
            --zebra-overlay: rgba(255, 255, 255, 0.03); 
            --select-bg: rgba(92, 124, 250, 0.2);
            --select-border: #5c7cfa;
        }

        * { box-sizing: border-box; outline: none; }
        ::-webkit-scrollbar { width: 12px; height: 12px; }
        ::-webkit-scrollbar-track { background: var(--bg-app); }
        ::-webkit-scrollbar-thumb { background-color: #333; border-radius: 6px; border: 3px solid var(--bg-app); }
        ::-webkit-scrollbar-thumb:hover { background-color: #555; }
        ::-webkit-scrollbar-corner { background: var(--bg-app); }
        * { scrollbar-width: thin; scrollbar-color: #333 var(--bg-app); }

        body {
            font-family: 'Heebo', sans-serif;
            background-color: var(--bg-panel); 
            color: var(--ui-text);
            margin: 0; height: 100vh; display: flex; overflow: hidden;
        }

        #gridCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

        .sidebar {
            width: 300px; background: var(--bg-panel); border-left: 1px solid var(--border);
            padding: 20px; display: flex; flex-direction: column; gap: 15px; z-index: 500;
            box-shadow: -5px 0 20px rgba(0,0,0,0.5); overflow-y: auto; 
        }

        .title { font-weight: 800; font-size: 1.6rem; color: #fff; }
        .title span { color: var(--primary); }

        select, .action-btn, input[type="text"] {
            padding: 10px; border-radius: 6px; border: 1px solid var(--border); 
            background: #222; color: #fff; font-family: 'Heebo', sans-serif; font-size: 0.9rem; transition: 0.2s;
        }
        .action-btn { background: var(--primary); border: none; font-weight: 700; margin-top: auto; padding: 12px; cursor: pointer; }
        .action-btn:hover { background: var(--primary-hover); transform: translateY(-2px); }
        .secondary-btn { background: transparent; border: 1px solid var(--ui-muted); color: var(--ui-text); margin-top: 10px; cursor: pointer; }
        .secondary-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(92, 124, 250, 0.1); }

        .archive-section { margin-top: 15px; border-top: 1px solid #333; padding-top: 15px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .archive-header { font-size: 0.9rem; color: #888; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
        .archive-actions { display: flex; gap: 10px; }
        .archive-action-icon { cursor: pointer; color: #555; transition: 0.2s; font-size: 0.9rem; }
        .archive-action-icon:hover { color: var(--primary); transform: scale(1.1); }
        .archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; padding-right: 5px; padding-bottom: 5px; }
        .saved-sheet-card { background: #222; border: 1px solid #333; border-radius: 6px; height: 90px; position: relative; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; overflow: hidden; }
        .saved-sheet-card:hover { border-color: var(--primary); background: #2a2a2a; }
        .saved-sheet-preview { flex: 1; padding: 10px; display: flex; align-items: flex-start; justify-content: center; opacity: 0.9; overflow: hidden; }
        .mini-visual-grid { display: grid; width: 100%; gap: 2px; }
        .mini-cell { min-height: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: #555; overflow: hidden; white-space: nowrap; padding: 0 1px; }
        .mini-header { background: rgba(255, 255, 255, 0.2); height: 12px; font-size: 8px; margin-bottom: 1px; text-align: center; font-weight: bold; color: #8d8d8d; display: flex; align-items: center; justify-content: center; }
        .saved-sheet-name { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.85); font-size: 11px; padding: 5px; color: #ddd; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #333; }
        .delete-archive-btn { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; background: rgba(0,0,0,0.6); color: var(--danger); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; opacity: 0; transition: 0.2s; z-index: 10; }
        .saved-sheet-card:hover .delete-archive-btn { opacity: 1; }
        .delete-archive-btn:hover { background: var(--danger); color: #fff; }

        .main-wrapper { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }

        .tab-bar { height: 45px; background: #000; border-bottom: 1px solid var(--border); display: flex; align-items: flex-end; padding: 0 15px; gap: 4px; flex-shrink: 0; z-index: 400; }
        .tab { padding: 0 20px; height: 36px; background: #222; color: var(--ui-muted); border-radius: 8px 8px 0 0; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; transition: all 0.2s ease; border: 1px solid transparent; border-bottom: none; min-width: 120px; justify-content: space-between; position: relative; top: 1px; }
        .tab:hover { background: #2a2a2a; color: #fff; }
        .tab.active { background: var(--toolbar-bg); color: var(--primary); border: 1px solid var(--border); border-bottom: 1px solid var(--toolbar-bg); font-weight: 700; height: 41px; z-index: 10; }
        .tab-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
        .tab-input { background: #111; border: 1px solid var(--primary); color: var(--primary); font-family: inherit; font-size: 0.9rem; font-weight: bold; width: 100%; border-radius: 4px; padding: 2px 5px; outline: none; }
        .tab-close { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; opacity: 0; font-size: 0.75em; }
        .tab:hover .tab-close { opacity: 0.6; }
        .tab-close:hover { background: rgba(255, 107, 107, 0.2); color: var(--danger); opacity: 1 !important; }
        .new-tab-btn { padding: 0 12px; height: 36px; display: flex; align-items: center; color: var(--ui-muted); cursor: pointer; font-size: 1rem; margin-right: 5px; transition: 0.2s; margin-bottom: 4px; }
        .new-tab-btn:hover { color: #fff; transform: scale(1.1); }

        .workspace { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0; overflow: auto; position: relative; z-index: 10; background: transparent; }

        .toolbar { position: sticky; top: 0; left: 0; width: 100%; background: var(--toolbar-bg); padding: 8px 15px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; align-items: center; justify-content: flex-start; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .tool-btn { width: 32px; height: 32px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; font-size: 0.9rem; position: relative; }
        .tool-btn:hover:not(:disabled) { background: #333; }
        .tool-btn.active { background: rgba(92, 124, 250, 0.2); color: var(--primary); border: 1px solid var(--primary); }
        .tool-separator { width: 1px; height: 18px; background: #444; margin: 0 6px; }
        .history-btn:disabled { opacity: 0.3; cursor: default; }
        .save-btn { color: var(--warning); border: 1px solid rgba(255, 146, 43, 0.3); background: rgba(255, 146, 43, 0.1); }
        .save-btn:hover:not(:disabled) { background: var(--warning); color: #000; }
        .export-main-btn { color: var(--success); border: 1px solid rgba(81, 207, 102, 0.3); background: rgba(81, 207, 102, 0.1); }
        .export-main-btn:hover:not(:disabled) { background: var(--success); color: #000; }
        #mergeBtn { color: var(--ui-muted); cursor: not-allowed; }
        #mergeBtn.enabled { color: var(--primary); cursor: pointer; background: rgba(92, 124, 250, 0.1); }
        .color-wrapper { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        #textColorInput { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
        .color-indicator { width: 16px; height: 3px; background: #fff; position: absolute; bottom: 5px; border-radius: 2px; }

        /* FUNCTION DROPDOWN */
        .dropdown-menu {
            position: absolute; top: 100%; left: 0; 
            background: #222; border: 1px solid #444; border-radius: 6px; 
            padding: 5px; display: none; flex-direction: column; gap: 2px; 
            min-width: 140px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 2000;
        }
        .dropdown-menu.visible { display: flex; }
        .dropdown-item {
            padding: 8px 12px; color: #ccc; cursor: pointer; border-radius: 4px; font-size: 0.85rem; display: flex; align-items: center; gap: 8px;
        }
        .dropdown-item:hover { background: var(--primary); color: #fff; }
        .dropdown-item i { width: 15px; text-align: center; }

        .search-widget { display: flex; align-items: center; background: #222; border: 1px solid #333; border-radius: 6px; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); margin-right: 6px; height: 36px; }
        .search-widget.expanded { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 5px 15px rgba(0,0,0,0.5); background: #1a1a1a; }
        .search-toggle-btn { width: 36px; height: 100%; background: transparent; border: none; color: #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
        .search-toggle-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
        .search-widget.expanded .search-toggle-btn { color: var(--primary); }
        .search-inner { display: flex; align-items: center; width: 0; opacity: 0; padding: 0; overflow: hidden; transition: all 0.3s ease; gap: 0; }
        .search-widget.expanded .search-inner { width: auto; opacity: 1; padding-left: 5px; }
        .mini-input { background: transparent; border: none; color: #fff; font-size: 0.85rem; padding: 0 8px; width: 65px; height: 100%; border-radius: 0; outline: none; border-right: 1px solid #333; }
        .mini-input:focus { background: rgba(255, 255, 255, 0.05); }
        .mini-input::placeholder { color: #555; font-size: 0.8rem; }
        .search-opt-icon { font-size: 0.8rem; color: #666; cursor: pointer; padding: 8px; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
        .search-opt-icon:hover { color: #fff; background: rgba(255,255,255,0.1); }
        .search-opt-icon.active { color: var(--primary); }
        .mini-action-btn { border: none; background: transparent; color: #888; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 2px; border-radius: 4px; }
        .mini-action-btn:hover { color: var(--primary); background: rgba(92, 124, 250, 0.1); }

        .stage-area { position: relative; margin: 60px auto; padding: 0; display: flex; justify-content: center; width: max-content; }
        .table-wrapper { background: #1e1e1e; box-shadow: 0 0 60px rgba(0,0,0,0.9); border: 1px solid #444; min-width: 400px; position: relative; z-index: 20; user-select: none; }
        table { border-collapse: collapse; direction: rtl; font-variant-numeric: tabular-nums; width: 100%; font-family: 'Heebo', sans-serif; }
        th, td { padding: 12px 24px; text-align: right; white-space: nowrap; position: relative; cursor: default; border: 1px solid var(--cell-border); color: var(--table-text-color); font-size: 0.95rem; transition: background 0.1s; }
        td:hover, th:hover { filter: brightness(1.2); box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0.03); }
        th { background: var(--header-bg); color: var(--header-text); font-weight: 700; border-bottom: 2px solid var(--border); }
        
        .multi-selected { background-color: var(--select-bg) !important; outline: 2px solid var(--select-border); outline-offset: -2px; position: relative; z-index: 999 !important; box-shadow: none !important; }
        .function-target { background: rgba(255, 146, 43, 0.15) !important; outline: 2px dashed var(--warning) !important; animation: pulse 1.5s infinite; color: #fff; z-index: 1001 !important; }
        @keyframes pulse { 0% { outline-color: var(--warning); } 50% { outline-color: rgba(255,146,43,0.3); } 100% { outline-color: var(--warning); } }
        
        /* UPDATED HIGHLIGHT STYLES */
        /* Increased brightness for row background */
        .highlight-active { background-color: rgba(255, 255, 255, 0.12) !important; transition: none !important; }

        td[contenteditable="true"], th[contenteditable="true"] { cursor: text; background: var(--bg-panel) !important; outline: 2px solid var(--success); color: #fff; z-index: 1000 !important; filter: none; }
        .zebra-active table tr:nth-child(even) td { background-image: linear-gradient(var(--zebra-overlay), var(--zebra-overlay)); }

        .add-btn-corner { position: absolute; width: 20px; height: 20px; background: #222; border: 1px solid var(--success); color: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 50; transition: background 0.2s, color 0.2s; }
        .add-btn-corner:hover { background: var(--success); color: white; }
        .add-top { top: -10px; left: 50%; margin-left: -10px; }
        .add-bottom { bottom: -10px; left: 50%; margin-left: -10px; }
        .add-right { right: -10px; top: 50%; margin-top: -10px; }
        .add-left { left: -10px; top: 50%; margin-top: -10px; }

        .smart-control-wrapper { position: fixed; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
        .smart-control-wrapper.visible { opacity: 1; pointer-events: all; }
        .gear-trigger { width: 26px; height: 26px; background: #333; color: #888; border: 1px solid #555; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.5); position: absolute; }
        .control-actions { display: flex; gap: 4px; background: #222; padding: 4px; border-radius: 20px; border: 1px solid #444; opacity: 0; transform: scale(0.8); pointer-events: none; transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.6); }
        .smart-control-wrapper:hover .gear-trigger { opacity: 0; transform: scale(0.5); }
        .smart-control-wrapper:hover .control-actions { opacity: 1; transform: scale(1); pointer-events: all; }
        .row-control { flex-direction: column; }
        .row-control .control-actions { flex-direction: column; }
        .col-control { flex-direction: row; }
        .col-control .control-actions { flex-direction: row; }
        .mini-smart-btn { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: 0.2s; color: #fff; }
        .mini-smart-btn.add-btn { background: #333; border: 1px solid #555; }
        .mini-smart-btn.add-btn:hover { background: var(--success); border-color: var(--success); }
        .mini-smart-btn.del-btn { background: rgba(255, 107, 107, 0.2); color: var(--danger); border: 1px solid var(--danger); }
        .mini-smart-btn.del-btn:hover { background: var(--danger); color: white; }

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
        .modal-overlay.active { display: flex; animation: fadeIn 0.2s; }
        .modal-box { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; width: 900px; height: 600px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); display: flex; flex-direction: row; overflow: hidden; position: relative; }
        .modal-sidebar { width: 240px; background: #111; border-left: 1px solid #333; display: flex; flex-direction: column; }
        .modal-top-header { padding: 20px; border-bottom: 1px solid #222; display: flex; align-items: center; justify-content: space-between; }
        .modal-top-header h3 { margin: 0; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 8px; }
        .modal-close-icon { cursor: pointer; color: #666; transition: 0.2s; }
        .modal-close-icon:hover { color: #fff; }
        .modal-nav { padding: 15px; display: flex; flex-direction: column; gap: 5px; }
        .modal-nav-item { padding: 12px 15px; border-radius: 6px; cursor: pointer; color: #888; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; transition: 0.2s; }
        .modal-nav-item:hover { background: #222; color: #ccc; }
        .modal-nav-item.active { background: rgba(92, 124, 250, 0.15); color: var(--primary); border-right: 3px solid var(--primary); }
        .modal-content-panel { flex: 1; display: none; flex-direction: column; padding: 25px; overflow-y: auto; background: #161616; }
        .modal-content-panel.active-panel { display: flex; }
        
        .paste-modal-content { flex: 1; display: flex; flex-direction: column; background: #161616; padding: 20px; }
        .paste-toolbar { display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 15px; flex-wrap: wrap; }
        .paste-mode-btn { background: #222; border: 1px solid #444; color: #ccc; padding: 8px 16px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; transition: 0.2s; }
        .paste-mode-btn:hover { background: #333; color: #fff; }
        .paste-mode-btn.active { background: rgba(92, 124, 250, 0.2); border-color: var(--primary); color: var(--primary); }
        .paste-mode-btn.special-btn { border-color: rgba(252, 196, 25, 0.3); color: var(--special); }
        .paste-mode-btn.special-btn:hover { background: rgba(252, 196, 25, 0.1); }
        .paste-mode-btn.special-btn.active { background: var(--special); color: #000; font-weight: bold; box-shadow: 0 0 10px rgba(252, 196, 25, 0.4); }

        .paste-preview-wrapper { flex: 1; background: #090909; border: 1px solid #333; border-radius: 8px; overflow: auto; padding: 15px; position: relative; }
        .paste-preview-table { width: 100%; border-collapse: collapse; direction: rtl; }
        .paste-preview-table td { border: 1px solid #333; padding: 8px; color: #aaa; font-size: 0.85rem; white-space: pre-wrap; }
        .paste-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
        .cancel-btn { background: #333; color: #fff; }
        .confirm-btn { background: var(--success); color: #000; font-weight: bold; }

        .theme-dark-pro { --table-text-color: #e0e0e0; --cell-border: rgba(255,255,255,0.15); --header-bg: #2C2E33; --header-text: #fff; --zebra-overlay: rgba(255, 255, 255, 0.03); }
        .theme-dark-midnight { --table-text-color: #e6ecff; --cell-border: rgba(130, 150, 200, 0.25); --header-bg: #1c2340; --header-text: #f4f7ff; --zebra-overlay: rgba(80, 100, 160, 0.12); }

        /* Light export themes */
        .theme-light-classic { --table-text-color: #1f2937; --cell-border: #d7dde3; --header-bg: #f3f5f7; --header-text: #111827; --zebra-overlay: rgba(17,24,39,0.04); background: #ffffff; border: 1px solid #d7dde3; box-shadow: 0 12px 30px rgba(17,24,39,0.08); }
        .theme-light-slate { --table-text-color: #1f2937; --cell-border: #cfd6dd; --header-bg: #e9eef2; --header-text: #111827; --zebra-overlay: rgba(15,23,42,0.05); background: #fbfcfd; border: 1px solid #cfd6dd; box-shadow: 0 12px 28px rgba(15,23,42,0.08); }
        .theme-light-sand { --table-text-color: #2a2a2a; --cell-border: #e3d6c8; --header-bg: #f6efe7; --header-text: #2a2a2a; --zebra-overlay: rgba(120, 92, 60, 0.06); background: #fffaf4; border: 1px solid #e3d6c8; box-shadow: 0 12px 28px rgba(120, 92, 60, 0.12); }
        .theme-light-cream { --table-text-color: #2b2b2b; --cell-border: #e4ddd4; --header-bg: #f8f1e8; --header-text: #2b2b2b; --zebra-overlay: rgba(120, 92, 60, 0.04); background: #fffdf9; border: 1px solid #e4ddd4; box-shadow: 0 12px 28px rgba(120, 92, 60, 0.1); }
        .theme-light-mint { --table-text-color: #1f2a2a; --cell-border: #cfe3dc; --header-bg: #e9f5f1; --header-text: #1f2a2a; --zebra-overlay: rgba(20, 90, 70, 0.05); background: #f6fffb; border: 1px solid #cfe3dc; box-shadow: 0 12px 28px rgba(20, 90, 70, 0.1); }
        .theme-light-sky { --table-text-color: #1f2a44; --cell-border: #cfe0f1; --header-bg: #e9f2fb; --header-text: #1f2a44; --zebra-overlay: rgba(30, 60, 120, 0.05); background: #f7fbff; border: 1px solid #cfe0f1; box-shadow: 0 12px 28px rgba(30, 60, 120, 0.1); }
        .theme-light-rose { --table-text-color: #3a2430; --cell-border: #e7cfd9; --header-bg: #f7e9ef; --header-text: #3a2430; --zebra-overlay: rgba(120, 40, 80, 0.05); background: #fff7fb; border: 1px solid #e7cfd9; box-shadow: 0 12px 28px rgba(120, 40, 80, 0.1); }
        .theme-light-lilac { --table-text-color: #2f2740; --cell-border: #d9d2e6; --header-bg: #efe9f7; --header-text: #2f2740; --zebra-overlay: rgba(90, 60, 150, 0.05); background: #fbf8ff; border: 1px solid #d9d2e6; box-shadow: 0 12px 28px rgba(90, 60, 150, 0.1); }
        .theme-light-citrus { --table-text-color: #2b2b20; --cell-border: #e6e0b6; --header-bg: #f7f2c8; --header-text: #2b2b20; --zebra-overlay: rgba(120, 110, 20, 0.06); background: #fffbe8; border: 1px solid #e6e0b6; box-shadow: 0 12px 28px rgba(120, 110, 20, 0.12); }
        .theme-light-stone { --table-text-color: #242a2f; --cell-border: #d6dbe0; --header-bg: #eef1f3; --header-text: #242a2f; --zebra-overlay: rgba(30, 40, 50, 0.05); background: #f9fbfc; border: 1px solid #d6dbe0; box-shadow: 0 12px 28px rgba(30, 40, 50, 0.1); }
        .val-pos { color: #69db7c; font-weight:bold; } .val-neg { color: #ff8787; font-weight:bold; }
        .loading-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 12px; color: var(--primary); font-weight: bold; font-size: 1.2rem; display: none; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .toast { position: fixed; bottom: 30px; left: 30px; background: #222; border: 1px solid #444; color: #fff; padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); z-index: 2000; transform: translateY(100px); opacity: 0; transition: 0.3s; }
        .toast.visible { transform: translateY(0); opacity: 1; }
        .toast-btn { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: bold; }
        .toast-btn:hover { background: var(--primary); color: white; }

        .preview-label { font-size: 0.9rem; color: #888; margin-bottom: 10px; font-weight: 500; }
        .mini-preview-container { display: flex; justify-content: center; align-items: center; height: 240px; overflow: hidden; background: #000; border-radius: 8px; border: 1px dashed #444; padding: 20px; margin-bottom: 20px; }
        .mini-table { border-collapse: separate !important; border-spacing: 2px !important; width: 100%; direction: rtl; }
        .mini-table th, .mini-table td { padding: 12px 10px; font-size: 11px; text-align: center; border-radius: 4px; }
        .export-options-list { background: #111; padding: 15px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #333; margin-bottom: 20px; }
        .checkbox-wrapper { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
        .checkbox-wrapper input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
        .checkbox-wrapper span { color: #ccc; font-size: 0.95rem; }
        .export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .export-btn { background: #252525; border: 1px solid #444; color: #ccc; padding: 12px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: row; align-items: center; gap: 15px; transition: 0.2s; justify-content: center; font-weight: 500; }
        .export-btn i { font-size: 1.2rem; color: var(--primary); }
        .export-btn:hover { background: #333; border-color: var(--primary); color: #fff; transform: translateY(-2px); }
        .code-opts { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
        .code-opt-btn { background: #222; border: 1px solid #444; color: #aaa; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: 0.2s; }
        .code-opt-btn:hover { background: #333; color: #fff; }
        .code-opt-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
        
        .code-panel-split { display: none; flex-direction: column; gap: 15px; flex: 1; height: 100%; }
        .code-panel-split.visible { display: flex; }
        .template-area { flex: 1; background: #0c0c0c; border: 1px solid #333; border-radius: 8px; padding: 10px; font-family: monospace; color: #fab005; resize: none; outline: none; }
        .template-label { font-size: 0.8rem; color: #888; margin-bottom: 5px; display: flex; justify-content: space-between; }

        .code-preview-area { flex: 1; background: #050505; border: 1px solid #333; border-radius: 8px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.9rem; color: #a5d6ff; resize: none; line-height: 1.5; outline: none; }
        .copy-code-btn { margin-top: 15px; width: 100%; background: var(--primary); color: #fff; padding: 12px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .copy-code-btn:hover { background: var(--primary-hover); }

    

/* Language switcher (i18n) */
.lang-switcher{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.lang-select{
  height:32px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
}
.lang-select:focus{
  outline: none;
  border-color: rgba(255,255,255,0.25);
}
.lang-btn{
  width:32px;
  height:32px;
}