#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;
    }

    /* 主设置按钮区域样式 */
    .setup-button-container {
      display: flex;
      width: 100%;
      gap: 2%;
      box-sizing: border-box;
    }

    .setup-button-container button {
      width: 49% !important;
      margin: 0;
      box-sizing: border-box;
      border: 1px solid #2d3d33;
      background-color: #dee9e2;
      font-size: 6vw;
    }

    /* 扫描框样式 */
    .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);
    }



    /* 移动端竖屏适配样式 */
    .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;
    }

    /* 移动端竖屏适配 - 主设置按钮 */
    .setup-button-container 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;
    }

    /* 摄像头扫描悬浮窗口样式 */
    .camera-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 10%; /* 左侧预留10% */
      width: 80%; /* 宽度调整为80%，左右各预留10% */
      height: 10vh; /* 高度调整为原有的1/2 */
      background-color: rgba(0, 0, 0, 0.9);
      border: 3px solid #00ff00; /* 绿色边框 */
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* 绿色发光效果 */
      z-index: 9999;
      box-sizing: border-box;
    }

    .camera-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #000;
      position: relative;
      border-radius: 7px; /* 内部圆角 */
      overflow: hidden;
    }

    #scanner-container {
      flex: 1;
      width: 100%;
      position: relative;
      background-color: #000;
      overflow: hidden;
    }

    #scanner-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #scanner-container canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    /* 红光指示器样式 */
    .scan-indicator {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 12px;
      height: 12px;
      background-color: #ff0000;
      border-radius: 50%;
      z-index: 10001;
      opacity: 0.8;
      transition: all 0.3s ease;
    }
    
    .scan-indicator.active {
      animation: redPulse 1s infinite;
      box-shadow: 0 0 10px #ff0000;
    }
    
    @keyframes redPulse {
      0% { 
        opacity: 0.8;
        transform: scale(1);
        box-shadow: 0 0 5px #ff0000;
      }
      50% { 
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 15px #ff0000;
      }
      100% { 
        opacity: 0.8;
        transform: scale(1);
        box-shadow: 0 0 5px #ff0000;
      }
    }
    
    /* 扫描区域指示器 */
    .scan-area-indicator {
      position: absolute;
      top: 20%; /* 与 Quagga area 配置保持一致 */
      left: 10%; /* 与 Quagga area 配置保持一致 */
      width: 80%; /* 宽度 = 100% - left(10%) - right(10%) */
      height: 60%; /* 高度 = 100% - top(20%) - bottom(20%) */
      border: 2px solid rgba(0, 255, 0, 0.8);
      border-radius: 8px;
      background: transparent;
      z-index: 10002;
      pointer-events: none;
      transition: all 0.3s ease;
    }
    
    .scan-area-indicator.active {
      border-color: rgba(0, 255, 0, 1);
      box-shadow: 
        0 0 10px rgba(0, 255, 0, 0.5),
        inset 0 0 10px rgba(0, 255, 0, 0.2);
      animation: scanFrame 2s infinite;
    }
    
    @keyframes scanFrame {
      0% { 
        border-color: rgba(0, 255, 0, 0.8);
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
      }
      50% { 
        border-color: rgba(0, 255, 0, 1);
        box-shadow: 
          0 0 20px rgba(0, 255, 0, 0.8),
          inset 0 0 15px rgba(0, 255, 0, 0.3);
      }
      100% { 
        border-color: rgba(0, 255, 0, 0.8);
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
      }
    }
    
    /* 扫描线指示器 */
    .scan-line {
      position: absolute;
      left: 15%; /* 在识别区域内部留有5%的边距 */
      right: 15%; /* 在识别区域内部留有5%的边距 */
      height: 2px;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 255, 0, 0.8) 20%, 
        rgba(0, 255, 0, 1) 50%, 
        rgba(0, 255, 0, 0.8) 80%, 
        transparent
      );
      z-index: 10003;
      opacity: 0;
    }
    
    .scan-line.active {
      opacity: 1;
      animation: scanLine 2s infinite ease-in-out;
    }
    
    @keyframes scanLine {
      0% {
        top: 25%; /* 在识别区域顶部开始 (20% + 5%的内边距) */
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        top: 75%; /* 在识别区域底部结束 (80% - 5%的内边距) */
        opacity: 0;
      }
    }

    /* 悬浮扫描按钮样式 */
    .scan-trigger-btn {
      position: fixed; /* 改为相对于整个页面的固定定位 */
      top: 75vh; /* 整个页面从上到下3/4位置 */
      left: 50%;
      transform: translateX(-50%);
      width: 20vw;
      height: 8vh;
      background-color: rgba(0, 123, 255, 0.9); /* 半透明背景 */
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 50px;
      font-size: 5vw;
      font-weight: bold;
      cursor: pointer;
      z-index: 10000;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .scan-trigger-btn:hover {
      background-color: rgba(0, 86, 179, 0.9);
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }

    .scan-trigger-btn:active {
      transform: translateX(-50%) scale(0.95);
    }

    .scan-trigger-btn.scanning {
      background-color: rgba(40, 167, 69, 0.9);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); }
      50% { box-shadow: 0 6px 25px rgba(40, 167, 69, 0.8); }
      100% { box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); }
    }

    /* 整个页面左下角关闭按钮样式 */
    .close-camera-btn-bottom {
      position: fixed; /* 改为相对于整个页面的固定定位 */
      bottom: 6vh; /* 整个页面左下角位置 */
      left: 3vw;
      background-color: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.8);
      color: white;
      font-size: 6vw;
      font-weight: bold;
      cursor: pointer;
      padding: 0;
      width: 12vw;
      height: 12vw;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    .close-camera-btn-bottom:hover {
      background-color: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }

    .camera-status {
      padding: 1vh 3vw;
      background-color: #333;
      color: white;
      font-size: 3vw;
      text-align: center;
      height: 4vh;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      transition: background-color 0.3s ease;
    }

    .camera-status.error {
      background-color: #ff4444;
      color: white;
    }

    .camera-status.success {
      background-color: #44aa44;
      color: white;
    }

    .camera-modal.show {
      display: block;
    }