* { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a2e; font-family: 'Segoe UI', sans-serif; }
.calculator { width: 320px; background: #16213e; border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.display { background: #0f3460; color: #e0e0e0; font-size: 2.2rem; text-align: right; padding: 20px; border-radius: 10px; margin-bottom: 16px; min-height: 70px; word-break: break-all; display: flex; align-items: center; justify-content: flex-end; }
.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.btn { background: #1a1a40; color: #e0e0e0; border: none; border-radius: 10px; font-size: 1.3rem; padding: 18px; cursor: pointer; transition: background .15s; }
.btn:hover { background: #2a2a5a; }
.btn:active { background: #3a3a6a; }
.btn.op { background: #533483; color: #fff; }
.btn.op:hover { background: #6a44a0; }
.btn.clear { background: #e94560; color: #fff; }
.btn.clear:hover { background: #ff6b81; }
.btn.equals { grid-row: span 2; background: #0f3460; color: #53d8fb; font-size: 1.6rem; }
.btn.equals:hover { background: #1a4a7a; }
.btn.zero { grid-column: span 2; }