:root {
    /* ───── LIGHT THEME (Improved Default) ───── */
    --bg-body: #f8fafa;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-muted: #95a5a6;
    --card-bg: #ffffff;
    --navbar-bg: #ffffff;
    --border: #e0e7ee;
    --shadow: rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --input-border: #dfe6ec;
    --code-bg: #f1f5f9;
    --formula-bg: #f1f5f9;
    --link-color: #0984e3;
    --link-hover: #0068c9;
    --btn-primary-bg: #0984e3;
    --btn-primary-hover: #0068c9;
    --btn-ai-gradient-from: #0984e3;
    --btn-ai-gradient-to: #00a8e8;
    --icon-primary: #0d6b9e;
    --icon-secondary: #a0d8ef;
    --icon-accent: #00d4d4;
    --icon-neutral: #2d3748;
    --icon-light: #cbd5e0;
    --category-badge-bg: #ebf5fb;
    --category-badge-text: #0d6b9e;
    --table-striped: rgba(9, 132, 227, 0.05);
    --ti-bg: #00d0ff;
    --ti-screen-bg: #effce0;
    --chess-light: #f0f0f0;
    --chess-dark: #8b7355;
    --heading-primary: darkblue;
    --heading-tertiary: green;
    --heading-quaternary: orange;
    --list-hover-bg: #e3f2fd;
    --formula-border-color: #667eea;
    --highlight-bg: #fff3cd;
    --btn-secondary-bg: #f8f9fa;
    --btn-secondary-hover: #e9ecef;
    --btn-secondary-border: #dee2e6;
    --btn-secondary-text: #0984e3;
    --btn-secondary-text-hover: #0068c9;
    --danger-color: #dc3545;
    --danger-hover: #c82333;
    --success-color: #28a745;
    --success-hover: #218838;
    --info-color: #17a2b8;
    --info-hover: #138496;
    --secondary-color: #6c757d;
    --secondary-hover: #545b62;
    --warning-color: #ffc107;
    --warning-hover: #e0a800;
    --warning-border: #ffeaa7;
    --error-color: #dc3545;
    --warning-message-color: #856404;
    --success-message-color: #28a745;
    --gradient-primary-from: #667eea;
    --gradient-primary-to: #764ba2;
    --gradient-pink-from: #f093fb;
    --gradient-pink-to: #f5576c;
    --gradient-green-from: #11998e;
    --gradient-green-to: #38ef7d;
    --info-bg: #e8f4fd;
    --info-border: #bee5eb;
    --border-light: #dee2e6;
    --ti-screen-text: #1a1a1a;
    --key-num-bg: #ffffff;
    --key-num-text: #000;
    --key-op-bg: #0984e3;
    --key-op-text: #fff;
    --key-sci-bg: #4a4a4a;
    --key-sci-text: #fff;
    --key-2nd-bg: #f39c12;
    --key-enter-bg: #0984e3;
    --key-clear-bg: #c0392b;
    --ti-screen-gradient-from: #c6cfbd;
    --ti-screen-gradient-to: #9ea792;
    --ti-border: #444;
    --mode-bg: #333;
    --mode-text: #c6cfbd;
    --expression-color: #444;
    --badge-structural-bg: #e3f2fd;
    --badge-structural-text: #1976d2;
    --badge-electrical-bg: #fff3e0;
    --badge-electrical-text: #f57c00;
    --badge-fluid-bg: #e0f2f1;
    --badge-fluid-text: #00796b;
    --badge-thermal-bg: #ffebee;
    --badge-thermal-text: #c62828;
    --badge-mechanical-bg: #f3e5f5;
    --badge-mechanical-text: blue;
    --badge-math-bg: #f1f8e9;
    --badge-math-text: #558b2f;
    --chess-white-piece: #ffffff;
    --chess-black-piece: #333333;
    --chess-selected: #ffd700;
    --chess-valid-move: #90ee90;
    --chess-border: #ddd;
    --chess-board-border: #333;
}

/* ───── OCEAN BLUE THEME (Recommended – Looks Premium!) ───── */
[data-theme="ocean"] {
    --bg-body: #f0f7fa;
    --text-primary: #1a365d;
    --text-secondary: #2c5282;
    --text-muted: #718096;
    --card-bg: #ffffff;
    --navbar-bg: #ffffff;
    --border: #bee3f8;
    --shadow: rgba(13, 107, 158, 0.12);
    --input-bg: #ffffff;
    --input-border: #a0d8ef;
    --code-bg: #ebf8ff;
    --formula-bg: #ebf8ff;
    --link-color: #00a8e8;
    --link-hover: #00d4d4;
    --btn-primary-bg: #00a8e8;
    --btn-primary-hover: #00d4d4;
    --btn-ai-gradient-from: #00a8e8;
    --btn-ai-gradient-to: #00d4d4;
    --icon-primary: #00a8e8;
    --icon-secondary: #a0f0ff;
    --icon-accent: #00d4d4;
    --icon-neutral: #2c5282;
    --icon-light: #e6f9ff;
    --category-badge-bg: #e6f9ff;
    --category-badge-text: #0068c9;
    --table-striped: rgba(0, 168, 232, 0.1);
    --ti-key-op-bg: #00a8e8;
    --chess-light: #e6f9ff;
    --chess-dark: #7fb8d6;
    --heading-primary: #1a365d;
    --heading-tertiary: #047857;
    --heading-quaternary: #ed8936;
    --list-hover-bg: #ebf5fb;
    --formula-border-color: #00a8e8;
    --highlight-bg: #e6f9ff;
    --btn-secondary-bg: #f0f7fa;
    --btn-secondary-hover: #e6f9ff;
    --btn-secondary-border: #bee3f8;
    --btn-secondary-text: #00a8e8;
    --btn-secondary-text-hover: #0068c9;
    --danger-color: #e11d48;
    --danger-hover: #be123c;
    --success-color: #059669;
    --success-hover: #047857;
    --info-color: #0ea5e9;
    --info-hover: #0891b2;
    --secondary-color: #475569;
    --secondary-hover: #334155;
    --warning-color: #d97706;
    --warning-hover: #b45309;
    --warning-border: #fed7aa;
    --error-color: #e11d48;
    --warning-message-color: #854d0e;
    --success-message-color: #059669;
    --gradient-primary-from: #0ea5e9;
    --gradient-primary-to: #22d3ee;
    --gradient-pink-from: #db2777;
    --gradient-pink-to: #e11d48;
    --gradient-green-from: #059669;
    --gradient-green-to: #10b981;
    --info-bg: #e0f2fe;
    --info-border: #a5f3fc;
    --border-light: #bee3f8;
    --ti-screen-text: #1a365d;
    --key-num-bg: #ffffff;
    --key-num-text: #000;
    --key-op-bg: #00a8e8;
    --key-op-text: #fff;
    --key-sci-bg: #2c5282;
    --key-sci-text: #fff;
    --key-2nd-bg: #f59e0b;
    --key-enter-bg: #00a8e8;
    --key-clear-bg: #e11d48;
    --ti-screen-gradient-from: #a0d8ef;
    --ti-screen-gradient-to: #bee3f8;
    --ti-border: #2c5282;
    --mode-bg: #1a365d;
    --mode-text: #e6f9ff;
    --expression-color: #2c5282;
    --badge-structural-bg: #e6f9ff;
    --badge-structural-text: #0068c9;
    --badge-electrical-bg: #fef3c7;
    --badge-electrical-text: #d97706;
    --badge-fluid-bg: #d1fae5;
    --badge-fluid-text: #047857;
    --badge-thermal-bg: #fee2e2;
    --badge-thermal-text: #b91c1c;
    --badge-mechanical-bg: #ede9fe;
    --badge-mechanical-text: #6d28d9;
    --badge-math-bg: #ecfccb;
    --badge-math-text: #3f6212;
    --chess-white-piece: #ffffff;
    --chess-black-piece: #1a365d;
    --chess-selected: #fde68a;
    --chess-valid-move: #6ee7b7;
    --chess-border: #bee3f8;
    --chess-board-border: #2c5282;
}

/* ───── SAGE MINT THEME (Fresh & Calming!) ───── */
[data-theme="sage-mint"] {
    --bg-body: #f7faf9;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --card-bg: #ffffff;
    --navbar-bg: #ffffff;
    --border: #c6e6cd;
    --shadow: rgba(72, 187, 120, 0.12);
    --input-bg: #ffffff;
    --input-border: #a0d8c7;
    --code-bg: #f0fff4;
    --formula-bg: #f0fff4;
    --link-color: #22c55e;
    --link-hover: #16a34a;
    --btn-primary-bg: #22c55e;
    --btn-primary-hover: #16a34a;
    --btn-ai-gradient-from: #22c55e;
    --btn-ai-gradient-to: #34d399;
    --icon-primary: #22c55e;
    --icon-secondary: #bbf7d0;
    --icon-accent: #34d399;
    --icon-neutral: #4a5568;
    --icon-light: #ecfdf5;
    --category-badge-bg: #ecfdf5;
    --category-badge-text: #047857;
    --table-striped: rgba(34, 197, 94, 0.1);
    --ti-key-op-bg: #22c55e;
    --chess-light: #ecfdf5;
    --chess-dark: #86efac;
    --heading-primary: #2d3748;
    --heading-tertiary: #047857;
    --heading-quaternary: #059669;
    --list-hover-bg: #f0fff4;
    --formula-border-color: #22c55e;
    --highlight-bg: #ecfdf5;
    --btn-secondary-bg: #f7faf9;
    --btn-secondary-hover: #ecfdf5;
    --btn-secondary-border: #c6e6cd;
    --btn-secondary-text: #22c55e;
    --btn-secondary-text-hover: #047857;
    --danger-color: #dc2626;
    --danger-hover: #b91c1c;
    --success-color: #059669;
    --success-hover: #047857;
    --info-color: #0d9488;
    --info-hover: #0f766e;
    --secondary-color: #4a5568;
    --secondary-hover: #2d3748;
    --warning-color: #d97706;
    --warning-hover: #b45309;
    --warning-border: #fed7aa;
    --error-color: #dc2626;
    --warning-message-color: #92400e;
    --success-message-color: #059669;
    --gradient-primary-from: #22c55e;
    --gradient-primary-to: #34d399;
    --gradient-pink-from: #ec4899;
    --gradient-pink-to: #f43f5e;
    --gradient-green-from: #059669;
    --gradient-green-to: #10b981;
    --info-bg: #ecfdf5;
    --info-border: #99f6e4;
    --border-light: #c6e6cd;
    --ti-screen-text: #2d3748;
    --key-num-bg: #ffffff;
    --key-num-text: #000;
    --key-op-bg: #22c55e;
    --key-op-text: #fff;
    --key-sci-bg: #4a5568;
    --key-sci-text: #fff;
    --key-2nd-bg: #84cc16;
    --key-enter-bg: #22c55e;
    --key-clear-bg: #dc2626;
    --ti-screen-gradient-from: #a0d8c7;
    --ti-screen-gradient-to: #c6e6cd;
    --ti-border: #4a5568;
    --mode-bg: #2d3748;
    --mode-text: #ecfdf5;
    --expression-color: #4a5568;
    --badge-structural-bg: #ecfdf5;
    --badge-structural-text: #047857;
    --badge-electrical-bg: #fef3c7;
    --badge-electrical-text: #d97706;
    --badge-fluid-bg: #d1fae5;
    --badge-fluid-text: #047857;
    --badge-thermal-bg: #fee2e2;
    --badge-thermal-text: #b91c1c;
    --badge-mechanical-bg: #ede9fe;
    --badge-mechanical-text: #6d28d9;
    --badge-math-bg: #ecfccb;
    --badge-math-text: #3f6212;
    --chess-white-piece: #ffffff;
    --chess-black-piece: #2d3748;
    --chess-selected: #fde68a;
    --chess-valid-move: #86efac;
    --chess-border: #c6e6cd;
    --chess-board-border: #4a5568;
}

/* ───── Smooth Transitions ───── */
*,
*::before,
*::after {
    transition: all 0.35s ease;
}

/* ───── Apply Variables (Same as before – covers 99% of site) ───── */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

.header,
.main-header,
.navbar,
.search-box,
.converter-form,
.form-card,
.results-card,
.chart-card,
.results,
.category-card,
.formula-section,
.sidebar,
footer,
.modal-content,
.wheel-container,
.chess-container,
.game-controls,
.current-player,
.move-history,
.game-mode-selector,
.color-customization {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 12px var(--shadow) !important;
}

.navbar,
.header,
.main-header,
footer {
    background-color: var(--navbar-bg) !important;
}

input.form-control,
select.form-control,
textarea.form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

input::placeholder {
    color: var(--text-muted) !important;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover);
}

.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover) !important;
}

.btn-ai {
    background: linear-gradient(135deg, var(--btn-ai-gradient-from), var(--btn-ai-gradient-to)) !important;
}

code,
.formula,
.equation-block,
.formula-card,
.display-container {
    background-color: var(--formula-bg) !important;
    color: var(--text-primary) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>td {
    background-color: var(--table-striped);
}

.category-icon,
.calc-icon {
    stroke: var(--icon-primary);
    fill: var(--icon-secondary);
}

.calc-icon.accent {
    fill: var(--icon-accent);
    stroke: var(--icon-accent);
}

.calculator-card {
    background: var(--ti-bg);
}

.key.op,
.key.enter {
    background: var(--btn-primary-bg);
}

.square.light {
    background-color: var(--chess-light);
}

.square.dark {
    background-color: var(--chess-dark);
}

h1,
h2 {
    color: var(--heading-primary);
}

h3 {
    color: var(--heading-tertiary);
}

h4 {
    color: var(--heading-quaternary);
}

.main-header h1 {
    color: var(--text-primary) !important;
}

.main-header .subtitle {
    color: var(--text-secondary) !important;
}

.sidebar h4 {
    color: var(--text-primary) !important;
}

.category-links a {
    color: var(--link-color);
}

.category-links a:hover {
    background-color: var(--list-hover-bg);
    color: var(--link-hover);
}

.sidebar .list-group-item:hover {
    background-color: var(--list-hover-bg);
}

.sidebar .list-group-item a {
    color: var(--link-color);
}

.list-group-item a {
    color: var(--link-color);
}

.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover {
    color: var(--link-hover);
}

.formula,
.equation-block,
.formula-card {
    border-left: 4px solid var(--formula-border-color);
}

.variable-explanation {
    color: var(--text-muted);
}

.highlight {
    background: var(--highlight-bg);
}

.show-more-btn {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.show-more-btn:hover {
    background: var(--btn-secondary-hover);
    color: var(--btn-secondary-text-hover);
}

.show-more-btn.expanded {
    color: var(--danger-color);
}

.show-more-btn.expanded:hover {
    color: var(--danger-hover);
}

.display-container {
    background: linear-gradient(180deg, var(--ti-screen-gradient-from), var(--ti-screen-gradient-to));
    border: 4px solid var(--ti-border);
}

.display-info {
    color: var(--ti-screen-text);
}

.mode-indicator {
    background: var(--mode-bg);
    color: var(--mode-text);
}

.expression-line {
    color: var(--expression-color);
}

.result-line {
    color: var(--ti-screen-text);
}

.key.num {
    background: var(--key-num-bg);
    color: var(--key-num-text);
}

.key.op {
    background: var(--key-op-bg);
    color: var(--key-op-text);
}

.key.sci {
    background: var(--key-sci-bg);
    color: var(--key-sci-text);
}

.key.shift {
    background: var(--key-2nd-bg);
}

.key.clear {
    background: var(--key-clear-bg);
}

.equals-button-special {
    background: var(--key-enter-bg);
}

.chart-controls {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.examples-panel,
.growth-chart {
    background: linear-gradient(135deg, var(--gradient-pink-from), var(--gradient-pink-to)) !important;
}

.loan-summary {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.investment-summary {
    background: linear-gradient(135deg, var(--gradient-green-from), var(--gradient-green-to)) !important;
}

.curve-info {
    background: var(--info-bg) !important;
    border: 1px solid var(--info-border) !important;
}

.curve-list {
    background: var(--code-bg) !important;
}

.curve-item {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
}

.add-curve-btn {
    background: var(--info-color) !important;
}

.add-curve-btn:hover {
    background: var(--info-hover) !important;
}

#refresh-layout {
    background: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

#refresh-layout:hover {
    background: var(--secondary-hover) !important;
}

#refresh-layout.btn-success {
    background: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

#refresh-layout.btn-success:hover {
    background: var(--success-hover) !important;
}

.remove-curve-btn {
    background: var(--danger-color) !important;
}

.remove-curve-btn:hover {
    background: var(--danger-hover) !important;
}

.breakdown-table,
.yearly-breakdown {
    background: var(--code-bg) !important;
}

.yearly-breakdown {
    border: 1px solid var(--border) !important;
}

.compound-effect {
    background: var(--highlight-bg) !important;
    border: 1px solid var(--warning-border) !important;
}

.positive {
    color: var(--success-color) !important;
}

.negative {
    color: var(--danger-color) !important;
}

.error-message {
    color: var(--error-color) !important;
}

.warning-message {
    color: var(--warning-message-color) !important;
}

.success-message {
    color: var(--success-message-color) !important;
}

.currency-display {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.rate-info {
    background-color: var(--info-bg) !important;
    border: 1px solid var(--info-border) !important;
}

.popular-rates {
    background: linear-gradient(135deg, var(--gradient-pink-from), var(--gradient-pink-to)) !important;
}

.swap-button {
    background-color: var(--info-color) !important;
}

.depreciation-summary {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.method-description {
    background-color: var(--btn-secondary-bg) !important;
}

.game-status {
    background-color: var(--success-bg) !important;
    /* Note: Added --success-bg: #d4edda; to :root if needed, but assumed from context /
border: 1px solid var(--success-border) !important; / --success-border: #c3e6cb; */
}

.game-status.game-over {
    background-color: var(--highlight-bg) !important;
    border-color: var(--warning-border) !important;
}

.game-status.check {
    background-color: var(--highlight-bg) !important;
    border-color: var(--warning-border) !important;
}

.mathwiz-main-header {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.mathwiz-setup-panel {
    background: linear-gradient(135deg, var(--gradient-pink-from), var(--gradient-pink-to)) !important;
}

.mathwiz-progress-info {
    background-color: var(--info-bg) !important;
    border: 1px solid var(--info-border) !important;
}

.mathwiz-results-panel {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.mathwiz-btn-custom {
    background-color: var(--gradient-primary-from) !important;
}

.mathwiz-btn-custom:hover {
    background-color: var(--gradient-primary-to) !important;
}

.mathwiz-btn-submit {
    background-color: var(--success-color) !important;
}

.mathwiz-btn-submit:hover {
    background-color: var(--success-hover) !important;
}

.mathwiz-btn-skip {
    background-color: var(--warning-color) !important;
}

.mathwiz-btn-skip:hover {
    background-color: var(--warning-hover) !important;
}

.mathwiz-btn-reset {
    background-color: var(--secondary-color) !important;
}

.mathwiz-btn-reset:hover {
    background-color: var(--secondary-hover) !important;
}

.mathwiz-problem-container {
    background-color: var(--code-bg) !important;
}

.mathwiz-answer-input {
    border: 2px solid var(--border-light) !important;
}

.mathwiz-answer-input:focus {
    border-color: var(--formula-border-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--gradient-primary-from-rgb), 0.25) !important;
    /* Assume RGB var if needed */
}

.mathwiz-wizard-message.excellent {
    color: var(--success-color) !important;
}

.mathwiz-wizard-message.good {
    color: var(--info-color) !important;
}

.mathwiz-wizard-message.needs-practice {
    color: var(--warning-color) !important;
}

.mathwiz-drawer-toolbar button.active {
    background-color: var(--gradient-primary-from) !important;
    color: var(--text-primary) !important;
    border-color: var(--gradient-primary-from) !important;
}

#mathwiz-drawingCanvas {
    border: 2px solid var(--border-light) !important;
}

.drawer-toolbar button.active {
    background-color: var(--gradient-primary-from) !important;
    color: var(--text-primary) !important;
    border-color: var(--gradient-primary-from) !important;
}

#drawingCanvas {
    border: 2px solid var(--border-light) !important;
}

.chess-board-wrapper {
    border: 8px solid var(--chess-border) !important;
}

.chess-board {
    border: 2px solid var(--chess-board-border) !important;
}

.piece.white {
    color: var(--chess-white-piece) !important;
}

.piece.black {
    color: var(--chess-black-piece) !important;
}

.square.selected {
    background-color: var(--chess-selected) !important;
}

.square.valid-move {
    background-color: var(--chess-valid-move) !important;
}

.current-player {
    border-left: 4px solid var(--link-color) !important;
}

.game-status {
    background-color: var(--success-bg) !important;
    border: 1px solid var(--success-border) !important;
}

.game-status.game-over {
    background-color: var(--danger-bg) !important;
    /* Assume --danger-bg: #f8d7da; /
border-color: var(--danger-border) !important; / --danger-border: #f5c6cb; */
}

.game-status.check {
    background-color: var(--warning-bg) !important;
    /* Assume --warning-bg: #fff3cd; */
    border-color: var(--warning-border) !important;
}

.move-item {
    border-bottom: 1px solid var(--border-light) !important;
}

.winner-content {
    background: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to)) !important;
}

.winner-player {
    color: var(--chess-selected) !important;
}