#appContainer {
      width: 98vw;
      min-height: 90vh;
      max-height: 90vh;
      text-align: center;
      align-self: center;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0vh;
      background-color: #dee9e2;
      border: 1px solid #0c0c0c;
      overflow-y: scroll;
    }

    tr.selected-row>td {
      background-color: #b3d9ff !important;
    }

    table {
      width: 100%;
      font-size: 4vw;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      border-spacing: 0;
      padding: 0;
    }

    thead {
      position: sticky;
      top: 0;
    }

    th,
    td {
      border: 1px solid #66FF99;
      background-color: #dee9e2;
      opacity: 1;
      padding: 0;
    }

    input,
    button {
      font-size: 6vw;
      margin: 0px;
      vertical-align: middle;
    }

    textarea {
      font-size: 7vw;
      width: 100%;
      resize: none;
      overflow: hidden;
      vertical-align: middle;
    }

    /* 设置框样式 */
    .setup-row {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 0.3vh;
      box-sizing: border-box;
    }

    .setup-input-group {
      display: flex;
      width: 98%;
      gap: 2%;
      margin: 0 auto;
      justify-content: center;
    }

    .setup-label {
      width: 49%;
      text-align: right;
      background-color: #dee9e2;
      border: 1px solid #7b807d;
      padding: 0.2vh;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .setup-input {
      width: 49%;
      text-align: left;
      padding: 0.2vh;
      box-sizing: border-box;
      border: 1px solid #2d3d33;
    }

    /* 设置按钮样式 */
    .setup-input-group button {
      width: 49% !important;
      margin: 0;
      box-sizing: border-box;
      border: 1px solid #2d3d33;
      background-color: #dee9e2;
    }

    /* 扫描框样式 */
    .scan-input-container {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .scan-input-hidden {
      position: absolute;
      opacity: 0;
      z-index: 1;
      width: 80%;
      height: 100%;
    }

    .scan-input-display {
      width: 98.5%;
      box-sizing: border-box;
      border: 1px solid #949c97;
      margin-left: 3px;
    }

    .scan-input-focus {
      outline: 2px solid #007bff;
      outline-offset: 2px;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    @media screen and (orientation: landscape) {
      #appContainer {
        width: 415px;
      }

      table {
        font-size: 20px;
      }

      input,
      button {
        font-size: 25px;
      }

      textarea {
        font-size: 29px;
      }

      /* 横屏模式样式 */
      .setup-row {
        padding: 0.2vh;
      }

      .setup-input-group {
        max-width: 410px;
        margin: 0 auto;
      }

      .setup-label,
      .setup-input {
        font-size: 22px;
        padding: 0.1vh 0.2vh;
      }

      .setup-input-group button {
        font-size: 22px;
        padding: 0.1vh 0.2vh;
      }

      /* 横屏扫描框样式 */
      .scan-input-display {
        font-size: 25px;
        padding: 0.2vh;
      }

      .scan-input-focus {
        outline: 1px solid #007bff;
        outline-offset: 1px;
        box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
      }
    }

    @media screen and (orientation: portrait) {

      /* 竖屏模式样式 */
      .setup-row {
        padding: 0.2vh;
      }

      .setup-input-group {
        width: 98%;
      }

      .setup-label,
      .setup-input {
        font-size: 5vw;
        padding: 0.2vh;
      }

      .setup-input-group button {
        font-size: 5vw;
        padding: 0.2vh;
      }

      /* 竖屏扫描框样式 */
      .scan-input-display {
        font-size: 5vw;
        padding: 0.3vh;
      }

      .scan-input-focus {
        outline: 2px solid #007bff;
        outline-offset: 2px;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
      }
    }

    /* 历史记录区域样式 */
    .history-container {
      width: 98vw;
      min-height: 6vh;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
    }

    @media screen and (orientation: landscape) {
      .history-container {
        width: 415px;
      }
    }