.calculator-box {max-width: 500px;margin: 30px auto;padding: 20px;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,.08);font-family: "Segoe UI",sans-serif;text-align: center;}
h2 {font-size: 20px;margin-bottom: 20px;color: #2c3e50;}
.fraction-row {display: flex;align-items: center;justify-content: center;gap: 12px;margin-bottom: 20px;}
.fraction {display: flex;flex-direction: column;align-items: center;}
.input {width: 160px;padding: 6px;text-align: center;font-size: 15px;border: 1px solid #ccc;border-radius: 6px;}
input[type="number"]:focus {outline: none;border-color: #4caf50;box-shadow: 0 0 5px #4caf50;}
.bar {width: 160px;height: 2px;background-color: #333;margin: 4px 0;}
.operator {font-size: 18px;padding: 4px 8px;border-radius: 6px;}
.button-row {margin-top: 10px;}
.btn {font-size: 15px;padding: 8px 16px;margin: 6px;border: none;border-radius: 8px;cursor: pointer;transition: background .3s ease;}
.calculate {background-color: #4caf50;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;border-radius: 8px;}
.calculate:hover {background-color: #449d48;}
.clear {background-color: #bdc3c7;color: black;}
.value {width: 70;}
.clear:hover {background-color: #a6acaf;}
.result-section {margin-top: 20px;font-size: 16px;color: #2c3e50;line-height: 1.6;word-break: break-word;}