:root{font:13px/1.35 Inter,ui-sans-serif,system-ui,sans-serif;color:#202b3c;background:#e9edf3;--navy:#18243a;--blue:#3f7cff;--line:#d8dee8;--muted:#778399;--timeline-height:250px}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}button,input,select,textarea{font:inherit}.editor-shell{height:100%;display:grid;grid-template-rows:58px minmax(0,1fr) var(--timeline-height)}.appbar{display:flex;align-items:center;gap:22px;padding:0 18px;background:var(--navy);color:#fff;box-shadow:0 2px 12px #18243a33;z-index:5}.brand{display:flex;align-items:center;gap:9px;min-width:260px}.brand-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:var(--blue);font-weight:800}.brand strong{font-size:15px}.brand input{width:130px;border:0;border-bottom:1px solid #8994a8;background:transparent;color:#dfe7f5;padding:4px}.app-actions,.zoom-controls{display:flex;align-items:center;gap:5px}.app-actions button,.zoom-controls button{border:1px solid #4e5c74;border-radius:5px;padding:7px 10px;background:#25334c;color:#eaf0fc;cursor:pointer}.app-actions .accent{background:var(--blue);border-color:#6e9bff}.bar-separator{width:1px;height:22px;background:#516078;margin:0 5px}.zoom-controls{margin-left:auto}.zoom-controls output{min-width:48px;text-align:center;color:#cbd5e7}.editor-body{min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr) 285px;gap:0}.left-sidebar,.properties-panel{background:#fff;border-right:1px solid var(--line);overflow:auto}.properties-panel{border-right:0;border-left:1px solid var(--line);padding:16px}.sidebar-tabs{display:grid;grid-template-columns:repeat(2,1fr);padding:9px 8px 3px;gap:4px;border-bottom:1px solid var(--line)}.sidebar-tabs button{border:0;background:transparent;color:var(--muted);padding:7px 2px;border-radius:4px;cursor:pointer}.sidebar-tabs button.active{background:#edf3ff;color:#285ec7;font-weight:700}.tool-panels{padding:12px}.tool-panel{display:none;gap:7px}.tool-panel.active{display:grid}.tool{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:7px;text-align:left;padding:10px;border:1px solid transparent;border-radius:6px;background:#f7f9fc;color:#334158;cursor:pointer}.tool b{font-size:20px;text-align:center;font-weight:500}.tool.active,.tool:hover{border-color:#9abaff;background:#eef4ff;color:#225cc8}.upload-card{display:grid;place-items:center;gap:8px;min-height:105px;border:1px dashed #9aabc6;border-radius:8px;background:#f7f9fc;color:#356ed7;font-size:27px;cursor:pointer}.upload-card span{font-size:13px}.upload-card small{font-size:11px;color:var(--muted)}.field{display:grid;gap:5px;color:var(--muted);font-size:12px}.field input,.field select{width:100%;padding:7px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--navy)}.workspace{min-width:0;min-height:0;padding:18px;background:#dce2eb}.canvas-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#d7dee8,#eef1f6);border:1px solid #c8d0dc;border-radius:8px}.canvas-stage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #fff8}.stage-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:12px;background:#18243ac9;color:#fff;font-size:11px;pointer-events:none;opacity:.7}#renderer-mount{position:relative;width:100%;height:100%;display:grid;place-items:center}.whiteboard-renderer{display:block;max-width:92%;max-height:92%;background:#fff;border:1px solid #aeb9c9;box-shadow:0 16px 35px #1c2a401f}.canvas-stage.previewing .stage-hint{display:none}#editor-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.selection-box{fill:#3f7cff0b;stroke:var(--blue);stroke-width:2;stroke-dasharray:7 4;vector-effect:non-scaling-stroke;pointer-events:none}.selection-handle{fill:#fff;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:nwse-resize}.rotation-handle{fill:var(--blue);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:grab}.selection-link{stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}.drawing-draft{pointer-events:none}.properties-panel .panel-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}.panel-heading h2{font-size:15px;margin:0}.icon-button{border:0;background:transparent;color:#a33b4b;font-size:19px;cursor:pointer}.property-fields{display:grid;gap:11px}.property-fields label{display:grid;gap:4px;color:var(--muted);font-size:12px}.property-fields input,.property-fields select,.property-fields textarea{width:100%;padding:7px;border:1px solid var(--line);border-radius:5px;color:var(--navy);background:#fff}.property-fields textarea{min-height:64px;resize:vertical}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-section{display:grid;gap:9px;padding-bottom:12px;border-bottom:1px solid #edf0f5}.property-section h3{margin:0;color:var(--navy);font-size:12px}.empty-panel{color:var(--muted);padding:16px 5px;text-align:center}.timeline-panel{position:relative;min-height:130px;background:#fff;border-top:1px solid var(--line);padding:10px 14px 0;overflow:hidden}.timeline-resize{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;z-index:4}.timeline-toolbar{height:32px;display:flex;align-items:center;gap:8px}.timeline-toolbar strong{margin-right:12px}.timeline-toolbar span{color:var(--muted);font-variant-numeric:tabular-nums}.timeline-toolbar button{border:1px solid var(--line);border-radius:4px;background:#fff;padding:3px 8px;cursor:pointer}.timeline-toolbar .timeline-play{color:#fff;background:var(--blue);border-color:var(--blue)}.timeline-toolbar label{margin-left:auto;color:var(--muted);font-size:11px}.timeline-toolbar input{vertical-align:middle}.timeline-scroll{position:relative;min-width:650px;height:calc(100% - 32px);overflow:auto}.time-ruler{height:24px;margin-left:225px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent 49px,#d9e0ea 50px);color:var(--muted);font-size:10px}.timeline-rows{display:grid;gap:3px;padding-top:4px}.timeline-row{position:relative;height:31px;display:grid;grid-template-columns:225px 1fr;align-items:center}.timeline-label{height:100%;display:flex;align-items:center;gap:7px;padding:0 7px;border-right:1px solid var(--line);cursor:pointer;white-space:nowrap;overflow:hidden}.timeline-label.selected{background:#edf3ff;color:#245ec9}.timeline-icon{width:20px;text-align:center}.timeline-lane{position:relative;height:100%;background:repeating-linear-gradient(90deg,transparent 0,transparent 49px,#f0f3f7 50px)}.timeline-clip{position:absolute;top:4px;height:23px;min-width:5px;border-radius:4px;background:#7ca3f6;color:#fff;padding:3px 6px;font-size:10px;cursor:grab;overflow:hidden;white-space:nowrap}.timeline-playhead{position:absolute;top:24px;bottom:0;left:225px;width:2px;background:#ef704d;z-index:3;pointer-events:none}.timeline-playhead:before{content:"";position:absolute;top:-4px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #ef704d}@media(max-width:1200px){.editor-body{grid-template-columns:170px minmax(0,1fr) 250px}.brand{min-width:220px}.app-actions button{padding-inline:6px}}