:root{--bg: #0d1117;--bg2: #161b27;--bg3: #1d2433;--border: #2a3348;--text: #dbe4f0;--text-dim: #8b98ad;--accent: #4fc3f7;--accent2: #f06292}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif;font-size:13px;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh;height:100dvh}.topbar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--border);flex:0 0 auto;flex-wrap:wrap}.brand{display:flex;align-items:baseline;gap:8px;margin-right:6px}.brand-mark{color:var(--accent);font-size:18px}.brand-name{font-size:15px;font-weight:700;letter-spacing:.5px}.brand-sub{font-size:11px;color:var(--text-dim)}.tb-group{display:flex;align-items:center;gap:6px}.tb-label{display:flex;align-items:center;gap:4px;color:var(--text-dim);font-size:12px}.tb-input,.tb-select{background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:4px 8px;font-size:12px;outline:none}.tb-input:focus,.tb-select:focus{border-color:var(--accent)}.tb-input{width:120px}.tb-num{width:70px}.mode-tabs button,.tb-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);border-radius:5px;padding:4px 12px;font-size:12px;cursor:pointer}.mode-tabs button:hover,.tb-btn:hover{color:var(--text);border-color:var(--accent)}.mode-tabs button.active,.tb-btn.primary{background:var(--accent);border-color:var(--accent);color:#0b1220;font-weight:600}.icon-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:5px;width:30px;height:28px;font-size:13px;cursor:pointer}.icon-btn:hover{border-color:var(--accent)}.tb-check{display:flex;align-items:center;gap:4px;color:var(--text-dim);font-size:12px;cursor:pointer}.main{flex:1;display:flex;overflow:hidden}.palette{width:210px;flex:0 0 auto;overflow-y:auto;background:var(--bg2);border-right:1px solid var(--border);padding:10px}.palette-title{font-weight:700;font-size:14px}.palette-hint{color:var(--text-dim);font-size:11px;margin:2px 0 10px}.palette-cat{margin-bottom:10px}.palette-cat-title{color:var(--text-dim);font-size:11px;margin-bottom:4px;letter-spacing:1px}.palette-item{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:5px;padding:5px 8px;margin-bottom:4px;cursor:grab;display:flex;flex-direction:column;gap:1px;transition:border-color .12s}.palette-item:hover{border-color:var(--accent)}.palette-item.container{border-left-color:var(--accent2)}.palette-item-name{font-size:12px;font-weight:600}.palette-item-args{color:var(--text-dim);font-size:10px}.center-col{flex:1 1 40%;min-width:340px;display:flex;flex-direction:column;border-right:1px solid var(--border)}.script-area{flex:1;overflow-y:auto;padding:8px 10px}.script-area-title{font-weight:700;font-size:14px;margin-bottom:2px}.script-area-hint{color:var(--text-dim);font-size:11px;font-weight:400;margin-left:8px}.script-empty{color:var(--text-dim);border:1px dashed var(--border);border-radius:8px;padding:28px 12px;text-align:center;white-space:pre-line;line-height:1.8;margin-top:8px}.script-stats{color:var(--text-dim);font-size:11px;padding:6px 12px;border-top:1px solid var(--border)}.block-row{position:relative}.block-card{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:6px;padding:4px 6px;margin:2px 0;cursor:grab;-webkit-user-select:none;user-select:none}.block-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px #4fc3f740}.block-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #4fc3f780}.block-label{background:var(--accent);color:#0b1220;font-weight:700;font-size:11px;border-radius:3px;padding:2px 6px;white-space:nowrap}.block-args{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.block-ops{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .12s}.block-card:hover .block-ops{opacity:1}.block-ops button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:1px 3px}.block-ops button:hover{color:var(--accent2)}.block-body{border-left:2px dashed var(--border);margin-left:10px;padding-left:8px}.body-empty{color:var(--text-dim);font-size:11px;padding:4px 0}.block-end{color:var(--text-dim);font-size:11px;font-weight:700;padding:1px 6px;border-left:2px dashed var(--border);border-bottom:2px dashed var(--border);width:fit-content;margin-top:-2px}.slot{height:7px;margin:-1px 0;border-radius:4px}.slot:hover{background:#4fc3f72e}.slot.hover{background:#4fc3f766;height:12px}.slot-bottom{height:20px}.arg-num{background:#0f1524;border:1px solid var(--border);color:var(--text);border-radius:4px;width:58px;padding:2px 4px;font-size:12px;outline:none}.arg-num:focus{border-color:var(--accent)}.arg-text{background:#0f1524;border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 4px;font-size:12px;outline:none}.arg-text:focus{border-color:var(--accent)}.arg-select{background:#0f1524;border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 4px;font-size:12px;outline:none}.arg-color{display:inline-flex;align-items:center;gap:3px}.arg-color input[type=color]{width:22px;height:20px;padding:0;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer}.preview-col{flex:1 1 30%;min-width:300px;position:relative}.preview-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.preview-canvas{width:100%;height:100%;display:block;touch-action:none}.canvas-col{flex:1 1 60%;min-width:400px;display:flex;flex-direction:column;border-right:1px solid var(--border)}.canvas-col .preview-wrap{position:relative;flex:1}.canvas-toolbar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;flex:0 0 auto}.ct-label{font-weight:700;font-size:12px}.ct-tools{display:flex;gap:4px;flex-wrap:wrap}.ct-tool{background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);border-radius:5px;padding:3px 8px;font-size:12px;cursor:pointer}.ct-tool:hover{color:var(--text)}.ct-tool.active{background:var(--accent);border-color:var(--accent);color:#0b1220;font-weight:600}.ct-params{display:flex;gap:8px;align-items:center}.ct-params label{display:flex;align-items:center;gap:4px;color:var(--text-dim);font-size:11px}.ct-params input{background:#0f1524;border:1px solid var(--border);color:var(--text);border-radius:4px;width:52px;padding:2px 4px;font-size:12px}.ct-target{margin-left:auto;color:var(--accent);font-size:12px}.canvas-hint{color:var(--text-dim);font-size:11px;padding:5px 12px;border-top:1px solid var(--border)}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#05080fb3;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;width:min(680px,92vw);padding:14px;box-shadow:0 20px 60px #00000080}.modal-title{display:flex;gap:6px;margin-bottom:10px}.modal-title button{background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);border-radius:5px;padding:4px 14px;cursor:pointer;font-size:13px}.modal-title button.t{background:var(--accent);border-color:var(--accent);color:#0b1220;font-weight:700}.modal-close{margin-left:auto;cursor:pointer;color:var(--text-dim)}.modal-close:hover{color:var(--text)}.modal-info{color:var(--text-dim);font-size:12px;margin-bottom:8px}.efx-textarea{width:100%;height:340px;background:#0b1020;color:#9fd7ff;border:1px solid var(--border);border-radius:6px;padding:10px;font-family:SF Mono,Consolas,monospace;font-size:12px;line-height:1.6;resize:none;outline:none}.efx-textarea:focus{border-color:var(--accent)}.modal-buttons{display:flex;gap:8px;margin-top:10px;align-items:center}.modal-buttons button{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:5px 14px;cursor:pointer}.modal-buttons button:hover{border-color:var(--accent)}.modal-buttons button.primary{background:var(--accent);border-color:var(--accent);color:#0b1220;font-weight:600}.modal-warning{color:#ffb74d;font-size:12px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%);background:#1d2433;border:1px solid var(--accent);color:var(--text);border-radius:8px;padding:8px 18px;font-size:13px;z-index:60;box-shadow:0 8px 24px #0006;animation:toast-in .18s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media (max-width: 960px){.main{flex-direction:column;overflow-y:auto}[data-mode=blocks] .preview-col{order:-3}[data-mode=blocks] .center-col,[data-mode=canvas] .canvas-col{order:-2}[data-mode=canvas] .preview-col{order:-1}.preview-col{flex:none;height:320px;min-width:0;border-right:none;border-bottom:1px solid var(--border)}.preview-wrap{position:relative;height:100%}[data-mode=canvas] .preview-col{height:auto;border-bottom:none}[data-mode=canvas] .canvas-col{flex:none;min-width:0;height:62vh;min-height:360px;border-right:none}.center-col{flex:none;min-width:0;border-right:none}.script-stats{font-size:11px;padding:4px 10px 8px}.palette{width:100%;flex:none;display:flex;flex-wrap:wrap;gap:6px;border-right:none;border-bottom:1px solid var(--border);overflow:visible}.palette-title,.palette-hint{width:100%}.palette-cat{display:contents}.palette-cat-title{width:100%;margin:6px 0 2px}.palette-item{flex:1 1 auto;min-width:132px}.topbar{gap:8px 12px;padding:8px 10px}.brand{flex:1 1 auto;min-width:0}.brand-sub{display:none}.tb-project{order:3;flex:1 1 100%}.tb-project .tb-label{flex:1 1 45%}.tb-group.playback{order:4;flex:1 1 100%}.topbar>.tb-group:last-child{order:5;flex:1 1 100%;flex-wrap:wrap}.topbar>.tb-group:last-child .tb-btn{flex:1 1 auto}.tb-label{font-size:13px}.tb-input,.tb-num{flex:1;min-width:90px}.tb-input,.tb-select,.tb-btn,.icon-btn,.tb-check{min-height:40px;font-size:16px}.tb-check{display:flex;align-items:center;gap:6px}.arg-num,.arg-text,.arg-select,.arg-color,.arg-select select{min-height:36px;font-size:16px}.block-card{border-radius:8px}.block-ops{opacity:1}.block-ops button{min-width:34px;min-height:34px}.efx-textarea{height:300px;font-size:13px}.modal{max-height:88vh;overflow-y:auto}.modal-buttons button{min-height:40px;font-size:15px;flex:1}.canvas-hint{font-size:12px}.toast{font-size:14px;width:max-content;max-width:92vw}}