/* DARK MODE IS NOW THE DEFAULT */
:root {
    --bg-color: #020617;
    --text-color: #e2e8f0;
    --heading-color: #40e0d0;
    --header-bg: #1e3a8a;
    --nav-bg: #0f766e;
    --nav-hover: #14b8a6;
    --container-bg: #0f172a;
    --btn-bg: #8b5cf6;
}

/* LIGHT MODE OVERRIDES */
[data-theme="light"] {
    --bg-color: #f0f8ff;
    --text-color: #333333;
    --heading-color: #2563eb;
    --header-bg: #3b82f6;
    --nav-bg: #06b6d4;
    --nav-hover: #0891b2;
    --container-bg: #ffffff;
    --btn-bg: #06b6d4;
}

body { font-family: 'Comic Sans MS', cursive, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s; }
header { background-color: var(--header-bg); color: white; padding: 20px; text-align: center; border-bottom: 4px solid var(--heading-color); transition: 0.3s; }
nav { background-color: var(--nav-bg); padding: 10px; text-align: center; transition: 0.3s; }
nav a { color: white; text-decoration: none; padding: 10px 15px; font-weight: bold; font-size: 16px; transition: 0.2s; display: inline-block; }
nav a:hover { background-color: var(--nav-hover); border-radius: 10px; color: #020617; }
.container { max-width: 800px; margin: 20px auto; background: var(--container-bg); padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(64, 224, 208, 0.2); transition: 0.3s; }
h1, h2, h3 { color: var(--heading-color); }
.code-box { background-color: #000; color: #40e0d0; padding: 15px; border-radius: 8px; font-family: monospace; overflow-x: auto; border: 1px solid #333; }
.btn { background-color: var(--btn-bg); color: white; border: none; padding: 10px 20px; font-size: 18px; border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.btn:hover { background-color: var(--heading-color); color: #020617; }

/* Theme Toggle Button */
#theme-btn { background-color: #1e293b; color: #40e0d0; border: 1px solid #40e0d0; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; margin-left: 15px;}
[data-theme="light"] #theme-btn { background-color: #e2e8f0; color: #0f172a; border: 1px solid #0f172a; }

/* Quiz & Editor Styles */
.quiz-result { font-weight: bold; font-size: 20px; margin-top: 15px; }
.editor-box { width: 48%; height: 100px; background: #000; color: #40e0d0; padding: 10px; font-family: monospace; border: 1px solid #333; border-radius: 5px; box-sizing: border-box;}
[data-theme="light"] .editor-box { background: #f4f4f4; color: #d63384; border: 1px solid #ccc; }