.mm-main-wrapper {
    width: 95%;
    max-width: 600px;
    margin: 20px auto;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #000;
}

.mm-converter-box {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    text-align: center;
}

.mm-green-header {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background-color: #2ecc71;
    border-radius: 12px 12px 0 0;
}

.mm-title { color: #333 !important; margin-bottom: 25px !important; font-size: 24px !important; font-weight: bold; }

.mm-field-container { text-align: left; margin-bottom: 15px; flex: 1; }

.mm-results-row { display: flex; gap: 15px; flex-wrap: wrap; }

.mm-field-container label { display: block; font-size: 13px; font-weight: 700; color: #555; margin-bottom: 6px; }

.mm-field-container input {
    width: 100%; padding: 12px; border: 2px solid #eee;
    border-radius: 8px; font-size: 18px; background-color: #fafafa;
    color: #000000 !important; font-weight: bold; box-sizing: border-box; outline: none;
}

.mm-field-container input:focus { border-color: #2ecc71; background-color: #fff; }

.mm-field-container input[readonly] { background-color: #f0fdf4; cursor: default; }

.mm-btn-group { display: flex; gap: 10px; margin: 15px 0 30px 0; }

.mm-btn-group button {
    flex: 1; padding: 14px; border: none; border-radius: 8px;
    font-weight: bold; cursor: pointer; font-size: 15px; transition: 0.3s;
}

.mm-btn-save { background-color: #27ae60; color: white; }
.mm-btn-clear { background-color: #e0e0e0; color: #333; }

.mm-info-section {
    background: #fff; padding: 25px; border-radius: 12px;
    border: 1px solid #ddd; margin-top: 20px;
}

.mm-section-title {
    border-left: 5px solid #2ecc71; padding-left: 15px;
    color: #333; margin-top: 25px; font-size: 18px; font-weight: bold;
}

.mm-formula-card {
    background: #f1f8f4; padding: 20px; border-radius: 8px;
    font-size: 20px; font-weight: bold; text-align: center;
    color: #27ae60; margin: 15px 0;
}

.mm-table-container { overflow-x: auto; margin-top: 15px; }

.mm-data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.mm-data-table th, .mm-data-table td { padding: 12px; border: 1px solid #eee; text-align: left; color: #000; }

.mm-data-table th { background-color: #f8f9fa; font-weight: bold; }

@media (max-width: 420px) {
    .mm-results-row { flex-direction: column; gap: 0; }
}