#dspbs-portal {
position: fixed; inset: 0;
background: rgba(0,0,0,.85);
display: flex; align-items: center; justify-content: center;
z-index: 999999;
}
#dspbs-portal.dspbs-hidden { display: none; }
.dspbs-modal {
width: min(92vw, 640px);
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
display: grid;
grid-template-rows: auto auto auto auto 1fr;
gap: 10px;
}
.dspbs-header {
display:flex; align-items:center; justify-content:space-between;
padding: 12px 14px; border-bottom: 1px solid #eee;
}
.dspbs-title { font-size: 16px; font-weight: 700; }
.dspbs-controls { display:flex; gap: 8px; }
.dspbs-ctrl { background:#f3f4f6; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; }
.dspbs-ctrl:hover { background:#e5e7eb; }
.dspbs-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background:#000; }
#dspbs-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#dspbs-canvas { display:none; }
.dspbs-reticle { position:absolute; inset: 16% 10%; border:2px solid rgba(255,255,255,.75); border-radius:12px; pointer-events: none; }
.dspbs-line { position:absolute; left:0; right:0; height:2px; background: rgba(0,255,0,.8); top:10%; animation: dspbs-scan 2.2s linear infinite; }
@keyframes dspbs-scan { 0%{ top:10%; } 100%{ top:88%; } }
.dspbs-status { padding: 8px 14px; font-size: 14px; color:#374151; background:#f9fafb; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.dspbs-manual { display:flex; gap:8px; padding: 10px 14px; }
.dspbs-manual input { flex:1; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font-size:14px; }
.dspbs-manual button { padding:10px 14px; border:none; background:#2563eb; color:#fff; border-radius:10px; font-weight:700; cursor:pointer; }
.dspbs-manual button:hover { background:#1d4ed8; }
.dspbs-results { padding: 12px 14px 16px; max-height: 36vh; overflow:auto; }
.dspbs-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
.dspbs-card { border:1px solid #eee; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.dspbs-card img { width:100%; height:140px; object-fit:contain; background:#fff; }
.dspbs-card-title { padding:8px 10px; font-weight:600; font-size:14px; }
.dspbs-card-price { padding:0 10px 8px; color:#059669; font-weight:700; font-size:14px; min-height:22px; }
.dspbs-card-btn { display:block; margin: 8px 10px 10px; text-align:center; background:#111827; color:#fff; padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:700; }
.dspbs-card-btn:hover { background:#000; } .dspbs-btn {
display:inline-flex; align-items:center; gap:.5rem;
border:1px solid #3b6693; background:transparent; color:#3b6693;
padding:6px 12px; border-radius:10px; cursor:pointer;
font-weight:700; font-size:14px;
}
.dspbs-btn:hover{ background: rgba(59,102,147,0.08); } .dspbs-fab {
position: fixed; bottom: 18px; right: 16px;
width:54px; height:54px; border-radius:50%;
background:#2563eb; color:#fff; border:none;
box-shadow: 0 10px 25px rgba(0,0,0,.25); cursor:pointer; z-index:999998;
display:none;
}
@media (max-width: 992px){
.dspbs-fab { display:flex; align-items:center; justify-content:center; }
}