:root {
    --base-bg-color: #e0e5ec;
    --font-color: #555;
    --shadow-light: rgba(255, 255, 255, 0.9);
    --shadow-dark: rgba(163, 177, 198, 0.6);
    --shadow-light-inset: rgba(255, 255, 255, 0.5); 
    --expense-color: #cc3300;
    --income-color: #949e34;
    --submit-color: #595959;
}

html, body {
    height: 100%; margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--base-bg-color);
    color: var(--font-color);
}

.container {
    width: 100%; max-width: 420px; height: 100dvh;
    display: flex; flex-direction: column;
    padding: 15px; padding-top: max(30px, env(safe-area-inset-top));
    box-sizing: border-box; overflow-y: auto; margin: auto;
}

.calculator {
    background-color: var(--base-bg-color);
    border-radius: 30px; padding: 20px;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    width: 100%; box-sizing: border-box; position: relative;
}

.calculator-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "controls controls controls controls"
        "display  display  display  display"
        "notes    notes    notes    tax"
        "c        percent  multiply divide"
        "seven    eight    nine     plus"
        "four     five     six      minus"
        "one      two      three    equals"
        "dot      zero     backspace equals";
}

/* --- CONTROLS --- */
.control-row { grid-area: controls; display: flex; gap: 10px; height: 60px; }

.icon-button { 
    width: 60px; height: 60px; border-radius: 10px; border: none; background: var(--base-bg-color); 
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}
.icon-button:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); }

/* Category Selector */
.custom-select-container { flex-grow: 1; position: relative; }
.select-selected { 
    height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; 
    background: var(--base-bg-color); border-radius: 10px; font-weight: 700; font-size: 14px; 
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px var(--shadow-light-inset); 
    cursor: pointer; 
}
.select-items { 
    position: absolute; top: 70px; width: 120%; left: -10%; 
    background: var(--base-bg-color); border-radius: 15px; 
    z-index: 99; box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light); 
    padding: 10px; max-height: none; overflow: visible; 
}
.select-item { 
    padding: 12px; cursor: pointer; border-radius: 8px; margin-bottom: 5px; 
    font-weight: 600; text-align: center; color: var(--font-color); white-space: normal; line-height: 1.2;
}
.select-item:hover { background: #d1d9e6; }
.select-hide { display: none; }

/* Date Picker */
.date-picker-wrapper { 
    width: 60px; height: 60px; border-radius: 10px; background: var(--base-bg-color); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); 
    cursor: pointer; flex-shrink: 0; position: relative;
}
.date-day { font-size: 18px; font-weight: 800; line-height: 1; pointer-events: none; }
.date-month { font-size: 10px; text-transform: uppercase; line-height: 1; margin-top: 2px; pointer-events: none; }
.date-picker-wrapper input { position: absolute; opacity: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* --- DISPLAY AREA (Updated for Currency Dropdown) --- */
.display-area { 
    grid-area: display; display: flex; align-items: center; 
    background: #EBE1D6; border-radius: 15px; padding: 10px 15px; 
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); 
    position: relative; /* Needed for dropdown positioning */
}

/* NEW: Currency Wrapper */
.currency-wrapper { position: relative; margin-right: 10px; }

.currency-display { 
    font-size: 18px; font-weight: 600; opacity: 0.7; cursor: pointer; 
    padding: 5px 10px; border-radius: 8px; transition: background 0.2s;
}
.currency-display:hover { background: rgba(0,0,0,0.05); }

/* NEW: Currency Dropdown (Mimics Category) */
.currency-dropdown {
    position: absolute; top: 40px; left: 0; width: 80px; 
    background: var(--base-bg-color); border-radius: 10px;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    padding: 5px; z-index: 100;
}
.currency-option {
    padding: 8px; text-align: center; font-weight: 600; font-size: 14px;
    border-radius: 6px; cursor: pointer; color: var(--font-color);
}
.currency-option:hover { background: #d1d9e6; }

.main-display { font-size: 36px; font-weight: 700; text-align: right; width: 100%; overflow: hidden; white-space: nowrap; }
.notes-area { grid-area: notes; background: #EBE1D6; border-radius: 10px; box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); display: flex; align-items: center;}
#notes-input { width: 100%; border: none; background: transparent; padding: 12px; font-size: 14px; outline: none; }

/* Tax Toggle */
.tax-toggle-area { grid-area: tax; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.tax-toggle-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; }
.tax-label { font-size: 10px; font-weight: 700; color: #8898aa; margin-bottom: 5px; }
.tax-switch { width: 44px; height: 24px; background: var(--base-bg-color); border-radius: 12px; position: relative; box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); }
.tax-knob { width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); transition: all 0.3s; }
.tax-toggle-container.active .tax-switch { background: #003366; }
.tax-toggle-container.active .tax-knob { transform: translateX(20px); }
.tax-toggle-container.active .tax-label { color: #003366; }

/* Keypad */
.keypad-key {
    height: 55px; border-radius: 15px; border: none; background: var(--base-bg-color);
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    font-size: 20px; color: var(--font-color); cursor: pointer;
}
.keypad-key:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); font-size: 19px; }
.keypad-key.flat { box-shadow: none; background: transparent; }
.keypad-key.flat:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); }

.keypad-key[data-value="C"] { grid-area: c; } .keypad-key[data-value="%"] { grid-area: percent; }
.keypad-key[data-value="×"] { grid-area: multiply; } .keypad-key[data-value="÷"] { grid-area: divide; }
.keypad-key[data-value="7"] { grid-area: seven; } .keypad-key[data-value="8"] { grid-area: eight; }
.keypad-key[data-value="9"] { grid-area: nine; } .keypad-key[data-value="+"] { grid-area: plus; }
.keypad-key[data-value="4"] { grid-area: four; } .keypad-key[data-value="5"] { grid-area: five; }
.keypad-key[data-value="6"] { grid-area: six; } .keypad-key[data-value="-"] { grid-area: minus; }
.keypad-key[data-value="1"] { grid-area: one; } .keypad-key[data-value="2"] { grid-area: two; }
.keypad-key[data-value="3"] { grid-area: three; } .keypad-key[data-value="="] { grid-area: equals; height: auto; }
.keypad-key[data-value="0"] { grid-area: zero; } .keypad-key[data-value="."] { grid-area: dot; }
.keypad-key[data-value="⌫"] { grid-area: backspace; }

/* Action Bar */
.action-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 20px; }
.action-btn { padding: 15px; border-radius: 12px; border: none; font-weight: 600; color: white; box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); cursor: pointer; }
.action-btn:active { transform: scale(0.96); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3); }
#expense-btn { background: var(--expense-color); } 
#income-btn { background: var(--income-color); } 
#submit-btn { background: var(--submit-color); border-radius: 12px; border: none; font-weight: 600; color: white; box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); cursor: pointer; font-size: 16px; }
#submit-btn:active { transform: scale(0.96); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3); }
.active-mode { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.2); transform: scale(0.98); }

.expense-glow { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset), inset 0 0 6px 1px var(--expense-color); }
.income-glow { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset), inset 0 0 6px 1px var(--income-color); }