.ucs-qr-scanner-workspace {
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr);
  gap: 18px;
  align-items: start;
}
.ucs-qr-scanner-workspace > .ucs-qr-scanner-panel { grid-column: 1; grid-row: 1; }
.ucs-qr-scanner-workspace > .ucs-qr-output-panel { grid-column: 2; grid-row: 1 / span 2; }
.ucs-qr-scanner-workspace > .ucs-qr-scanner-media { grid-column: 1; grid-row: 2; }
.ucs-qr-scanner-panel,
.ucs-qr-output-panel,
.ucs-qr-scan-history {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--ucs-line,#e2e8f0);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.055);
}
.ucs-qr-scanner-panel { padding: clamp(16px,2.3vw,24px); }
.ucs-qr-output-panel { position: sticky; top: 92px; padding: clamp(16px,2vw,22px); }
.ucs-qr-source-head,
.ucs-qr-output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}
.ucs-qr-source-head > div,
.ucs-qr-output-head > div { min-width: 0; }
.ucs-qr-source-head strong,
.ucs-qr-output-head strong { display: block; color: var(--ucs-ink,#101828); font-size: 16px; }
.ucs-qr-source-head p,
.ucs-qr-output-head p { margin: 5px 0 0; color: var(--ucs-muted,#667085); font-size: 12px; line-height: 1.55; }
.ucs-qr-private-badge {
  display: inline-flex;
  min-height: 28px;
  box-sizing: border-box;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #067647;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.ucs-qr-private-badge::before { content: "✓"; }
.ucs-qr-source-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ucs-qr-upload-source,
.ucs-qr-camera-source {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #dbe5f1;
  border-radius: 15px;
  background: #f8fafc;
}
.ucs-qr-upload-source { padding: 8px; }
.ucs-qr-upload-source .ucs-dropzone {
  min-height: 176px;
  border-radius: 12px;
  background: #fff;
}
.ucs-qr-upload-source .ucs-dropzone.is-ready { min-height: 82px; }
.ucs-qr-upload-source .ucs-upload-ready {
  grid-template-columns: 32px minmax(0,1fr) !important;
  align-items: center;
  gap: 5px 9px;
}
.ucs-qr-upload-source .ucs-upload-ready > i {
  width: 32px;
  height: 32px;
  grid-row: 1 / span 2;
  border-radius: 9px;
  background: #dcfce7;
  color: #15803d;
  font-size: 15px;
}
.ucs-qr-upload-source .ucs-upload-ready > span {
  min-width: 0;
  overflow: hidden;
  color: #1e3a8a;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.ucs-qr-upload-source .ucs-upload-ready > b {
  grid-column: 2;
  color: #2563eb;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
}
.ucs-qr-camera-source {
  display: flex;
  min-height: 194px;
  align-items: stretch;
  flex-direction: column;
  padding: 16px;
}
.ucs-qr-camera-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 20px;
  font-style: normal;
}
.ucs-qr-camera-source strong { color: var(--ucs-ink,#101828); font-size: 14px; }
.ucs-qr-camera-source p { margin: 5px 0 13px; color: var(--ucs-muted,#667085); font-size: 11.5px; line-height: 1.5; }
.ucs-qr-camera-source .ucs-actions { margin-top: auto; }
.ucs-qr-camera-source .ucs-button { flex: 1 1 118px; min-width: 0; }
.ucs-qr-scanner-media {
  display: grid;
  position: relative;
  min-height: 300px;
  max-height: min(620px,68vh);
  place-items: center;
  overflow: hidden;
  margin: 0;
  border: 1px solid #1e293b;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 42%,#1e293b,#090f1c 72%);
}
.ucs-qr-scanner-media canvas,
.ucs-qr-scanner-media video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(620px,68vh);
  object-fit: contain;
}
.ucs-qr-scanner-media video { min-height: 300px; object-fit: cover; }
.ucs-qr-scan-frame {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(62%,300px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  box-shadow: 0 0 0 999px rgba(2,6,23,.27);
  pointer-events: none;
}
.ucs-qr-scan-frame::before,
.ucs-qr-scan-frame::after {
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: #60a5fa;
  content: "";
}
.ucs-qr-scan-frame::before { top: -3px; left: -3px; border-top: 4px solid #60a5fa; border-left: 4px solid #60a5fa; border-radius: 18px 0 0; }
.ucs-qr-scan-frame::after { right: -3px; bottom: -3px; border-right: 4px solid #60a5fa; border-bottom: 4px solid #60a5fa; border-radius: 0 0 18px; }
.ucs-qr-scan-beam {
  position: absolute;
  z-index: 5;
  top: 11%;
  right: 8%;
  left: 8%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,#60a5fa 18%,#bfdbfe 50%,#60a5fa 82%,transparent);
  box-shadow: 0 0 12px rgba(96,165,250,.8);
  animation: ucs-qr-scan 2.1s ease-in-out infinite alternate;
}
@keyframes ucs-qr-scan { to { transform: translateY(232px); } }
.ucs-qr-status {
  display: grid;
  min-height: 46px;
  box-sizing: border-box;
  grid-template-columns: 10px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #dbe5f1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.ucs-qr-status::before { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; content: ""; }
.ucs-qr-status.is-working { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.ucs-qr-status.is-working::before { border: 2px solid #bfdbfe; border-top-color: #2563eb; background: transparent; animation: ucs-spin .7s linear infinite; }
.ucs-qr-status.is-success { border-color: #bbf7d0; background: #f0fdf4; color: #067647; }
.ucs-qr-status.is-success::before { background: #16a34a; }
.ucs-qr-status.is-error { border-color: #fecaca; background: #fff7f7; color: #b42318; }
.ucs-qr-status.is-error::before { background: #ef4444; }
.ucs-qr-result-empty {
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  color: #667085;
  text-align: center;
}
.ucs-qr-result-empty i { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #dbeafe; color: #2563eb; font-size: 24px; font-style: normal; }
.ucs-qr-result-empty strong { color: #344054; font-size: 14px; }
.ucs-qr-result-empty span { max-width: 270px; font-size: 12px; line-height: 1.55; }
.ucs-qr-output-panel .ucs-result { margin: 0; border-radius: 14px; box-shadow: none; }
.ucs-qr-output-panel .ucs-result > strong {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ucs-qr-output-panel .ucs-result pre {
  min-height: 130px;
  max-height: 360px;
  overflow: auto;
  padding: 13px;
  border: 1px solid #dbe5f1;
  border-radius: 11px;
  background: #fff;
  color: #172033;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}
.ucs-qr-output-panel .ucs-result .ucs-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ucs-qr-output-panel .ucs-result .ucs-button { width: 100%; min-width: 0; }
.ucs-qr-open-link { grid-column: 1 / -1; text-align: center; }
.ucs-qr-result-meta { display: block; margin: 9px 0 0; color: #667085; font-size: 11px; }
.ucs-qr-scan-history { grid-column: 1 / -1; padding: 18px; }
.ucs-qr-scan-history > strong { display: block; color: #101828; font-size: 14px; }
.ucs-qr-scan-history > small { display: block; margin: 4px 0 12px; color: #667085; font-size: 11px; }
.ucs-qr-scan-history-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.ucs-qr-scan-history-item {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 11px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #f8fafc;
}
.ucs-qr-scan-history-item strong { color: #344054; font-size: 11px; }
.ucs-qr-scan-history-item small { min-width: 0; overflow: hidden; color: #667085; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.ucs-qr-scan-history-item .ucs-button { grid-column: 2; grid-row: 1 / 3; min-height: 36px; padding: 7px 10px; }

@media (max-width: 899px) {
  .ucs-qr-scanner-workspace { grid-template-columns: 1fr; }
  .ucs-qr-scanner-workspace > .ucs-qr-scanner-panel,
  .ucs-qr-scanner-workspace > .ucs-qr-output-panel,
  .ucs-qr-scanner-workspace > .ucs-qr-scanner-media,
  .ucs-qr-scanner-workspace > .ucs-qr-scan-history { grid-column: auto; grid-row: auto; }
  .ucs-qr-scanner-workspace > .ucs-qr-scanner-panel { order: 1; }
  .ucs-qr-scanner-workspace > .ucs-qr-output-panel { order: 2; }
  .ucs-qr-scanner-workspace > .ucs-qr-scanner-media { order: 3; }
  .ucs-qr-scanner-workspace > .ucs-qr-scan-history { order: 4; }
  .ucs-qr-scanner-workspace.is-camera-active > .ucs-qr-scanner-media { order: 2; }
  .ucs-qr-scanner-workspace.is-camera-active > .ucs-qr-output-panel { order: 3; }
  .ucs-qr-output-panel { position: static; top: auto; }
  .ucs-qr-scanner-workspace.has-scan-result > .ucs-qr-scanner-media { min-height: 170px; max-height: 240px; }
  .ucs-qr-scanner-workspace.has-scan-result > .ucs-qr-scanner-media canvas,
  .ucs-qr-scanner-workspace.has-scan-result > .ucs-qr-scanner-media video { max-height: 240px; }
}
@media (max-width: 760px) {
  .ucs-qr-source-grid { grid-template-columns: 1fr; }
  .ucs-qr-upload-source .ucs-dropzone { min-height: 145px; }
  .ucs-qr-upload-source .ucs-dropzone.is-ready { min-height: 68px; }
  .ucs-qr-camera-source { min-height: 0; }
  .ucs-qr-camera-source .ucs-actions { display: grid; grid-template-columns: 1fr; }
  .ucs-qr-camera-source .ucs-button { width: 100%; }
}
@media (max-width: 640px) {
  .ucs-qr-scanner-workspace { gap: 13px; }
  .ucs-qr-scanner-panel,
  .ucs-qr-output-panel,
  .ucs-qr-scan-history { padding: 13px; border-radius: 15px; }
  .ucs-qr-source-head,
  .ucs-qr-output-head { flex-direction: column; gap: 9px; }
  .ucs-qr-scanner-media { min-height: 250px; max-height: 62vh; border-radius: 13px; }
  .ucs-qr-scanner-media canvas,
  .ucs-qr-scanner-media video { max-height: 62vh; }
  .ucs-qr-scanner-media video { min-height: 250px; }
  .ucs-qr-scan-frame { width: min(68%,260px); }
  .ucs-qr-result-empty { min-height: 190px; padding: 18px; }
  .ucs-qr-output-panel .ucs-result .ucs-actions { grid-template-columns: 1fr; }
  .ucs-qr-open-link { grid-column: auto; }
  .ucs-qr-scan-history-list { grid-template-columns: 1fr; }
  .ucs-qr-scanner-workspace.has-scan-result > .ucs-qr-scanner-media { min-height: 150px; max-height: 210px; }
  .ucs-qr-scanner-workspace.has-scan-result > .ucs-qr-scanner-media canvas,
  .ucs-qr-scanner-workspace.has-scan-result > .ucs-qr-scanner-media video { max-height: 210px; }
}
@media (max-width: 380px) {
  .ucs-qr-scanner-panel,
  .ucs-qr-output-panel,
  .ucs-qr-scan-history { padding: 11px; }
  .ucs-qr-private-badge { white-space: normal; }
  .ucs-qr-scanner-media { min-height: 220px; }
  .ucs-qr-scanner-media video { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .ucs-qr-scan-beam { animation: none; top: 50%; }
}