:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}body{box-sizing:border-box;background-color:#e6e6e6;width:100%;min-height:80vh;margin:0;font-family:Arial,sans-serif;overflow-x:hidden}.calculator-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:80vh;padding:12px;display:flex}h1{color:#333;text-align:center;margin-bottom:20px}.main-container{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px;width:100%;max-width:900px;display:flex}.history{text-align:left;word-break:break-word;background-color:#fff;border:1px solid #ccc;border-radius:10px;flex:200px;min-height:150px;max-height:500px;padding:15px;overflow:hidden auto;box-shadow:0 3px 6px #0000001a}.history-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.clear-history-btn{cursor:pointer;color:#000;background-color:#f44336;border:none;border-radius:5px;padding:5px 10px;font-size:.8em}.clear-history-btn:disabled{cursor:not-allowed;background-color:#fcc}.history-list{max-height:450px;overflow-y:auto}.history-item{border-bottom:1px solid #eee;grid-template-columns:auto 1fr auto;align-items:flex-start;gap:5px;padding:5px 0;font-size:.9em;display:grid}.history-id{font-weight:700}.history-expression{word-break:break-word;overflow:hidden}.history-time{color:#888;text-align:right;white-space:nowrap;font-size:.8em}.calculator{box-sizing:border-box;background-color:#f9f9f9;border:1px solid #999;border-radius:10px;flex:300px;width:100%;max-width:350px;padding:15px;box-shadow:0 5px 15px #0003}.display-area{color:#fff;text-align:right;word-wrap:break-word;background-color:#333;border-radius:5px;flex-direction:column;justify-content:flex-end;width:100%;min-height:80px;margin-bottom:15px;display:flex;overflow:hidden}.display-area .input{color:#aaa;white-space:nowrap;order:1;min-height:20px;padding-right:8px;font-size:1.2em;overflow-x:auto}.display-area .result{word-break:break-all;order:2;min-height:35px;padding-right:8px;font-size:2em;font-weight:700}.button-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}button{cursor:pointer;background-color:#fff;border:none;border-radius:5px;padding:18px 0;font-size:1.2em;font-weight:500;transition:background-color .1s,box-shadow .1s;box-shadow:0 2px 4px #0000001a}button:hover{background-color:#f0f0f0;box-shadow:0 3px 6px #00000026}.clear-btn{color:#fff;background-color:#ff8c00}.clear-btn:hover{background-color:#cc7000}.clear-CE{color:#fff;background-color:#888}.clear-CE:hover{background-color:#aaa}.operator{color:#fff;background-color:#a0a0a0}.operator:hover{background-color:#888}.equal-btn{color:#fff;background-color:#4682b4}.equal-btn:hover{background-color:#386a92}.zero-btn{text-align:center;grid-column:span 2}@media (max-width:768px){.main-container{flex-direction:column;align-items:center}.history{width:90%;max-height:300px;margin-bottom:20px}.calculator{width:90%}.display-area .input{font-size:1em}.display-area .result{padding-right:6px;font-size:1.5em}button{padding:12px 0;font-size:1em}}@media (max-width:480px){.display-area .input{font-size:.9em}.display-area .result{padding-right:4px;font-size:1.2em}button{padding:10px 0;font-size:.9em}.zero-btn{grid-column:span 2}}