:root{--bg: #eef0f4;--panel: #ffffff;--ink: #1f2937;--muted: #6b7280;--line: #e5e7eb;--accent: #6366f1;--accent-soft: #eef2ff;--danger: #ef4444;--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;height:100%}#app{height:100%}button,input{font:inherit;color:inherit}[hidden]{display:none!important}.muted{color:var(--muted)}.center{min-height:100%;display:grid;place-items:center;padding:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:20px}.login{width:min(360px,100%);display:grid;gap:14px}.login h1{margin:0 0 4px;font-size:22px}label{display:grid;gap:6px;font-size:13px;font-weight:550;color:var(--muted)}input{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff}input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}button.primary,.create button{height:44px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;padding:0 16px}button.primary:disabled{opacity:.6}.form-error{margin:0;color:var(--danger);font-size:13px}.home{min-height:100%}.topbar{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line)}.topbar .muted{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.columns{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;max-width:1000px}.columns h2{margin:0 0 12px;font-size:15px}.list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px}.list li.muted{padding:10px 12px}.list li.active button{background:var(--accent-soft);color:var(--accent)}button.link{display:block;width:100%;text-align:left;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;cursor:pointer}button.link:hover{background:#f3f4f6}.topbar button.link{width:auto}.create{display:flex;gap:8px}.create input{flex:1;min-width:0}.editor{height:100%;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;gap:2px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top,0px));background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);position:relative;z-index:20;white-space:nowrap}.btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);font-size:13px;font-weight:550;cursor:pointer;flex:0 0 auto;transition:background .12s ease,border-color .12s ease,color .12s ease}.btn svg{width:24px;height:24px;display:block}.btn:hover{background:#f3f4f6}.btn.active{background:var(--accent-soft);color:var(--accent);border-color:#c7cdfb}.btn:disabled{opacity:.35;cursor:default;pointer-events:none}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.sep{width:1px;height:26px;background:var(--line);margin:0 4px;flex:0 0 auto}.toolbar-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:0 8px;line-height:1.25}.sketch-title{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis}.lock-status{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.lock-btn{border-color:var(--line);padding:0 14px}.lock-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.lock-btn.active:hover{background:#4f46e5}.menu-wrap{position:relative;flex:0 0 auto}.arrange-direct{display:flex;align-items:center;flex:0 0 auto}.menu>button.arrange-item{display:none;align-items:center;gap:10px}.arrange-item svg{width:22px;height:22px;flex:0 0 auto}.arrange-item span{flex:1}.arrange-item kbd{font:11px/1 system-ui,sans-serif;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 5px}.arrange-item:disabled{opacity:.4;cursor:default}@media(max-width:959px){.arrange-direct{display:none}.menu>button.arrange-item{display:flex}}.menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:210px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:grid;gap:2px}.menu>button{text-align:left;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;cursor:pointer}.menu>button:hover{background:#f3f4f6}.style-popover{min-width:0;width:max-content;max-width:calc(100vw - 24px);padding:10px;gap:10px}.style-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.style-row>span{width:56px;font-size:12px;color:var(--muted)}.style-row input[type=range]{flex:1;min-width:160px;accent-color:var(--accent)}.style-choice{height:32px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center}.style-choice.active{border-color:var(--accent);background:var(--accent-soft)}.style-gap{flex:1;min-width:12px}.style-row output{width:44px;font-size:12px;color:var(--muted);text-align:right}.swatch{width:28px;height:28px;border-radius:50%;border:1px solid #d1d5db;cursor:pointer;padding:0}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.swatch.none{background:linear-gradient(135deg,#fff 45%,var(--danger) 45%,var(--danger) 55%,#fff 55%)}.stage{flex:1;position:relative;overflow:hidden;background:#fff;background-image:linear-gradient(#f4f5f8 1px,transparent 1px),linear-gradient(90deg,#f4f5f8 1px,transparent 1px);background-size:24px 24px}.stage canvas{position:absolute;inset:0;touch-action:none}.text-editor{position:absolute;z-index:5;margin:0;padding:0;border:1px dashed var(--accent);background:#ffffffe6;text-align:center;resize:none;outline:none;line-height:1.25}.toast{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%);background:#111827;color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;z-index:20}.btn.group{position:relative}.btn.group:after{content:"";position:absolute;right:4px;bottom:4px;border:3px solid transparent;border-right-color:currentColor;border-bottom-color:currentColor;opacity:.55}.tool-popover>button{display:flex;align-items:center;gap:10px}.tool-popover>button svg{width:22px;height:22px;flex:0 0 auto}.tool-popover>button span{flex:1}.tool-popover>button kbd{font:11px/1 system-ui,sans-serif;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 5px}.tool-popover>button.active{background:var(--accent-soft);color:var(--accent)}.floatbar{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:15;display:flex;align-items:center;gap:6px;padding:6px;max-width:calc(100% - 24px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.floatbar span{padding:0 8px;font-size:13px;color:var(--muted);white-space:nowrap}.floatbar button{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;font-weight:550;white-space:nowrap}.floatbar button:hover{background:#f3f4f6}.floatbar button:disabled{opacity:.4;cursor:default}.inline-input{position:fixed;left:0;top:0;z-index:40;display:flex;margin:0;box-sizing:border-box;transform-origin:0 0;outline:2px solid var(--accent);outline-offset:1px;background:#fff;border-radius:2px}.inline-input input{box-sizing:border-box;width:100%;min-width:0;height:100%;padding:0 8px;border:0;border-radius:0;background:transparent;color:inherit;outline:none}.inline-input button{flex:0 0 30px;border:0;border-left:1px solid #cbd5e1;background:transparent;color:#475569;font:18px system-ui;cursor:pointer;padding:0}.inline-input-error{position:absolute;left:0;top:100%;margin-top:5px;padding:5px 8px;box-sizing:border-box;max-width:100%;background:#fffbeb;border:1px solid #f59e0b;border-radius:4px;color:#92400e;font:12px system-ui;overflow-wrap:anywhere}.inline-input-reference{position:fixed;z-index:39;pointer-events:none;box-sizing:border-box;border:2px dashed #2563eb}.context-menu{position:fixed;z-index:50;min-width:180px;max-height:calc(100vh - 8px);overflow:auto;padding:4px 0;background:#fff;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 8px 24px #0f172a26;font:14px system-ui,sans-serif;color:#1f2937}.context-menu button{display:flex;justify-content:space-between;gap:16px;width:100%;min-height:32px;text-align:left;padding:6px 14px;border:0;background:none;font:inherit;color:inherit;cursor:pointer}.context-menu button:hover:not(:disabled),.context-menu button:focus-visible{background:#eef2ff;outline:none}.context-menu button:disabled{color:#94a3b8;cursor:default}.context-menu-sep{height:1px;margin:4px 0;background:#e2e8f0}.props-panel{position:absolute;top:12px;right:12px;z-index:16;width:min(320px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;display:grid;gap:8px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.props-panel h3{margin:0;font-size:14px}.props-panel input[type=checkbox]{width:22px;height:22px}.props-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}.props-row>span:first-child{flex:1 1 100%;color:var(--muted)}.props-row input:not([type=checkbox]){flex:1;min-width:0;height:36px}.props-link{flex:1}.props-row button,.props-actions button{min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.props-actions{display:flex;justify-content:flex-end;gap:8px}.props-actions button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.props-panel select,.props-panel textarea{flex:1;min-width:0;font:inherit;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}.props-panel textarea{flex-basis:100%;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}.props-dataset{flex:1 1 100%;display:grid;gap:6px}.props-new-dataset{display:grid;gap:6px}.props-new-dataset input{height:36px}.topbar a.link{text-decoration:none;color:inherit;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px}.topbar a.link:hover{background:#f3f4f6}.broker-form{display:grid;gap:8px}.broker-form button{height:44px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.broker-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px}.broker-row:hover{background:#f8fafc}.broker-actions{display:flex;gap:4px}.broker-actions button.link{width:auto;min-height:36px}.menu-section{display:grid;gap:2px}.menu-section>button{display:flex;align-items:center;gap:10px;text-align:left;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;cursor:pointer}.menu-section>button:hover{background:#f3f4f6}.menu-section>button svg{width:22px;height:22px;flex:0 0 auto}.menu-heading{padding:8px 12px 2px;font-size:12px;font-weight:600;color:var(--muted);border-top:1px solid var(--line);margin-top:4px}.props-literal{display:flex;flex:1 1 100%;gap:6px}.props-literal input:not([type=checkbox]){flex:1;min-width:0;height:36px}.tabbar{display:flex;align-items:flex-end;gap:2px;padding:4px 8px 0;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto}.tab{display:flex;align-items:center;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:#f8fafc}.tab.active{background:#fff;margin-bottom:-1px;padding-bottom:1px}.tab-select{min-height:36px;padding:0 12px;border:0;background:transparent;cursor:pointer;font-size:13px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}.tab.active .tab-select{font-weight:600;color:var(--accent)}.tab-close{min-height:36px;padding:0 8px 0 0;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:16px}.tab-close:hover{color:var(--danger)}.tab-add{min-height:36px;min-width:36px;border:0;background:transparent;cursor:pointer;font-size:18px;color:var(--muted)}.tab-add:hover{color:var(--accent)}.tab-rename{height:30px;margin:3px 6px;width:160px}.title-rename{height:26px;width:180px;padding:0 6px;font-weight:600;font-size:13px}.props-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex:1 1 100%}@media(max-width:599px){.toolbar{flex-wrap:wrap;row-gap:4px;padding-left:4px;padding-right:4px}.toolbar .sep{display:none}.toolbar .menu-wrap{position:static}.toolbar .menu{left:8px;right:8px;min-width:0;width:auto;max-width:none;max-height:calc(100dvh - 140px);overflow-y:auto}.toolbar-info{flex-basis:120px}.floatbar{top:8px}}.style-choice.font-toggle{min-width:36px;font-size:15px;font-family:Georgia,serif}.style-title{font-size:12px;font-weight:600;color:var(--muted)}.style-select{flex:1;min-width:0;height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:#fff;font:inherit;font-size:13px}