:root{
  --bg: #0b132b; 
  --panel: #141b2f; 
  --accent: #a855f7; 
  --btn-num: #3b82f6; 
  --btn-op: #9333ea; 
  --text: #ffffff; 
  --glow-blue: 0 0 12px rgba(59, 130, 246, 0.6);
  --glow-purple: 0 0 12px rgba(147, 51, 234, 0.6);
  --glow-accent: 0 0 15px rgba(168, 85, 247, 0.8);
}

*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 50%, #4c1d95 100%);
  color:var(--text);
  padding:24px;
}

.calculator{
  width:320px;
  background:var(--panel);
  border-radius:12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 30px rgba(76, 29, 149, 0.2);
  padding:18px;
  border: 1px solid #1e293b;
}

.display{
  width:100%;
  height:56px;
  border-radius:8px;
  border: 1px solid #3b82f6; 
  padding:12px;
  font-size:1.4rem;
  text-align:right;
  margin-bottom:12px;
  background: rgba(15, 23, 42, 0.8); 
  color:var(--text);
  outline:none;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.3), var(--glow-blue);
}

.buttons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.btn{
  height:52px;
  border-radius:8px;
  border:0;
  background:var(--btn-num); 
  color: var(--text); 
  font-size:1.05rem;
  cursor:pointer;
  transition: all .15s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), var(--glow-blue);
}

.btn:hover {
  filter: brightness(1.2);
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 18px rgba(59, 130, 246, 0.9);
}

.btn:active{
  transform:translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3), var(--glow-blue);
}

.btn.operator{
  background:var(--btn-op);
  color: var(--text);
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), var(--glow-purple);
}

.btn.operator:hover {
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 18px rgba(147, 51, 234, 0.9);
}

.btn.control{
  background:#701a75;
  color:var(--text);
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 12px rgba(112, 26, 117, 0.6);
}

.btn.control:hover {
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 18px rgba(112, 26, 117, 0.9);
}

.btn.equals{
  background:var(--accent);
  color:var(--text);
  grid-column:4 / 5;
  height:52px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), var(--glow-accent);
}

.btn.equals:hover {
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 22px rgba(168, 85, 247, 1);
}

.btn.wide{
  grid-column:1 / 3;
}

@media (max-width:360px){
  .calculator{width:100%;}
  .display{font-size:1.1rem;}
}