.tr-stage { background: #fff; color: #16181d; cursor: zoom-in; }
.tr-stage.tr-movable { cursor: move; touch-action: none; }
.tr-stage.is-full { cursor: default; touch-action: none; overscroll-behavior: none; }
.tr-stage.is-full.tr-movable { cursor: move; }
.tr-bg { position: absolute; inset: 0; background: #fff; }
.tr-img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: 50% 50%; pointer-events: none; user-select: none;
  -webkit-user-select: none; -webkit-user-drag: none; }
.tr-img[hidden] { display: none; }
.tr-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tr-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.tr-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 14px; max-width: 80%;
  text-align: center; font-size: .9rem; color: #6b7080; pointer-events: none; }
.is-full .tr-empty { display: none; }
.tr-stage.tr-drop { outline: 3px dashed #2f5bd8; outline-offset: -10px; }
.tr-shield { position: absolute; inset: 0; z-index: 8; touch-action: none; cursor: default; -webkit-touch-callout: none; }
.tr-shield[hidden] { display: none; }
.tr-lock { position: absolute; z-index: 9; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 48px; height: 48px;
  border-radius: 50%; border: 0; padding: 0; background: rgba(20, 22, 28, .55); color: #fff; cursor: pointer; display: grid; place-items: center;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: none; opacity: .55; transition: opacity .3s, background .3s; }
.tr-lock[hidden] { display: none; }
.tr-lock:hover, .tr-lock:focus-visible, .tr-lock.holding, .tr-lock.pulse { opacity: 1; }
.tr-lock[data-locked="false"] { background: rgba(20, 22, 28, .78); opacity: .9; }
.tr-lock[data-locked="false"] .tr-shackle { transform: translate(3px, -2px) rotate(20deg); transform-origin: 16px 11px; }
.tr-lock .tr-ic { width: 22px; height: 22px; grid-area: 1 / 1; }
.tr-lock .tr-ring { width: 48px; height: 48px; grid-area: 1 / 1; transform: rotate(-90deg); }
.tr-ring circle { fill: none; stroke: #ffc83d; stroke-width: 4; stroke-dasharray: 132; stroke-dashoffset: 132; }
.tr-lock.holding .tr-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear; }
.st-idle .tr-lock[data-locked="true"] { cursor: default !important; }
.tr-bar { margin-top: 12px; }
.tr-bar .btn { max-width: 100%; white-space: normal; }
.tr-file { display: inline-flex; align-items: center; }
input.sr-only:focus-visible + .tr-file { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-imgctl { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.tr-imgctl:disabled { opacity: .5; }
.tr-imgctl .btn { font-size: .88rem; padding: 6px 12px; }
.tr-imgctl .btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.tr-sub { margin-top: 10px; display: grid; gap: 8px; }
.tr-sub[hidden] { display: none; }
.tr-stage .fs-btn[hidden], .tr-empty[hidden] { display: none; }
.ctl .switch { justify-content: flex-start; }
.panel .btn:disabled { opacity: .5; cursor: default; }