/* Standalone transform frames for visual icons inside editable dashboard cards. */
.ems-runtime-icon-overlays { position: absolute; z-index: 20040; inset: 0; pointer-events: none; }
.ems-runtime-icon-frame { position: absolute; box-sizing: border-box; border: 1px dashed transparent; box-shadow: none; pointer-events: none; }
.ems-runtime-icon-frame:hover, .ems-runtime-icon-frame.is-active { border-color: var(--skin-accent, #f6c247); box-shadow: 0 0 12px var(--skin-accent-soft, rgba(246,194,71,.18)); }
.ems-runtime-icon-drag { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; color: transparent; background: transparent; font-size: 0; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; }
.ems-runtime-icon-frame:hover .ems-runtime-icon-drag, .ems-runtime-icon-frame.is-active .ems-runtime-icon-drag, .ems-runtime-icon-drag:focus-visible { top: -23px; left: -1px; inset: auto; width: auto; height: 21px; padding: 0 7px; border: 1px solid var(--skin-accent, #f6c247); border-radius: 3px; color: var(--skin-title, #fff4c7); background: var(--skin-panel-bg, rgba(53,39,8,.94)); font: 600 10px/19px system-ui, sans-serif; white-space: nowrap; }
.ems-runtime-icon-drag:active { cursor: grabbing; }
.ems-runtime-icon-resize { position: absolute; z-index: 1; width: 10px; height: 10px; padding: 0; border: 1px solid #fff; background: var(--skin-accent, #f6c247); opacity: 0; pointer-events: auto; touch-action: none; }
.ems-runtime-icon-frame:hover .ems-runtime-icon-resize, .ems-runtime-icon-frame.is-active .ems-runtime-icon-resize { opacity: 1; }
.ems-runtime-icon-resize[data-direction='nw'] { top: -5px; left: -5px; cursor: nwse-resize; }
.ems-runtime-icon-resize[data-direction='ne'] { top: -5px; right: -5px; cursor: nesw-resize; }
.ems-runtime-icon-resize[data-direction='se'] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.ems-runtime-icon-resize[data-direction='sw'] { bottom: -5px; left: -5px; cursor: nesw-resize; }

/* The ECharts canvas now uses a 3:2 visual stage instead of the whole card. */
/* The compiled component stylesheet loads later. Keep preview geometry stable;
   the runtime promotes only an editor-created transform while it is dragged. */
.ems-gauge-shell__chart { top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(100%, 150cqh) !important; height: min(100%, 66.667cqw) !important; transform: translate(-50%, -50%) !important; }