:root{--bg: #eaeaea;--card: #fff;--text: #333;--calc: #222;--btn: #333;--orange: #f57c00;--orange-hover: #ff9800}html,body{height:100%}body{background-color:var(--bg);background-image:url(/images/background-calculator.jpg);background-size:100%;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Segoe UI,sans-serif}.container{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px;max-width:100%;width:100%;box-sizing:border-box}.history{background-color:var(--card);border-radius:12px;box-shadow:0 4px 15px #0003;padding:15px;width:180px;height:400px;overflow-y:auto}.history h3{margin-top:0;text-align:center;color:var(--text)}.history ul{list-style:none;padding:0;margin:0}.history li{background-color:#f3f3f3;border-radius:6px;margin-bottom:8px;padding:8px;font-size:.9rem;text-align:right;color:#333;cursor:pointer}#clear-history{background-color:#f57c00;color:#fff;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:.9rem;transition:background-color .2s ease;margin-bottom:10px;width:100%}#clear-history:hover{background-color:#ff9800}.calculator{background-color:var(--calc);border-radius:20px;box-shadow:0 4px 15px #0006;padding:20px;width:320px;display:flex;flex-direction:column;align-items:center}.display{background-color:#cfd0c2;color:#111;font-size:2rem;text-align:right;border-radius:8px;padding:10px;margin-bottom:20px;width:100%;height:60px;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;overflow:hidden}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}button{background-color:var(--btn);color:#fff;font-size:1.2rem;border:none;border-radius:8px;padding:15px 0;cursor:pointer;transition:transform .05s ease,background-color .2s;-webkit-user-select:none;user-select:none}button:active{transform:scale(.98)}button:hover{background-color:#444}.orange{background-color:var(--orange);color:#fff}.orange:hover{background-color:var(--orange-hover)}.operator{background-color:#111}.operator:hover{background-color:#222}.equal{background-color:#007acc}.equal:hover{background-color:#0095ff}@media (max-width: 600px){.container{flex-direction:column;align-items:stretch;width:min(100%,420px)}.history{width:100%;height:auto;max-height:260px}.calculator{width:100%}.display{height:64px;font-size:1.9rem}}.history li:hover{background-color:#eaeaea}button:focus{outline:2px solid #66afe9;outline-offset:2px}