/* General Styling */
body { margin: 0; font-family: 'Inter', Arial, sans-serif; transition: background 0.3s, color 0.3s; }
.dark { background: #121212; color: #f3f4f6; }
.light { background: #f9fafb; color: #1f2937; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; font-size: 1.5rem; font-weight: bold; background: #059669; color: white; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.header div { display: flex; align-items: center; gap: 0.5rem; }
.header button { background: transparent; border: none; color: white; font-size: 1rem; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 6px; transition: 0.2s; }
.header button:hover { background: rgba(255,255,255,0.2); }

/* Content sections */
.content {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 1rem 2rem;
    line-height: 1.6;
    text-align: left;
}
.content h2 { color: #059669; margin-bottom: 0.8rem; border-bottom: 2px solid #059669; padding-bottom: 5px;}
.content h3 { margin-top: 1.5rem; color: #047857; }
.content p, .content ul, .content ol { margin-bottom: 1rem; }
.content pre { background: #f3f4f6; padding: 0.8rem; border-radius: 6px; overflow-x: auto; font-family: monospace; }
.dark .content pre { background: #1e1e1e; color: #f3f4f6; }

/* Ad Container */
.ad-container { text-align: center; margin: 1rem 0; }

/* Container */
.container { display: flex; gap: 1.5rem; padding: 1.5rem; flex-wrap: wrap; }

/* Card panels */
.editor-container { flex: 1; display: flex; flex-direction: column; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; }
.dark .editor-container { background: #1e1e1e; }

/* FIX 1: Explicit height and flex alignment for consistent headers */
.editor-header { 
    background: #047857; 
    color: white; 
    padding: 0.6rem 1rem; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    height: 44px; 
    box-sizing: border-box; 
}
.editor-header button { margin-left: 0.5rem; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0 0.6rem; }

/* Increased height to 750px */
.CodeMirror { height: 750px; border-top: 1px solid #ccc; font-size: 14px; }

/* FIX 2 & 3: Consistency for gutters/line numbers */
.CodeMirror-wrap .CodeMirror-gutters {
    min-width: 45px !important; 
    padding-right: 5px;
    box-sizing: content-box;
}
.CodeMirror, .CodeMirror-scroll {
    height: 100%;
}
.CodeMirror-scroll {
    padding-bottom: 0 !important; 
}

/* Buttons */
.buttons { margin: 1.5rem; text-align: center; }
button.action { padding: 0.7rem 1.4rem; border: none; border-radius: 8px; background: #059669; color: white; cursor: pointer; font-weight: 600; font-size: 15px; transition: 0.2s; }
button.action:hover { background: #047857; }

/* Copy button */
.copy-btn { background: #f3f4f6; color: #059669; border: 1px solid #059669; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 13px; cursor: pointer; transition: 0.2s; }
.copy-btn:hover { background: #059669; color: white; }

/* Toast notifications (Positioned Left) */
.toast {
    position: fixed;
    top: 20px;
    left: 20px;
    min-width: 400px;
    max-width: 1000px;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 500;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    color: white;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    white-space: pre-wrap;
    word-break: break-word;
}
.toast > span { flex-grow: 1; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success {
    background: #059669;
    color: white;
}

.toast.error {
    background: #ffffff;
    color: #dc2626;
    border: 2px solid #dc2626;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

/* Remove ugly outline */
.CodeMirror-focused { outline: none !important; }

/* 🎨 FIXED SYNTAX COLORING PALETTE FOR LIGHT MODE (Default) */
.CodeMirror { color: #111; } 
.CodeMirror .cm-string { color: #9333ea; } /* Deep Violet for Strings */
.CodeMirror .cm-number { color: #b45309; } /* Burnt Orange/Brown for Numbers */
.CodeMirror .cm-atom { color: #d97706; } /* Gold/Yellow-Orange for true, false, null */
.CodeMirror .cm-bracket { color: #111; } /* Brackets */


/* 🎨 FIXED SYNTAX COLORING PALETTE FOR DARK MODE (Explicitly override all colors) */
.dark .CodeMirror { 
    background-color: #1e1e1e !important; /* Match editor background */
    color: #f3f4f6 !important; /* Main text color */
}
.dark .CodeMirror .cm-string { color: #d8b4fe !important; } /* Lighter Violet for Dark Mode Strings */
.dark .CodeMirror .cm-number { color: #f97316 !important; } /* Bright Orange for Dark Mode Numbers */
.dark .CodeMirror .cm-atom { color: #fbbf24 !important; } /* Bright Yellow/Gold for Dark Mode Atoms */
.dark .CodeMirror .cm-bracket { color: #a1a1aa !important; } /* Light Gray for Brackets */
.dark .CodeMirror-gutters { background-color: #1e1e1e !important; } /* Match gutter background */
.dark .CodeMirror-linenumber { color: #6b7280 !important; } /* Line number color */