:root {
    --bg-color: #f4f7f6;
    --text-color: #333;
    --container-bg: white;
    --header-color: #2c3e50;
    --label-color: #333;
    --input-border: #ccc;
    --result-bg: #eef2f7;
    --result-border: #3498db;
    --result-text: #2980b9;
    --table-header-bg: #f8f9fa;
    --saving-color: green;
    --loss-color: red;
    --shadow-color: rgba(0,0,0,0.1);
}

.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --container-bg: #2d2d2d;
    --header-color: #ffffff;
    --label-color: #f0f0f0;
    --input-border: #555;
    --result-bg: #3a3a3a;
    --result-border: #4a90e2;
    --result-text: #7db4ff;
    --table-header-bg: #333;
    --saving-color: #4caf50;
    --loss-color: #f44336;
    --shadow-color: rgba(255,255,255,0.1);
}

body { 
    font-family: sans-serif; 
    margin: 20px; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    transition: background-color 0.3s, color 0.3s;
}
.container { 
    max-width: 800px; 
    margin: auto; 
    background: var(--container-bg); 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px var(--shadow-color); 
    transition: background-color 0.3s, color 0.3s;
}
h2 { 
    color: var(--header-color); 
    text-align: center; 
    transition: color 0.3s;
}
.input-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-bottom: 20px; 
}
.input-group { 
    display: flex; 
    flex-direction: column; 
}
label { 
    font-size: 0.9rem; 
    margin-bottom: 5px; 
    font-weight: bold;
    color: var(--label-color);
}
input { 
    padding: 8px; 
    border: 1px solid var(--input-border); 
    border-radius: 4px; 
    font-size: 1rem;
    background: var(--container-bg);
    color: var(--text-color);
}
.result-box { 
    background: var(--result-bg); 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
    text-align: center; 
    border-left: 5px solid var(--result-border); 
}
.result-box b { 
    color: var(--result-text); 
    font-size: 1.2rem; 
}
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px; 
}
th, td { 
    border: 1px solid var(--input-border); 
    padding: 12px; 
    text-align: center; 
}
th { 
    background-color: var(--table-header-bg); 
}
.saving { 
    color: var(--saving-color); 
    font-weight: bold; 
}
.loss { 
    color: var(--loss-color); 
    font-weight: bold; 
}

.buttons {
  display: flex;
  flex-direction: row;
}

.header {
  display: flex;
  flex-direction: column-reverse;
}

.button-toggle {
    top: 20px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    transition: transform 0.3s ease;
    background: var(--container-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    padding: 10px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.button-toggle:hover {
    transform: scale(1.1);
}

.button-toggle svg {
    width: 100%;
    height: 100%;
    fill: var(--text-color);
}