/* Human Visual Editor Simulation — UI + drag/click affordances */
.ed-awaiting{opacity:0!important}
.ed-materializing{will-change:opacity,clip-path,scale}
.ed-typing{cursor:text!important}

.ed-chrome{position:fixed;inset:0;z-index:126;pointer-events:none;font-family:var(--font-mono);color:#d9dee8}
.ed-topbar,.ed-layers,.ed-inspector,.ed-status{
  position:fixed;background:rgba(17,19,24,.94);border:1px solid #303642;
  box-shadow:0 12px 38px rgba(0,0,0,.38);backdrop-filter:blur(12px);
  opacity:0;transition:none;
}
.ed-chrome.on .ed-topbar,.ed-chrome.on .ed-layers,.ed-chrome.on .ed-inspector,.ed-chrome.on .ed-status{opacity:1}
.ed-topbar{
  top:82px;left:50%;transform:translateX(-50%);height:38px;border-radius:8px;
  display:flex;align-items:center;padding:0 7px;gap:4px;white-space:nowrap;
}
.ed-doc{font-size:11px;color:#aab2c0;padding:0 10px 0 5px;border-right:1px solid #363b45;margin-right:3px}
.ed-doc b{color:#596273;margin:0 4px}
.ed-tool{width:27px;height:27px;display:grid;place-items:center;border-radius:5px;font:600 12px/1 var(--font-mono);color:#aeb7c7}
.ed-tool.active{background:#2f80ed;color:#fff;box-shadow:0 0 0 1px #72acff inset}
.ed-zoom{font-size:10px;color:#929cad;padding:0 5px;margin-left:5px}

.ed-layers{left:14px;top:136px;width:176px;border-radius:8px;padding:10px 8px;max-height:44vh;overflow:hidden}
.ed-inspector{right:14px;top:136px;width:196px;border-radius:8px;padding:12px}
.ed-panel-title{font-size:11px;font-weight:600;color:#eef2f8;padding:0 4px 9px;border-bottom:1px solid #2e3440;margin-bottom:7px}
.ed-panel-title span{float:right;font-size:8px;letter-spacing:.1em;color:#687386;margin-top:2px}
.ed-layer-row{height:26px;display:flex;align-items:center;gap:7px;padding:0 5px;border-radius:4px;font-size:9px;color:#98a3b4;white-space:nowrap}
.ed-layer-row>span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.ed-layer-row.active{background:rgba(47,128,237,.2);color:#8dbbff}
.ed-layer-row.done i{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#38c98b}
.ed-layer-icon{width:12px;color:#64748b;text-align:center}
.ed-layer-more{padding:8px 5px 2px;font-size:9px;color:#687386}

.ed-inspect-op{font-size:11px;color:#8dbbff;padding:3px 4px 11px}
.ed-inspect-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ed-inspect-grid label{display:flex;align-items:center;justify-content:space-between;background:#1c2028;border:1px solid #303642;border-radius:4px;padding:6px;color:#697588;font-size:9px}
.ed-inspect-grid b{font-weight:500;color:#d5dbea}
.ed-inspect-row{display:flex;justify-content:space-between;padding:7px 2px;border-top:1px solid #292f39;font-size:9px;color:#778297}
.ed-inspect-row b{font-weight:500;color:#bec7d6}

.ed-status{
  left:50%;bottom:18px;transform:translateX(-50%);border-radius:9px;min-height:46px;
  display:flex;align-items:center;gap:9px;padding:6px 7px 6px 13px;max-width:calc(100vw - 28px);
}
.ed-status>i{width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee;flex:0 0 auto}
.ed-status-text{font-size:10px;color:#d3dae7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.ed-skip{
  pointer-events:auto;min-width:76px;min-height:34px;border:1px solid #3a4352;border-radius:6px;
  background:#242a34;color:#dce5f4;font:500 10px/1 var(--font-mono);cursor:pointer;touch-action:manipulation;
}
.ed-skip:hover,.ed-skip:focus-visible{background:#344054;border-color:#79aaff;outline:none}

/* 拖动中的真实副本 / 组件骨架 */
.ed-ghost{
  position:fixed;left:0;top:0;z-index:124;pointer-events:none;opacity:0;transform-origin:0 0;box-sizing:border-box;
  overflow:hidden;border:1px dashed #38bdf8;border-radius:8px;background:rgba(12,16,23,.9);
  box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 0 1px rgba(56,189,248,.14);
  will-change:transform;color:#dce8f8;
}
.ed-ghost.on{opacity:.86}
.ed-ghost>*{width:100%!important;height:100%!important;margin:0!important;transform:none!important;pointer-events:none!important}
.ed-ghost *{animation:none!important;transition:none!important;pointer-events:none!important}
.ed-ghost-card{padding:12px;position:relative}
.ed-ghost-card i{display:block;height:7px;background:#334155;border-radius:3px;margin-bottom:8px;width:72%}
.ed-ghost-card i:nth-child(2){width:48%}.ed-ghost-card i:nth-child(3){width:61%}
.ed-ghost-card b{display:block;font:600 11px/1.2 var(--font-mono);color:#7dd3fc;margin-top:12px}
.ed-ghost-card span{display:block;font:9px/1.2 var(--font-mono);color:#64748b;margin-top:5px}

.ed-key{
  position:fixed;left:0;top:0;z-index:130;pointer-events:none;opacity:0;
  padding:4px 7px;border-radius:4px;background:#eef2ff;color:#172033;border:1px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.35);font:600 10px/1 var(--font-mono);white-space:nowrap;
}
.ed-key.on{opacity:1}
.ed-ripple{
  position:fixed;z-index:129;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:2px solid #22d3ee;pointer-events:none;opacity:0;
}
.ed-ripple.on{animation:ed-click .42s ease-out}
.ed-ripple.double{box-shadow:0 0 0 4px rgba(34,211,238,.22),0 0 0 9px rgba(34,211,238,.1)}
@keyframes ed-click{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.8)}}

.bd-cursor{transition:none}
.bd-cursor svg{transform-origin:4px 2px;transition:transform .1s ease}
.bd-cursor.ed-down svg{transform:scale(.78) rotate(-9deg)}
.bd-cursor.ed-down{color:#fbbf24}
.bd-cursor.ed-text-cursor svg{opacity:.3;transform:scaleX(.45)}
.bd-frame.ed-op-copy{border-color:#e879f9;border-style:dashed}
.bd-frame.ed-op-cut{border-color:#fb923c;border-style:dashed}
.bd-frame.ed-op-resize{border-color:#34d399}
.bd-frame.ed-op-type{border-color:#22d3ee}

@media (max-width:980px){
  .ed-layers,.ed-inspector{display:none}
  .ed-topbar{top:76px}
}
@media (max-width:720px){
  .ed-doc,.ed-zoom{display:none}
  .ed-topbar{height:34px;padding:0 5px}
  .ed-tool{width:25px;height:25px}
  .ed-status{bottom:10px;width:calc(100vw - 20px);padding-left:10px;gap:7px}
  .ed-status-text{max-width:none;flex:1;font-size:9px}
  .ed-skip{min-width:72px;min-height:36px;flex:0 0 auto}
  .ed-ghost{max-width:82vw;max-height:38vh}
}
@media (prefers-reduced-motion:reduce){
  .ed-chrome,.ed-ghost,.ed-key,.ed-ripple{display:none!important}
  .ed-awaiting{opacity:1!important}
  .ed-materializing,.ed-typing{clip-path:none!important;scale:1!important}
}

/* 独立组装：保留操作本体，降低标签与辅助线噪音 */
.bd-independent .bd-label{display:none}
.bd-independent .bd-gv,.bd-independent .bd-gh{display:none}
.bd-independent .bd-frame{border-width:1px;box-shadow:0 0 0 1px rgba(59,130,246,.1)}
.bd-independent .bd-h{width:4px;height:4px;border-width:1px}
.bd-independent .ed-ghost{box-shadow:0 10px 30px rgba(0,0,0,.34)}
.bd-independent .ed-ghost.on{opacity:.94}
.ed-helper{position:fixed;left:0;top:0;z-index:123;pointer-events:none;opacity:0;will-change:transform}
.ed-helper.on{opacity:.95}
.ed-helper-0{color:#34d399}
.ed-helper-1{color:#e879f9}
.ed-helper.ed-down svg{transform:scale(.72) rotate(-10deg)}
@media (max-width:720px){
  .bd-independent .bd-h{display:none}
  .bd-independent .bd-frame{border-color:rgba(59,130,246,.5)}
}