:root{--bg-main:#f4f4f9;--bg-panel:#fff;--bg-input:#fff;--bg-hover:#e9ecef;--bg-stage:#fff3cd;--text-main:#333;--text-muted:#666;--border-main:#ccc;--primary:#00458f;--primary-hover:#036;--secondary:#007bff;--danger:#a51d2a;--warning:#967000;--warning-dark:#7a5a00;--success:#208637;--shadow:#0000001a;--scrollbar-thumb:silver;--scrollbar-track:#f4f4f9}@media (prefers-color-scheme:dark){:root{--bg-main:#121212;--bg-panel:#1e1e1e;--bg-input:#2d2d2d;--bg-hover:#2a2a2a;--bg-stage:#2a2100;--text-main:#e0e0e0;--text-muted:#aaa;--border-main:#444;--primary:#00458f;--primary-hover:#0056b3;--secondary:#4dabf7;--danger:#a51d2a;--warning:#967000;--warning-dark:#ffe066;--success:#208637;--shadow:#00000080;--scrollbar-thumb:#555;--scrollbar-track:#1e1e1e}}body{background-color:var(--bg-main);color:var(--text-main);min-height:100vh;margin:20px;font-family:sans-serif;overflow:hidden auto}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border:3px solid var(--scrollbar-track);border-radius:6px}main{padding-bottom:70px}.spinner{border:3px solid var(--border-main);border-top:3px solid var(--primary);vertical-align:middle;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.panel{background:var(--bg-panel);box-shadow:0 2px 4px var(--shadow);z-index:10;border-radius:8px;margin-bottom:20px;padding:20px;position:relative}.header-controls{flex-wrap:wrap;align-items:center;gap:15px;margin-bottom:15px;display:flex}.toolbar{background-color:var(--bg-hover);border-radius:6px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;display:flex}.tool-btn{background-color:var(--bg-panel);color:var(--text-main);border:1px solid var(--border-main);cursor:pointer;border-radius:4px;padding:6px 12px;transition:opacity .2s}.tool-btn:hover{opacity:.8}.tool-btn.active{background-color:var(--primary);color:#fff;border-color:var(--primary-hover)}select,input{background:var(--bg-input);color:var(--text-main);border:1px solid var(--border-main);border-radius:4px}select,input[type=color],input[type=range],input[type=checkbox]{cursor:pointer}.control-group{align-items:center;gap:5px;font-size:.85em;display:flex}button.action-btn{background-color:var(--success);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:8px 16px;transition:opacity .2s}button.action-btn:hover{opacity:.8}button:disabled{opacity:.5;cursor:not-allowed}.metrics-container{color:var(--text-muted);background:var(--bg-hover);border-radius:4px;flex-direction:column;gap:4px;min-width:140px;padding:6px 10px;font-size:.75em;display:flex}.metric-row{justify-content:space-between;align-items:center;display:flex}.metric-bar-bg{background:var(--border-main);border-radius:3px;flex-grow:1;height:6px;margin-left:8px;overflow:hidden}.metric-bar-fill{background:var(--success);height:100%;transition:width .1s,background-color .3s}.metric-bar-fill.warning{background:var(--warning)}.metric-bar-fill.danger{background:var(--danger)}.status{align-items:center;gap:5px;margin-left:auto;font-size:.9em;display:flex}.status-dot{background-color:var(--border-main);border-radius:50%;width:10px;height:10px}.status-dot.online{background-color:var(--success)}.status-dot.offline{background-color:var(--danger)}#canvasWrapper{border:2px solid var(--border-main);touch-action:none;background-color:#2c2f31;border-radius:8px;width:100%;height:65vh;margin-top:10px;display:none;position:relative;overflow:hidden;box-shadow:inset 0 2px 5px #0000001a}#canvasTransformGroup{transform-origin:0 0;position:absolute}canvas#whiteboardCanvas{background-color:#fff;display:block;box-shadow:0 4px 10px #0003}#brushCursor{pointer-events:none;z-index:100;mix-blend-mode:difference;background-color:#ffffff1a;border:1px solid #fffc;border-radius:50%;display:none;position:absolute;transform:translate(-50%,-50%)}#gizmoCursor{display:none!important}#proxyGizmoHandle{pointer-events:none;z-index:1000;border:1px solid var(--border-main);-webkit-backdrop-filter:blur(1px);background:#1e1e23e6;border-radius:4px;width:18.5px;height:18.5px;display:none;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000080}#proxyGizmoHandle:before,#proxyGizmoHandle:after{content:"";background:#ffffffe6;position:absolute;box-shadow:0 0 2px #000c}#proxyGizmoHandle:before{width:150%;height:2px;top:50%;left:-25%;transform:translateY(-50%)}#proxyGizmoHandle:after{width:2px;height:150%;top:-25%;left:50%;transform:translate(-50%)}body.resizing-active,body.resizing-active *{cursor:none!important}body.resizing-active #proxyGizmoHandle{display:block!important}body.resizing-active .gizmo-handle.is-active-dragging,body.resizing-active #gizmoRotate.is-active-dragging{opacity:0!important;pointer-events:none!important}#gridOverlay{pointer-events:none;mix-blend-mode:multiply;opacity:.4;z-index:5;position:absolute;inset:0}#entityLayer{pointer-events:none;z-index:7;position:absolute;top:0;left:0}#gizmoObjectsContainer{pointer-events:none;z-index:6;position:absolute;inset:0}#cursorCanvas{pointer-events:none;z-index:100;position:absolute;inset:0}.gizmo-object-wrapper{transform-origin:50%;-webkit-user-select:none;user-select:none;box-sizing:border-box;position:absolute}.gizmo-object-wrapper img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.entity-wrapper{transform-origin:50%;-webkit-user-select:none;user-select:none;box-sizing:border-box;cursor:default;transition:opacity .15s ease-in-out;position:absolute}.entity-wrapper img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.entity-placeholder{color:#fffc;border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;font-size:.75em;font-weight:700;display:flex}.entity-wrapper.entity-selected{outline:2px solid var(--secondary);outline-offset:2px}.entity-wrapper.entity-locked:after{content:"🔒";z-index:100;pointer-events:none;text-shadow:0 0 3px #fff;font-size:14px;position:absolute;top:4px;left:4px}.entity-wrapper.entity-locked{cursor:not-allowed!important}#gizmoControls{box-sizing:border-box;border:2px dashed var(--secondary);z-index:10;pointer-events:auto;transform-origin:50%;cursor:move;-webkit-user-select:none;user-select:none;background:#007bff0d;display:none;position:absolute}.gizmo-handle{border:1px solid var(--secondary);-webkit-user-select:none;user-select:none;background:#fff;width:16px;height:16px;position:absolute}.gizmo-btn{color:#fff;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;width:28px;height:28px;font-weight:700;line-height:28px;position:absolute;box-shadow:0 2px 4px #0000004d}#uploadProgressOverlay{background:var(--bg-panel);border:1px solid var(--border-main);z-index:5000;box-shadow:0 2px 8px var(--shadow);border-radius:6px;align-items:center;gap:8px;padding:10px 16px;font-size:.85em;display:none;position:fixed;bottom:80px;right:20px}.grid-none{background:0 0}.grid-dots{background-image:radial-gradient(#666 2px,#0000 2px);background-size:40px 40px}.grid-lines{background-image:linear-gradient(#666 1px,#0000 1px);background-size:100% 40px}.grid-squares{background-image:linear-gradient(#666 1px,#0000 1px),linear-gradient(90deg,#666 1px,#0000 1px);background-size:40px 40px}#timelineContainer{background:var(--bg-panel);box-shadow:0 2px 4px var(--shadow);border-radius:8px;align-items:center;gap:10px;margin-top:15px;padding:10px 20px;display:none}#timelineSlider{cursor:pointer;flex-grow:1}#timelineLabel{text-align:right;font-variant-numeric:tabular-nums;min-width:80px;font-size:.9em}#minimapWrapper{background:var(--bg-panel);border:2px solid var(--border-main);width:200px;box-shadow:0 4px 8px var(--shadow);z-index:50;border-radius:4px;flex-direction:column;display:none;position:absolute;bottom:20px;right:20px}#minimapHeader{background:var(--bg-hover);text-align:right;cursor:pointer;border-bottom:1px solid var(--border-main);-webkit-user-select:none;user-select:none;padding:8px 12px;font-size:.85em;font-weight:700}#minimapCanvas{cursor:crosshair;width:100%;display:block}#banOverlay{color:#fff;z-index:9999;text-align:center;background:#000000e6;flex-direction:column;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#stageControls{background:var(--bg-stage);border-top:2px solid var(--warning);z-index:1000;box-shadow:0 -2px 10px var(--shadow);padding:10px 15px;position:fixed;bottom:0;left:0;right:0}.stage-text{color:var(--warning-dark)}.stage-divider{background:var(--warning);width:1px;height:22px;margin:0 5px}@media (width<=768px){body{height:100vh;margin:10px;overflow-y:auto}.panel{margin-bottom:15px;padding:12px}.header-controls{gap:10px}.toolbar{gap:8px;padding:8px}.tool-btn{padding:8px 12px;font-size:.95em}#canvasWrapper{height:50vh}#minimapWrapper{display:none!important}#timelineContainer{flex-wrap:wrap;padding:10px}#stageControls{justify-content:space-between;gap:10px;padding:10px}}.entity-wrapper.draw-faded{opacity:.35!important}#fakeResizeCursor{border:2px solid var(--secondary);pointer-events:none;z-index:99999;background:#fff;border-radius:2px;width:16px;height:16px;display:none;position:fixed;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}.context-menu{background:var(--bg-panel);border:1px solid var(--border-main);z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e1e23e6;border-radius:6px;min-width:180px;padding:6px;display:none;position:fixed;box-shadow:0 8px 16px #0006}.context-menu-item{cursor:pointer;color:var(--text-main);border-radius:4px;justify-content:space-between;align-items:center;margin:2px 0;padding:8px 12px;font-size:13px;transition:background .15s;display:flex}.context-menu-item:hover{background-color:#ffffff1a}.context-menu-item.delete{color:#f55}.context-menu-item small{opacity:.7;font-size:10px;font-family:var(--font-main);color:#fff;white-space:nowrap;background:#ffffff26;border:1px solid #ffffff1a;border-radius:4px;margin-left:12px;padding:2px 6px;font-weight:500}.swatch{cursor:pointer;border:1px solid #ffffff4d;border-radius:4px;width:22px;height:22px;transition:transform .1s}.swatch:hover{border-color:#fff;transform:scale(1.1)}.context-menu hr{border:0;border-top:1px solid #ffffff1a;margin:6px 0}.context-menu input[type=range],.context-menu input[type=color]{width:100%;margin-top:5px}#boardSelectionPanel,#timelineContainer{transition:opacity .25s,max-height .3s,padding .3s,margin .3s;overflow:hidden}#minimapWrapper{transition:opacity .25s}body.zen-mode{background:var(--bg-main)!important;overflow:hidden!important}body.zen-mode #boardSelectionPanel,body.zen-mode #timelineContainer,body.zen-mode #stageControls,body.zen-mode #minimapWrapper{display:none!important}@keyframes zenEnter{0%{opacity:.7;transform:scale(.99)}to{opacity:1;transform:scale(1)}}@keyframes zenLeave{0%{opacity:.9}to{opacity:1}}body.zen-mode #canvasWrapper{z-index:500;animation:.3s forwards zenEnter;border:none!important;border-radius:0!important;width:100vw!important;height:100vh!important;margin:0!important;position:fixed!important;inset:0!important}#zenExitHint{color:#ffffffd9;pointer-events:none;z-index:9999;letter-spacing:.02em;background:#00000073;border-radius:20px;padding:6px 16px;font-size:12px;transition:opacity .3s;display:none;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.context-menu-section-label{color:#fff6;text-transform:uppercase;letter-spacing:.05em;pointer-events:none;padding:4px 12px 2px;font-size:11px}.context-menu-align-row{gap:4px;padding:4px 12px;display:flex}.context-menu-align-btn{color:#e0e0e0;cursor:pointer;text-align:center;background:#ffffff14;border:1px solid #ffffff26;border-radius:3px;flex:1;padding:5px 2px;font-size:11px}.context-menu-align-btn:hover{background:#ffffff2e}.align-section{display:none}.multi-select .align-section{display:block}