:root{--bg:#f5f4f1;--surface:#fff;--ink:#272833;--muted:#85858f;--line:#e8e7ed;--purple:#7160cc;--soft:#eeeaf9;--green:#328477;--sidebar:236px;--queue:284px}*{box-sizing:border-box}body{margin:0;font:14px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);height:100vh;overflow:hidden}button,select,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:white;padding:8px 12px;color:var(--ink);transition:background .15s,box-shadow .15s}button:hover{background:#f4f1fc;border-color:#d6ceee}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.primary{background:var(--purple);color:#fff;border-color:var(--purple);font-weight:600}.primary:hover{background:#6050bb}.plain{background:none;border:none;color:var(--muted);padding:3px}.icon{border:none;background:none;font-size:20px;padding:0 6px}.sidebar{width:var(--sidebar);position:absolute;inset:0 auto 0 0;background:#fbfaf8;border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:700;letter-spacing:1px;margin-bottom:35px}.brandmark{font-size:21px;display:grid;place-items:center;background:#302d42;color:white;width:43px;height:43px;border-radius:14px}.brand small{display:block;font-size:10px;color:var(--muted);font-weight:400;letter-spacing:1px;margin-top:1px}.sectionline{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;letter-spacing:1px;margin-bottom:9px}#projects{max-height:22vh;overflow:auto}.project{display:flex;width:100%;align-items:center;gap:9px;text-align:left;border:none;background:transparent;padding:10px;font-size:12px;margin-bottom:5px}.project.active{background:var(--soft);color:#6251ac;font-weight:600}.project span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.side-tabs{display:flex;border-bottom:1px solid var(--line);margin-top:26px;margin-bottom:17px}.side-tabs button{border:none;background:none;border-radius:0;padding:10px 12px;color:var(--muted);font-size:12px}.side-tabs .active{border-bottom:2px solid var(--purple);color:var(--purple)}#library{overflow-y:auto;flex:1}.library-empty{color:#9a98a1;font-size:12px;text-align:center;border:1px dashed #dedbe5;border-radius:12px;padding:24px 8px}.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.thumb{padding:0;overflow:hidden;border-radius:10px;background:#fff;text-align:left}.thumb img{display:block;width:100%;height:86px;object-fit:cover}.thumb span{display:block;font-size:10px;padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prompt-item,.history-item{width:100%;text-align:left;margin-bottom:8px;font-size:11px;padding:10px}.prompt-item small,.history-item small{display:block;color:var(--muted);margin-top:4px}.sidebar-footer{padding-top:20px;color:#8b8896;font-size:10px}.sidebar-footer button{display:block;margin-top:8px;font-size:11px}.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px}main{margin-left:var(--sidebar);height:100vh;position:relative}header{height:74px;border-bottom:1px solid var(--line);background:#ffffffc9;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:15px;font-size:12px}.breadcrumb{color:#a4a1ae}.header-actions{display:flex;align-items:center;gap:10px}.header-actions button{font-size:11px;padding:7px 11px}.mode-badge{font-size:10px;color:#6f5faa;background:var(--soft);border-radius:20px;padding:6px 10px;margin-right:6px}#queue-count{background:#eeeaf8;padding:1px 5px;border-radius:4px;color:var(--purple);margin-left:6px}.workspace{height:calc(100vh - 74px);display:flex;position:relative}#canvas{position:relative;flex:1;overflow:hidden;background-image:radial-gradient(#d7d5e0 1px,transparent 1px);background-size:22px 22px;touch-action:none}#world{position:absolute;transform-origin:0 0}#connections{position:absolute;overflow:visible;width:1px;height:1px;pointer-events:none}.canvas-label{position:absolute;left:26px;top:22px;color:#8a8497;font-size:11px;pointer-events:none}.canvas-label span{color:#aaa6b2;margin-left:14px;font-size:10px}.canvas-tools{position:absolute;bottom:228px;left:26px;display:flex;align-items:center;gap:3px;background:white;border:1px solid var(--line);border-radius:9px;padding:4px;box-shadow:0 4px 16px #2d214209}.canvas-tools button{border:none;background:none;padding:3px 7px}.canvas-tools span{font-size:10px;min-width:40px;text-align:center}#welcome{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:540px;text-align:center;pointer-events:auto}.welcome-symbol{font-size:48px;color:#9e8bd4;background:#eee8f7;border:1px solid #e3dbf4;width:82px;height:82px;border-radius:28px;margin:auto auto 26px;box-shadow:0 20px 50px #9d90bd20}.eyebrow{font-size:10px;color:#a095b0;letter-spacing:2px}h1{font-size:27px;letter-spacing:-.6px;margin:12px 0;font-weight:600}#welcome p{color:#93909e;font-size:12px;margin-bottom:24px}#welcome button{background:#fff;color:#75639d;font-size:12px;padding:11px 17px}#welcome small{display:block;font-size:10px;color:#aaa4b3;margin-top:15px}.node{position:absolute;width:286px;background:#fff;border:1px solid #e5e2eb;border-radius:14px;box-shadow:0 8px 25px #3420440a;overflow:hidden;cursor:grab;user-select:none}.node.selected{border:2px solid #9481d7;box-shadow:0 0 0 4px #b4a3e522}.node .image-wrap{position:relative;height:248px;background:#ece8ef}.node img{width:100%;height:100%;object-fit:contain;pointer-events:none}.mock-ribbon{position:absolute;top:11px;left:11px;background:#ffffffdd;color:#75619f;padding:4px 8px;border-radius:5px;font-size:9px;font-weight:600}.node-content{padding:11px 12px 8px}.node-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600}.node-title small{color:#9b97a3;font-weight:400;font-size:9px}.node-prompt{font-size:10px;color:#99939f;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-actions{display:flex;gap:4px;padding:4px 9px 10px}.node-actions button{padding:5px 7px;border:none;font-size:10px;background:#f6f4f9}.node-actions button:first-child{background:var(--soft);color:var(--purple)}.node .selection-check{position:absolute;top:10px;right:11px;accent-color:var(--purple);width:16px;height:16px}.pending{width:286px;height:330px;border:1px dashed #c9b9e1;background:#f5f1fae8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#9a83b5;font-size:12px}.pending small{font-size:10px}.composer{position:absolute;bottom:24px;left:calc(50% - 142px);transform:translateX(-50%);width:min(830px,calc(100% - 332px));min-width:530px;background:#fff;border:1px solid #e5dfed;border-radius:18px;box-shadow:0 14px 55px #42345012;z-index:10;padding:16px 17px 10px}.composer textarea{width:100%;resize:none;height:62px;border:none;color:#423c4c;font-size:13px;outline:none!important;background:white;line-height:1.7}.composer textarea::placeholder{color:#a6a0ad}.composer-controls{display:flex;gap:5px;align-items:center;border-top:1px solid #f3f0f5;padding-top:12px}.composer-controls button,.composer-controls select{font-size:10px;border:1px solid #eeeaf2;border-radius:8px;padding:8px 6px;background:#faf9fc;color:#756e82;max-width:150px}.composer-controls label{display:block}.composer-controls .primary{margin-left:auto;background:var(--purple);color:white;min-width:85px;border:1px solid var(--purple);font-size:12px}.composer-foot{display:flex;justify-content:space-between;padding-top:8px;color:#aaa3b2;font-size:9px}.composer-foot button{font-size:9px}#reference-strip{display:flex;gap:8px;flex-wrap:wrap}.reference-chip{display:flex;align-items:center;gap:6px;background:#f3eff9;border:1px solid #e8e0f1;border-radius:7px;font-size:10px;padding:3px 6px;margin-bottom:9px;color:#87739b}.reference-chip img{width:26px;height:26px;object-fit:cover;border-radius:4px}.reference-chip button{font-size:12px;border:none;padding:0;background:none;color:#887397}#queue-panel{width:var(--queue);border-left:1px solid var(--line);background:#fbfafc;display:flex;flex-direction:column;z-index:2}#queue-panel.hidden{display:none}.queue-heading{padding:23px 18px 17px;display:flex;align-items:flex-start;justify-content:space-between}.queue-heading h2{font-size:13px;margin:0 0 5px}.queue-heading small{font-size:9px;color:#a39aa9}#queue-list{flex:1;overflow-y:auto;padding:0 13px}.queue-card{background:white;border:1px solid #e9e4ed;border-radius:10px;padding:12px;margin-bottom:9px}.task-top{display:flex;justify-content:space-between;align-items:center;font-size:10px}.task-mode{color:#a59baa;font-size:9px}.task-prompt{font-size:11px;color:#797080;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0;overflow-wrap:anywhere}.status{font-size:9px;border-radius:4px;padding:3px 5px;background:#f0edf4;color:#8d809a}.status.running{color:#7560b2;background:#f0e9fb}.status.succeeded{color:#468575;background:#e9f3ef}.status.failed,.status.unknown{color:#b17946;background:#fff1e5}.progress{height:3px;background:#f0edf3;border-radius:3px;margin:7px 0}.progress span{display:block;height:100%;background:#9781d0;border-radius:3px}.task-actions{display:flex;gap:5px;margin-top:8px}.task-actions button{font-size:9px;padding:3px 7px}.task-error{font-size:9px;color:#ae8154;margin-top:7px}.queue-note{padding:18px;font-size:9px;color:#a69aa9;border-top:1px solid #eee7f0}#toast{position:fixed;top:85px;left:50%;transform:translateX(-50%);padding:11px 20px;background:#393241;color:white;border-radius:10px;font-size:12px;box-shadow:0 5px 20px #3332;opacity:0;pointer-events:none;z-index:100;transition:opacity .15s}#toast.show{opacity:1}dialog{border:1px solid #e4dcec;border-radius:18px;padding:28px;width:450px;color:var(--ink);box-shadow:0 30px 100px #25143830}dialog::backdrop{background:#29213540;backdrop-filter:blur(3px)}dialog h2{font-size:20px;margin:0 0 15px}dialog p{color:#958a9f;font-size:12px;line-height:1.8}dialog input{width:100%;border:1px solid #e5dfeb;border-radius:8px;padding:12px;margin:10px 0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.settings-content .setting-row{display:flex;justify-content:space-between;align-items:center;margin:16px 0;font-size:12px}.setting-row select{font-size:11px;padding:8px;border:1px solid var(--line);border-radius:6px;max-width:255px}#capabilities{background:#f6f3f9;padding:12px;border-radius:9px;font-size:11px;color:#8c7e9e;line-height:1.9}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:1250px){:root{--sidebar:205px;--queue:250px}header{padding:0 18px}.composer{min-width:480px;width:calc(100% - 290px);left:calc(50% - 125px);padding:12px}.composer-controls{gap:3px}.composer-controls select{max-width:100px;font-size:9px}.canvas-label span{display:none}}@media(max-width:1000px){:root{--sidebar:180px}.brand{font-size:19px}.mode-badge{display:none}#queue-panel{position:absolute;right:0;height:100%;box-shadow:-8px 0 30px #48335510}.composer{width:calc(100% - 40px);min-width:0;left:50%}.composer-controls{flex-wrap:wrap}#welcome{width:90%}h1{font-size:22px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
