body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e1e1e;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  transition: background 0.5s, color 0.5s;
}

body.light { background: #f5f5f5; color: #000; }
.hidden { opacity:0; pointer-events:none; transform: translateY(20px); transition:0.4s; }
.card { background: rgba(30,30,30,0.85); backdrop-filter: blur(10px); border-radius:20px; padding:20px; width:300px; max-width:90vw; box-shadow:0 8px 32px rgba(0,0,0,0.4); transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55);}
.card.show { opacity:1; transform: translateY(0); pointer-events:auto; }

input, button { padding:10px; margin:5px; border-radius:12px; border:none; font-size:16px; }
button { position:relative; overflow:hidden; cursor:pointer; background: rgba(75,108,183,0.7); color:white; transition:0.3s;}
button:hover { background: rgba(75,108,183,1); transform:scale(1.05);}
button:active::after { transform: translate(-50%, -50%) scale(2.5); opacity:1; transition:0s; }
button::after { content: ''; position:absolute; background: rgba(255,255,255,0.3); width:100px; height:100px; top:50%; left:50%; transform: translate(-50%,-50%) scale(0); border-radius:50%; opacity:0; transition: transform 0.5s, opacity 0.8s;}

.display input { width:100%; font-size:28px; text-align:right; background: rgba(0,0,0,0.5); color:white; }
.buttons { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }

#history-panel { margin-top:15px; background: rgba(20,20,20,0.6); padding:10px; border-radius:15px; max-height:150px; overflow-y:auto; }
#history-panel ul { list-style:none; padding:0; margin:0; }
#history-panel li { padding:2px 0; border-bottom:1px solid #444; }

#profile img { border-radius:50%; width:100px; height:100px; object-fit:cover; margin-bottom:10px; }

/* MODAL */
.modal-overlay { position:fixed;top:0;left:0;right:0;bottom:0; background: rgba(0,0,0,0.6); display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:0.4s; z-index:100; }
.modal-overlay.show { opacity:1; pointer-events:auto; }
.modal-card { background: rgba(30,30,30,0.9); backdrop-filter: blur(12px); padding:20px; border-radius:20px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); transform: scale(0.8); transition:0.4s; }
.modal-overlay.show .modal-card { transform: scale(1); }

/* Responsive */
@media screen and (max-width:480px){
  .display input { font-size:24px; }
  button { padding:12px; font-size:16px; }
  #history-panel { max-height:120px; }
}