/* Векторное масштабирование карты (--lcard-zoom / --lcard-scale), блокировка анимаций при движении камеры (.is-cam-moving) и эффекты */
.lh-lcard-surface {
  --lcard-scale: 1px; position: relative; width: 100%; aspect-ratio: 17 / 10; overflow: hidden; user-select: none;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.22); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  transition: border-radius 180ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease, box-shadow 180ms ease;
}
.tma-loyalty-card-box { position: relative; width: 100%; cursor: pointer; }
.tma-loyalty-card-box .lh-lcard-surface { --lcard-scale: 0.68px; }
.lh-figma-artboard-box { --lcard-zoom: 1; }
.lh-figma-artboard-box .lh-lcard-surface { --lcard-scale: calc(1px * var(--lcard-zoom, 1)); width: calc(680px * var(--lcard-zoom, 1)); height: calc(400px * var(--lcard-zoom, 1)); aspect-ratio: auto; }
.lh-figma-artboard-box.is-cam-moving, .lh-figma-artboard-box.is-cam-moving *, .lh-figma-artboard-box.is-cam-moving .lh-lcard-surface, .lh-figma-artboard-box.is-cam-moving .lh-lcard-layer { transition: none !important; }

.lh-lcard-pattern-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0.14; z-index: 1; }
.lh-lcard-surface.is-pat-grid .lh-lcard-pattern-overlay { background-image: linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px); background-size: calc(28 * var(--lcard-scale, 1px)) calc(28 * var(--lcard-scale, 1px)); }
.lh-lcard-surface.is-pat-dots .lh-lcard-pattern-overlay { background-image: radial-gradient(rgba(255,255,255,0.35) 1.2px, transparent 1.2px); background-size: calc(18 * var(--lcard-scale, 1px)) calc(18 * var(--lcard-scale, 1px)); }

.lh-lcard-layer { position: absolute; display: inline-flex; align-items: center; line-height: 1.15; white-space: nowrap; overflow: visible !important; box-sizing: border-box; transform-origin: center center; }
.lh-lcard-layer:not(.is-dragging-layer) { transition: left 180ms cubic-bezier(0.22, 1, 0.36, 1), top 180ms cubic-bezier(0.22, 1, 0.36, 1), width 180ms cubic-bezier(0.22, 1, 0.36, 1), height 180ms cubic-bezier(0.22, 1, 0.36, 1), padding 180ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 180ms cubic-bezier(0.22, 1, 0.36, 1), font-size 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms ease, color 160ms ease, box-shadow 180ms ease, text-shadow 180ms ease, backdrop-filter 180ms ease; }
.lh-lcard-clip, .lh-lcard-svg-wrap { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lh-lcard-layer.is-type-qr { padding: calc(6 * var(--lcard-scale, 1px)); aspect-ratio: 1 / 1; }
.lh-lcard-layer.is-type-image { padding: 0 !important; }
.lh-lcard-img, .lh-lcard-svg-wrap svg { width: 100%; height: 100%; display: block; pointer-events: none; object-fit: cover; }

.lh-lcard-surface.is-interactive .lh-lcard-layer { cursor: grab; }
.lh-lcard-surface.is-interactive .lh-lcard-layer:hover { outline: 1.5px dashed rgba(56, 189, 248, 0.85); }
.lh-lcard-layer.is-selected { outline: 2px solid #007aff !important; }

.lh-figma-handle { position: absolute; width: 11px; height: 11px; border-radius: 3px; background: #ffffff; border: 2px solid #007aff; box-shadow: 0 1px 4px rgba(0,0,0,0.28); z-index: 75; }
.lh-figma-handle::after { content: ""; position: absolute; inset: -6px; }
.lh-figma-handle.is-nw { top: -6px; left: -6px; cursor: nwse-resize; } .lh-figma-handle.is-n { top: -6px; left: calc(50% - 5.5px); cursor: ns-resize; }
.lh-figma-handle.is-ne { top: -6px; right: -6px; cursor: nesw-resize; } .lh-figma-handle.is-e { top: calc(50% - 5.5px); right: -6px; cursor: ew-resize; }
.lh-figma-handle.is-se { bottom: -6px; right: -6px; cursor: nwse-resize; } .lh-figma-handle.is-s { bottom: -6px; left: calc(50% - 5.5px); cursor: ns-resize; }
.lh-figma-handle.is-sw { bottom: -6px; left: -6px; cursor: nesw-resize; } .lh-figma-handle.is-w { top: calc(50% - 5.5px); left: -6px; cursor: ew-resize; }

.lh-figma-drop-ghost { position: absolute; z-index: 85; border: 2px dashed #38bdf8; background: rgba(56, 189, 248, 0.18); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 12px; font-weight: 600; pointer-events: none; }
.lh-figma-guide { position: absolute; background: #ff2d55; pointer-events: none; opacity: 0; z-index: 90; }
.lh-figma-guide.is-vert { top: 0; bottom: 0; left: 50%; width: 1.5px; } .lh-figma-guide.is-horiz { left: 0; right: 0; top: 50%; height: 1.5px; }
.lh-figma-guide.is-visible { opacity: 0.95; }
.lh-figma-hud { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 95; background: rgba(24, 24, 27, 0.9); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; pointer-events: none; }

.lh-figma-studio { height: calc(100dvh - 20px); display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.lh-figma-topbar { background: var(--surface); border-radius: 16px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.lh-figma-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 256px 1fr 308px; gap: 12px; overflow: hidden; }
.lh-figma-panel { background: var(--surface); border-radius: 18px; padding: 14px 10px 14px 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lh-figma-panel > .lh-pane-scroll { display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }

.lh-figma-canvas-wrap { background-color: #e5e7eb; background-image: radial-gradient(#cbd5e1 1.25px, transparent 1.25px); background-size: 20px 20px; border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: grab; user-select: none; }
.lh-figma-canvas-wrap:active { cursor: grabbing; }
.lh-figma-bottom-bar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 45; display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; }

.lh-figma-layers-list, .lh-figma-tiers-list { display: flex; flex-direction: column; gap: 4px; position: relative; padding-bottom: 36px; }
.lh-figma-layers-list.is-file-dragover { outline: 2px dashed #007aff; border-radius: 12px; }
.lh-figma-layer-row { height: 36px; padding: 0 8px; border-radius: 10px; background: var(--canvas); display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; touch-action: none; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms ease; }
.lh-figma-layer-row:hover { background: var(--hover); }
.lh-figma-layer-row.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.lh-figma-layer-row.is-muted-row { opacity: 0.55; }
.lh-figma-layer-row.is-dragging-row { background: var(--surface); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16); transition: none !important; cursor: grabbing; }
.lh-figma-layer-grip { color: var(--secondary-text); display: inline-flex; cursor: grab; opacity: 0.6; }
.lh-figma-layer-ico { color: var(--secondary-text); flex-shrink: 0; }
.lh-figma-layer-row.is-active .lh-figma-layer-ico { color: var(--primary); }
.lh-figma-layer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-figma-layer-acts { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0.45; }
.lh-figma-layer-row:hover .lh-figma-layer-acts, .lh-figma-layer-row.is-active .lh-figma-layer-acts { opacity: 1; }
.lh-figma-mini-btn { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--secondary-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lh-figma-mini-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }
.lh-figma-mini-btn.is-on { color: var(--primary); opacity: 1; }
.lh-figma-mini-btn.is-danger:hover { background: var(--semantic-err-bg); color: var(--semantic-err); }

.lh-card-rich-inp { min-height: 48px !important; max-height: 96px !important; padding: 8px 10px !important; background: var(--canvas) !important; border-radius: 10px !important; font-size: 13.5px !important; line-height: 20px !important; }
.lh-figma-tier-row { display: grid; grid-template-columns: 1fr auto 52px auto; align-items: center; gap: 6px; padding: 6px 10px; background: var(--canvas); border-radius: 10px; font-size: 12.5px; }
.lh-figma-num-inp { width: 50px; height: 28px; border: 0; border-radius: 7px; background: var(--surface); text-align: center; font-weight: 600; font-size: 12.5px; }
.lh-figma-align-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; background: var(--canvas); padding: 4px; border-radius: 10px; }
.lh-figma-xy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.lh-figma-xy-grid label { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--canvas); padding: 5px 7px; border-radius: 8px; font-size: 11px; color: var(--secondary-text); font-weight: 600; }
.lh-figma-xy-grid input[type="number"] { width: 100%; min-width: 0; height: 22px; border: 0; border-radius: 5px; background: transparent; text-align: right; padding: 0; font-size: 12px; font-weight: 600; color: var(--text); }

.lh-insp-sliders-box, .lh-insp-colors-box { display: flex; flex-direction: column; gap: 7px; background: var(--canvas); padding: 10px; border-radius: 12px; }
.lh-insp-slider-row { display: flex; flex-direction: column; gap: 4px; }
.lh-insp-slider-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--secondary-text); }
.lh-insp-num-wrap { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); padding: 1px 6px; border-radius: 6px; font-size: 11.5px; color: var(--secondary-text); }
.lh-insp-num-badge { width: 38px; height: 20px; border: 0; outline: 0; background: transparent; text-align: right; font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; padding: 0; }
.lh-insp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: #d8d8de; outline: 0; cursor: pointer; }
.lh-insp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #1d1d1f; border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: grab; }
.lh-weight-pills { width: 100%; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.lh-weight-pills .lh-subtab-btn { padding: 0 4px; font-size: 11.5px; height: 28px; }

.lh-insp-color-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; }
.lh-cp-trigger-btn { height: 30px; padding: 0 10px 0 6px; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, monospace; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.lh-cp-swatch-dot { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); flex-shrink: 0; }
.lh-cp-popover { --cp-hue: 48; position: fixed; z-index: 990; width: 236px; background: var(--surface); border-radius: 16px; padding: 12px; box-shadow: 0 16px 42px rgba(15, 23, 42, 0.24); display: flex; flex-direction: column; gap: 10px; user-select: none; }
.lh-cp-sv-box { position: relative; width: 100%; height: 138px; border-radius: 10px; cursor: crosshair; overflow: hidden; background: linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%), hsl(var(--cp-hue, 0), 100%, 50%); }
.lh-cp-sv-cursor { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 1px 5px rgba(0,0,0,0.45); transform: translate(-50%, -50%); pointer-events: none; }
.lh-cp-hue-bar { position: relative; width: 100%; height: 12px; border-radius: 999px; cursor: pointer; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.lh-cp-hue-thumb { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 2px solid #1d1d1f; transform: translate(-50%, -50%); pointer-events: none; }
.lh-cp-inputs-row { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 5px; }
.lh-cp-inputs-row label { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--secondary-text); }
.lh-cp-inputs-row input { width: 100%; height: 26px; border: 0; border-radius: 6px; background: var(--field); text-align: center; font-size: 11.5px; font-weight: 600; color: var(--text); font-family: ui-monospace, SFMono-Regular, monospace; padding: 0 2px; }