:root{--primary:#245fd6;--primary-hover:#1d4fb4;--primary-soft:#eaf2ff;--bg:#f5f8fc;--canvas:#fbfcfe;--surface:#fff;--text:#10233f;--text-secondary:#5d7190;--border:#d8e1ec;--success:#0f6e4d;--warning:#9a5b0c;--error:#b62f3c;--c-velocity:#2563eb;--c-accel:#d97a16;--c-force:#c93d4a;--c-trail:#0e9ba8;--c-energy-k:#16875e;--c-energy-p:#7c5cd6;--c-moment:#d99a16;--font-ui:Inter, "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;--font-num:"Roboto Mono", Consolas, "SF Mono", Menlo, monospace;--radius:10px;--radius-sm:7px;--shadow-float:0 8px 28px #10233f24;--topbar-h:52px;--playback-h:60px}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.app-shell{grid-template-rows:var(--topbar-h) 1fr;grid-template-columns:minmax(0,1fr) 350px;grid-template-areas:"topbar topbar""stage panel";height:100dvh;display:grid}.stage-area{flex-direction:column;grid-area:stage;min-width:0;min-height:0;display:flex;position:relative}.panel-area{border-left:1px solid var(--border);background:var(--surface);flex-direction:column;grid-area:panel;min-height:0;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--border);grid-area:topbar;align-items:center;gap:10px;padding:0 14px;display:flex}.topbar-logo{white-space:nowrap;align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.topbar-logo svg{display:block}.topbar-title{border-radius:var(--radius-sm);color:var(--text);background:0 0;border:1px solid #0000;width:200px;min-width:0;padding:5px 10px;font-size:14px;font-weight:500}.topbar-title:hover{border-color:var(--border)}.topbar-title:focus{border-color:var(--primary);background:var(--surface);outline:none}.topbar-spacer{flex:1}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:13px;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:var(--primary-soft);border-color:var(--primary)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:disabled:hover{background:var(--surface);border-color:var(--border)}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}.btn-icon{padding:6px 8px}.btn-ghost{background:0 0;border-color:#0000}.canvas-wrap{background:var(--canvas);flex:1;min-height:0;position:relative}.canvas-wrap canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.canvas-hint{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);pointer-events:none;background:#ffffffeb;padding:4px 10px;font-size:12px;position:absolute;top:10px;left:12px}.canvas-tools{flex-direction:column;gap:6px;display:flex;position:absolute;top:10px;right:12px}.canvas-tools .btn{box-shadow:0 1px 4px #10233f14}.palette{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:4px;max-height:calc(100% - 90px);padding:6px;display:flex;position:absolute;top:50%;left:12px;overflow-y:auto;transform:translateY(-50%);box-shadow:0 2px 10px #10233f12}.palette-btn{border-radius:var(--radius-sm);width:52px;color:var(--text);background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;display:flex}.palette-btn:hover{background:var(--primary-soft);color:var(--primary)}.palette-btn svg{display:block}.palette-divider{background:var(--border);height:1px;margin:2px 4px}.playback{height:var(--playback-h);background:var(--surface);border-top:1px solid var(--border);align-items:center;gap:10px;padding:0 14px;display:flex}.playback-buttons{align-items:center;gap:4px;display:flex}.play-btn{background:var(--primary);color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;display:inline-flex}.play-btn:hover{background:var(--primary-hover)}.playback-time{color:var(--text);text-align:center;min-width:110px;font-size:13px}.playback-time span{color:var(--text-secondary)}.scrubber{cursor:pointer;flex:1;align-items:center;min-width:60px;height:26px;display:flex;position:relative}.scrubber-track{background:var(--border);border-radius:3px;height:5px;position:absolute;left:0;right:0}.scrubber-fill{background:var(--primary);border-radius:3px;height:5px;position:absolute;left:0}.scrubber-thumb{border:2.5px solid var(--primary);background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%);box-shadow:0 1px 3px #10233f33}.scrubber-marker{background:var(--c-moment);border-radius:1.5px;width:7px;height:7px;position:absolute;top:4px;transform:translate(-50%)rotate(45deg)}.speed-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);padding:5px 6px;font-size:12.5px}.panel-tabs{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.panel-tab{color:var(--text-secondary);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:11px 4px;font-size:13.5px;font-weight:500}.panel-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.panel-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.panel-section{border-bottom:1px solid var(--border);padding:12px 14px}.panel-section h3{color:var(--text-secondary);margin:0 0 8px;font-size:12.5px;font-weight:600}.panel-empty{color:var(--text-secondary);text-align:center;padding:28px 18px;font-size:13px}.prop-row{justify-content:space-between;align-items:center;gap:8px;padding:4px 0;display:flex}.prop-row label{color:var(--text);flex-shrink:0;font-size:13px}.prop-row .unit{color:var(--text-secondary);margin-left:2px;font-size:12px}.prop-input{border:1px solid var(--border);border-radius:var(--radius-sm);width:92px;font-size:13px;font-family:var(--font-num);text-align:right;color:var(--text);padding:5px 8px}.prop-input:focus{border-color:var(--primary);outline:none}.prop-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:5px 8px;font-size:13px}.obs-grid{grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;display:grid}.obs-grid dt{color:var(--text-secondary)}.obs-grid dd{text-align:right;font-family:var(--font-num);margin:0}.energy-bar{align-items:center;gap:8px;margin:5px 0;font-size:12.5px;display:flex}.energy-bar .name{width:56px;color:var(--text-secondary);flex-shrink:0}.energy-bar .track{background:var(--bg);border-radius:5px;flex:1;height:9px;overflow:hidden}.energy-bar .fill{border-radius:5px;height:100%;transition:width .1s linear}.energy-bar .val{text-align:right;width:58px;font-family:var(--font-num);font-size:12px}.moment-list{flex-direction:column;gap:4px;display:flex}.moment-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);text-align:left;align-items:center;gap:8px;width:100%;padding:6px 9px;font-size:12.5px;display:flex}.moment-item:hover{border-color:var(--c-moment);background:#fdf8ec}.moment-item.active{border-color:var(--c-moment);background:#fdf4dc}.moment-item .t{font-family:var(--font-num);color:var(--text-secondary);flex-shrink:0;font-size:11.5px}.moment-dot{background:var(--c-moment);border-radius:1.5px;flex-shrink:0;width:7px;height:7px;transform:rotate(45deg)}.toggle-row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.toggle-row label{cursor:pointer;align-items:center;gap:5px;font-size:13px;display:inline-flex}.diag-note{border-radius:var(--radius-sm);margin-top:6px;padding:7px 10px;font-size:12.5px}.diag-ok{color:var(--success);background:#ecf7f1}.diag-warn{color:var(--warning);background:#fdf3e4}.agent-panel{flex-direction:column;flex:1;min-height:0;display:flex}.agent-messages{flex-direction:column;flex:1;gap:10px;min-height:0;padding:12px 14px;display:flex;overflow-y:auto}.msg{border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;max-width:95%;padding:8px 12px;font-size:13.5px}.msg-user{background:var(--primary-soft);color:var(--text);align-self:flex-end}.msg-assistant{background:var(--bg);color:var(--text);align-self:flex-start}.msg-status{color:var(--text-secondary);align-self:center;align-items:center;gap:7px;padding:2px 0;font-size:12.5px;display:flex}.msg-error{color:var(--error);background:#fbeef0;align-self:stretch;font-size:12.5px}.agent-input{border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:8px;padding:10px 12px;display:flex}.agent-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);resize:none;width:100%;min-height:60px;color:var(--text);padding:8px 10px;font-size:13.5px}.agent-textarea:focus{border-color:var(--primary);outline:none}.agent-actions{align-items:center;gap:8px;display:flex}.agent-attach{color:var(--text-secondary);align-items:center;gap:6px;font-size:12.5px;display:flex}.agent-attach img{border:1px solid var(--border);border-radius:4px;height:34px}.spinner{border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.dialog-backdrop{z-index:50;background:#10233f59;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);box-shadow:var(--shadow-float);border-radius:14px;flex-direction:column;width:560px;max-width:100%;max-height:85dvh;display:flex;overflow:hidden}.dialog-confirm{width:420px}.dialog-message{color:var(--text-secondary);margin:0}.dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.dialog-header{justify-content:space-between;align-items:center;padding:14px 18px 10px;font-size:15.5px;font-weight:600;display:flex}.dialog-body{padding:4px 18px 18px;overflow-y:auto}.template-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.template-card{border:1px solid var(--border);border-radius:var(--radius);text-align:left;background:var(--surface);padding:12px 14px}.template-card:hover{border-color:var(--primary);background:var(--primary-soft)}.template-card .name{margin-bottom:3px;font-size:14px;font-weight:600}.template-card .summary{color:var(--text-secondary);font-size:12.5px}.scene-list-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-align:left;justify-content:space-between;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:10px 14px;display:flex}.scene-list-item:hover{border-color:var(--primary)}.scene-list-item .date{color:var(--text-secondary);flex-shrink:0;font-size:12px}.tabbar{display:none}.mobile-only{display:none!important}@media (max-width:900px){.app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-h) 1fr auto auto;grid-template-areas:"topbar""stage""sheet""tabbar"}.desktop-only{display:none!important}.mobile-only{display:inline-flex!important}.panel-area{border-left:none;border-top:1px solid var(--border);grid-area:sheet;height:42dvh;transition:height .2s}.panel-area.collapsed{border-top:none;height:0;overflow:hidden}.topbar-title{flex:0 120px;width:auto;min-width:40px}.palette{padding:4px;left:8px}.palette-btn{width:46px;font-size:10px}.playback{gap:7px;padding:0 8px}.playback-time{min-width:84px;font-size:12px}.tabbar{border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;grid-area:tabbar;display:flex}.tabbar button{color:var(--text-secondary);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:1px;padding:9px 4px;font-size:12.5px;display:flex}.tabbar button.active{color:var(--primary)}.dialog{border-radius:14px 14px 0 0;align-self:flex-end;width:100%}.dialog-backdrop{align-items:flex-end;padding:0}.template-grid{grid-template-columns:1fr}}@media (max-width:520px){.topbar{gap:6px;padding:0 8px}}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#c4d0de padding-box content-box;border:2px solid #0000;border-radius:5px}::-webkit-scrollbar-track{background:0 0}
