*{box-sizing:border-box;margin:0;padding:0}
        body{background:#111;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:12px;font-size:13px;padding-bottom:80px;touch-action:pan-y}
        #cameraFloat{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:420px;aspect-ratio:4/3;border:4px solid #2196F3;border-radius:12px;overflow:hidden;background:#000;z-index:1000;box-shadow:0 4px 40px rgba(0,0,0,0.95);display:none;touch-action:auto;cursor:move}
        #cameraFloat video{width:100%;height:100%;object-fit:cover;display:block}
        #cameraFloat canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block}
        #cameraFloat .close-float-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,0,0,0.8);color:#fff;font-size:16px;line-height:32px;text-align:center;cursor:pointer;z-index:10;padding:0}
        .float-status{position:absolute;bottom:8px;left:10px;font-size:11px;color:#7ddfb0;background:rgba(0,0,0,0.7);padding:2px 10px;border-radius:10px;z-index:10;pointer-events:none;display:flex;align-items:center;gap:8px}
        .float-status .engine-badge{font-size:9px;background:rgba(33,150,243,0.3);padding:1px 8px;border-radius:8px;color:#81d4fa}
        .float-status .engine-badge.quagga{background:rgba(255,152,0,0.3);color:#ffcc80}
        .guide-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;height:45%;border:2px solid rgba(0,255,136,0.3);border-radius:12px;z-index:4;pointer-events:none;display:none}
        .guide-box .corner{position:absolute;width:22px;height:22px;border-color:#00ff88;border-style:solid;border-width:0}
        .guide-box .corner.tl{top:-2px;left:-2px;border-top-width:3px;border-left-width:3px;border-radius:4px 0 0 0}
        .guide-box .corner.tr{top:-2px;right:-2px;border-top-width:3px;border-right-width:3px;border-radius:0 4px 0 0}
        .guide-box .corner.bl{bottom:-2px;left:-2px;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 4px}
        .guide-box .corner.br{bottom:-2px;right:-2px;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 4px 0}
        .guide-box .label{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:11px;white-space:nowrap;background:rgba(0,0,0,0.6);padding:2px 14px;border-radius:10px}
        #scanBox{position:absolute;border:2px solid rgba(0,255,0,0.8);border-radius:4px;box-shadow:0 0 30px rgba(0,255,0,0.3);z-index:5;pointer-events:none;display:none;transition:all 0.15s ease}
        #scanBox::after{content:'';position:absolute;inset:-2px;border:1px dashed rgba(0,255,0,0.2);border-radius:4px;animation:pulse 1s ease-in-out infinite}
        @keyframes pulse{0%,100%{opacity:0.3}50%{opacity:1}}
        .zoom-controls{position:absolute;bottom:50px;right:8px;z-index:10;display:flex;flex-direction:column;gap:6px}
        .zoom-controls button{width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,0.6);color:#fff;font-size:20px;cursor:pointer;touch-action:manipulation;backdrop-filter:blur(4px);transition:all 0.2s}
        .zoom-controls button:active{transform:scale(0.85);background:rgba(33,150,243,0.8)}
        .zoom-controls .zoom-level{text-align:center;color:#fff;font-size:11px;background:rgba(0,0,0,0.5);border-radius:10px;padding:2px 6px;font-family:monospace}
        .engine-switch-btn{position:absolute;top:8px;left:8px;z-index:10;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:4px 10px;border-radius:16px;font-size:10px;cursor:pointer;touch-action:manipulation;backdrop-filter:blur(4px);transition:all 0.2s;display:flex;align-items:center;gap:4px}
        .engine-switch-btn:active{transform:scale(0.9);background:rgba(33,150,243,0.5)}
        .engine-switch-btn .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
        .engine-switch-btn .dot.zxing{background:#4fc3f7}
        .engine-switch-btn .dot.quagga{background:#ffb74d}
        .fab-camera{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;border:none;background:#ff9800;color:#fff;font-size:22px;box-shadow:0 2px 12px rgba(255,152,0,0.5);cursor:pointer;z-index:1001;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}
        .fab-camera:active{transform:scale(0.92);opacity:0.8}
        .fab-camera.active{background:#dc2626;box-shadow:0 2px 12px rgba(220,38,38,0.5)}
        .fab-camera .label{font-size:9px;position:absolute;bottom:-18px;color:#aaa;white-space:nowrap}
        #container{display:none}
        #resultWrap{margin-top:14px;font-size:20px;text-align:center;flex-shrink:0}
        #barcodeText{color:#5bff7c;font-weight:bold;letter-spacing:1px;min-height:26px}
        #status{margin-top:6px;color:#ff9800;font-size:12px;text-align:center;flex-shrink:0}
        .bt-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;flex-shrink:0}
        .bt-row button{flex:1;min-width:80px;padding:7px 4px;border:none;border-radius:5px;background:#2196F3;color:#fff;font-size:11px;cursor:pointer}
        .bt-row button.del{background:#dc2626}
        .bt-row button.warn{background:#f59e0b}
        .bt-row button.level-btn{background:#303841}
        .bt-row button.level-btn.active{background:#2196F3}
        .bt-row button.manual-btn{background:#009688}
        .bt-row button.reset-pwd-btn{background:#9c27b0;font-size:10px;min-width:60px;flex:0.5}
        .bt-row button.engine-toggle{background:#424242;font-size:10px;min-width:70px;flex:0.6;border:1px solid transparent}
        .bt-row button.engine-toggle.zxing{border-color:#4fc3f7;color:#4fc3f7}
        .bt-row button.engine-toggle.quagga{border-color:#ffb74d;color:#ffb74d}
        .bt-row button.engine-toggle.active{background:rgba(33,150,243,0.2)}
        .tips{margin-top:12px;font-size:11px;opacity:0.7;text-align:center;line-height:1.5;max-width:420px;flex-shrink:0}
        #productPanel{width:100%;max-width:420px;margin-top:12px;border:1px solid #333;border-radius:10px;padding:10px;background:#1a1a1a;font-size:12px;line-height:1.5;flex-shrink:0}
        .source-hint{font-size:11px;margin-bottom:8px;padding:3px 6px;border-radius:4px;background:#272727;color:#81d4fa}
        .not-found-hint{font-size:12px;color:#ffb74d;padding:4px 0}
        .input-row{margin:6px 0}
        .input-row label{font-size:12px;display:block;margin-bottom:2px}
        .input-row input{width:100%;padding:6px;margin-top:3px;background:#222;border:1px solid #444;color:#fff;border-radius:5px;font-size:12px}
        .input-row select{width:100%;padding:6px;margin-top:3px;background:#222;border:1px solid #444;color:#fff;border-radius:5px;font-size:12px}
        .shelf-life-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
        .shelf-life-row input{flex:2;min-width:80px}
        .shelf-life-row select{flex:1;min-width:60px}
        .auto-calc-hint{font-size:11px;color:#7ddfb0;margin-top:2px}
        #listPanel{width:100%;max-width:420px;margin-top:14px;border:1px solid #333;border-radius:10px;padding:10px;background:#1a1a1a;display:flex;flex-direction:column;flex:1;min-height:200px;max-height:44vh}
        #listPanel h4{font-size:13px;margin-bottom:8px;flex-shrink:0}
        .tool-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;flex-shrink:0}
        .tool-bar button{font-size:9px;padding:4px 3px;border-radius:4px;border:none;cursor:pointer;flex:1;min-width:55px}
        .tool-bar button:active{opacity:0.7}
        #listContentWrap{flex:1;overflow-y:auto;min-height:0}
        #listContentWrap::-webkit-scrollbar{width:4px}
        #listContentWrap::-webkit-scrollbar-track{background:#222;border-radius:4px}
        #listContentWrap::-webkit-scrollbar-thumb{background:#555;border-radius:4px}
        .item-card{border:1px solid #444;padding:7px;margin:6px 0;border-radius:5px;font-size:11px;line-height:1.4}
        .batch-block{border:1px dashed #555;padding:6px;margin:5px 0 3px 6px;border-radius:4px;font-size:11px}
        .warn-text{color:#ff4d4f;font-weight:bold}
        .level-tag{display:inline-block;padding:1px 4px;background:#283444;border-radius:2px;margin-left:4px;font-size:10px}
        .alert-tag{display:inline-block;padding:1px 4px;background:#443322;border-radius:2px;margin-left:4px;font-size:10px;color:#ffcc80}
        .remind-tag{display:inline-block;padding:1px 4px;background:#1a4a3a;border-radius:2px;margin-left:4px;font-size:10px;color:#7ddfb0}
        .load-more-tip{text-align:center;padding:8px;font-size:11px;opacity:0.6}
        .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:999;padding:12px}
        .modal-box{width:100%;max-width:360px;background:#1e1e1e;border-radius:10px;padding:14px;font-size:12px;max-height:80vh;overflow-y:auto}
        .modal-box h5{font-size:13px;margin-bottom:8px}
        .modal-list-small{font-size:10px;line-height:1.4;max-height:45vh;overflow-y:auto;border:1px solid #333;padding:6px;margin:8px 0}
        .modal-buttons{display:flex;gap:6px;margin-top:10px}
        .modal-buttons button{flex:1;padding:8px;border:none;border-radius:5px;font-size:12px;cursor:pointer}
        .modal-del{background:#dc2626;color:#fff}
        .modal-cancel{background:#444;color:#fff}
        .batch-checkbox{margin-right:4px}
        #localRecordWrap{max-height:55vh;overflow-y:auto;border:1px solid #333;padding:6px;margin:8px 0}
        .local-record-item{border:1px solid #444;border-radius:4px;padding:6px;margin:4px 0;font-size:11px;line-height:1.4}
        .del-archive-btn{margin-top:4px;background:#dc2626;color:#fff;border:none;border-radius:3px;font-size:10px;padding:2px 6px;cursor:pointer}
        .fab-wrap{position:fixed;right:14px;bottom:80px;display:flex;flex-direction:column;gap:10px;z-index:900}
        .fab-btn{width:52px;height:52px;border-radius:50%;border:none;color:#fff;font-size:10px;box-shadow:0 2px 10px #00000080;cursor:pointer}
        .fab-btn:active{opacity:0.7;transform:scale(0.95)}
        .fab-del{background:#dc2626}
        .fab-top{background:#2196F3}
        .fab-refresh{background:#009688}
        .fab-scanstock{background:#9c27b0}
        .fab-namesearch{background:#ff9800}
        .modal-scan-container{width:100%;aspect-ratio:4/3;border:3px solid #9c27b0;border-radius:8px;overflow:hidden;position:relative;margin:8px 0}
        .modal-scan-container video,.modal-scan-container canvas{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover}
        .modal-search-item{border:1px solid #444;padding:6px;margin:4px 0;border-radius:4px;font-size:11px;line-height:1.4}
        .modal-search-batch{border:1px dashed #555;padding:4px;margin:4px 0 4px 8px;border-radius:3px;font-size:10px}
        .status-badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:9px;margin-left:4px}
        .badge-reminded{background:#1a4a3a;color:#7ddfb0}
        .badge-waiting{background:#443322;color:#ffcc80}
        .badge-noalert{background:#333355;color:#8888cc}
        .confirm-data-box{background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:12px;margin:8px 0;font-family:'Courier New',monospace;font-size:11px;line-height:1.8;white-space:pre-wrap;color:#e0e0e0;max-height:40vh;overflow-y:auto}
        .pwd-status{font-size:10px;color:#7ddfb0;background:#1a2a1a;padding:2px 10px;border-radius:10px;display:inline-block;margin-left:6px;cursor:pointer}
        .pwd-status.locked{color:#ffb74d;background:#2a1a1a}
        .loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #444;border-top-color:#2196F3;border-radius:50%;animation:spin 0.8s linear infinite;margin-right:8px;vertical-align:middle}
        @keyframes spin{to{transform:rotate(360deg)}}
        .modal-zoom-controls{position:absolute;bottom:10px;right:10px;z-index:10;display:flex;flex-direction:column;gap:4px}
        .modal-zoom-controls button{width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,0.6);color:#fff;font-size:16px;cursor:pointer;touch-action:manipulation;backdrop-filter:blur(4px)}
        .modal-zoom-controls .modal-zoom-level{text-align:center;color:#fff;font-size:10px;background:rgba(0,0,0,0.5);border-radius:8px;padding:1px 4px;font-family:monospace}
        /* 商品信息弹窗 */
        .product-info-modal .modal-box{max-width:420px;width:100%}
        .product-info-modal .modal-box .input-row{margin:4px 0}
        .product-info-modal .modal-box .input-row label{font-size:11px}
        .product-info-modal .modal-box .input-row input,.product-info-modal .modal-box .input-row select{font-size:11px;padding:4px 6px}
        .product-info-modal .modal-box .bt-row button{font-size:10px;padding:4px 6px;min-width:60px}
    /* ======================== 原生API专属样式 ======================== */
.engine-badge.native {
    background: rgba(76, 175, 80, 0.3);
    color: #81c784;
}

.dot.native {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

/* 原生API状态提示 */
.status-native {
    color: #4CAF50;
}

/* 引擎切换按钮 - 原生模式 */
.engine-switch-btn.native-mode {
    border-color: rgba(76, 175, 80, 0.6);
    background: rgba(76, 175, 80, 0.15);
}

/* ======================== 无条码商品样式 ======================== */
.no-bar-item {
    border: 1px solid #7B1FA2;
    padding: 8px;
    margin: 6px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.no-bar-item:active {
    transform: scale(0.98);
    background: rgba(123, 31, 162, 0.15);
}

.no-bar-item:hover {
    background: rgba(123, 31, 162, 0.08);
}

/* 无条码商品标签 */
.badge-no-barcode {
    background: #7B1FA2;
    color: #CE93D8;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 9px;
    display: inline-block;
    margin-left: 4px;
}

/* 搜索结果样式 */
.search-result-item {
    border: 1px solid #7B1FA2;
    padding: 6px;
    margin: 4px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result-item:active {
    transform: scale(0.98);
    background: rgba(123, 31, 162, 0.15);
}

.search-result-item:hover {
    background: rgba(123, 31, 162, 0.08);
}