/* --- Variables & Resets --- */
:root {
    --bg-color: #f9f9f9;
    --text-color: #333;
    --card-bg: #fff;
    --border-color: #e2e8f0;
    --accent-color: #6366f1;
    --heading-color: #1e293b;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    background: var(--bg-color);
    color: var(--text-color);
    margin: 0; padding: 0;
}

a { color: #0073aa; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Containers */
.container {
    max-width: 800px; margin: 20px auto; padding: 40px;     
    background: var(--card-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 8px; width: 90%; box-sizing: border-box;
}

.wide-container {
    max-width: 1200px; margin: 40px auto; padding: 0 20px;
    width: 100%; box-sizing: border-box;
}

/* Dark Mode Global */
body.dark-mode {
    --bg-color: #0f172a;
    --text-color: #e2e8f0;
    --card-bg: #1e293b;
    --border-color: #334155;
    --heading-color: #f8fafc;
}
body.dark-mode .container {
    background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: none;
}

/* Mobile Container Reset */
@media (max-width: 600px) {
    .container { width: 100%; margin-top: 0; padding: 0; box-shadow: none; border: none; border-radius: 0; }
    .wide-container { margin-top: 20px; padding: 0 20px; }
}