:root {
    /* --- DARK THEME VARIABLES (Default) --- */
    --box-bg: #2a2a40;
    --text-main: #eeeeee;
    --text-dim: #aaaaaa;
    --accent-color: #8e9eeb;
    --input-bg: #2a2a40;
    --scroll-thumb: #4a4a60;
    --modal-bg: #252535;
    --border-color: #3a3a50;
    --btn-hover: rgba(255,255,255,0.1);
    --shadow-color: rgba(0,0,0,0.2);
    --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Background Gradient */
    --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

[data-theme="light"] {
    /* --- LIGHT THEME VARIABLES --- */
    /* CHANGED: Pure white -> Soft off-white/gray */
    --box-bg: #e8e8e8;
    --text-main: #2d3436;
    --text-dim: #555d61; /* Slightly darker to match new bg */
    --accent-color: #667eea;
    --input-bg: transparent;
    --scroll-thumb: #a0aeb5;
    /* CHANGED: Pure white -> Soft off-white */
    --modal-bg: #e8e8e8;
    /* CHANGED: Darker border for better definition */
    --border-color: #ced6e0;
    --btn-hover: rgba(0,0,0,0.08);
    --shadow-color: rgba(0,0,0,0.1);
    
    /* Light Background: Slightly darker/muted to reduce glare */
    --bg-gradient: linear-gradient(135deg, #e2e6ea 0%, #c8d3e0 100%);
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0; width: 100%; 
    /* Use 100dvh to handle mobile browser bars correctly */
    min-height: 100dvh; 
    background: var(--bg-gradient);
    font-family: var(--font-stack);
    color: var(--text-main);
    overflow: hidden; /* We scroll inside #history-box, not the body */
    transition: background 0.5s ease, color 0.3s ease;
}

/* Global Utility */
.hidden { display: none !important; }

/* --- GLOBAL ANIMATIONS --- */
@keyframes hueRotate {
    0% { color: #ff0000; filter: drop-shadow(0 0 5px #ff0000); }
    20% { color: #ff00d4; filter: drop-shadow(0 0 5px #ff00d4); }
    40% { color: #0011ff; filter: drop-shadow(0 0 5px #0011ff); }
    60% { color: #00eeff; filter: drop-shadow(0 0 5px #00eeff); }
    80% { color: #00ff00; filter: drop-shadow(0 0 5px #00ff00); }
    100% { color: #ff0000; filter: drop-shadow(0 0 5px #ff0000); }
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@keyframes dance {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(3deg); }
    75% { transform: scale(1.1) rotate(-3deg); }
}

@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Restored Complex Animation for Input */
@keyframes popSuccess {
    0% { transform: scale(1) rotate(0deg); border: 2px solid transparent; }
    40% { transform: scale(1.05) rotate(-2deg); border: 2px solid #4caf50; box-shadow: 0 0 20px rgba(76, 175, 80, 0.3); }
    100% { transform: scale(1) rotate(0deg); border: 2px solid transparent; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

.dancing { animation: dance 0.5s ease-in-out; }