.context-menu-item:hover,body{background-color:var(--gray-100)}:root{--brand-color:#4338ca;--brand-color-hover:#312e81;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-700:#374151;--gray-800:#1f2937;--white:#fff;--red:#ef4444}body{font-family:Inter,sans-serif;margin:0;padding:0;overflow:hidden;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr auto;grid-template-areas:"main sidebar" "footer sidebar";height:100vh}#canvas-container{grid-area:main;position:relative;overflow:auto;display:flex;justify-content:center;align-items:center;background-color:#ebebeb;box-sizing:border-box}.active-tool{background-color:var(--brand-color)!important;color:var(--white)!important}#myCanvas{background-color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15);border:2px solid #cbd5e0;padding:.15rem;touch-action:none}#topBar{position:fixed;top:.5rem;left:50%;transform:translateX(-50%);z-index:1000;background-color:rgba(13,13,13,.8);backdrop-filter:blur(8px)}.dropdown{position:relative;display:inline-block}#customContextMenu,.dropdown-content{position:absolute;border-radius:.5rem;padding:.5rem}.dropdown-content{display:none;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;margin-top:.5rem}#customContextMenu,.modal{background-color:var(--white);display:none}.dropdown-content button{width:100%;margin-bottom:.25rem}.dropdown-content.dropdown-grid{grid-template-columns:repeat(4,1fr);gap:.25rem;padding:.25rem;width:auto;min-width:auto}.dropdown-content.dropdown-grid button{width:2.25rem;height:2.25rem;margin-bottom:0;padding:0;display:flex;align-items:center;justify-content:center}#ellipseTool span{display:inline-block;transform:scaleX(1.5)}#customContextMenu{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);z-index:1000}.context-menu-item{padding:.5rem 1rem;cursor:pointer;border-radius:.375rem;font-size:.875rem;font-weight:500;color:var(--gray-800)}.context-menu-item.danger{color:var(--red)}.context-menu-item.danger:hover{background-color:#fee2e2}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2000;padding:1.5rem;border-radius:.75rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);flex-direction:column;width:280px}#animationModal{width:550px!important;max-width:95vw;max-height:85vh;overflow-y:auto}.modal-large{width:600px}.modal-content input,.modal-content select{padding:.5rem;border:1px solid var(--gray-300);border-radius:.375rem;width:100%;margin-bottom:1rem;font-size:1rem;outline:0}.input-field{padding:.5rem;border:1px solid var(--gray-300);border-radius:.375rem;width:100%;box-sizing:border-box;font-size:.875rem;outline:0}.modal-content label{display:block;margin-bottom:.25rem;font-size:.875rem;font-weight:500;color:var(--gray-700)}.button-group{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.modal-button{padding:.5rem 1rem;border-radius:.375rem;font-weight:600;transition:background-color .2s}.modal-button.ok{background-color:var(--brand-color);color:var(--white);border:none}.modal-button.ok:hover{background-color:var(--brand-color-hover)}.modal-button.cancel{background-color:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-300)}.modal-button.cancel:hover{background-color:var(--gray-200)}#shapeInspectorPanel{width:220px;z-index:2000;cursor:move;padding:0}#inspectorHeader{padding:.5rem .75rem;font-size:.875rem;background-color:var(--gray-100);border-top-left-radius:.75rem;border-top-right-radius:.75rem;font-weight:600;border-bottom:1px solid var(--gray-300)}#shapeInspectorPanel .modal-content{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.inspector-row{display:flex;justify-content:space-between;align-items:center}#shapeInspectorPanel .modal-content label{margin-bottom:0;font-size:.75rem;font-weight:500;color:var(--gray-700)}#shapeInspectorPanel .modal-content input,#shapeInspectorPanel .modal-content select{width:110px;padding:.25rem;font-size:.75rem;margin-bottom:0}#shapeInspectorPanel .modal-content input[type=color]{padding:0;height:24px}#shapeInspectorPanel .button-group{margin-top:.5rem;padding:0 .75rem .75rem}#shapeInspectorPanel .modal-button{padding:.25rem .75rem;font-size:.75rem}#editDimensionModal{width:240px;padding:1rem;cursor:move}#editDimensionModal h3{font-size:1rem;font-weight:700;margin-bottom:.75rem}#editDimensionModal .modal-content label{font-size:.875rem}#editDimensionModal .modal-content input{padding:.375rem;margin-bottom:.75rem;font-size:.875rem}#editDimensionModal .button-group{margin-top:.5rem}#editDimensionModal .modal-button{padding:.375rem .75rem;font-size:.875rem}.toggle-switch,.toggle-switch-sm{position:relative;display:inline-block;width:44px;height:24px}.slider,.slider:before{position:absolute;transition:.4s}.toggle-switch-sm{width:36px;height:20px}.toggle-switch input,.toggle-switch-sm input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#d1d5db;border-radius:9999px}.slider:before{content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%}.toggle-switch-sm .slider:before{height:16px;width:16px}input:checked+.slider{background-color:#4f46e5}input:checked+.slider:before{transform:translateX(20px)}.toggle-switch-sm input:checked+.slider:before{transform:translateX(16px)}