/* Document scanner: the same dark glass workspace as the photo editor (photo.css), plus a camera view, four draggable corners and a page strip. */
.cb-sc .cb-pe-body { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) auto; }
.cb-sc-stage { position: relative; }
.cb-sc-strip { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding: 8px 10px; overflow-x: auto; border-radius: 22px; min-height: 86px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 30px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.cb-sc-strip[hidden] { display: none; }
.cb-sc-thumb { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 58px; height: 70px; padding: 3px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.08); cursor: pointer; }
.cb-sc-thumb canvas { display: block; border-radius: 5px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cb-sc-thumb span { position: absolute; right: 4px; bottom: 4px; min-width: 18px; padding: 0 5px; border-radius: 999px; font: 700 11px/18px var(--font-sans, system-ui); color: #fff; background: rgba(0,0,0,.62); text-align: center; }
.cb-sc-thumb.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 26%, transparent); }
.cb-sc-thumb:focus-visible { outline: 2px solid #9db8ff; outline-offset: 2px; }

/* camera */
.cb-sc-camera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #05070c; overflow: hidden; border-radius: inherit; }
.cb-sc-video { width: 100%; height: 100%; object-fit: contain; background: #05070c; }
.cb-sc-camwait, .cb-sc-camerr { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: #e8ebf3; font-size: 14px; background: rgba(5,7,12,.72); }
.cb-sc-camwait[hidden] { display: none; }
.cb-sc-camerr { position: static; background: none; max-width: 340px; }
.cb-sc-center { justify-content: center; }
.cb-sc-camctl { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 28px; }
.cb-sc-shutter { width: 74px; height: 74px; padding: 0; border-radius: 50%; border: 4px solid rgba(255,255,255,.9); background: rgba(255,255,255,.14); cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s var(--spring, ease); }
.cb-sc-shutter span { width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: inset 0 -3px 6px rgba(0,0,0,.18); transition: transform .15s; }
.cb-sc-shutter:active span { transform: scale(.88); }
.cb-sc-shutter:disabled { opacity: .4; pointer-events: none; }
.cb-sc-camside { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cb-sc-camside[hidden] { display: block; visibility: hidden; }
.cb-sc-flash::after { content: ''; position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; animation: cb-sc-flash .18s ease-out; pointer-events: none; }
@keyframes cb-sc-flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* the four corners */
.cb-sc-cropbox { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.5); touch-action: none; user-select: none; }
.cb-sc-crop-img { display: block; max-width: 100%; max-height: calc(100dvh - 230px); width: auto; height: auto; border-radius: 4px; }
.cb-sc-poly { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cb-sc-poly .dim { fill: rgba(4,6,12,.55); }
.cb-sc-poly .edge { fill: none; stroke: #5ee6a8; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cb-sc-corner { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: rgba(94,230,168,.95); box-shadow: 0 2px 8px rgba(0,0,0,.55); cursor: grab; touch-action: none; }
.cb-sc-corner::after { content: ''; position: absolute; inset: -14px; }
.cb-sc-corner.drag { cursor: grabbing; transform: scale(1.25); }
.cb-sc-corner:focus-visible { outline: 3px solid #9db8ff; outline-offset: 3px; }

/* the finished page */
.cb-sc-pagebox { position: relative; display: inline-block; max-width: 100%; line-height: 0; box-shadow: 0 12px 40px rgba(0,0,0,.55); border-radius: 3px; background: #fff; }
.cb-sc-page { display: block; max-width: 100%; max-height: calc(100dvh - 230px); width: auto; height: auto; border-radius: 3px; }
.cb-sc-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.35); }
.cb-sc-busy[hidden] { display: none; }

.cb-pe-sizerow { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.cb-pe-sizerow.hidden, .cb-pe-save .hidden { display: none; }

@media (max-width: 860px) {
  .cb-sc .cb-pe-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; }
  .cb-sc .cb-pe-panel { order: 2; max-height: 32dvh; padding: 12px; }
  .cb-sc-strip { order: 3; min-height: 80px; }
  .cb-sc-crop-img, .cb-sc-page { max-height: calc(68dvh - 150px); }
  .cb-sc[data-mode="capture"] .cb-pe-panel { display: none; }
  .cb-sc[data-mode="capture"] .cb-pe-body { grid-template-rows: minmax(0, 1fr) auto; }
}