.ucm-lens {
  --ucm-width: 300px;
  --ucm-height: 220px;
  position: fixed;
  z-index: 5200;
  left: 24px;
  top: 96px;
  width: var(--ucm-width);
  color: #f8fbff;
  font: 700 12px/1.25 "Microsoft YaHei", sans-serif;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .58));
  user-select: none;
  touch-action: none;
}

.ucm-lens[hidden] { display: none !important; }

.ucm-lens.is-following { pointer-events: none; }
.ucm-lens.is-following .ucm-head { cursor: default; }

.ucm-lens.is-passthrough { pointer-events: none; }
.ucm-lens.is-passthrough .ucm-head,
.ucm-lens.is-passthrough .ucm-controls { pointer-events: auto; }

.ucm-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid #90a7bb;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #385269, #233a4e);
  cursor: move;
}

.ucm-title { flex: 1 1 auto; min-width: 68px; white-space: nowrap; }
.ucm-status { color: #ffe98a; font-size: 11px; white-space: nowrap; }

.ucm-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid #90a7bb;
  border-bottom: 0;
  background: rgba(24, 43, 59, .97);
}

.ucm-controls button,
.ucm-controls select,
.ucm-head button {
  min-width: 0;
  height: 28px;
  padding: 0 5px;
  border: 1px solid #718ba1;
  border-radius: 5px;
  background: linear-gradient(180deg, #58738a, #39556c);
  box-shadow: inset 0 1px rgba(255,255,255,.25), inset 0 -2px rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.3);
  color: #fff;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.ucm-controls select { background-color: #39556c; }
.ucm-controls button:hover,
.ucm-controls button:focus-visible,
.ucm-head button:hover,
.ucm-head button:focus-visible { filter: brightness(1.3); outline: none; }
.ucm-controls button:active,
.ucm-head button:active { transform: translateY(1px); filter: brightness(.92); }
.ucm-controls button[aria-pressed="true"] {
  border-color: #ffe98a;
  background: linear-gradient(180deg, #f3d95f, #b98a16);
  color: #211900;
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 0 0 2px rgba(255,233,138,.22);
}

.ucm-shapes { grid-column: span 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ucm-shapes button { height: 26px; }
.ucm-source, .ucm-range { grid-column: span 2; width: 100%; }
.ucm-scale-row, .ucm-size-row { grid-column: span 2; display: grid; grid-template-columns: 28px 1fr 28px; gap: 3px; }
.ucm-scale-row output, .ucm-size-row output {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid #607b91;
  border-radius: 4px;
  background: #172d40;
  color: #ffe98a;
}

.ucm-viewport {
  position: relative;
  width: var(--ucm-width);
  height: var(--ucm-height);
  overflow: hidden;
  border: 3px solid #ffe36a;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  touch-action: none;
  cursor: move;
}

.ucm-lens[data-shape="circle"] .ucm-viewport { border-radius: 50%; }
.ucm-lens[data-shape="square"] .ucm-viewport { border-radius: 6px; }
.ucm-lens[data-shape="heart"] .ucm-viewport {
  border-radius: 0;
  clip-path: polygon(50% 96%, 7% 55%, 2% 35%, 7% 17%, 20% 5%, 36% 4%, 50% 18%, 64% 4%, 80% 5%, 93% 17%, 98% 35%, 93% 55%);
}
.ucm-lens[data-shape="heart"] .ucm-resize { right: calc(50% - 12px); bottom: 10px; }
.ucm-lens[data-shape="custom"] .ucm-viewport {
  border-radius: 0;
  clip-path: var(--ucm-custom-clip, polygon(5% 10%, 92% 4%, 98% 74%, 72% 96%, 8% 90%));
}

.ucm-canvas, .ucm-dom-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.ucm-canvas { display: block; }
.ucm-dom-layer { overflow: hidden; background: #fff; pointer-events: none; }
.ucm-dom-layer > * { position: absolute !important; max-width: none !important; max-height: none !important; transform-origin: 0 0 !important; pointer-events: none !important; }
.ucm-custom-hint {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 26, 39, .48);
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.ucm-custom-hint[hidden] { display: none; }
.ucm-resize {
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d39d19;
  box-shadow: 0 1px 5px rgba(0,0,0,.6);
  cursor: nwse-resize;
}
.ucm-lens.is-passthrough .ucm-resize { pointer-events: none; }

#drawingMagnifierLens,
#chartDrawingMagnifierLens,
.mobile-three-drawing-magnifier { display: none !important; }

body.ucm-active #drawingMagnifier[aria-pressed="true"],
body.ucm-active #chartDrawingMagnifier[aria-pressed="true"],
body.ucm-active [data-mobile-drawing-magnifier][aria-pressed="true"] {
  border-color: #ffe98a !important;
  background: linear-gradient(180deg, #f3d95f, #b98a16) !important;
  color: #211900 !important;
}

@media (max-width: 680px) {
  .ucm-lens { --ucm-width: min(280px, calc(100vw - 16px)); --ucm-height: 190px; left: 8px; top: 74px; font-size: 11px; }
  .ucm-head { min-height: 32px; }
  .ucm-controls { gap: 3px; padding: 4px; }
  .ucm-controls button, .ucm-controls select, .ucm-head button { height: 27px; padding-inline: 3px; }
  .ucm-viewport { width: var(--ucm-width); height: var(--ucm-height); }
}