:root {
    --primary: #00d36f;
    --primary-dark: #00b85e;
    --text: #001a33;
    --bg: #ffffff;
    --card-bg: #f8f9fa;
    --border: rgba(0,0,0,0.1);
}

.mres-container.dark-mode {
    --primary: #00d36f;
    --text: #e0e0e0;
    --bg: #001a33;
    --card-bg: #002b55;
    --border: rgba(255,255,255,0.15);
}

.mres-container {
    max-width: 680px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    transition: background 0.4s ease, color 0.4s ease;
}

.mres-card {
    background: var(--card-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transition: background 0.4s ease;
}

/* Le reste du CSS reste identique à la version précédente (inputs, button, results, etc.) */
.mres-title { font-size: 28px; margin: 0 0 8px; font-weight: 700; }
.mres-subtitle { font-size: 16px; opacity: 0.75; margin-bottom: 28px; }
.mres-form-group { margin-bottom: 24px; }
.mres-form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.mres-form-group input, .mres-form-group select {
    width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 16px; background: var(--bg); color: var(--text); transition: border 0.2s, background 0.2s;
}
.mres-form-group input:focus, .mres-form-group select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,211,111,0.15);
}
.mres-button {
    background: var(--primary); color: white; padding: 14px 28px; border: none; border-radius: 10px;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.25s; width: 100%;
}
.mres-button:hover { background: var(--primary-dark); }
.mres-results { margin-top: 32px; padding: 24px; background: rgba(0,211,111,0.08); border-radius: 12px; border: 1px solid rgba(0,211,111,0.15); }
.mres-toggle { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.mres-note { margin-top: 24px; font-size: 13px; opacity: 0.7; line-height: 1.5; }
.hidden { display: none !important; }

/* Responsive */
@media (max-width: 600px) { .mres-card { padding: 24px; } .mres-title { font-size: 24px; } }