.converter {
        max-width: 700px;
        margin: 0 auto 40px auto;
      }

      .copy {
        font-size: 14px;
        color: #555;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .row-layout {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 16px;
      }

      .result-label {
        width: 130px;
        font-weight: bold;
        text-align: right;
        font-size: 16px;
      }

      input[type="number"] {
        width: 100px;
        padding: 5px;
        font-size: 17px;
        text-align: center;
        border: 2px solid #d7e2fa;
        border-radius: 6px;
      }

      select {
        width: 100px;
        height: 35px;
        background: #fff;
        padding: 4px 8px;
        font-size: 16px;
        border: 2px solid #d7e2fa;
        border-radius: 6px;
        text-align: center;
      }

      .result-layout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        flex-direction: row;
      }

      .result-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 2px solid #4caf50;
        border-radius: 6px;
        background: #f1f8e9;
        padding: 8px;
        color: #2e7d32;
        font-size: 16px;
        width: 240px;
        position: relative;
      }

      .copy-button {
        padding: 6px 10px;
        font-size: 13px;
        cursor: pointer;
        background: #eeeeee;
        border: 2px solid #cccccc;
        border-radius: 6px;
      }

      .copied-msg {
        position: absolute;
        right: 80px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #4caf50;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      .copied-msg.visible {
        opacity: 1;
      }

      @media (max-width: 500px) {
        .row-layout {
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .result-label {
          width: auto;
          text-align: center;
        }

        .result-layout {
          flex-direction: column;
          align-items: center;
        }

        input[type="number"],
        select {
          margin-top: 4px;
        }
      }