.scanner-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
    .scanner-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);animation:fadeUp .4s ease}
    .scanner-header{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
    .scanner-header h2{font-size:16px;font-weight:700}
    .ev-select{border:1px solid var(--border);background:#fff;padding:8px 14px;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;color:var(--text);cursor:pointer;outline:none}
    .camera-area{position:relative;background:#111;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    #videoEl{width:100%;height:340px;object-fit:cover;display:none}
    .scan-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
    .scan-frame{width:220px;height:220px;position:relative}
    .scan-frame::before,.scan-frame::after{content:'';position:absolute;width:40px;height:40px;border-color:#fff;border-style:solid}
    .scan-frame::before{top:0;left:0;border-width:3px 0 0 3px}
    .scan-frame::after{bottom:0;right:0;border-width:0 3px 3px 0}
    .scan-corner-tr{position:absolute;top:0;right:0;width:40px;height:40px;border-top:3px solid #fff;border-right:3px solid #fff}
    .scan-corner-bl{position:absolute;bottom:0;left:0;width:40px;height:40px;border-bottom:3px solid #fff;border-left:3px solid #fff}
    .scan-line{position:absolute;width:90%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);animation:scanAnim 2s ease-in-out infinite;left:5%}
    @keyframes scanAnim{0%,100%{top:10%}50%{top:85%}}
    .camera-idle{text-align:center;color:rgba(255,255,255,.6);padding:40px}
    .camera-idle svg{width:64px;height:64px;margin-bottom:16px;opacity:.4}
    .camera-idle p{font-size:15px;margin-bottom:20px}
    .btn-start-camera{background:var(--primary);color:#fff;border:none;padding:12px 24px;border-radius:50px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s}
    .btn-start-camera:hover{background:var(--primary-light)}
    .btn-stop{background:rgba(255,255,255,.15);color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s}
    .btn-stop:hover{background:rgba(255,255,255,.25)}
    .manual-area{padding:18px 22px;border-top:1px solid var(--border)}
    .manual-area h3{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text-muted)}
    .manual-input-row{display:flex;gap:8px}
    .manual-input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:9px;font-family:'Inter',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
    .manual-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(206,73,42,.1)}
    .btn-verify{background:var(--primary);color:#fff;border:none;padding:10px 18px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap}

    /* Result panel */
    .result-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:fadeUp .4s ease;animation-delay:.1s}
    .result-header{padding:16px 20px;border-bottom:1px solid var(--border)}
    .result-header h3{font-size:15px;font-weight:700}
    .result-empty{padding:40px 20px;text-align:center;color:var(--text-muted)}
    .result-empty svg{width:48px;height:48px;margin-bottom:12px;opacity:.3}

    .result-valid,.result-invalid,.result-used{padding:20px;text-align:center}
    .result-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
    .result-valid .result-icon{background:rgba(39,174,96,.12)}
    .result-invalid .result-icon{background:rgba(231,76,60,.12)}
    .result-used .result-icon{background:rgba(150,150,150,.12)}
    .result-valid svg{color:#27ae60}
    .result-invalid svg{color:#e74c3c}
    .result-used svg{color:#888}
    .result-status{font-size:18px;font-weight:800;margin-bottom:4px}
    .result-valid .result-status{color:#27ae60}
    .result-invalid .result-status{color:#e74c3c}
    .result-used .result-status{color:#888}
    .result-detail{background:var(--bg);border-radius:10px;padding:14px;margin-top:14px;text-align:left}
    .result-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--border)}
    .result-row:last-child{border-bottom:none}
    .result-row label{color:var(--text-muted);font-weight:500}
    .result-row span{font-weight:700}
    .btn-confirm-entry{width:100%;background:#27ae60;color:#fff;border:none;padding:12px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;margin-top:14px}

    /* Scan log */
    .scan-log{padding:0}
    .log-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);animation:fadeUp .3s ease}
    .log-item:last-child{border-bottom:none}
    .log-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .log-dot.valid{background:#27ae60}
    .log-dot.invalid{background:#e74c3c}
    .log-dot.used{background:#888}
    .log-info{flex:1;min-width:0}
    .log-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .log-code{font-size:11px;color:var(--text-muted);font-family:monospace}
    .log-time{font-size:11px;color:var(--text-muted);flex-shrink:0}

    @media(max-width:900px){.scanner-layout{grid-template-columns:1fr}}