/* bgremove tools — styles owned by the bgremove work; keep area-specific rules here, shared tokens stay in style.css */
.bgr-device { margin-top: -4px; }
.bgr-run { display: grid; gap: 6px; }
.bgr-run:has(.bgr-status:empty):has(.bgr-progress[hidden]) { display: none; }
.bgr-progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 99px; background: var(--soft); overflow: hidden; accent-color: var(--ink); }
.bgr-progress::-webkit-progress-bar { background: var(--soft); border-radius: 99px; }
.bgr-progress::-webkit-progress-value { background: var(--ink); border-radius: 99px; transition: width .2s var(--ease-out); }
.bgr-progress::-moz-progress-bar { background: var(--ink); border-radius: 99px; }
.bgr-errbox { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.bgr-errbox .err { margin: 0; }

.bgr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bgr-item {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border: 1px solid var(--line); background: none; border-radius: 10px; padding: 8px 12px; text-align: left; cursor: pointer; font-size: 14px;
}
.bgr-item:disabled { cursor: default; }
.bgr-item[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bgr-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgr-state { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bgr-list li[data-state="error"] .bgr-item { align-items: flex-start; flex-direction: column; gap: 2px; }
.bgr-list li[data-state="error"] .bgr-state { color: #C0362C; white-space: normal; }

/* the preview sits on the checkerboard from .stage; the canvas keeps its aspect ratio inside both limits */
.bgr-stage { padding: 0; max-height: none; overflow: hidden; }
.bgr-canvas { position: relative; line-height: 0; }
.bgr-stage canvas { max-width: 100%; max-height: 62vh; width: auto; height: auto; }
.bgr-view.painting { cursor: none; touch-action: none; }
.bgr-cursor {
  position: absolute; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}

.bgr-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.bgr-brush { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bgr-label { font-size: 14px; font-weight: 600; margin-right: 2px; }
.bgr-mode { padding: 7px 14px; }
.bgr-mode[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bgr-size { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.bgr-size input { width: 120px; }
.tool.bgr input[type=color] { width: 100%; height: 44px; padding: 3px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.bgr-reset { padding: 7px 14px; }
.bgr-saverow { display: grid; gap: 8px; justify-items: start; }