.coloring-app-container{display:flex;flex-direction:column;background-color:#f5f5f5;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);padding:16px;width:100%;max-width:100%;overflow:hidden;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.quick-tools{right:16px;flex-direction:row;gap:12px;align-items:flex-end}.quick-tools,.quick-zoom-slider{position:fixed;bottom:16px;display:flex;z-index:40}.quick-zoom-slider{left:16px;flex-direction:column;gap:3px;align-items:center;background-color:rgba(255,255,255,.8);border-radius:20px;padding:8px 4px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.zoom-slider-container{height:120px;display:flex;justify-content:center;padding:8px 0}.zoom-slider{width:8px;height:100%;background:#e0e0e0;outline:none;border-radius:4px;cursor:pointer;direction:rtl;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:grab;box-shadow:0 0 3px rgba(29,21,21,.3);background:var(--primary)}.zoom-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 0 3px rgba(0,0,0,.3)}.reset-zoom-button,.zoom-button{width:32px;height:32px}.reset-zoom-button{margin-top:4px}.quick-tool-button{width:40px;height:40px;border-radius:50%;background-color:#ffffff;color:#555;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;transition:all .2s ease}.quick-tool-button.active,.quick-tool-button:hover{background-color:#e3f2fd;border-color:var(--primary);color:var(--primary);transform:scale(1.05)}.quick-tools-row{display:flex;flex-direction:row;gap:8px;align-items:center}.quick-tools-column{display:flex;flex-direction:column;gap:8px}.quick-color-picker{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;border:1px solid #e0e0e0;box-shadow:0 2px 5px rgba(0,0,0,.1)}.quick-color-input{position:absolute;width:200%;height:200%;top:-50%;left:-50%;cursor:pointer;border:none}.quick-tool-button:disabled{opacity:.5;cursor:not-allowed}.toolbar-trigger{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background-color:var(--primary);color:var(--primary-foreground);display:flex;align-items:center;justify-content:center;border:none;box-shadow:0 2px 10px rgba(0,0,0,.2);z-index:50;cursor:pointer;transition:all .2s ease}.toolbar-trigger:hover{background-color:var(--primary);transform:translateX(-50%) scale(1.05)}.drawer-content{padding:0!important;overflow:visible}.drawer-header{padding:12px 16px 0;margin-bottom:0}.drawer-title{font-size:16px;font-weight:500;color:#333;text-align:center}.coloring-app-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:16px 8px;background-color:#ffffff;border-radius:6px 6px 0 0;align-items:center;justify-content:center;width:100%}@media (max-width:640px){.coloring-app-toolbar{gap:8px;padding:12px 6px;flex-direction:column}.action-button,.shape-button,.tool-button{width:32px;height:32px}.tool-group{padding:8px;gap:8px;border-right:none;border-bottom:1px solid #eaeaea;justify-content:center;width:100%}.tool-group:last-child{border-bottom:none}.brush-opacity-label input,.brush-size-label input{width:60px}.toolbar-trigger{bottom:12px;width:40px;height:40px}.quick-tools{bottom:12px;right:12px;gap:6px}.quick-zoom-slider{bottom:12px;left:12px;padding:6px 3px}.zoom-slider-container{height:120px;margin:0}.zoom-info{padding-left:38px}.tool-info{padding-right:30px}.quick-tool-button{width:36px;height:36px}.zoom-button{width:28px;height:28px}.drawer-content{max-height:70vh}}.tool-group{padding:0 8px;border-right:1px solid #eaeaea}.tool-group,.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-level{font-size:14px;font-weight:500;color:#333;min-width:40px;text-align:center}.tool-group:last-child{border-right:none}.action-button,.shape-button,.tool-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;border:1px solid #e0e0e0;background-color:#ffffff;cursor:pointer;transition:all .2s ease}.action-button:hover,.shape-button:hover,.tool-button:hover{background-color:#f0f0f0}.shape-button.active,.tool-button.active{background-color:#e3f2fd;border-color:#2196f3;color:#2196f3}.action-button svg,.tool-button svg{width:20px;height:20px;color:#555;stroke:currentColor;fill:none}.action-button:hover svg,.tool-button.active svg{color:#2196f3}.brush-opacity-label,.brush-size-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#555}.brush-opacity-label input,.brush-size-label input{width:80px}.brush-opacity-label span,.brush-size-label span{min-width:40px;text-align:right}.brush-shape-selector,.color-palette{display:flex;gap:4px}.color-palette{flex-wrap:wrap;max-width:240px}.color-button{width:24px;height:24px;border-radius:50%;border:1px solid #e0e0e0;cursor:pointer;transition:transform .2s ease}.color-button:hover{transform:scale(1.1)}.color-button.active{border:2px solid #333;transform:scale(1.1)}.custom-color-button{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:4px;background-color:#f5f5f5;border:1px solid #e0e0e0;cursor:pointer;font-size:12px;transition:background-color .2s;position:relative;height:24px}.custom-color-button:hover{background-color:#e9e9e9}.custom-color-input{position:absolute;width:0;height:0;opacity:0;cursor:pointer}.custom-color-button span{margin-left:2px}.color-palette input[type=color]{width:24px;height:24px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none}.coloring-app-canvas-container{position:relative;background-color:#ffffff;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;touch-action:none;margin:0 auto;display:flex;justify-content:center;align-items:center;width:100%;aspect-ratio:1/1;max-width:min(100vw - 32px,90vh,1024px);max-height:min(100vw - 32px,90vh,1024px)}.canvas-wrapper,.color-canvas,.overlay-canvas{position:absolute;top:0;left:0}.overlay-canvas{pointer-events:none}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(255,255,255,.8);z-index:10}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.coloring-app-info{display:flex;justify-content:space-between;padding:8px;font-size:12px;color:#777;margin-top:8px}@media (max-width:768px){.coloring-app-toolbar{flex-direction:column;align-items:stretch}.tool-group{border-right:none;border-bottom:1px solid #eaeaea;padding:8px 0}.tool-group:last-child{border-bottom:none}.brush-opacity-label,.brush-size-label{flex-direction:column;align-items:flex-start}.brush-opacity-label input,.brush-size-label input{width:100%}.color-palette{max-width:100%}.coloring-app-canvas-container{aspect-ratio:unset;max-width:100%;height:calc(100dvh - 200px);max-height:calc(100dvh - 200px)}.coloring-app-container{height:calc(100dvh - 150px)}}button:disabled{opacity:.5;cursor:not-allowed}button:disabled:hover{background-color:#ffffff}