:root{--bg-color: linear-gradient(135deg, #e0f7fa 0%, #c8f7c5 100%);--calculator-bg: #ffffff;--calculator-border: #c5e1a5;--calculator-shadow: 0 15px 35px rgba(46, 125, 50, .15);--display-bg: #f1f8e9;--display-border: #c5e1a5;--display-shadow: 0 4px 20px rgba(183, 230, 183, .3);--display-text: #1b5e20;--display-secondary: #4caf50;--text-color: #2e7d32;--button-text: #1b5e20;--button-bg: #f1f8e9;--button-hover: #e8f5e9;--button-shadow: 0 4px 12px rgba(183, 230, 183, .4);--button-border: #c5e1a5;--button-active: 0 2px 5px rgba(129, 199, 132, .3);--operator-bg: linear-gradient(145deg, #4caf50, #2e7d32);--operator-hover: linear-gradient(145deg, #66bb6a, #388e3c);--operator-color: #ffffff;--operator-shadow: 0 4px 15px rgba(76, 175, 80, .3);--clear-bg: linear-gradient(145deg, #ef5350, #d32f2f);--clear-hover: linear-gradient(145deg, #f44336, #e53935);--clear-color: #ffffff;--clear-shadow: 0 4px 15px rgba(239, 83, 80, .3);--delete-bg: linear-gradient(145deg, #ff9800, #f57c00);--delete-hover: linear-gradient(145deg, #ffa726, #ff9800);--delete-color: #ffffff;--delete-shadow: 0 4px 15px rgba(255, 152, 0, .3);--equals-bg: linear-gradient(145deg, #43a047, #2e7d32);--equals-hover: linear-gradient(145deg, #4caf50, #388e3c);--equals-color: #ffffff;--equals-shadow: 0 4px 15px rgba(67, 160, 71, .4);--special-bg: linear-gradient(145deg, #66bb6a, #43a047);--special-hover: linear-gradient(145deg, #81c784, #66bb6a);--special-color: #ffffff;--special-shadow: 0 4px 15px rgba(102, 187, 106, .3);--active-shadow: 0 2px 8px rgba(46, 125, 50, .3)}.dark-mode{--bg-color: #0f0f1a;--calculator-bg: linear-gradient(145deg, #1a1b2e, #131325);--display-bg: #0a0a15;--display-border: rgba(80, 120, 255, .1);--display-shadow: 0 10px 30px rgba(0, 10, 40, .5);--text-color: #e0e0ff;--display-text: #00ffcc;--display-secondary: #80a0ff;--button-text: #b0b8ff;--button-bg: rgba(40, 45, 70, .6);--button-hover: rgba(60, 70, 110, .8);--button-shadow: 0 4px 15px rgba(0, 0, 0, .3);--button-border: rgba(100, 120, 255, .1);--button-active: 0 2px 5px rgba(0, 0, 0, .5);--operator-bg: linear-gradient(145deg, #3a5bc7, #2a4bb7);--operator-hover: linear-gradient(145deg, #4a6bd7, #3a5bc7);--operator-color: #ffffff;--clear-bg: linear-gradient(145deg, #ff416c, #ff4b2b);--clear-hover: linear-gradient(145deg, #ff4b73, #ff5533);--clear-color: #ffffff;--delete-bg: linear-gradient(145deg, #ff8a00, #ff6b00);--delete-hover: linear-gradient(145deg, #ff9500, #ff7500);--delete-color: #ffffff;--equals-bg: linear-gradient(145deg, #00b09b, #96c93d);--equals-hover: linear-gradient(145deg, #00c0a9, #a6d94d);--equals-color: #ffffff;--special-bg: linear-gradient(145deg, #6a11cb, #2575fc);--special-hover: linear-gradient(145deg, #7a1bdb, #3585ff);--special-color: #ffffff;--display-glow: 0 0 20px rgba(0, 255, 204, .2);--operator-glow: 0 0 15px rgba(58, 91, 199, .4);--equals-glow: 0 0 15px rgba(0, 176, 155, .4)}body{background:var(--bg-color);font-family:Segoe UI,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;transition:background .3s ease}.app{display:flex;justify-content:center;align-items:center;width:100%;padding:20px}.calculator{width:360px;margin:20px auto;background:var(--calculator-bg);padding:25px;border-radius:25px;box-shadow:0 20px 40px #0003;transition:all .3s ease}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h1{color:var(--text-color);margin:0;font-size:24px;font-weight:600}.header-controls{display:flex;gap:10px}.theme-toggle,.sound-toggle{background:var(--button-bg);border:none;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;box-shadow:3px 3px 6px var(--button-shadow),-3px -3px 6px #fff;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.theme-toggle:hover,.sound-toggle:hover{transform:scale(1.1)}.calc-display{background:var(--display-bg);border-radius:15px;padding:20px;margin-bottom:25px;text-align:right;box-shadow:inset 5px 5px 10px var(--display-shadow),inset -5px -5px 10px #fff;min-height:100px;display:flex;flex-direction:column;justify-content:flex-end;transition:all .3s ease}.expression{font-size:18px;color:var(--text-color);min-height:27px;margin-bottom:5px;opacity:.8;word-break:break-all;font-weight:400}.result{font-size:36px;font-weight:600;color:var(--text-color);word-break:break-all;min-height:45px;font-family:SF Mono,Roboto Mono,monospace}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.buttons button{height:65px;border:none;border-radius:16px;font-size:25px;background:var(--button-bg);color:var(--text-color);box-shadow:5px 5px 10px var(--button-shadow),-5px -5px 10px #fff;cursor:pointer;transition:all .2s ease;font-weight:500;position:relative;overflow:hidden}.buttons button:hover{transform:translateY(-2px);box-shadow:7px 7px 14px var(--button-shadow),-7px -7px 14px #fff}.buttons button:active{transform:translateY(1px);box-shadow:inset 5px 5px 10px var(--button-shadow),inset -5px -5px 10px #fff}.buttons button[value=C]{background:var(--clear-bg);color:var(--text-color);font-weight:700}.buttons button[value=√],.buttons button[value="%"]{background:var(--special-bg);color:var(--special-color);font-weight:700}.buttons button[value="/"],.buttons button[value="*"],.buttons button[value="-"],.buttons button[value="+"]{background:var(--operator-bg);color:var(--operator-color);font-weight:700}.buttons button[value=x]{background:var(--delete-bg);color:var(--delete-color);font-weight:700}.buttons button[value="="]{background:var(--equals-bg);color:#fff;font-weight:700}.dark-mode .theme-toggle,.dark-mode .sound-toggle{box-shadow:3px 3px 6px #0006,-3px -3px 6px #ffffff0d}.dark-mode .calculator{box-shadow:0 20px 40px #0006}.dark-mode .calc-display{box-shadow:inset 5px 5px 10px #0006,inset -5px -5px 10px #ffffff0d}.dark-mode .buttons button{box-shadow:5px 5px 10px #0006,-5px -5px 10px #ffffff0d}.dark-mode .buttons button:active{box-shadow:inset 5px 5px 10px #0006,inset -5px -5px 10px #ffffff0d}@media(max-width:400px){.calculator{width:320px;padding:20px}.buttons{gap:10px}.buttons button{height:60px;font-size:18px}.result{font-size:32px}.header h1{font-size:22px}.theme-toggle,.sound-toggle{width:36px;height:36px;font-size:16px}}@keyframes buttonPress{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.buttons button:active{animation:buttonPress .1s ease}