body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f5f5f5;
}
.header {
    background: linear-gradient(90deg, #2196F3, #21CBF3);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.logo {
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(135deg, #181d21 0%, #1b2e35 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn:active {
    transform: translateY(1px);
}
.btn-run {
    background-color: #2196F3;
    color: white;
}
.btn-clear {
    background-color: #f44336;
    color: white;
}
.btn-reset {
    background-color: #607D8B;
    color: white;
}
.btn-format {
    background-color: #4CAF50;
    color: white;
}
.btn-auto-run {
    background-color: #FF9800;
    color: white;
}
.btn-download {
    background-color: #1c29d9;
    color: white;
}
.btn:hover {
    opacity: 0.9;
}
.main {
    flex: 1;
    display: flex;
    overflow: hidden;
    background-color: white;
    margin: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}
.editor-panel, .output-panel {
    display: flex;
    flex-direction: column;
    background: white;
    min-width: 0; /* Important for flexbox and Split.js */
}
.editor-tabs, .output-tabs {
    display: flex;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.tab {
    padding: 10px 20px;
    cursor: pointer;
    color: #757575;
    border-right: 1px solid #e0e0e0;
    transition: all 0.2s;
}
.tab.active {
    color: #2196F3;
    background: white;
    font-weight: 500;
}
.editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: none;
}
.editor-container:not([style*="display: none"]) {
    display: block;
}
.CodeMirror {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.5;
}
.output-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.preview, .console {
    flex: 1;
    display: none;
    height: 100%;
}
.preview.active, .console.active {
    display: block;
}
.console {
    height: 100%;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    overflow-y: auto;
    background: white;
    color: #212121;
    display: none;
}
.console.active {
    display: block;
}
.console-entry {
    margin-bottom: 16px;
    margin-top: 12px;
    padding: 0;
    position: relative;
}

.console-log { 
    color: #212121;
    padding: 6px 12px;
    margin: 6px 0;
    line-height: 2.8;
}

.console-error { 
    color: #d32f2f; 
    background: #ffebee; 
    padding: 8px 14px; 
    margin: 8px 18px;
    border-radius: 8px;
    border-left: 3px solid #d32f2f; 
    line-height: 2.8;
    word-break: break-word;
}

.console-warn { 
    color: #f57c00; 
    background: #fff3e0; 
    padding: 8px 14px; 
    margin: 8px 18px;
    border-radius: 8px;
    border-left: 3px solid #ff9800; 
    line-height: 2.8;
    word-break: break-word;
}

.console-info { 
    color: #0288d1;
    background: rgba(2, 136, 209, 0.1);
    padding: 8px 14px;
    margin: 8px 18px;
    border-radius: 8px;
    border-left: 3px solid #0288d1;
    line-height: 2.8;
    word-break: break-word;
}
.console-stack { 
    cursor: pointer; 
    color: #757575; 
    font-size: 11px; 
    display: none;
    margin-top: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
.console-stack.expanded { display: block; }
.timestamp { color: #757575; font-size: 11px; margin-right: 8px; }
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.loading.active {
    opacity: 1;
    pointer-events: all;
}
.spinner {
    border: 4px solid rgba(33, 150, 243, 0.2);
    border-radius: 50%;
    border-top: 4px solid #2196F3;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.console-object { cursor: pointer; color: #795548; font-style: italic; }
.console-object:before { content: '▶ '; font-size: 10px; display: inline-block; transition: transform 0.2s; }
.console-object.expanded:before { transform: rotate(90deg); }
.console-object-content { display: none; margin-left: 20px; border-left: 1px solid #e0e0e0; padding-left: 10px; }
.console-object.expanded+.console-object-content { display: block; }
.error-message {
    background: #ffebee;
    color: #d32f2f;
    padding: 10px;
    margin: 10px;
    border-radius: 4px;
    border-left: 4px solid #d32f2f;
    display: none;
}
/* Dark mode styles */
body.dark-mode { background-color: #1a1a1a; color: #e0e0e0; }
.dark-mode .header { background: linear-gradient(135deg, #181d21 0%, #1b2e35 100%); }
.dark-mode .logo { background: linear-gradient(135deg, #64b5f6, #80d8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dark-mode .container { background: #1a1a1a; }
.dark-mode .main, .dark-mode .editor-panel, .dark-mode .output-panel, .dark-mode .console { background-color: #2d2d2d; color: #e0e0e0; }
.dark-mode .CodeMirror { background: #1e1e1e; color: #e0e0e0; }
.dark-mode .editor-tabs, .dark-mode .output-tabs { background: #333; border-bottom-color: #444; }
.dark-mode .tab { color: #aaa; border-right-color: #444; }
.dark-mode .tab.active { background: linear-gradient(135deg, #1e262c 0%, #23363e 100%); color: #fff; }
.dark-mode .console-error { background: #3e2723; border-left-color: #d32f2f; }
.dark-mode .console-warn { background: #3e2c00; border-left-color: #ff9800; }
.dark-mode .console-info { color: #4fc3f7; }
.dark-mode .console-log { color: #e0e0e0; }
.dark-mode .console-object { color: #9cdcfe; }
.dark-mode .console-object-content { border-left-color: #444; }
.dark-mode .timestamp { color: #888; }
.dark-mode .console-stack { color: #888; }
.theme-toggle {
    background: none;
    border: 2px solid #1A5E97;
    color: #1A5E97;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dark-mode .theme-toggle { border-color: #64b5f6; color: #64b5f6; }
.theme-toggle:hover { background: rgba(33, 150, 243, 0.1); }
.dark-mode .theme-toggle:hover { background: rgba(100, 181, 246, 0.1); }
/* Split.js gutter */
.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
    transition: background-color 0.2s;
}
.gutter:hover {
    background-color: #ddd;
}
.gutter.gutter-horizontal {
    cursor: col-resize;
    width: 10px !important;
}
.gutter.gutter-vertical {
    cursor: row-resize;
    height: 10px !important;
}
.dark-mode .gutter {
    background-color: #333;
}
.dark-mode .gutter:hover {
    background-color: #444;
}
.copy-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.console-entry:hover .copy-btn,
.editor-container:hover .copy-btn {
    opacity: 1;
}

.copy-btn i {
    font-size: 12px;
}

.dark-mode .copy-btn {
    background: rgba(40, 40, 40, 0.9);
    border-color: #444;
    color: #e0e0e0;
}

.dark-mode .copy-btn:hover {
    background: rgba(40, 40, 40, 1);
}
.console-filters {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-right: 8px;
}

.filter-toggle {
    background: #fce5e5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-weight: normal;
}

.filter-toggle.active {
    background: rgb(235, 251, 231);
    border-width: 2px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.filter-toggle:hover {
    background: white;
}

.filter-toggle.log {
    color: #212121;
}

.filter-toggle.error {
    color: #d32f2f;
}

.filter-toggle.warn {
    color: #f57c00;
}

.filter-toggle.info {
    color: #0288d1;
}

.console-entry.filtered {
    display: none;
}

.dark-mode .filter-toggle {
    background:rgb(66, 51, 51);
    border-color: #444;
}

.dark-mode .filter-toggle.active {
    background: rgb(51, 65, 49);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.dark-mode .filter-toggle:hover {
    background: #1e1e1e;
}

.dark-mode .filter-toggle.log {
    color: #e0e0e0;
}

.dark-mode .filter-toggle.error {
    color: #f48771;
}

.dark-mode .filter-toggle.warn {
    color: #dcdcaa;
}

.dark-mode .filter-toggle.info {
    color: #4fc3f7;
}
/* Search/Replace button styles */
.search-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

.search-btn, .replace-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #757575;
    transition: all 0.2s;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-btn:hover, .replace-btn:hover {
    color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 4px;
}

.search-btn i, .replace-btn i {
    font-size: 14px;
}

.dark-mode .search-btn, .dark-mode .replace-btn {
    color: #aaa;
}

.dark-mode .search-btn:hover, .dark-mode .replace-btn:hover {
    color: #64b5f6;
    background: rgba(100, 181, 246, 0.1);
}

/* CodeMirror dialog styles */
.CodeMirror-dialog {
    position: absolute;
    left: 0; right: 0;
    top: -100%;
    z-index: 15;
    padding: 8px 12px;
    background: var(--background-color, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-color, #333);
    transition: top 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.CodeMirror-dialog.visible {
    top: 0;
    opacity: 1;
}

.CodeMirror-dialog input {
    border: 1px solid var(--border-color, #ddd);
    background: var(--input-background, #fff);
    color: var(--text-color, #333);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    flex: 1;
    min-width: 200px;
}

.CodeMirror-dialog button {
    background: var(--button-background, #f0f0f0);
    border: 1px solid var(--border-color, #ddd);
    color: var(--text-color, #333);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.CodeMirror-dialog button:hover {
    background: var(--button-hover-background, #e0e0e0);
}

/* Search match highlighting */
.CodeMirror-search-match {
    background: rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.5);
}

/* Dark theme modifications */
.dark-mode .CodeMirror-dialog {
    --background-color: #1e1e1e;
    --border-color: #444;
    --text-color: #e0e0e0;
    --input-background: #2d2d2d;
    --button-background: #2d2d2d;
    --button-hover-background: #3d3d3d;
}

.dark-mode .CodeMirror-search-match {
    background: rgba(255, 198, 0, 0.2);
    border: 1px solid rgba(255, 198, 0, 0.4);
}
@media (max-width: 768px) {
    .main { flex-direction: column; }
    .editor-panel, .output-panel { height: 50%; }
    .editor-tabs, .output-tabs { overflow-x: auto; white-space: nowrap; }
    .tab { padding: 10px 15px; font-size: 0.9em; }
}
@media (max-width: 480px) {
    .controls { flex-wrap: wrap; justify-content: flex-end; }
    .btn { padding: 6px 10px; font-size: 0.8em; }
    .logo { font-size: 1em; }
}