* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #333; }
.container { display: flex; gap: 20px; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.calculator { width: 300px; }
.display { background-color: #222; color: white; padding: 20px; border-radius: 10px; text-align: right; margin-bottom: 20px; min-height: 100px; display: flex; flex-direction: column; justify-content: flex-end; word-wrap: break-word; word-break: break-all; }
#previous-operand { color: #aaa; font-size: 1.2rem; min-height: 1.5rem; }
#current-operand { font-size: 2.5rem; font-weight: bold; }
.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.btn { border: none; padding: 20px; font-size: 1.2rem; border-radius: 8px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; background-color: #f8f9fa; font-weight: 600; }
.btn:active { transform: scale(0.95); }
.btn.num { background-color: #f1f3f5; }
.btn.num:hover { background-color: #e9ecef; }
.btn.fn { background-color: #ffe3e3; color: #c92a2a; }
.btn.fn:hover { background-color: #ffc9c9; }
.btn.op { background-color: #e7f5ff; color: #1971c2; }
.btn.op:hover { background-color: #d0ebff; }
.btn.equal { background-color: #339af0; color: white; }
.btn.equal:hover { background-color: #228be6; }
.history-panel { width: 250px; border-left: 1px solid #eee; padding-left: 20px; }
.history-panel h3 { margin-bottom: 15px; font-size: 1.1rem; color: #555; }
#history-list { list-style: none; max-height: 400px; overflow-y: auto; }
#history-list li { background: #f8f9fa; padding: 10px; margin-bottom: 8px; border-radius: 6px; font-size: 0.9rem; border-left: 3px solid #339af0; }
@media (max-width: 600px) { .container { flex-direction: column; } .history-panel { border-left: none; border-top: 1px solid #eee; padding-left: 0; padding-top: 20px; width: 100%; } }