#calculator-main .calculator {width: 100%; max-width: 650px; padding: 10px; border-radius: 25px; background: #e9eef4; box-shadow: 15px 15px 30px #c1c9d2, -15px -15px 30px #ffffff; display: flex; flex-direction: column; gap: 10px;}
#calculator-main .display-area {width: 100%; padding: 10px; border-radius: 15px; background: #e3edf7; box-shadow: inset 6px 6px 12px #c5ced6, inset -6px -6px 12px #ffffff; text-align: right; box-sizing: border-box;}
#calculator-main .live-result-display {font-size: 1.2em; color: #6a7a8c; min-height: 30px; overflow-x: auto; white-space: nowrap; margin-bottom: 5px;}
#calculator-main .display {font-size: 22px; color: #3b4754; overflow-x: auto; white-space: nowrap; height: 35px; font-weight: bold;}
#calculator-main .display::-webkit-scrollbar, #calculator-main .live-result-display::-webkit-scrollbar {height: 4px;}
#calculator-main .display::-webkit-scrollbar-thumb, #calculator-main .live-result-display::-webkit-scrollbar-thumb {background: #babecc; border-radius: 10px;}
#calculator-main .all-buttons-container {display: flex; gap: 25px;}
#calculator-main .button-panel {display: grid; gap: 5px;}
#calculator-main .panel-hidden {display: none !important;}
#calculator-main #scientific-panel {grid-template-columns: repeat(5, 1fr); flex: 2;}
#calculator-main #numeric-panel {grid-template-columns: repeat(4, 1fr); flex: 2;}
#calculator-main .btn {padding: 10px 5px; border-radius: 15px; border: none; box-shadow: 2px 2px 0px 0px #bdbdbd; font-size: 1em; font-weight: bold; cursor: pointer; background: #e9eef4; transition: all 0.1s ease-in-out; color: #555f6b; display: flex; justify-content: center; align-items: center;}
#calculator-main .btn:hover {color: #3a7cf4;}
#calculator-main .btn.active, #calculator-main .btn:active {box-shadow: inset 6px 6px 12px #c1c9d2, inset -6px -6px 12px #ffffff; font-size: 1.08em;}
#calculator-main .operator {background-color: #dce6f4;}
#calculator-main .function {background-color: #e0e6ec; width: 55px;}
#calculator-main .number {background-color: #f0f3f6;}
#calculator-main .equals {grid-column: span 3; background-color: #3a7cf4; color: white; font-weight: bold;}
#calculator-main .equals:hover {color: white; opacity: 0.9;}
#calculator-main .clear {background-color: #e77; color: white;}
#calculator-main .clear:hover {color: white; opacity: 0.9;}
#calculator-main .mode-selector {grid-column: span 5; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px; background: #e3edf7; border-radius: 12px; box-shadow: inset 4px 4px 8px #c5ced6, inset -4px -4px 8px #ffffff;}
#calculator-main .mode-selector label {cursor: pointer; padding: 8px 15px; border-radius: 8px; font-size: 0.9em; color: #555; transition: all 0.2s ease;}
#calculator-main .mode-selector input[type="radio"] {display: none;}
#calculator-main .mode-selector input[type="radio"]:checked + label {background: #e9eef4; box-shadow: 4px 4px 8px #c1c9d2, -4px -4px 8px #ffffff; color: #3a7cf4; font-weight: bold;}
#calculator-main .history-panel {display: none; flex-direction: column; width: 100%; height: 150px; background: #dde5f0; border-radius: 12px; box-shadow: inset 4px 4px 8px #c5ced6, inset -4px -4px 8px #ffffff; padding: 15px; box-sizing: border-box;}
#calculator-main .history-panel.visible {display: flex;}
#calculator-main .history-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0;}
#calculator-main #clear-history-btn {background: none; border: none; color: #3a7cf4; cursor: pointer; font-size: 0.9em;}
#calculator-main .history-content {flex-grow: 1; overflow-y: auto; text-align: right;}
#calculator-main .history-entry {margin-bottom: 10px; line-height: 1.4; cursor: pointer; padding: 5px; border-radius: 6px; transition: background-color 0.2s;}
#calculator-main .history-entry:hover {background-color: #cfd9e6;}
#calculator-main .history-entry .expression {font-size: 0.9em; color: #777;}
#calculator-main .history-entry .result {font-weight: bold; font-size: 1.1em; color: #444;}
#calculator-main .toggle-buttons-container {display: flex; justify-content: flex-end; gap: 15px; margin-top: 12px;}
#calculator-main .toggle-buttons-container .btn {width: auto; padding: 10px 20px; background-color: #d1d9e6;}
@media (max-width: 900px) {
#calculator-main .calculator {max-width: 95vw; padding: 20px;}
#calculator-main .all-buttons-container {flex-direction: column;}
#calculator-main .btn {padding: 10px 5px; font-size: 1em;}
}
@media (max-width: 480px) {
#calculator-main .btn {font-size: 0.9em; padding: 5px;}
#calculator-main .display {font-size: 22px;}
#calculator-main .live-result-display {font-size: 1em;}
}