*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f5f5;color:#333;line-height:1.6}.color-container{max-width:1400px;margin:0 auto;padding:20px}.color-header{background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}.color-header h1{font-size:24px;color:#333;margin:0}.back-link{color:#0073aa;text-decoration:none;font-size:16px;padding:8px 16px;border:1px solid #0073aa;border-radius:4px;transition:all 0.3s}.back-link:hover{background:#0073aa;color:#fff}.color-wrapper{display:flex;gap:20px;flex-wrap:wrap}.toolbar{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);min-width:250px;max-width:300px;flex:0 0 auto}.tool-section{margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #eee}.tool-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.tool-section h3{font-size:16px;margin-bottom:15px;color:#555;font-weight:600}.color-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:15px}.color-item{width:100%;aspect-ratio:1;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.color-item:hover{transform:scale(1.1);border-color:#333}.color-item.active{border-color:#0073aa;border-width:3px;transform:scale(1.1)}.custom-color{display:flex;align-items:center;gap:10px}.custom-color label{font-size:14px;color:#666}.custom-color input[type="color"]{width:60px;height:35px;border:2px solid #ddd;border-radius:4px;cursor:pointer}.tool-btn,.action-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px;margin-bottom:8px;background:#f8f8f8;border:2px solid #ddd;border-radius:6px;cursor:pointer;font-size:14px;transition:all 0.2s;text-align:left}.tool-btn:hover,.action-btn:hover{background:#e8e8e8;border-color:#bbb}.tool-btn.active,.action-btn.active{background:#0073aa;color:#fff;border-color:#0073aa}.action-btn.primary{background:#0073aa;color:#fff;border-color:#0073aa;font-weight:600}.action-btn.primary:hover{background:#005a87;border-color:#005a87}.tool-btn span,.action-btn span{font-size:18px}input[type="range"]{width:100%;margin:10px 0;cursor:pointer}#brushSizeValue{display:block;text-align:center;font-size:14px;color:#666;margin-top:5px}.canvas-wrapper{flex:1;min-width:300px;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;justify-content:center;align-items:flex-start;position:relative;overflow:visible!important;min-height:fit-content}#coloringCanvas{max-width:100%;height:auto;border:1px solid #ddd;border-radius:4px;touch-action:none;position:relative;cursor:none!important;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;image-rendering:auto;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:-moz-crisp-edges;-ms-interpolation-mode:bicubic}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#666;background:#fff;padding:20px 40px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.2)}@media (max-width:768px){.color-container{padding:10px}.color-header{padding:15px;flex-direction:column;align-items:flex-start}.color-header h1{font-size:20px}.color-wrapper{flex-direction:column}.toolbar{max-width:100%;width:100%;order:2}.canvas-wrapper{order:1;padding:10px}.color-palette{grid-template-columns:repeat(7,1fr)}.tool-btn,.action-btn{padding:10px;font-size:13px}}@media (max-width:480px){.color-palette{grid-template-columns:repeat(7,1fr)}.tool-section h3{font-size:14px}}.custom-cursor{position:fixed;width:32px;height:32px;pointer-events:none;z-index:999999!important;display:none;transform:translate(-50%,-50%);will-change:transform;top:0;left:0;background-size:24px 24px;background-repeat:no-repeat;background-position:center;background-color:rgba(255,0,0,.5);border:2px solid rgba(255,0,0,1);border-radius:4px;opacity:1!important;visibility:visible!important;box-shadow:0 2px 8px rgba(0,0,0,.3)}.custom-cursor.visible{display:block!important;visibility:visible!important;opacity:1!important}.custom-cursor.brush{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M20.71 4.63l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41zM7 14a3 3 0 0 0-.71 1.5L4 18.5l2.5-2.29c.5.13 1 .21 1.5.21s1-.08 1.5-.21L11.19 16H11c-1.1 0-2-.9-2-2s.9-2 2-2h.19L7 14z' fill='%23333'/%3E%3Ccircle cx='18' cy='6' r='2' fill='%23333' opacity='0.3'/%3E%3C/svg%3E");background-size:26px 26px;background-position:center;background-repeat:no-repeat}.custom-cursor.eraser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.008 4.008 0 0 1-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l8.19-8.19c.79-.78 2.05-.78 2.84 0l2.4 2.39z' fill='%23ff0000'/%3E%3Cline x1='6' y1='18' x2='18' y2='6' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");background-size:24px 24px;background-position:center;background-repeat:no-repeat;background-color:rgba(255,0,0,.15);border:2px solid rgba(255,0,0,.9);border-radius:4px}.custom-cursor.fill{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c-2.5 0-4.5 2-4.5 4.5 0 3 4.5 7.5 4.5 7.5s4.5-4.5 4.5-7.5c0-2.5-2-4.5-4.5-4.5z' fill='%23333' opacity='0.9'/%3E%3Cpath d='M12 2.5c-2.5 0-4.5 2-4.5 4.5 0 3 4.5 7.5 4.5 7.5s4.5-4.5 4.5-7.5c0-2.5-2-4.5-4.5-4.5z' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpath d='M12 8v4M10 10h4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='15' r='1' fill='%23fff'/%3E%3C/svg%3E");background-size:28px 28px;background-position:center;background-repeat:no-repeat;background-color:rgba(0,0,0,.05);border:2px solid rgba(0,0,0,.7);border-radius:50%}