:root{--bg:#14161a;--panel:#1c1f24;--panel-2:#22262c;--border:#2c3138;--text:#e8eaed;--text-dim:#9aa1aa;--accent:#4da3ff;--accent-dim:#2b5c8f;--danger:#ff6b6b;--ok:#51cf80;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Segoe UI,Microsoft YaHei,sans-serif;font-size:13px;overflow:hidden}.app{grid-template:"top top top"46px"left center right"1fr"status status status"24px/232px 1fr 320px;height:100%;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--border);grid-area:top;align-items:center;gap:8px;padding:0 12px;display:flex}.topbar .logo{letter-spacing:.2px;background:linear-gradient(90deg,#6db3ff,#9f7bff);color:#0000;white-space:nowrap;-webkit-background-clip:text;background-clip:text;margin-right:4px;font-size:15px;font-weight:700}.topbar .proj-name{color:var(--text);background:0 0;border:1px solid #0000;border-radius:6px;width:160px;padding:4px 8px;font-size:13px}.topbar .proj-name:hover,.topbar .proj-name:focus{border-color:var(--border);background:var(--panel-2);outline:none}.topbar .spacer{flex:1}.topbar .divider{background:var(--border);width:1px;height:22px;margin:0 4px}.btn{border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:5px 10px;font-size:12.5px;transition:background .12s,border-color .12s;display:inline-flex}.btn:hover{background:#2a2f37;border-color:#3a4048}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#0c1520;font-weight:600}.btn.primary:hover{background:#6ab2ff}.btn.active{background:var(--accent-dim);border-color:var(--accent);color:#dfefff}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--panel-2)}.btn.small{padding:3px 7px;font-size:11.5px}.seg{border:1px solid var(--border);border-radius:6px;display:inline-flex;overflow:hidden}.seg button{background:var(--panel-2);color:var(--text-dim);cursor:pointer;border:none;padding:5px 12px;font-size:12.5px}.seg button.on{background:var(--accent-dim);color:#dfefff}.left{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;grid-area:left;display:flex;overflow-y:auto}.section{padding:10px 12px 4px}.section h3{text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin-bottom:8px;font-size:11px;font-weight:600}.section h3.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}.section h3.collapsible:hover{color:var(--text)}.section h3 .chev{width:14px;display:inline-block}.tool-grid{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:6px;display:grid}.tool-grid .btn{justify-content:center}.lib-grid{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:6px;display:grid}.lib-item{border:1px solid var(--border);background:var(--panel-2);border-radius:var(--radius);text-align:center;cursor:pointer;color:var(--text);padding:8px 6px;font-size:12px;transition:border-color .12s,background .12s}.lib-item:hover{border-color:var(--accent);background:#253040}.lib-item.active{border-color:var(--accent);background:var(--accent-dim)}.lib-item .ico{margin-bottom:4px;font-size:20px;display:block}.center{background:#101215;grid-area:center;position:relative;overflow:hidden}.center canvas{display:block}.viewport-fill{position:absolute;inset:0}.view-hint{border:1px solid var(--border);color:var(--text-dim);pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;background:#14181ed9;border-radius:20px;padding:5px 14px;font-size:12px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.right{background:var(--panel);border-left:1px solid var(--border);flex-direction:column;grid-area:right;min-height:0;display:flex}.right .props{border-bottom:1px solid var(--border);flex:none;max-height:46%;padding:10px 12px;overflow-y:auto}.right .ai{flex-direction:column;flex:1;min-height:0;display:flex}.prop-row{align-items:center;gap:8px;margin-bottom:7px;display:flex}.prop-row label{color:var(--text-dim);flex:0 0 62px;font-size:12px}.prop-row input[type=number],.prop-row input[type=text],.prop-row select{background:var(--panel-2);border:1px solid var(--border);min-width:0;color:var(--text);border-radius:5px;flex:1;padding:4px 7px;font-size:12.5px}.prop-row input:focus,.prop-row select:focus{border-color:var(--accent);outline:none}.prop-row input[type=color]{border:1px solid var(--border);background:var(--panel-2);cursor:pointer;border-radius:5px;width:34px;height:26px;padding:2px}.prop-row input[type=range]{accent-color:var(--accent);flex:1}.prop-title{justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:600;display:flex}.prop-empty{color:var(--text-dim);text-align:center;padding:24px 0 18px;font-size:12.5px}.ai-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:9px 12px;font-weight:600;display:flex}.ai-quick{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px;padding:8px 12px;display:flex}.ai-msgs{flex-direction:column;flex:1;gap:10px;padding:10px 12px;display:flex;overflow-y:auto}.msg{white-space:pre-wrap;-webkit-user-select:text;user-select:text;max-width:92%;line-height:1.5}.msg.user{background:var(--accent-dim);border-radius:10px 10px 2px;align-self:flex-end;padding:7px 11px}.msg.ai{background:var(--panel-2);border:1px solid var(--border);border-radius:10px 10px 10px 2px;align-self:flex-start;padding:7px 11px}.msg.ai .ops-note{color:var(--ok);margin-top:5px;font-size:11.5px}.msg.ai.thinking{color:var(--text-dim);font-style:italic}.ai-input{border-top:1px solid var(--border);gap:8px;padding:10px 12px;display:flex}.ai-input textarea{resize:none;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;flex:1;height:60px;padding:8px 10px;font-family:inherit;font-size:13px}.ai-input textarea:focus{border-color:var(--accent);outline:none}.statusbar{background:var(--panel);border-top:1px solid var(--border);color:var(--text-dim);grid-area:status;align-items:center;gap:16px;padding:0 12px;font-size:11.5px;display:flex}.statusbar .warn{color:#e8b458}.modal-mask{z-index:100;background:#06080a99;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;min-width:420px;max-width:80vw;max-height:84vh;padding:18px;overflow:auto}.modal h2{margin-bottom:12px;font-size:15px}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#333a44;border-radius:5px}::-webkit-scrollbar-track{background:0 0}.spin{border:2px solid var(--text-dim);border-top-color:#0000;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}