:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif;color:#29364c;background:#edf1f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}input,select,textarea{outline:none}.hidden{display:none!important}
.app-shell{height:100vh;min-height:650px;display:flex;flex-direction:column;overflow:hidden}.app-header{height:68px;background:#101c30;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 18px;border-bottom:1px solid #26364e;flex-shrink:0;color:#e8f1ff}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:39px;height:39px;background:#2b66ed;border-radius:11px;display:grid;place-items:center;font-size:14px;font-weight:950;color:#fff;letter-spacing:-2px;box-shadow:0 5px 15px #1a4cab55}.brand-icon span{color:#8fb3ff}.brand-title{font-size:15px;font-weight:800;letter-spacing:1px}.brand-subtitle{color:#869ab6;font-size:11px;margin-top:3px}.alpha{font-size:9px;border-radius:4px;background:#21334f;color:#9bbcff;padding:4px 6px;margin-left:8px;letter-spacing:.5px}.header-actions{display:flex;align-items:center;gap:8px}.header-btn{background:#1a2a43;color:#dfecfd;border:1px solid #304158;border-radius:8px;padding:10px 12px;font-size:12px;font-weight:650}.header-btn:hover{background:#2a3c58}.header-btn.primary{background:#2860ec;color:white;border-color:#3a6dfe;padding:10px 17px}.header-btn.primary:hover{background:#1854e8}.autosave{font-size:11px;color:#9badc8;margin-right:12px}.green-dot,.pulse-dot{display:inline-block;width:7px;height:7px;background:#21c683;border-radius:50%;margin-right:5px;box-shadow:0 0 0 3px #1ebf7725}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:256px minmax(350px,1fr) 286px}.sidebar,.inspector{background:#fff;min-height:0;display:flex;flex-direction:column}.sidebar{border-right:1px solid #dde5ee}.inspector{border-left:1px solid #dde5ee}.sidebar-top,.inspector-head{padding:23px 18px 19px}.sidebar-title{font-size:14px;font-weight:800;color:#263249}.sidebar-description{font-size:11px;color:#9aa6ba;margin-top:5px}.mini-tabs{display:flex;margin:0 14px 16px;background:#f2f5f9;border-radius:7px;padding:3px}.mini-tab{background:transparent;color:#8290a4;border:0;border-radius:5px;flex:1;padding:9px;font-weight:700;font-size:12px}.mini-tab.active{background:white;color:#285de0;box-shadow:0 1px 5px #1e3b6c18}.side-content{flex:1;overflow-y:auto;padding:0 13px 20px}.search-row{height:36px;border:1px solid #e0e6ef;border-radius:8px;display:flex;align-items:center;padding:0 11px;color:#8a9db4;margin-bottom:22px}.search-row input{border:0;min-width:0;width:100%;background:transparent;padding:8px;color:#42516b;font-size:12px}.search-row:focus-within{border-color:#7ca1ed}.catalog-section{margin-bottom:22px}.catalog-heading{font-size:10px;font-weight:800;letter-spacing:1px;color:#91a0b5;margin:0 0 12px 5px;text-transform:uppercase}.catalog-items{display:grid;grid-template-columns:1fr 1fr;gap:8px}.catalog-item{min-height:75px;border:1px solid #e3e9f2;background:#fff;border-radius:9px;padding:11px 7px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:grab;user-select:none;transition:.12s}.catalog-item:hover{border-color:#80a5f8;box-shadow:0 2px 8px #3163c21c;transform:translateY(-1px)}.catalog-item:active{cursor:grabbing}.catalog-icon{font-size:21px;line-height:1;color:#6683b8;font-weight:800}.catalog-name{font-size:11px;color:#5d6d83;font-weight:700}.catalog-item .dep{font-size:9px;color:#a07b17}.sidebar-bottom{border-top:1px solid #edf1f5;padding:16px 18px 20px;font-size:11px;color:#667891;line-height:1.6}.sidebar-bottom small{color:#9ca8b9;font-size:10px}
.main-stage{display:flex;flex-direction:column;min-height:0;min-width:0;background:#eff3f9}.canvas-toolbar{height:60px;min-height:60px;border-bottom:1px solid #e1e8f0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:8px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:11px;min-width:0}.toolbar-name{font-size:12px;font-weight:800;color:#344159;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.toolbar-sep,.muted{color:#a4afbe;font-size:12px}.tag-blue{font-size:10px;color:#3864d6;background:#edf2ff;border-radius:5px;padding:4px 6px}.toolbar-right>select{font-size:11px;border:1px solid #dfe5ee;background:white;color:#54657d;padding:7px 4px;border-radius:6px;max-width:150px}.toolbar-divider{height:22px;width:1px;background:#e4eaf2}.icon-btn{width:30px;height:30px;border:0;background:transparent;border-radius:6px;color:#65758b;font-size:21px;display:grid;place-items:center}.icon-btn:hover{background:#eef3fb;color:#335ff1}.segmented{display:flex;border:1px solid #e0e6ee;padding:2px;border-radius:7px}.segmented button{border:0;background:none;padding:4px 9px;border-radius:5px;color:#8d9bb0;font-size:16px}.segmented button.active{color:#2b5ee9;background:#eaf0ff}.toolbar-btn{border:1px solid #c8d9ff;background:#f4f7ff;border-radius:7px;color:#315fdb;font-size:12px;font-weight:800;padding:9px 11px}.toolbar-btn.active{background:#2b60ef;color:white}.stage-scroll{flex:1;overflow:auto;background-image:radial-gradient(#cfd8e7 0.8px,transparent 0.8px);background-size:18px 18px;display:flex;flex-direction:column;align-items:center;padding:20px 20px 8px}.stage-note{text-align:center;font-size:11px;color:#75869e;background:#fff;border:1px solid #e2e8f1;padding:9px 16px;border-radius:99px;margin:1px auto 22px;white-space:nowrap;box-shadow:0 2px 4px #2139680c}.bullet{margin:0 8px;color:#c4cfdf}.artboard-wrap{width:min(100%,980px);min-width:300px;box-shadow:0 18px 60px #3750791c;transition:width .2s;flex-shrink:0}.artboard-wrap.tablet{width:min(100%,760px)}.artboard-wrap.mobile{width:min(100%,400px)}.artboard-top{height:39px;background:#f9fbfe;border:1px solid #dce4ee;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11px;color:#8595a9}.artboard-signal{letter-spacing:2px;color:#c1cad9;font-size:12px}.artboard-dimensions{font-size:10px}.artboard{background:#f6f9fd;border:1px solid #dce4ee;border-top:0;border-radius:0 0 10px 10px;min-height:490px;overflow:hidden}.editor-canvas{padding:28px 30px;min-height:488px;display:flex;flex-direction:column;gap:16px}.stage-footer{display:flex;width:min(100%,980px);justify-content:space-between;margin:16px 0 10px;color:#91a0b1;font-size:11px;gap:10px}.status-bar{height:28px;background:#f7f9fd;border-top:1px solid #dfe6ef;display:flex;gap:15px;align-items:center;justify-content:space-between;padding:0 14px;color:#91a0b3;font-size:10px}.status-bar strong{color:#64758f}
/* Live editor components. This style stays inside the editor; external CSS only enters iframe. */
.ed-node{position:relative;min-width:0;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:border-color .08s,box-shadow .08s}.ed-node:hover{border-color:#8baaf3}.ed-node.selected{border-color:#4176ef;box-shadow:0 0 0 2px #3974ff20}.ed-node.drop-before:before,.ed-node.drop-after:after{content:"";position:absolute;left:-5px;right:-5px;height:3px;background:#2b70f8;z-index:5;border-radius:3px}.ed-node.drop-before:before{top:-5px}.ed-node.drop-after:after{bottom:-5px}.ed-node.drop-inside{box-shadow:0 0 0 2px #1e72fa;border-style:dashed}.ed-node>.node-label{display:none;position:absolute;top:-18px;left:-1px;background:#3c70ed;color:white;font-size:9px;padding:2px 7px;border-radius:4px 4px 0 0;font-weight:700;z-index:15}.ed-node.selected>.node-label,.ed-node:hover>.node-label{display:block}.ed-node>.node-contents{min-width:0}.ed-leaf{pointer-events:none}.ed-children{min-height:33px;min-width:0;display:flex;flex-direction:column;gap:12px}.ed-children.row-layout{flex-direction:row;flex-wrap:wrap;align-items:flex-end}.ed-children.row-layout>.ed-node{flex:0 1 auto}.ed-children.grid-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ed-children>.ed-node{min-width:0}.ed-children:empty:after{content:'＋ 拖曳元件至此';border:1px dashed #b4c7e3;color:#99abc0;border-radius:8px;padding:18px;font-size:11px;text-align:center;display:block}.ed-container{background:#fff;border:1px solid #e0e7f0;border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:15px;box-shadow:0 3px 14px #32486a08}.ed-container.transparent{background:transparent;border:1px dashed #d6e0ec;box-shadow:none}.ed-container-title{font-size:17px;color:#34445c;font-weight:800;margin-bottom:1px}.ed-card-title{font-size:15px}.ed-node .uiw-field{display:flex;flex-direction:column;gap:6px;color:#47556a;font-size:12px;font-weight:650;min-width:0}.ed-node .uiw-control{height:36px;border:1px solid #d4dfeb;border-radius:7px;background:white;color:#8391a5;padding:8px 10px;width:100%;font-size:12px}.ed-node textarea.uiw-control{height:76px;resize:none}.ed-node .uiw-btn{padding:9px 17px;border-radius:7px;border:1px solid transparent;font-size:12px;font-weight:700}.ed-node .uiw-btn-primary{color:white;background:#3367e8}.ed-node .uiw-btn-secondary{color:#53657c;background:#e8edf5}.ed-node .uiw-btn-danger{color:#fff;background:#c9364e}.ed-node .uiw-btn-outline{color:#366ae4;background:#fff;border-color:#a9c0f9}.ed-node .uiw-table-wrap{border:1px solid #e3eaf4;border-radius:8px;overflow:auto;background:#fff}.ed-node .uiw-table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}.ed-node .uiw-table th,.ed-node .uiw-table td{padding:11px 13px;border-bottom:1px solid #edf1f6}.ed-node .uiw-table th{background:#f6f9fc;color:#73839a}.ed-node .uiw-text{font-size:12px;color:#8290a3;margin:0}.ed-node .uiw-heading{margin:0}.ed-node .uiw-divider{border:0;border-top:1px solid #dce5f1}.ed-node .uiw-badge{background:#e2f7ec;color:#20845a;border-radius:20px;padding:5px 10px;font-size:11px;font-weight:700;display:inline-block}.ed-node .uiw-badge.uiw-warning{background:#fff4d3;color:#94690a}.ed-node .uiw-badge.uiw-danger{background:#fde9eb;color:#af3440}.ed-node .uiw-alert{border-radius:7px;padding:10px 13px;color:#416d99;background:#e8f2fe;font-size:12px}.ed-node .uiw-check{display:flex;gap:7px;align-items:center;font-size:12px}.ed-node .uiw-actions{display:flex;gap:10px}.ed-node .uiw-tom-select{background:#fbfaff}.ed-node .uiw-field:has(.uiw-tom-select):after{content:'Tom Select';font-size:9px;font-weight:700;color:#7a64ad;align-self:flex-start;margin-top:-4px}.editor-root-drop{min-height:42px;border:1.5px dashed #c8d6e8;color:#8b9db4;border-radius:9px;display:grid;place-items:center;font-size:11px;transition:.1s}.editor-root-drop.drag-hover{border-color:#3772ed;background:#ebf3ff}.empty-canvas{border:1.5px dashed #bacbe1;border-radius:12px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff9}.empty-canvas strong{font-size:15px;color:#5b6980}.empty-canvas span{font-size:12px;color:#99a9bf}.preview-canvas iframe{width:100%;height:580px;border:0;background:#fff}.preview-canvas{background:white;min-height:580px}
/* Inspector */
.inspector-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #edf0f6;padding-bottom:17px}.inspector-head .icon-btn{font-size:20px;margin:-5px -6px 0 0}#inspector-content{overflow-y:auto;flex:1;padding:0 16px}.inspector-section{padding:18px 0;border-bottom:1px solid #edf1f6}.inspector-section-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#93a2b6;font-weight:850;margin:0 0 14px}.inspector-identity{display:flex;gap:11px;align-items:center}.identity-icon{width:38px;height:38px;border:1px solid #d9e5fd;border-radius:9px;background:#f0f5ff;color:#4e79e1;display:grid;place-items:center;font-size:21px}.identity-name{font-size:13px;font-weight:800;color:#35455e}.identity-type{font-size:11px;color:#99a4b5;margin-top:3px}.property{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}.property>span{color:#5d6e87;font-size:11px;font-weight:700}.property input:not([type="checkbox"]),.property select,.property textarea{width:100%;padding:9px 10px;border-radius:7px;border:1px solid #dde6f0;background:#fff;font-size:12px;color:#46556d}.property textarea{resize:vertical}.property input:focus,.property select:focus,.property textarea:focus{border-color:#668ff3;box-shadow:0 0 0 3px #2a6bfc0b}.property small{font-size:10px;color:#96a3b6}.property .color-row{display:flex;align-items:center;gap:8px}.property .color-row input[type="color"]{width:48px;height:34px;padding:3px;cursor:pointer}.property .color-row .color-value{flex:1;font-size:11px;color:#94a4b7}.property.checkbox-line{flex-direction:row;align-items:center;gap:9px}.property.checkbox-line input{accent-color:#2e66ed}.inspector-help{font-size:11px;color:#8191a6;line-height:1.7;background:#f5f7fb;padding:12px;border-radius:8px}.inspector-actions{display:flex;gap:7px;flex-wrap:wrap}.inspector-actions button{border:1px solid #dae4f0;background:#f8fafe;border-radius:6px;color:#576a86;font-size:11px;padding:7px 10px}.inspector-actions .danger{color:#cf4560;background:#fff7f8;border-color:#f4dce2}.inspector-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-top:75px;color:#8291a5}.inspector-empty .big-symbol{font-size:30px;background:#f3f6fb;border-radius:12px;width:64px;height:64px;display:grid;place-items:center}.inspector-empty strong{font-size:13px;color:#43536b}.inspector-empty small{font-size:11px;line-height:1.7;padding:0 22px}.inspector-footer{border-top:1px solid #edf0f6;padding:14px 18px;font-size:10px;color:#a1adbe;line-height:1.6}
.layer-row{display:flex;gap:7px;align-items:center;padding:9px 10px;border:1px solid transparent;border-radius:7px;font-size:12px;color:#6f7e95;cursor:pointer}.layer-row:hover{background:#f0f5fe}.layer-row.active{background:#eaf1ff;border-color:#cce0ff;color:#2459d9}.layer-row span:last-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.modal-backdrop{position:fixed;inset:0;background:#0a1930ac;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:#fff;border-radius:15px;box-shadow:0 20px 80px #0c1b3470;display:flex;flex-direction:column;max-height:min(91vh,900px);width:min(680px,100%);overflow:hidden}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 25px 16px;border-bottom:1px solid #e7edf6}.modal-head h2{font-size:18px;margin:0;color:#24334c}.modal-head p{font-size:12px;color:#8290a4;margin:6px 0 0;line-height:1.5}.modal-close{font-size:25px;background:none;border:0;color:#a0adc0}.modal-body{padding:20px 25px;overflow:auto}.settings-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:15px}.settings-section{margin-top:14px}.settings-section h3{font-size:13px;margin:0 0 4px}.settings-section p{font-size:11px;color:#8190a5;line-height:1.6;margin:0 0 16px}.notice{background:#f4f7ff;color:#5973a0;border-radius:8px;font-size:11px;padding:12px;line-height:1.6}.modal-actions{padding:15px 24px;display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #e9eef5}.btn{border-radius:8px;border:1px solid transparent;padding:10px 15px;font-size:12px;font-weight:750}.btn.blue{background:#3267e9;color:white}.btn.light{background:#fff;color:#546580;border-color:#dde5ee}.export-modal{width:min(1000px,100%)}.export-options{padding:16px 24px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#526681}.export-options select{margin-left:9px;border:1px solid #dae5f0;border-radius:6px;padding:7px;background:#fff;color:#354b68}.export-options span{color:#9aa7b9;font-size:11px}.code-wrap{margin:0 24px 14px;border:1px solid #273550;border-radius:10px;overflow:hidden;background:#122036}.code-head{background:#1b2e4a;color:#a0bbdc;padding:11px 15px;display:flex;justify-content:space-between;font-size:11px}#export-code{background:#111e32;color:#d0e6f6;width:100%;height:min(53vh,500px);padding:17px 20px;border:0;resize:none;font:12px/1.7 Consolas,Monaco,monospace;tab-size:2}#toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%,15px);padding:11px 19px;border-radius:9px;background:#162840;color:#f3f8ff;box-shadow:0 9px 25px #101c3035;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1200px){.workspace{grid-template-columns:210px minmax(340px,1fr) 250px}.header-actions{gap:5px}.sidebar-top,.inspector-head{padding:18px 13px}.editor-canvas{padding:19px}.stage-scroll{padding:14px}.toolbar-left .muted,.toolbar-sep{display:none}}
@media(max-width:950px){.workspace{grid-template-columns:190px minmax(300px,1fr)}.inspector{display:none}.autosave{display:none}.header-btn span{display:none}.header-btn.primary span{display:inline}.stage-note{white-space:normal}}
@media(max-width:650px){.workspace{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.brand-subtitle,.alpha{display:none}.app-header{padding:0 10px}.header-btn.primary{padding:9px}.toolbar-right>select{display:none}.canvas-toolbar{padding:0 10px}.editor-canvas{padding:12px}.stage-scroll{padding:9px}.stage-note{border-radius:8px}.ed-children.grid-layout{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}}

/* P1: precise nested drop affordance, editor navigation and compact workspace */
.compact-panels { display: none; }
.ed-inside-drop {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #b7c8e3;
  background: #f3f7ff;
  border-radius: 7px;
  color: #5478af;
  font-size: 10px;
  font-weight: 650;
  cursor: copy;
}
.ed-node.drop-inside > .ed-container > .ed-inside-drop {
  border-color: #225ee7;
  background: #dbeafe;
  color: #1d4ed8;
}
.ed-node:focus-visible {
  outline: 3px solid #6a92ed;
  outline-offset: 2px;
}
.inspector-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 15px 0 6px;
  color: #95a5bb;
}
.inspector-breadcrumbs button {
  border: 0;
  background: #f2f6fc;
  border-radius: 5px;
  padding: 5px 7px;
  color: #4b617b;
  font-size: 10px;
}
.inspector-breadcrumbs button[aria-current] {
  color: #2459d9;
  background: #e7f0ff;
  font-weight: 700;
}
.inspector-breadcrumbs button:hover { background: #dceaff; }
.layer-row { width: 100%; text-align: left; background: transparent; }
@media (max-width: 950px) {
  .compact-panels {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 7px;
    gap: 7px;
    background: #ecf2fb;
    border-bottom: 1px solid #d8e5f4;
  }
  .compact-panels button {
    flex: 1;
    min-height: 39px;
    border: 1px solid #d4e0ef;
    color: #526581;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }
  .compact-panels button[aria-pressed="true"] {
    background: #255fdb;
    border-color: #255fdb;
    color: white;
  }
  .workspace { display: flex; min-height: 0; }
  .workspace > .sidebar,
  .workspace > .main-stage,
  .workspace > .inspector { display: none; min-width: 0; flex: 1; }
  .workspace[data-active-panel="catalog"] > .sidebar { display: flex; }
  .workspace[data-active-panel="canvas"] > .main-stage { display: flex; }
  .workspace[data-active-panel="inspector"] > .inspector { display: flex; }
  .sidebar-top, .inspector-head { padding: 17px; }
  #inspector-content { overflow-y: auto; }
}
@media (max-width: 650px) {
  .app-shell { min-height: 0; }
  .stage-footer { flex-wrap: wrap; }
  .stage-note { margin-bottom: 12px; }
  .editor-canvas { padding: 12px; }
  .ed-inside-drop { min-height: 36px; font-size: 11px; }
}