/* KASKOW Lab — QR & Barcode */
.lqr-side { position: relative; min-width: 0; }
.lqr-card { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.lqr-prev { position: relative; display: grid; place-items: center; min-height: 320px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.lqr-prev.chk { background: repeating-conic-gradient(color-mix(in srgb, var(--text) 9%, transparent) 0% 25%, transparent 0% 50%) 50% / 16px 16px; }
.lqr-prev canvas { display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 36px -22px rgba(15,23,42,.55); }
.lqr-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.lqr-empty svg { width: 30px; height: 30px; color: color-mix(in srgb, var(--lab-acc) 70%, transparent); }
.lqr-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 0; }
.lqr-meta:empty { display: none; }
.lqr-warn { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: #92400e; font-size: .8rem; line-height: 1.45; }
.lqr-warn div { display: flex; gap: 8px; align-items: flex-start; }
[data-theme="dark"] .lqr-warn { color: #fcd34d; }
.lqr-card .lab-btn.big { width: 100%; }
.lqr-more { justify-content: center; }
.lqr-more .lab-btn { flex: 1; }
.lqr-sw { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--lab-card); background: var(--c); box-shadow: 0 0 0 1px var(--lab-line); cursor: pointer; transition: transform .12s; }
.lqr-sw:hover { transform: scale(1.12); }
.lqr-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; border: 1px solid var(--lab-line); background: #fff; }
.lab-color:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- pembaca ---------- */
.lqr-drop, .lqr-cam-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 300px; padding: 28px 22px; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--text) 16%, transparent); text-align: center; background: radial-gradient(26rem 10rem at 50% -2rem, color-mix(in srgb, var(--lab-acc) 10%, transparent), transparent 70%); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.lqr-cam-off { cursor: default; border-style: solid; border-color: var(--lab-line); }
.lqr-drop:hover, .lqr-drop.over { border-color: var(--lab-acc); }
.lqr-drop.over { transform: scale(1.01); background-color: color-mix(in srgb, var(--lab-acc) 6%, transparent); }
.lqr-drop b, .lqr-cam-off b { font-size: 1.05rem; font-weight: 800; }
.lqr-drop > span:not(.lqr-drop-ic), .lqr-cam-off > span:not(.lqr-drop-ic) { max-width: 320px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.lqr-drop-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, var(--lab-acc2), var(--lab-acc)); box-shadow: 0 18px 30px -18px var(--lab-acc); }
.lqr-drop .lab-btn, .lqr-cam-off .lab-btn { margin-top: 6px; }
.lqr-cam { min-width: 0; }
.lqr-cam-on { position: relative; overflow: hidden; min-height: 300px; border-radius: 18px; background: #000; }
.lqr-cam-on video { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.lqr-aim { position: absolute; left: 50%; top: 46%; width: min(58%, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 22px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; transition: box-shadow .2s; }
.lqr-aim::before, .lqr-aim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid rgba(255,255,255,.95); clip-path: polygon(0 0, 28% 0, 28% 6%, 6% 6%, 6% 28%, 0 28%, 0 72%, 6% 72%, 6% 94%, 28% 94%, 28% 100%, 72% 100%, 72% 94%, 94% 94%, 94% 72%, 100% 72%, 100% 28%, 94% 28%, 94% 6%, 72% 6%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.lqr-aim::after { border: 0; height: 2px; top: 50%; inset-inline: 8%; background: linear-gradient(90deg, transparent, var(--lab-acc), transparent); clip-path: none; animation: lqrScan 2s ease-in-out infinite; }
.lqr-cam-on.hit .lqr-aim { box-shadow: 0 0 0 9999px rgba(13,148,136,.35); }
@keyframes lqrScan { 0%, 100% { transform: translateY(-110px); opacity: .2; } 50% { transform: translateY(110px); opacity: 1; } }
.lqr-cam-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.lqr-cam-bar select { flex: 1; max-width: 240px; height: 34px; background: rgba(255,255,255,.92); color: #0f172a; border: 0; }
.lqr-cam-bar .lab-ib { background: rgba(255,255,255,.92); color: #0f172a; }
.lqr-cam-bar .lab-ib.ok { background: #fde047; }
.lqr-cam-bar .lab-btn { background: rgba(255,255,255,.92); color: #0f172a; border: 0; }
.lqr-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lqr-res { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--lab-line); background: color-mix(in srgb, var(--text) 2%, var(--lab-card)); animation: lqrIn .25s ease; }
.lqr-res.none { border-style: dashed; }
@keyframes lqrIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lqr-rhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lqr-rhead img, .lqr-camtag { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--text) 6%, transparent); }
.lqr-camtag { display: grid; place-items: center; color: var(--lab-acc); }
.lqr-rhead > div { min-width: 0; }
.lqr-rhead b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lqr-rhead small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .76rem; color: var(--muted); }
.lqr-rhead small.bad { color: #dc2626; }
.lqr-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); font-family: var(--lab-mono); font-size: .82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow: auto; }
.lqr-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.lqr-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lab-acc2), var(--lab-acc)); animation: lqrBar 1s ease-in-out infinite; }
@keyframes lqrBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- barcode ---------- */
.lbc-fmts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lbc-fmts button { padding: 10px 6px; border-radius: 12px; border: 1px solid var(--lab-line); background: var(--lab-card); color: var(--text); font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.lbc-fmts button:hover { border-color: color-mix(in srgb, var(--lab-acc) 50%, transparent); }
.lbc-fmts button.on { border-color: var(--lab-acc); background: var(--lab-soft); color: var(--lab-acc); box-shadow: inset 0 0 0 1px var(--lab-acc); }
.lbc-prev { position: relative; display: grid; place-items: center; min-height: 230px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, transparent); overflow: auto; }
.lbc-prev svg { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 14px 30px -20px rgba(15,23,42,.5); }
.lbc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 420px; overflow: auto; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); min-height: 160px; }
.lbc-cell { display: grid; place-items: center; padding: 6px; border-radius: 10px; background: #fff; }
.lbc-cell svg { max-width: 100%; height: auto; }
.lbc-grid .lab-empty { grid-column: 1 / -1; }
@media (max-width: 860px) { .lqr-card { position: static; } .lbc-fmts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lqr-side { order: -1; } .lqr-prev { min-height: 240px; } .lqr-prev canvas { max-width: 240px; } }
@media (max-width: 560px) { .lbc-fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lqr-prev { min-height: 260px; } .lqr-results { grid-template-columns: 1fr; } }