/* Background Remover — workspace: tool bar, stage and view, before/after split, brush cursor, empty state, queue, overlays. */
.workspace { grid-area: work; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background-color: var(--surface); background-image: radial-gradient(var(--dots) 1px, transparent 1.2px); background-size: 18px 18px; }
.ctxbar { display: flex; align-items: center; gap: 2px; height: var(--ctx-h); padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; flex: none; }
.app[data-mode="empty"] .ctxbar { display: none; }
.ctx-group { display: flex; align-items: center; gap: 2px; flex: none; }
.ctx-label { font-size: var(--fs-s); color: var(--faint); margin: 0 4px 0 6px; white-space: nowrap; }
.ctx-range { width: 92px; accent-color: var(--accent-line); }
.ctx-val { font: 600 11px var(--mono); color: var(--dim); min-width: 38px; text-align: right; }
.tb-zoom { font: 600 12px var(--mono); min-width: 54px; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
.view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app[data-mode="empty"] .view { visibility: hidden; }
.stage[data-tool="pan"] { cursor: grab; }
.stage[data-tool="pan"].grabbing { cursor: grabbing; }
.stage[data-tool="keep"], .stage[data-tool="remove"] { cursor: none; }

/* seg control (also used in the panel) */
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-s); background: var(--input); border: 1px solid var(--line); flex-wrap: wrap; }
.seg-b { min-height: 26px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--dim); font-size: var(--fs-s); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.seg-b:hover { color: var(--fg); background: var(--hover); }
.seg-b.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.seg-b .ic { width: 15px; height: 15px; }

/* before / after split */
.split { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--fg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); z-index: 3; cursor: ew-resize; touch-action: none; }
.split::before { content: ''; position: absolute; inset: 0 -14px; }
@media (pointer: coarse) { .split::before { inset: 0 calc((2px - var(--tlbx-hit, 44px)) / 2); } } /* a finger's grab (shared/input) */
.split-knob { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--input); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.split-knob::before, .split-knob::after { content: ''; position: absolute; top: 11px; border: 6px solid transparent; }
.split-knob::before { left: 3px; border-right: 7px solid var(--fg); }
.split-knob::after { right: 3px; border-left: 7px solid var(--fg); }
.split-l, .split-r { position: absolute; top: 10px; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); font: 600 11px var(--mono); white-space: nowrap; pointer-events: none; }
.split-l { right: 10px; }
.split-r { left: 10px; }

.brush-cursor { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; z-index: 4; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .35); }
.brush-cursor.keep { border-color: var(--keep); }
.brush-cursor.remove { border-color: var(--remove); }
.brush-cursor::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- empty */
.empty { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
.app:not([data-mode="empty"]) .empty { display: none; }
.drop-card { width: min(620px, 100%); padding: 40px 28px 26px; text-align: center; border: 2px dashed var(--line-2); border-radius: 22px; background: color-mix(in srgb, var(--panel) 82%, transparent); transition: border-color .15s, background .15s; }
.drop-card:hover { border-color: var(--faint); }
/* The preview (TlbxDrop.panel.preview): what the app makes, and how. */
.iso-intro { margin-bottom: 18px; }
.drop-card h1 { margin: 0 0 8px; font: 800 clamp(26px, 5vw, 38px)/1.05 var(--font-display); letter-spacing: -.02em; }
.drop-card p { margin: 0 auto 20px; max-width: 460px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.empty-hint { margin: 14px 0 0 !important; font-size: 12px !important; color: var(--faint) !important; }
.empty-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0 !important; font-size: 12px !important; color: var(--faint) !important; }
.empty-privacy .ic { width: 14px; height: 14px; flex: none; }

/* ---------------------------------------------------------------- queue */
.queue { grid-area: queue; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.q-item { position: relative; display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--panel-2); overflow: hidden; flex: none; aspect-ratio: 1; }
.q-item:hover { border-color: var(--line-2); }
.q-item.on { border-color: var(--accent-line); }
.q-item img { width: 100%; height: 100%; object-fit: contain; display: block; background: repeating-conic-gradient(#8885 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.q-badge { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--fg); font: 600 10px/16px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item[data-status="done"] .q-badge { display: none; }
.q-item[data-status="error"] .q-badge { background: var(--danger); }
.q-item[data-status="working"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%) 0 0 / 300% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.q-x { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); opacity: 0; transition: opacity .12s; }
.q-x .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.q-item:hover .q-x, .q-item:focus-within .q-x, .q-item.on .q-x { opacity: 1; }
.q-add { flex: none; display: grid; place-items: center; aspect-ratio: 1; width: 100%; border: 2px dashed var(--line-2); border-radius: 10px; background: none; color: var(--faint); }
.q-add:hover { color: var(--fg); border-color: var(--faint); }

/* ---------------------------------------------------------------- overlays */
.busy { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 6; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; min-width: min(340px, calc(100% - 24px)); padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 12px; }
.busy-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--input); overflow: hidden; }
.busy-bar i { display: block; height: 100%; width: 0; background: var(--accent-line); transition: width .15s; }
.busy.indeterminate .busy-bar i { width: 30% !important; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent-line); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.drop-overlay { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(0, 0, 0, .45); pointer-events: none; }
.drop-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 40px; border-radius: 18px; border: 2px dashed var(--accent-line); background: var(--panel); color: var(--fg); }
.drop-overlay .ic { width: 34px; height: 34px; color: var(--accent-line); }
.drop-overlay span { color: var(--dim); font-size: 12px; }

/* right-button brush resize readout (ui/pointer.js) */
.brush-readout { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; padding: 3px 8px; border-radius: 6px; font: 600 12px/1.2 system-ui, sans-serif; background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--fg); white-space: nowrap; }
.brush-readout[hidden] { display: none; }

/* video player on the stage (js/video/player.js) */
.stage[data-kind="video"] > .view, .stage[data-kind="video"] > .split, .stage[data-kind="video"] > .brush-cursor { display: none; }
.vplayer { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; box-sizing: border-box; background: var(--stage-bg, #111); }
.vplayer[hidden] { display: none; }
.vp-screen { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden;
  background-color: #2a2a2a; background-image: linear-gradient(45deg, #3a3a3a 25%, transparent 25%), linear-gradient(-45deg, #3a3a3a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a3a3a 75%), linear-gradient(-45deg, transparent 75%, #3a3a3a 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.vp-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.vp-controls, .vp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vp-scrub { flex: 1 1 200px; }
.vp-time { font: 500 12px ui-monospace, monospace; min-width: 110px; }
.vp-bgl { display: inline-flex; align-items: center; gap: 6px; }
.vp-msg { margin: 0; font-size: 12px; opacity: .8; min-height: 1em; }
.vp-msg:empty { display: none; }
/* bulk selection (js/ui/bulk.js, js/ui/queue.js): the queue header, a checkbox per tile, the result on the tile */
.q-item.sel { outline: 2px solid var(--accent-line, #2b6cff); outline-offset: 2px; }
.q-item .q-res { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: repeating-conic-gradient(#8885 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.q-item[data-status="done"]:has(.q-res) img { visibility: hidden; }
.q-head { position: sticky; top: -10px; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: -10px -8px 0; padding: 8px 6px 6px; background: var(--panel); flex: none; }
.q-head[hidden] { display: none; }
.q-all { min-height: 28px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel-2); color: var(--fg); font-size: 11.5px; font-weight: 600; }
.q-all:hover { border-color: var(--faint); }
.q-n { font: 600 10.5px var(--mono); color: var(--accent-line); text-align: center; min-height: 14px; }
.q-n:empty { display: none; }
.q-chk { position: absolute; left: 4px; top: 4px; z-index: 1; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .12s; cursor: pointer; }
.q-chk::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--accent-ink, #000); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; }
.q-chk[aria-checked="true"] { background: var(--accent); border-color: var(--accent); opacity: 1; }
.q-chk[aria-checked="true"]::after { opacity: 1; }
.q-item:hover .q-chk, .q-item:focus-visible .q-chk, .queue.selecting .q-chk { opacity: 1; }
.btn.ghost { background: transparent; }

/* Drop strip above the stage (shared/drop, compact). A normal block in the workspace column, never over the stage. Its file
   list scrolls instead of growing, and once images are in it keeps a one-row height so the work keeps the room. */
.iso-drop { flex: 0 1 auto; min-height: 0; max-height: 35%; overflow: auto; margin: 8px 12px 0; padding: 8px 12px; border: 1px dashed var(--line, #c8c8d0); border-radius: 8px; background: var(--panel, transparent); }
.iso-drop .sd-list { max-height: 84px; overflow: auto; }
/* With images loaded the strip is hidden: the queue sidebar takes drops and has Add images, and the whole window still takes drops. */
.app:not([data-mode="empty"]) .iso-drop { display: none; }
.app:not([data-mode="empty"]) .iso-drop .sd-msg { font-size: 12px; }
.app:not([data-mode="empty"]) .iso-drop .sd-list { max-height: 56px; }