:root {
    /* Updated Light Theme - More vibrant and accessible */
    --bg-primary: #F4F7FC; /* Light Blueish Gray */
    --bg-secondary: #FFFFFF;
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #1A202C; /* Very Dark Blue */
    --text-secondary: #4A5568; /* Dark Gray */
    --accent-primary: #4299E1; /* Vibrant Blue */
    --accent-primary-dark: #2B6CB0;
    --accent-secondary: #38A169; /* Rich Green */
    --accent-secondary-dark: #2F855A;
    --accent-tertiary: #DD6B20; /* Bright Orange */
    --accent-tertiary-dark: #C05621;
    --accent-danger: #E53E3E; /* Strong Red */
    --accent-danger-dark: #C53030;
    --border-color: #E2E8F0; /* Lighter gray */
    --shadow-color: rgba(66, 153, 225, 0.15);
    --glow-color-primary: rgba(66, 153, 225, 0.4);
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E2E8F0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2-H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 10px; transition: background-color 0.3s ease-out; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background-color: var(--accent-primary); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 0 10px 1px var(--glow-color-primary); transition-duration: 0.1s; }

.card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1.25rem;
    border: 1px solid var(--border-color);
    padding: 1.75rem;
    box-shadow: 0 8px 32px 0 var(--shadow-color);
    transition: all 0.3s ease;
}

.form-label { color: var(--text-secondary); font-weight: 500; margin-bottom: 0.5rem; display: block; }
.form-input {
    background-color: #F7FAFC; border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 0.75rem; padding: 0.75rem 1rem; width: 100%;
    transition: all 0.2s ease-in-out; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.form-input::placeholder, .data-textarea::placeholder { color: #A0AEC0; }
.form-input:focus {
    outline: none; border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-color-primary), inset 0 2px 4px rgba(0,0,0,0.02);
}

.btn {
    font-weight: 600; padding: 0.8rem 1rem; border-radius: 50px; display: flex;
    align-items: center; justify-content: center; gap: 0.5rem; color: white;
    transition: all 0.15s ease-out; transform: translateY(0);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); border: none; cursor: pointer;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
.btn-primary { background: var(--accent-primary); box-shadow: 0 4px 0 0 var(--accent-primary-dark), 0 6px 12px rgba(66, 153, 225, 0.3); }
.btn-secondary { background: var(--accent-secondary); box-shadow: 0 4px 0 0 var(--accent-secondary-dark), 0 6px 12px rgba(56, 161, 105, 0.3); }
.btn-tertiary { background: var(--accent-tertiary); box-shadow: 0 4px 0 0 var(--accent-tertiary-dark), 0 6px 12px rgba(221, 107, 32, 0.3); }
.btn-danger { background: var(--accent-danger); box-shadow: 0 4px 0 0 var(--accent-danger-dark), 0 6px 12px rgba(229, 62, 62, 0.3); }
.btn-dark { background: #2D3748; box-shadow: 0 4px 0 0 #1A202C, 0 6px 12px rgba(0,0,0,0.2); }
.btn-light { background: #EDF2F7; color: var(--text-secondary); text-shadow: none; box-shadow: 0 4px 0 0 #CBD5E0, 0 6px 12px rgba(0,0,0,0.1); }

.modal-overlay { position: fixed; inset: 0; background-color: rgba(244, 247, 252, 0.7); backdrop-filter: blur(8px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; transition: opacity 0.3s ease-in-out; }
.modal-content { background: var(--bg-secondary); border-radius: 1.25rem; box-shadow: 0 10px 40px var(--shadow-color); width: 100%; max-width: 28rem; margin: auto; transform: scale(0.95); transition: all 0.3s ease-in-out; border: 1px solid var(--border-color); }
.modal-overlay:not(.hidden) .modal-content { transform: scale(1); }

.tab-container { border-bottom: 2px solid var(--border-color); margin-bottom: 1rem; }
.tab-btn { background-color: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); padding: 0.5rem 1rem; position: relative; top: 2px; transition: all 0.2s ease; border-radius: 8px 8px 0 0; font-weight: 500; }
.tab-btn:hover { background-color: #F7FAFC; color: var(--text-primary); }
.tab-btn.active { color: var(--accent-primary); font-weight: 700; background-color: var(--bg-secondary); border-top: 2px solid var(--border-color); border-left: 2px solid var(--border-color); border-right: 2px solid var(--border-color); border-bottom: 2px solid var(--bg-secondary); }

#quill-editor-container { background-color: var(--bg-secondary); border-radius: 0.75rem; border: 1px solid var(--border-color); }
.ql-toolbar { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; border-bottom: 1px solid var(--border-color) !important; }
.ql-container { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; border: none !important; height: 8rem; }
.ql-editor::before { font-style: normal !important; color: #A0AEC0; }

.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-input { display: none; }
.toggle-slider { width: 44px; height: 24px; background-color: #CBD5E0; border-radius: 50px; position: relative; transition: background-color 0.3s ease; }
.toggle-slider::before { content: ''; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-input:checked + .toggle-slider { background-color: var(--accent-secondary); }
.toggle-input:checked + .toggle-slider::before { transform: translateX(20px); }

#aiLoadingModal .modal-content { text-align: center; padding: 3rem 2rem; }
.ai-loader { width: 80px; height: 80px; position: relative; margin: 0 auto 1.5rem; }
.ai-loader div { box-sizing: border-box; display: block; position: absolute; width: 100%; height: 100%; border: 8px solid var(--accent-primary); border-radius: 50%; animation: ai-loader-anim 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: var(--accent-primary) transparent transparent transparent; }
.ai-loader div:nth-child(1) { animation-delay: -0.45s; }
.ai-loader div:nth-child(2) { animation-delay: -0.3s; }
.ai-loader div:nth-child(3) { animation-delay: -0.15s; }
@keyframes ai-loader-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease-out forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

#canvas-parent { background-color: var(--bg-secondary); border-radius: 1rem; border: 2px dashed var(--border-color); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--accent-secondary); cursor: pointer; border-radius: 50%; border: 2px solid white; }

#math-editor-container, #math-editor-container-3d { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 0.75rem; background-color: #F7FAFC; padding: 0 1rem; }
#math-editor-container.mq-focused, #math-editor-container-3d.mq-focused { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--glow-color-primary); }
#dependent-var, #dependent-var-3d { font-size: 1.25rem; color: var(--text-secondary); font-weight: 500; margin-right: 0.5rem; white-space: nowrap; }
#math-editor, #math-editor-3d { flex-grow: 1; font-size: 1.25rem; padding: 0.75rem 0; }
.math-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.math-toolbar button { background-color: #EDF2F7; border: 1px solid #E2E8F0; border-radius: 0.5rem; padding: 0.5rem; font-size: 1rem; font-family: 'Outfit', sans-serif; cursor: pointer; transition: all 0.2s ease; }
.math-toolbar button:hover { background-color: #E2E8F0; border-color: #CBD5E0; }
.math-toolbar .symbol-dropdown { position: relative; }
.math-toolbar .dropdown-content { display: none; position: absolute; background-color: white; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 0.5rem; bottom: 100%; margin-bottom: 0.5rem; z-index: 10; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.math-toolbar .dropdown-content.show { display: grid; }

.mode-switcher-container { background-color: #D5F5E3; }
.mode-switcher-container .mode-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
}
.mode-switcher-container .mode-btn.active {
    background-color: var(--bg-secondary);
    color: var(--accent-secondary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- Dark Theme Styles --- */
.dark { color-scheme: dark; }

.dark body {
    /* Updated Dark Theme - Better Contrast */
    --bg-primary: #1A202C; /* Darkest Blue */
    --bg-secondary: #2D3748;
    --bg-card: rgba(45, 55, 72, 0.8);
    --text-primary: #F7FAFC; /* Lighter Text */
    --text-secondary: #A0AEC0; /* Muted Gray */
    --border-color: #4A5568;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --accent-primary: #63B3ED; /* Brighter Blue */
    --accent-secondary: #48BB78; /* Brighter Green */
    --accent-tertiary: #F6AD55; /* Brighter Orange */
    --accent-danger: #FC8181; /* Brighter Red */
}
.dark body { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232D3748' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2-H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

.dark .form-input { background-color: #2D3748; border-color: #4A5568; color: #F7FAFC; }
.dark .form-input::placeholder, .dark .data-textarea::placeholder { color: #718096; }
.dark .form-input:focus { border-color: var(--accent-primary); }
.dark .btn-light { background: #4A5568; color: var(--text-primary); text-shadow: none; box-shadow: 0 4px 0 0 #2D3748, 0 6px 12px rgba(0,0,0,0.2); }
.dark #canvas-parent { background-color: var(--bg-secondary); border-color: #4A5568; }
.dark .tab-btn:hover { background-color: #4A5568; }
.dark .tab-btn.active { background-color: var(--bg-secondary); border-color: var(--border-color); border-bottom-color: var(--bg-secondary); }
.dark .ql-toolbar { background-color: #4A5568; border-color: var(--border-color) !important; color: var(--text-primary); }
.dark .ql-snow .ql-stroke { stroke: var(--text-primary); }
.dark .ql-snow .ql-picker-label { color: var(--text-primary); }
.dark .ql-editor::before { color: #718096; }
.dark #math-editor-container, .dark #math-editor-container-3d { background-color: #4A5568; border-color: #718096; }
.dark .math-toolbar button { background-color: #2D3748; border-color: #4A5568; color: var(--text-primary); }
.dark .math-toolbar button:hover { background-color: #4A5568; }
.dark .math-toolbar .dropdown-content { background-color: #2D3748; }
.dark .modal-overlay { background-color: rgba(26, 32, 44, 0.7); }
.dark ::-webkit-calendar-picker-indicator { filter: invert(1); }
.dark .prose {
    --tw-prose-body: var(--text-primary);
    --tw-prose-headings: var(--text-primary);
    --tw-prose-lead: #a8a29e;
    --tw-prose-links: #f3f4f6;
    --tw-prose-bold: #f3f4f6;
    --tw-prose-counters: #a8a29e;
    --tw-prose-bullets: #a8a29e;
    --tw-prose-hr: var(--border-color);
    --tw-prose-quotes: #f3f4f6;
    --tw-prose-quote-borders: #e7e5e4;
    --tw-prose-captions: #a8a29e;
    --tw-prose-code: #f3f4f6;
    --tw-prose-pre-code: #e7e5e4;
    --tw-prose-pre-bg: #262626;
    --tw-prose-th-borders: #a8a29e;
    --tw-prose-td-borders: #e7e5e4;
    --tw-prose-invert-body: #d6d3d1;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #a8a29e;
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #a8a29e;
    --tw-prose-invert-bullets: #a8a29e;
    --tw-prose-invert-hr: #404040;
    --tw-prose-invert-quotes: #f5f5f4;
    --tw-prose-invert-quote-borders: #404040;
    --tw-prose-invert-captions: #a8a29e;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #d6d3d1;
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: #a8a29e;
    --tw-prose-invert-td-borders: #404040;
}
.dark .mode-switcher-container { background-color: #2C7A7B; }
.dark .mode-switcher-container .mode-btn.active { color: var(--accent-secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.data-textarea {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    width: 100%;
    height: 12rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: monospace;
}
.dark .data-textarea {
    color: #F7FAFC;
    background-color: #2D3748;
    border-color: #4A5568;
}

.header-icons-container {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dark .header-icons-container {
    background-color: rgba(45, 55, 72, 0.5);
}
.header-icon-btn {
    padding: 0.5rem;
    border-radius: 9999px;
    transition: background-color 0.2s;
    color: var(--text-secondary);
}
.header-icon-btn:hover {
    background-color: rgba(0,0,0,0.1);
    color: var(--text-primary);
}
.dark .header-icon-btn {
    color: var(--text-secondary);
}
.dark .header-icon-btn:hover {
    color: var(--text-primary);
}

.display-options-container {
    background-color: #FEFCE8; /* Pale Lemon Yellow */
    border-radius: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #F6E05E;
}
.dark .display-options-container {
    background-color: #4A4A28; /* Darker Lemon Yellow */
    border-color: #D69E2E;
}

/* New Help Modal Styles */
.help-heading {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: var(--text-primary);
}
.help-body {
    padding-left: 2.75rem; /* Aligns with heading icon */
    padding-top: 0.5rem;
    color: var(--text-secondary);
}
.sub-heading {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: var(--text-primary);
}
.tutorial-step {
    padding: 1rem;
    background-color: #F0FFF4; /* Light mint green */
    border-left: 4px solid var(--accent-secondary);
    border-radius: 0.5rem;
    margin-top: 1rem;
}
.dark .tutorial-step {
    background-color: #2D3748;
    border-left-color: var(--accent-secondary);
}
.step-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.example-box {
    background-color: #FEFCE8; /* Pale yellow */
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid #F6E05E;
}
.dark .example-box {
    background-color: #4A4A28;
    border-color: #D69E2E;
}
.example-box ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.5rem;
    space-y: 0.25rem;
    padding-left: 0.5rem;
}
.luminous-divider {
    height: 1px;
    border: 0;
    background-image: linear-gradient(to right, rgba(0,0,0,0), #A7F3D0, rgba(0,0,0,0));
}
.dark .luminous-divider {
    background-image: linear-gradient(to right, rgba(0,0,0,0), #48BB78, rgba(0,0,0,0));
}

#explainModal {
    background-color: var(--bg-primary);
}

#explainCanvasParent canvas {
    width: 100%;
    height: 100%;
}

#explainInfoBox {
    z-index: 110;
    max-width: 300px;
}

#explainInfoBox h4 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--accent-primary);
}

#explainInfoBox p {
    margin: 0;
    line-height: 1.6;
}

#explainInfoBox code {
    background-color: rgba(0,0,0,0.1);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-family: monospace;
}

.dark #explainInfoBox code {
     background-color: rgba(255,255,255,0.1);
}
/* --- Doodle Toolbar Styles --- */
#canvasWrapper {
    /* Ensures canvases inside are constrained */
    overflow: hidden;
}
#explainDoodleCanvas, #textInputHelper {
    position: absolute;
    top: 0;
    left: 0;
}

.doodle-tool-btn {
    padding: 0.5rem;
    border-radius: 9999px;
    transition: all 0.2s;
    color: var(--text-secondary);
    background-color: transparent;
}
.doodle-tool-btn:hover {
    background-color: rgba(0,0,0,0.1);
    color: var(--text-primary);
}
.doodle-tool-btn.active {
    background-color: var(--accent-primary);
    color: white;
}
.dark .doodle-tool-btn:hover {
    background-color: rgba(255,255,255,0.1);
}
.dark .doodle-tool-btn.active {
    color: var(--bg-primary);
}

#textInputHelper {
    border: 2px dashed var(--accent-primary);
    background-color: rgba(66, 153, 225, 0.1);
    resize: none;
    outline: none;
    font-size: 16px;
    padding: 4px;
    z-index: 120;
    line-height: 1.2;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}
/* Location: End of style.css */

.doodle-main-btn {
    transition: all 0.2s;
    color: var(--text-secondary);
}
.doodle-main-btn:hover {
    color: var(--text-primary);
}
.doodle-main-btn.active {
    background-color: var(--accent-primary);
    color: white;
}
.dark .doodle-main-btn.active {
    color: var(--bg-primary);
}
.mode-switcher-container .stats-type-btn.active {
    background-color: var(--bg-secondary);
    color: #0891B2; /* Use the cyan color */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark .mode-switcher-container .stats-type-btn.active {
    color: #22D3EE;
}