@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {font-family: 'Poppins', sans-serif;background: linear-gradient(135deg, #1f1c2c, #928dab);
min-height: 100vh;display: flex;align-items: center;justify-content: center;margin: 0;}
.glass-card {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(15px);border-radius: 20px;
padding: 25px;box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);width: 280px;}
.calc-heading {text-align: center;color: #000;text-shadow: 0 0 2px rgba(0,0,0,0.2);
font-size: 26px;margin-bottom: 20px;letter-spacing: 1px;}
.display {background: rgba(0,0,0,0.7);color: #0ff;font-size: 28px;text-align: right;
padding: 15px;border-radius: 10px;margin-bottom: 15px;
box-shadow: inset 0 0 8px rgba(0,255,255,0.4);overflow-x: auto;}
.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;}
button {padding: 15px;font-size: 18px;border: none;border-radius: 12px;
background: linear-gradient(145deg, #3a3a3a, #1c1c1c);color: #fff;cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.1);
transition: all 0.2s ease;}
button:hover {transform: translateY(-2px);
background: linear-gradient(145deg, #00ffff, #0088cc);
color: #000;box-shadow: 0 6px 12px rgba(0,255,255,0.4);}
button:active {transform: scale(0.95);}

/* Scientific panel styles */
.sci-panel {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;
margin-top: 15px;max-height: 0;overflow: hidden;transition: max-height 0.4s ease, opacity 0.4s ease;opacity: 0;}
.sci-panel.open {max-height: 200px;opacity: 1;}
#sci-toggle {background: linear-gradient(145deg, #00aaaa, #006666);}