:root{--bg: #0e1116;--panel: #151a23;--panel2: #1b2130;--border: #262e3d;--border2: #333d51;--text: #e7eaf2;--mut: #8b94a8;--accent: #6e7cff;--accent-soft: rgba(110, 124, 255, .16);--gold: #ffd166;--danger: #ef4466;--guide: #ff4fa3;--canvas: #20263355}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button{font-family:inherit}a{color:var(--accent)}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:#ffffff12;padding:1px 5px;border-radius:4px}.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2);background:var(--panel2);color:var(--text);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:filter .12s ease,background .12s ease}.btn:hover{filter:brightness(1.15)}.btn:disabled{opacity:.5;cursor:default}.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-ghost{background:transparent}.btn-danger{background:transparent;border-color:#6b2837;color:#ff8fa3}.btn-danger:hover{background:#ef446622}.link{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:inherit;text-decoration:underline}.editor-layout{height:100vh;display:flex;flex-direction:column}.topbar{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border)}.tb-left,.tb-center,.tb-right{display:flex;align-items:center;gap:10px;min-width:0}.tb-back{font-size:18px;text-decoration:none;color:var(--mut);padding:4px 8px;border-radius:6px}.tb-back:hover{background:var(--panel2);color:var(--text)}.tb-logo{font-weight:800;letter-spacing:-.02em;font-size:16px;white-space:nowrap}.tb-logo span{color:var(--accent)}.tb-logo.big{font-size:20px}.tb-name{background:transparent;border:1px solid transparent;color:var(--text);font-size:14px;font-weight:600;padding:6px 8px;border-radius:7px;width:220px}.tb-name:hover,.tb-name:focus{border-color:var(--border2);background:var(--panel2);outline:none}.tb-save{font-size:12px;color:var(--mut);white-space:nowrap}.tb-save.error{color:var(--danger)}.zoom-ctl{display:flex;align-items:center;gap:2px;border:1px solid var(--border2);border-radius:8px;overflow:hidden}.zoom-ctl button{background:transparent;border:none;color:var(--text);width:26px;height:30px;cursor:pointer;font-size:15px}.zoom-ctl button:hover{background:var(--panel2)}.zoom-ctl span{font-size:12px;color:var(--mut);min-width:44px;text-align:center}.seg{display:inline-flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden}.seg button{background:transparent;color:var(--mut);border:none;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer}.seg button+button{border-left:1px solid var(--border2)}.seg button.on{background:var(--accent-soft);color:var(--text)}.seg button:disabled{opacity:.4;cursor:default}.live-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--mut);user-select:none}.live-toggle input{appearance:none;width:34px;height:19px;border-radius:999px;background:var(--border2);position:relative;cursor:pointer;transition:background .15s ease;margin:0}.live-toggle input:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .15s ease}.live-toggle input:checked{background:#22c55e}.live-toggle input:checked:after{transform:translate(15px)}.live-toggle input:disabled{opacity:.4}.editor-main{flex:1;display:flex;min-height:0}.palette{width:196px;flex:none;background:var(--panel);border-right:1px solid var(--border);padding:14px 12px;overflow-y:auto}.pal-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pal-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:11.5px;cursor:grab;touch-action:none}.pal-item:hover{border-color:var(--accent);background:var(--accent-soft)}.pal-item.dragging{opacity:.4}.pal-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.pal-ghost{padding:10px 16px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;border-radius:10px;box-shadow:0 12px 30px #0006;cursor:grabbing}.pal-hint{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--mut)}.pal-warn{color:var(--gold)}.canvas-viewport{flex:1;min-width:0;overflow:auto;display:flex;background:radial-gradient(circle at 1px 1px,#ffffff0f 1px,transparent 0) 0 0 / 26px 26px,linear-gradient(180deg,#191f2b,#151a24)}.canvas-viewport.drop-over{outline:2px dashed var(--accent);outline-offset:-6px}.stage-scroll{margin:auto;padding:30px}.stage,.stage-inner{position:relative}.device-frame{position:absolute;border:1.5px dashed #ffffff2e;border-radius:30px;pointer-events:none}.device-frame span{position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:11px;color:var(--mut);white-space:nowrap}.popup-frame{position:absolute;isolation:isolate}.pf-body{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}.popup-outline{position:absolute;border:1px dashed rgba(110,124,255,.55);pointer-events:none;z-index:4}.pf-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:#80808024;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}.el-box{position:absolute;cursor:grab;touch-action:none}.el-box:active{cursor:grabbing}.el-box>*{pointer-events:none}.el-box.editing{cursor:text}.el-box.editing>*{pointer-events:auto}.el-box:hover{outline:1px solid rgba(110,124,255,.45)}.el-box.sel{outline:none}.el-box.ghost{opacity:.3;outline:1px dashed var(--mut)}.el-box img{user-select:none}.text-edit{outline:1.5px solid var(--accent);border-radius:2px;min-height:1em;background:#6e7cff12}.img-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--border2);border-radius:10px;color:var(--mut);font-size:12px;background:#ffffff08}.guide{position:absolute;background:var(--guide);z-index:60;pointer-events:none}.guide-v{width:1px}.guide-h{height:1px}.sel-box{position:absolute;border:1.5px solid var(--accent);pointer-events:none;z-index:50}.handle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--accent);border-radius:2.5px;pointer-events:auto;touch-action:none}.h-nw{top:-5px;left:-5px;cursor:nwse-resize}.h-n{top:-5px;left:calc(50% - 4.5px);cursor:ns-resize}.h-ne{top:-5px;right:-5px;cursor:nesw-resize}.h-e{right:-5px;top:calc(50% - 4.5px);cursor:ew-resize}.h-se{bottom:-5px;right:-5px;cursor:nwse-resize}.h-s{bottom:-5px;left:calc(50% - 4.5px);cursor:ns-resize}.h-sw{bottom:-5px;left:-5px;cursor:nesw-resize}.h-w{left:-5px;top:calc(50% - 4.5px);cursor:ew-resize}.size-badge{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap}.inspector{width:300px;flex:none;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.insp-tabs{display:flex;border-bottom:1px solid var(--border);flex:none}.insp-tabs button{flex:1;background:none;border:none;color:var(--mut);font-size:12.5px;font-weight:700;padding:11px 0;cursor:pointer;border-bottom:2px solid transparent}.insp-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}.insp-body{overflow-y:auto;padding:14px;flex:1}.insp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.insp-type{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}.insp-head-actions{display:flex;gap:6px}.fld-group{border-top:1px solid var(--border);padding:12px 0}.fld-group:first-of-type{border-top:none}.fld-group-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}.fld{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fld>label{width:58px;flex:none;font-size:12px;color:var(--mut)}.fld-ctl{flex:1;min-width:0;display:flex;gap:6px}.quad{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}.quad .fld>label{width:34px}.in-num,.in-txt,.in-sel{width:100%;background:var(--panel2);border:1px solid var(--border2);color:var(--text);border-radius:7px;padding:6px 8px;font-size:13px;font-family:inherit}.in-num:focus,.in-txt:focus,.in-sel:focus{outline:none;border-color:var(--accent)}textarea.in-txt{resize:vertical;min-height:54px;line-height:1.45}.in-color{display:flex;gap:6px;flex:1}.in-color input[type=color]{width:34px;height:31px;padding:2px;border:1px solid var(--border2);border-radius:7px;background:var(--panel2);cursor:pointer}.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;margin:8px 0;user-select:none}.toggle input{display:none}.tg-track{width:34px;height:19px;flex:none;border-radius:999px;background:var(--border2);position:relative;transition:background .15s ease}.tg-dot{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .15s ease}.toggle input:checked+.tg-track{background:var(--accent)}.toggle input:checked+.tg-track .tg-dot{transform:translate(15px)}.tg-label{font-size:12.5px}.align-btns{display:flex;gap:4px}.align-btns button{width:28px;height:26px;background:var(--panel2);border:1px solid var(--border2);color:var(--text);border-radius:6px;font-size:11px;font-weight:700;cursor:pointer}.align-btns button:hover{border-color:var(--accent)}.preset-btns,.img-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.note{font-size:11.5px;line-height:1.5;color:var(--mut);background:#ffffff08;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:8px 0}.note b{color:var(--gold)}.embed-block{display:flex;gap:8px;align-items:stretch}.embed-block code{flex:1;padding:9px 10px;overflow-x:auto;white-space:nowrap;border-radius:8px;background:#05070b;border:1px solid var(--border)}.dash{max-width:1060px;margin:0 auto;padding:26px 28px 60px}.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:14px}.dash-top-actions{display:flex;gap:10px;align-items:center}.dash-title{font-size:17px;font-weight:700;margin-left:8px}.dash-embed{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:20px}.dash-embed p{margin:0 0 10px;font-size:13px;color:var(--mut)}.dash-empty{text-align:center;padding:90px 0;color:var(--mut)}.dash-empty h2{color:var(--text);margin-bottom:6px}.dash-empty .btn{margin-top:16px}.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}.table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:12px 14px;border-bottom:1px solid var(--border)}.table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:#ffffff05}.row-name{font-weight:700;color:var(--text);text-decoration:none}.row-name:hover{color:var(--accent)}.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;text-transform:uppercase}.chip.draft{background:#8b94a822;color:var(--mut)}.chip.published{background:#22c55e22;color:#4ade80}.subs-link{font-weight:700}.mut{color:var(--mut);font-size:12.5px}.ellipsis{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.webhook-row{display:flex;gap:8px}.step-tabs{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:20;display:flex;gap:4px;background:var(--panel);border:1px solid var(--border2);border-radius:10px;padding:4px;box-shadow:0 8px 24px #0000004d}.canvas-viewport{position:relative}.step-tabs button{background:transparent;border:none;color:var(--mut);font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer}.step-tabs button.on{background:var(--accent-soft);color:var(--text)}.step-tabs .step-add,.step-tabs .step-del{font-size:14px;padding:6px 9px}.step-tabs button:hover{color:var(--text)}.modal-backdrop{position:fixed;inset:0;background:#020610b3;z-index:100;display:flex;align-items:center;justify-content:center;padding:30px}.modal{background:var(--panel);border:1px solid var(--border2);border-radius:16px;padding:20px 22px;max-height:88vh;overflow-y:auto;box-shadow:0 30px 80px #00000080}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-head h2{font-size:18px}.tpl-modal{width:860px;max-width:94vw}.tpl-name{display:flex;align-items:center;gap:10px;margin-bottom:16px}.tpl-name label{font-size:12px;color:var(--mut);font-weight:700}.tpl-name .in-txt{max-width:340px}.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.tpl-card{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:8px 8px 12px;cursor:pointer;text-align:left;color:var(--text);transition:border-color .12s ease,transform .12s ease}.tpl-card:hover{border-color:var(--accent);transform:translateY(-2px)}.tpl-card:disabled{opacity:.6}.tpl-card-name{font-size:13.5px;font-weight:700;margin:10px 4px 2px}.tpl-card-desc{font-size:11.5px;color:var(--mut);margin:0 4px;line-height:1.45}.mini-prev{overflow:hidden;border-radius:8px;background:linear-gradient(160deg,#2a3040,#1d2330);pointer-events:none}.stat-row{display:flex;gap:12px;flex-wrap:wrap}.stat-card{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px 18px;min-width:120px}.stat-value{font-size:24px;font-weight:800;letter-spacing:-.02em}.stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin-top:2px}.stat-sub{font-size:11px;color:var(--mut);margin-top:2px}.lift-up{color:#4ade80;font-weight:700}.lift-down{color:#ff8fa3;font-weight:700}.seg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.seg-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);margin-bottom:8px}.seg-line{display:flex;align-items:center;gap:8px;margin-bottom:6px}.seg-name{width:110px;flex:none;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seg-bar{flex:1;height:8px;background:#ffffff10;border-radius:99px;overflow:hidden}.seg-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#9aa4ff);border-radius:99px}.seg-n{width:26px;text-align:right;font-size:12px;color:var(--mut)}.tag-chip{display:inline-block;background:var(--accent-soft);color:#aeb7ff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;margin:1px 3px 1px 0}.chip.failed{background:#ef446622;color:#ff8fa3}.dl-fail{display:inline-flex;align-items:center;gap:6px}.integ-title{font-size:15px;margin-bottom:6px}.integ-test.ok{color:#4ade80;font-size:13px;font-weight:600}.integ-test.bad{color:#ff8fa3;font-size:13px}.qa-panel{margin-top:4px;padding-top:10px;border-top:1px dashed var(--line, #2a2a2e)}.qa-result{margin-top:8px;padding:8px 10px;border-radius:6px;font-size:13px;font-weight:600}.qa-result.ok{color:#4ade80;background:#4ade801a}.qa-result.bad{color:#ff8fa3;background:#ff8fa31a}.seg-rule{border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:8px}.seg-rule-row{display:flex;gap:6px;margin-bottom:6px}.seg-rule-row:last-child{margin-bottom:0}.page-loading,.page-error{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:40vh;color:var(--mut)}.page-error{color:#ff8fa3}