body,html{margin:0;padding:0;font-family:sans-serif;height:100vh;background-color:#f0f0f0;overflow:hidden}.toolbar,body,html{display:flex;flex-direction:column}.toolbar{background-color:#333;color:#fff;padding:10px 15px;gap:10px;box-shadow:0 2px 5px rgba(0,0,0,.2);z-index:1;font-size:.9em}.toolbar-header{display:flex;justify-content:space-between;align-items:center;padding:3px 10px;background-color:#e9e9e9;border-bottom:1px solid #ccc;cursor:default;color:#333;width:100%;box-sizing:border-box;border-radius:20px}.toolbar-header h4{margin:0;font-size:1em;font-weight:700}.panel-toggle-btn{background:none;border:none;cursor:pointer;font-size:1.2em;padding:0 5px;line-height:1;color:#333}.toolbar-content{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;width:100%;box-sizing:border-box;transition:max-height .3s ease-out,opacity .3s ease-out;overflow:hidden;max-height:1000px;opacity:1}.toolbar-content.collapsed{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.tool-group{display:flex;align-items:center;gap:8px;padding:5px 0;border-right:1px solid #555;padding-right:20px}.tool-group:last-child{border-right:none;padding-right:0}.button-like-label,.toolbar button,.toolbar input[type=color],.toolbar select{padding:7px 10px;border:1px solid #555;background-color:#444;color:#fff;cursor:pointer;border-radius:50px;font-size:inherit}.toolbar input[type=color]{padding:2px;height:28px;width:28px;vertical-align:middle}.toolbar input[type=range]{vertical-align:middle}.button-like-label:hover,.toolbar button:hover{background-color:#5a5a5a}.toolbar button.active-tool{background-color:#007bff;border-color:#0056b3}.toolbar label{margin-left:3px;margin-right:3px}#brushWidthValue{min-width:20px;text-align:right}#brushWidthValue,.button-like-label{display:inline-block}.canvas-container{background-color:#e9e9e9;display:flex;justify-content:center;align-items:center}#canvasRulerWrapper,.canvas-container{flex-grow:1;width:100%;overflow:hidden;position:relative}#canvasRulerWrapper{min-height:0}#moodBoardCanvas{border:1px dashed #ccc}.layers-panel{position:fixed;left:0;top:50px;width:250px;height:calc(100vh - 70px);background-color:#f9f9f9;border-right:1px solid #ccc;box-shadow:2px 0 5px rgba(0,0,0,.1);z-index:2;display:flex;flex-direction:column;transition:transform .3s ease-in-out;transform:translateX(0);border-top-right-radius:20px;border-bottom-right-radius:20px}.layers-panel.hidden{transform:translateX(-100%)}.layers-panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px;font-weight:700;border-bottom:1px solid #eee;background-color:#efefef;border-top-right-radius:20px}.layers-panel-close-btn{background:none;border:none;font-size:1.5em;cursor:pointer;padding:0 5px;line-height:1}.layers-panel-close-btn:hover{color:red}.layers-panel-list{list-style:none;padding:0;margin:0;overflow-y:auto;flex-grow:1}.layer-item{display:flex;align-items:center;padding:8px 10px;border-bottom:1px solid #eee;cursor:grab;user-select:none;background-color:#fff}.layer-item:hover{background-color:#f0f0f0}.layer-item.dragging{opacity:.5;background:#e0e0e0}.layer-item .layer-name{flex-grow:1;margin-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-item .layer-name input{width:calc(100% - 10px);padding:2px;border:1px solid #ccc;font-family:inherit;font-size:inherit}.layer-item .layer-visibility-toggle{background:none;border:none;cursor:pointer;font-size:1.2em;padding:0 5px}.properties-panel{position:fixed;right:0;top:50%;transform:translateY(-50%);background-color:#f1f1f1;border:1px solid #ccc;border-right:none;border-radius:8px 0 0 8px;box-shadow:-3px 0 8px rgba(0,0,0,.15);z-index:3;width:230px;transition:right .3s ease-in-out;font-family:Arial,sans-serif;font-size:14px}.properties-panel.initially-hidden{display:none}.properties-panel.collapsed{right:-230px}.properties-panel .panel-toggle-button{position:absolute;left:-28px;top:calc(50% - 50px);width:30px;height:100px;padding:0;background-color:#e7e7e7;border:1px solid #ccc;border-right:1px solid #e7e7e7;border-radius:8px 0 0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#333;box-shadow:-2px 0 5px rgba(0,0,0,.1)}.properties-panel .panel-content{padding:15px;height:auto}.properties-panel h3{margin-top:0;font-size:16px;border-bottom:1px solid #ddd;padding-bottom:8px;margin-bottom:12px;color:#333}.property-item{margin-bottom:12px;display:flex;align-items:center}.property-item label{width:70px;font-size:14px;color:#555;flex-shrink:0}.property-item input[type=number]{flex-grow:1;padding:6px 8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.property-item input[type=number]:disabled{background-color:#e9e9e9;cursor:not-allowed}.property-item input[type=number]::-webkit-inner-spin-button,.property-item input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.property-item input[type=number]{-moz-appearance:textfield}@media (max-width:1200px){.toolbar{font-size:.85em;gap:8px 15px}.button-like-label,.toolbar button,.toolbar input[type=color],.toolbar select{padding:6px 8px}}@media (max-width:992px){.tool-group{border-right:none;padding-right:0;width:calc(50% - 10px)}}@media (max-width:768px){.toolbar{flex-direction:column;align-items:stretch}.tool-group{width:100%;margin-bottom:5px;justify-content:flex-start;flex-wrap:wrap}.button-like-label,.toolbar button,.toolbar input[type=color],.toolbar input[type=range],.toolbar select{font-size:.9em}}