#tool-scan .sc-cam { display: none; margin: 12px auto 0; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 700; cursor: pointer; }
  #tool-scan .sc-cam svg { width: 22px; height: 22px; }
  #tool-scan.sc-touch .sc-cam { display: flex; }
  #tool-scan:not(.sc-touch) [data-cam] { display: none; }
  #tool-scan.sc-touch .dzwrap .sc-cam { width: 100%; max-width: 420px; }
  .sc-strip { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding: 4px 2px 10px; margin: 0 0 12px; }
  .sc-th { flex: none; position: relative; padding: 3px; border: 2px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; }
  .sc-th.on { border-color: var(--accent); }
  .sc-th canvas { display: block; width: 70px; height: 96px; border-radius: 6px; }
  .sc-th span { position: absolute; left: 7px; top: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.62); color: #fff; font-size: .72rem; font-weight: 700; }
  .sc-addtile { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
  .sc-addtile .ghost { white-space: nowrap; }
  .sc-work { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 820px) { .sc-work { grid-template-columns: 1fr; } }
  .sc-label { margin: 0 0 8px; font-weight: 700; }
  .sc-stage, .sc-result { position: relative; display: flex; justify-content: center; align-items: center; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
  .sc-stage { touch-action: none; }
  .sc-stage canvas { display: block; border-radius: 4px; }
  .sc-stage svg { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); overflow: visible; touch-action: none; }
  .sc-stage polygon { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 2; }
  .sc-stage circle { fill: #fff; stroke: var(--accent); stroke-width: 3; cursor: grab; }
  .sc-stage circle:active { cursor: grabbing; }
  .sc-result canvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
  .sc-note { min-height: 1.1em; margin: 6px 0 0; color: var(--muted); font-size: .85rem; }
  .sc-tools, .sc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .sc-filters label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); cursor: pointer; font-size: .9rem; }
  .sc-filters label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
  .sc-filters input { margin: 0; accent-color: var(--accent); }
  .sc-row { margin: 14px 0 4px; }
  #scmsg.ok { color: var(--ok, #1a7f4b); } #scmsg.error { color: var(--error, #d92d20); }