#ui-split-workbench {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  background: rgba(8,12,18,.42); backdrop-filter: blur(3px);
  color: var(--text, #111827); font-family: Inter, "PingFang SC", system-ui, sans-serif;
}
.uis-panel {
  width: 80vw; height: 80vh; display: grid; grid-template-rows: 58px minmax(0,1fr);
  border-radius: 18px; overflow: hidden; background: var(--bg, #eef0f3);
  border: 1px solid color-mix(in srgb, var(--text,#111827) 12%, transparent);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
@media (max-width: 900px) {
  .uis-panel { width: 96vw; height: 92vh; }
}
#ui-split-workbench.hidden { display: none; }
.uis-topbar { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid color-mix(in srgb,var(--text,#111827) 10%,transparent); background:var(--bg-card,#fff); }
.uis-topbar strong { margin-right:2px; font-size:15px; white-space:nowrap; }
.uis-tool-cluster { display:flex; align-items:center; gap:4px; padding:3px; border-radius:12px; background:color-mix(in srgb,var(--text,#111827) 4%,transparent); }
.uis-topbar button, .uis-side button, .uis-layer-actions button {
  border:0; border-radius:9px; padding:8px 11px; color:inherit; background:color-mix(in srgb,var(--text,#111827) 7%,transparent); cursor:pointer;
}
.uis-topbar .uis-icon-btn { width:36px; height:36px; display:grid; place-items:center; padding:0; background:transparent; }
.uis-topbar .uis-icon-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.uis-topbar .uis-icon-btn.primary { width:40px; }
.uis-topbar button:hover, .uis-side button:hover { background:color-mix(in srgb,var(--text,#111827) 13%,transparent); }
.uis-topbar button.primary { color:var(--bg-card,#fff); background:var(--text,#111827); }
.uis-topbar button:disabled, .uis-side button:disabled { opacity:.42; cursor:not-allowed; }
.uis-status { margin-left:auto; min-width:130px; color:var(--text-muted,#6b7280); font-size:12px; text-align:right; }
.uis-main { min-height:0; display:grid; grid-template-columns:250px minmax(0,1fr) 280px; }
.uis-side { min-height:0; overflow:auto; padding:14px; background:var(--bg-card,#fff); }
.uis-side.left {
  border-right:1px solid color-mix(in srgb,var(--text,#111827) 10%,transparent);
  background:color-mix(in srgb,var(--bg-card,#fff) 72%,transparent);
  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);
}
.uis-side.right { border-left:1px solid color-mix(in srgb,var(--text,#111827) 10%,transparent); }
.uis-side h3 { margin:0 0 10px; font-size:13px; }
.uis-help { margin:0 0 14px; color:var(--text-muted,#6b7280); font-size:12px; line-height:1.6; }
.uis-stage-wrap { min-width:0; min-height:0; overflow:auto; display:grid; place-items:center; padding:34px; background:
  linear-gradient(45deg,color-mix(in srgb,var(--text,#111827) 6%,transparent) 25%,transparent 25%) 0 0/20px 20px,
  linear-gradient(-45deg,color-mix(in srgb,var(--text,#111827) 6%,transparent) 25%,transparent 25%) 0 10px/20px 20px,
  var(--bg-soft,#e7e9ed);
}
.uis-stage { position:relative; display:inline-block; line-height:0; box-shadow:0 20px 70px rgba(0,0,0,.2); user-select:none; touch-action:none; background-color:#d7d9dd; background-image:linear-gradient(45deg,#f7f7f8 25%,transparent 25%),linear-gradient(-45deg,#f7f7f8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f7f7f8 75%),linear-gradient(-45deg,transparent 75%,#f7f7f8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0; }
[data-theme="dark"] .uis-stage { background-color:#34363a;background-image:linear-gradient(45deg,#52555b 25%,transparent 25%),linear-gradient(-45deg,#52555b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#52555b 75%),linear-gradient(-45deg,transparent 75%,#52555b 75%); }
.uis-stage > canvas { display:block; max-width:min(66vw,1400px); max-height:calc(80vh - 126px); width:auto; height:auto; }
@media (max-width: 900px) { .uis-stage > canvas { max-height:calc(92vh - 126px); } }
.uis-box-layer { position:absolute; inset:0; pointer-events:none; }
.uis-box { position:absolute; box-sizing:border-box; border:2px solid #fff; outline:1px solid #111827; background:rgba(255,255,255,.08); pointer-events:auto; cursor:move; line-height:1.2; }
.uis-box.selected { border-color:#111827; outline:2px solid #fff; background:rgba(255,255,255,.15); }
.uis-box.locked { cursor:not-allowed; border-style:dashed; opacity:.72; }
[data-theme="dark"] .uis-box.selected { border-color:#fff; outline-color:#111; }
.uis-box-label { position:absolute; left:-1px; top:-24px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; border-radius:6px 6px 6px 0; color:#fff; background:#111827; font-size:11px; }
.uis-box-handle { position:absolute; right:-7px; bottom:-7px; width:13px; height:13px; border:2px solid #fff; border-radius:3px; background:#111827; cursor:nwse-resize; }
.uis-draft { position:absolute; box-sizing:border-box; border:2px dashed #fff; outline:1px solid #111827; background:rgba(255,255,255,.12); pointer-events:none; }
.uis-layer-list { display:flex; flex-direction:column; gap:6px; }
.uis-layer {
  display:grid; grid-template-columns:28px 32px minmax(0,1fr) auto; gap:7px; align-items:center;
  min-height:44px; padding:5px 6px; border:1px solid transparent; border-radius:12px;
  background:color-mix(in srgb,var(--bg-card,#fff) 48%,transparent);
  box-shadow:inset 0 1px rgba(255,255,255,.18); cursor:pointer; transition:border-color .16s,background .16s,transform .16s;
}
.uis-layer:hover { transform:translateX(2px); background:color-mix(in srgb,var(--bg-card,#fff) 78%,transparent); }
.uis-layer.selected { border-color:color-mix(in srgb,var(--text,#111827) 28%,transparent); background:color-mix(in srgb,var(--bg-card,#fff) 92%,transparent); }
.uis-layer.locked .uis-layer-name { opacity:.62; }
.uis-layer-eye { width:28px; height:28px; display:grid; place-items:center; padding:0!important; border-radius:8px!important; background:transparent!important; }
.uis-layer-eye svg,.uis-layer-actions svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.uis-layer-thumb { width:30px; height:30px; display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--text,#111827) 10%,transparent); border-radius:8px; background-color:color-mix(in srgb,var(--bg-card,#fff) 78%,transparent); background-image:linear-gradient(45deg,color-mix(in srgb,var(--text,#111827) 9%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--text,#111827) 9%,transparent) 25%,transparent 25%); background-size:10px 10px; }
.uis-layer-thumb i { width:16px; height:16px; border-radius:5px; background:color-mix(in srgb,var(--text,#111827) 58%,transparent); box-shadow:0 2px 7px rgba(0,0,0,.14); }
.uis-layer-name { min-width:0; overflow:hidden; color:var(--text,#111827); font-size:12px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.uis-layer-actions { max-width:0; display:flex; gap:2px; overflow:hidden; opacity:0; transform:translateX(4px); transition:max-width .18s,opacity .18s,transform .18s; }
.uis-layer:hover .uis-layer-actions,.uis-layer.selected .uis-layer-actions { max-width:108px; opacity:1; transform:none; }
.uis-layer-actions button { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; padding:0; border-radius:7px; background:transparent; }
.uis-empty { padding:30px 8px; color:var(--text-muted,#6b7280); text-align:center; font-size:12px; line-height:1.6; }
.uis-inspector { display:grid; gap:10px; }
.uis-inspector label { display:grid; gap:4px; color:var(--text-muted,#6b7280); font-size:11px; }
.uis-inspector input { width:100%; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--text,#111827) 12%,transparent); border-radius:8px; padding:7px; color:var(--text,#111827); background:var(--bg-card,#fff); }
.uis-inspector label.uis-check { display:flex; grid-auto-flow:column; grid-template-columns:auto 1fr; align-items:center; justify-content:start; gap:7px; }
.uis-inspector label.uis-check input { width:auto; }
.uis-inspector-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.uis-align-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.uis-align-grid button { padding:6px 4px; font-size:10px; }
.uis-preview { position:relative; overflow:hidden; width:100%; aspect-ratio:1; border-radius:12px; background:color-mix(in srgb,var(--text,#111827) 5%,transparent); }
.uis-preview img { position:absolute; object-fit:fill; }
.uis-preview > .uis-preview-bg { inset:0; width:100%; height:100%; }
.uis-badge { display:inline-block; margin-top:7px; padding:4px 7px; border-radius:999px; color:var(--text-muted,#6b7280); background:color-mix(in srgb,var(--text,#111827) 7%,transparent); font-size:10px; }
.uis-quality { display:grid; gap:4px; margin-top:10px; padding:9px 10px; border-radius:10px; background:color-mix(in srgb,var(--text,#111827) 5%,transparent); font-size:10px; color:var(--text-muted,#6b7280); }
.uis-quality b { color:var(--text,#111827); font-size:11px; }
.uis-quality .warn { color:#b45309; }
.uis-quality .ok { color:#16803c; }
.uis-token-row { display:flex; align-items:center; gap:4px; }
.uis-token-row i { width:14px; height:14px; border:1px solid color-mix(in srgb,var(--text,#111827) 18%,transparent); border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.uis-ai-progress { min-height:28px; margin-top:12px; opacity:0; transition:opacity .18s; }
.uis-ai-progress.active { opacity:1; }
.uis-ai-label { display:flex; align-items:center; gap:7px; color:var(--text-muted,#6b7280); font-size:11px; }
.uis-ai-label > i { width:6px; height:6px; border-radius:50%; background:currentColor; animation:uis-ai-pulse 1.15s ease-in-out infinite; }
.uis-progress { position:relative; height:4px; margin-top:8px; overflow:hidden; border-radius:5px; background:color-mix(in srgb,var(--text,#111827) 8%,transparent); }
.uis-progress > i { position:relative; display:block; height:100%; width:0; overflow:hidden; border-radius:inherit; background:var(--text,#111827); transition:width .24s ease-out; }
.uis-ai-progress.active .uis-progress > i::after { content:""; position:absolute; inset:0; width:45%; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg-card,#fff) 72%,transparent),transparent); animation:uis-ai-shimmer 1.1s linear infinite; }
@keyframes uis-ai-pulse { 50% { opacity:.28; transform:scale(.72); } }
@keyframes uis-ai-shimmer { from { transform:translateX(-120%); } to { transform:translateX(300%); } }
.smart-card.is-ui-component .smart-card-img-wrap { background:#d8dade; }
.uis-card-stage { position:relative; isolation:isolate; width:100%; overflow:hidden; background-image:linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.4) 25%,transparent 25%);background-size:16px 16px; }
.uis-card-bg,.uis-card-layer { position:absolute; display:block; user-select:none; -webkit-user-drag:none; }
.uis-card-bg { z-index:0; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.uis-card-layer { object-fit:fill; cursor:grab; filter:drop-shadow(0 2px 3px rgba(0,0,0,.16)); transition:filter .15s; }
.uis-card-layer:hover { outline:1px solid rgba(255,255,255,.95); filter:drop-shadow(0 4px 7px rgba(0,0,0,.28)); }
.uis-card-layer.dragging { cursor:grabbing; outline:2px solid #fff; filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)); }
.uis-card-layer.locked { cursor:not-allowed; }
.uis-card-hint { position:absolute; z-index:50; left:8px; bottom:8px; padding:4px 7px; border-radius:999px; color:#fff; background:rgba(0,0,0,.58); font-size:10px; line-height:1; pointer-events:none; }
.smart-card.is-ui-component .smart-card-actions { z-index:60; }
.ui-split-card-task { position:absolute; z-index:55; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; overflow:hidden; color:#fff; background:linear-gradient(180deg,rgba(7,14,25,.3),rgba(7,14,25,.72)); pointer-events:none; isolation:isolate; }
.ui-split-card-task strong { position:relative; z-index:3; font-size:12px; font-weight:600; letter-spacing:.04em; text-shadow:0 2px 8px rgba(0,0,0,.42); }
.ui-split-card-spinner { position:relative; z-index:3; width:24px; height:24px; box-sizing:border-box; border:2px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; animation:ui-split-spin .9s linear infinite; }
.ui-split-card-wave,.ui-split-card-wave::before { position:absolute; z-index:1; left:-20%; bottom:-44%; width:140%; height:72%; border-radius:43% 47% 0 0; background:rgba(255,255,255,.2); content:""; transform-origin:50% 52%; animation:ui-split-wave 4.5s ease-in-out infinite alternate; }
.ui-split-card-wave::before { left:-5%; bottom:15%; width:110%; height:100%; background:rgba(120,190,255,.2); animation-duration:3.4s; animation-direction:alternate-reverse; }
.ui-split-processing .smart-card-img { transform:scale(1.015); filter:saturate(.82); transition:transform .5s,filter .5s; }
@keyframes ui-split-spin { to { transform:rotate(360deg); } }
@keyframes ui-split-wave { 0% { transform:translate3d(-2%,0,0) rotate(-2deg); } 100% { transform:translate3d(2%,-8%,0) rotate(2deg); } }
@media(prefers-reduced-motion:reduce){.ui-split-card-spinner,.ui-split-card-wave,.ui-split-card-wave::before{animation-duration:2.4s}}
.uis-mask-editor { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:32px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.uis-mask-editor.hidden { display:none; }
.uis-mask-panel { width:min(920px,94vw); max-height:92vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid color-mix(in srgb,var(--text,#111827) 18%,transparent); border-radius:18px; color:var(--text,#111827); background:var(--bg-card,#fff); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.uis-mask-panel header,.uis-mask-panel footer { display:flex; align-items:center; gap:9px; padding:12px 15px; }
.uis-mask-panel header { border-bottom:1px solid color-mix(in srgb,var(--text,#111827) 10%,transparent); }
.uis-mask-panel header span { margin-left:auto; color:var(--text-muted,#6b7280); font-size:11px; }
.uis-mask-panel footer { border-top:1px solid color-mix(in srgb,var(--text,#111827) 10%,transparent); }
.uis-mask-panel footer label { display:flex; align-items:center; gap:6px; margin-right:auto; font-size:11px; }
.uis-mask-panel button { border:0; border-radius:9px; padding:8px 11px; color:inherit; background:color-mix(in srgb,var(--text,#111827) 7%,transparent); cursor:pointer; }
.uis-mask-panel button.active,.uis-mask-panel button.primary { color:var(--bg-card,#fff); background:var(--text,#111827); }
.uis-mask-canvas-wrap { min-height:0; overflow:auto; display:grid; place-items:center; padding:24px; background-color:#cfd2d7;background-image:linear-gradient(45deg,#f4f5f6 25%,transparent 25%),linear-gradient(-45deg,#f4f5f6 25%,transparent 25%);background-size:20px 20px; }
.uis-mask-canvas-wrap canvas { display:block; max-width:100%; max-height:calc(92vh - 150px); width:auto; height:auto; cursor:crosshair; box-shadow:0 12px 45px rgba(0,0,0,.28); touch-action:none; }
@media(max-width:1000px){.uis-main{grid-template-columns:210px minmax(0,1fr)}.uis-side.right{display:none}.uis-topbar button{padding:7px}.uis-status{display:none}}
