/* Dark Mode System */

body {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Toggle Button */

.theme-toggle-container {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
}

#themeToggleBtn {
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

/* LIGHT THEME */

body.light-theme {
    background: #f4f4f4;
    color: #111;
}

body.light-theme .calculator,
body.light-theme .input-group,
body.light-theme .app-container {
    background: #ffffff;
    color: #111;
}

/* DARK THEME */

body.dark-theme {
    background: #121212;
    color: #f5f5f5;
}

body.dark-theme .calculator,
body.dark-theme .input-group,
body.dark-theme .app-container {
    background: #1e1e1e;
    color: #f5f5f5;
}

body.dark-theme input,
body.dark-theme select,
body.dark-theme button {
    background: #2a2a2a;
    color: #ffffff;
    border: 1px solid #555;
}

body.dark-theme canvas {
    background: transparent;
}

body.dark-theme .nav-bar,
body.dark-theme .other-apps-bar,
body.dark-theme .footer {
    background: #1a1a1a;
}

body.dark-theme a {
    color: #8ecbff;
}

body.dark-theme #themeToggleBtn {
    background: #2a2a2a;
    color: #fff;
}

body.light-theme #themeToggleBtn {
    background: #ececec;
    color: #111;
}

/* Top Controls */

.top-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

#languageToggleBtn {
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

body.dark-theme #languageToggleBtn {
    background: #2a2a2a;
    color: #fff;
}

body.light-theme #languageToggleBtn {
    background: #ececec;
    color: #111;
}

/* Result Buttons */

.result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.result-actions button {
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* Tank Option */

.tank-options {
    margin: 12px 0;
}